The most versatile section of the Photoshop tutorials, it includes guidelines on drawing and editing of different objects in Photoshop.  Home Photoshop Drawing Techniques Create Web Site Menu with Icons

Create Web Site Menu with Icons

Browse Pages: 2  > >>

Open a new file (File>New) that would have 770x700 px and 72 dpi. Select after that the Paint Bucket Tool (G) to paint the file with this color #494949.

image 1

Draw now a thin black stripe on the lowest part of the background. The operation can be made with the Rectangle Tool (U).

image 2

image 3

Represent now the first layer of the button, situated on the site's menu, using the same instrument, but a different color - #D3D3D3

image 4

Copy out six times the last layer and select the Free Transform option to place the copies the way you may see on the next picture.

image 5

In the upper picture there are inserted the colors' codes.

image 6

Create a new layer and choose the Ellipse Tool (U) to represent the primary layer for the button's icon. But make a kind of indention on the left side.

image 7

image 8

The layer's parameters:

Blending Options>Gradient Overlay

image 9

Gradient's parameters:

image 10

image 11

Using the previous instrument, try to represent a circle. Firstly we need to pick up the Ellipse Tool (U) to draw the outside edges and then press the Alt button to cut out an opening in the circle.

image 12

The layer's parameters:

Blending Options>Gradient Overlay

image 13

Gradient's parameters:

image 14

Blending Options>Stroke

image 15

image 16

The next layer should be made with the last instrument too, colored in #757575

image 17

Press on the Alt button and make then a mouse's click between the circle's layers and the new last made one for the layer to be applied in the circle's limits.

image 18

image 19

Select now the usual Custom Shape Tool (U) to choose from the next table the appropriate Shape, the way it is indicated below.

image 20

Press the Alt button and select in the same time the Rectangle Tool (U) to erase the elements we don't need.

image 21



Author's URL: Adobetutorialz.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Browse Pages: 2  > >>
Share print this page subscribe to newsletter subscribe to rss

The most versatile section of the Photoshop tutorials, it includes guidelines on drawing and editing of different objects in Photoshop. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Create Web Site Menu with Icons"

Captcha