Free Photoshop cs3 suite tutorials

Beginners Photoshop cs3 tutorials

Free website template navigation layout

December 26th, 2007 · No Comments

Here we will tell you how to make a Free-website-template-navigation-layout in photoshop.

[1] Take a new file of 400 pixels, 400 pixels, of resolution 72 dpi in the RGB mode.

Free-website-template-navigation-layout1

[2] Take the Rectangle Marquee Tool.

Free-website-template-navigation-layout2

[3] Create a shape make the new layer and fill with Black color.

Free-website-template-navigation-layout3

[4] Go to Blending Option use the following settings.

Free-website-template-navigation-layout4

Free-website-template-navigation-layout5

Free-website-template-navigation-layout6

[5] Your image will be as shown below.

Free-website-template-navigation-layout7

[6] Make the copy of previous shape layer.

Free-website-template-navigation-layout8

[7] Take the Pencil Tool.

Free-website-template-navigation-layout9

[8] Make the new layer draw a lines as shown image below.

Free-website-template-navigation-layout10

[9] Then change the Blending Mode Soft Light.

Free-website-template-navigation-layout11

[10] Your image should be as shown below.

Free-website-template-navigation-layout12

[11] Make the 3 more copy of previous line layer.

Free-website-template-navigation-layout13

[12] Take the Rectangular Marquee Tool create a new shape make the new layer and fill with Black color.

Free-website-template-navigation-layout14

[13] Go to Blending Option use the following settings.

Free-website-template-navigation-layout15

Free-website-template-navigation-layout16

[14] Your image should be as shown below.

Free-website-template-navigation-layout17

[15] Take the Rounded Rectangle Tool create a shape make the new layer and fill with Black color.

Free-website-template-navigation-layout18

[16] Go to Blending Option use the following settings.

Free-website-template-navigation-layout19

Free-website-template-navigation-layout20

[17] Your image should be as shown below.

Free-website-template-navigation-layout21

[18] Take the Shape Tool select this one.

Free-website-template-navigation-layout22

[19] Make the new layer create a shape and fill with Black color.

Free-website-template-navigation-layout23

[20] Go to Blending Option use the following settings.

Free-website-template-navigation-layout24

Free-website-template-navigation-layout25

[21] Your image should be as shown below.

Free-website-template-navigation-layout26

[22] Take the Shape Tool select this one.

Free-website-template-navigation-layout27

[23] Make the new layer create a shape and fill with Black color.

Free-website-template-navigation-layout28

[24] Go to Blending Option use the following settings.

Free-website-template-navigation-layout29

Free-website-template-navigation-layout30

[25] Your image should be as shown below.

Free-website-template-navigation-layout31

[26] Make the 3 more copy of the previous shape layer.

Free-website-template-navigation-layout32

[27] Take the Text Tool create some text.

[28] Thanks for reading, I hope this photoshop tutorial has taught you few photoshop tricks and techniques and you can use them in your website design project. Your final image will look like this.

Free-website-template-navigation-layout33

56      photoshop layout tutorial
56      photoshop tutorial web layout

Tags: website graphics photoshop tutorial

0 responses so far ↓

  • There are no comments yet...Kick things off by filling out the form below.

You must log in to post a comment.