Dreamweaver website template layout in photoshop

Posted on August 30th, 2008 by 3dfun in Photoshop Tutorials

Hello my friends

Today i will show you how to create a Cool Photoshop dreamweaver website template layout in photoshop.

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

[2] Select the Rounded Rectangle Tool apply the following settings.
Then with the Rounded Rectangle Tool create a rectangle.

Photoshop-dreamweaver-website-template-layout1

Photoshop-dreamweaver-website-template-layout2

[3] Create another shape to substract selection like this.

Photoshop-dreamweaver-website-template-layout3

[4] Double click the layer to open layer style window. Apply settings as shown.

Photoshop-dreamweaver-website-template-layout4

Photoshop-dreamweaver-website-template-layout5

Photoshop-dreamweaver-website-template-layout6

Photoshop-dreamweaver-website-template-layout7

Photoshop-dreamweaver-website-template-layout8

Photoshop-dreamweaver-website-template-layout9

Photoshop-dreamweaver-website-template-layout10

[5] Create the following selection with the help of Elliptical Marquee Tool.
After that go to Select>Modify>Feather Selection by 40px.

Photoshop-dreamweaver-website-template-layout11

[6] Fill that layer with white color.

Photoshop-dreamweaver-website-template-layout12

[7] Create a few shape with the help of Rounded Rectangle Tool.

Photoshop-dreamweaver-website-template-layout13

[8] Double click the layer to open layer style window. Apply settings as shown.

Photoshop-dreamweaver-website-template-layout14

Photoshop-dreamweaver-website-template-layout15

Photoshop-dreamweaver-website-template-layout16

Photoshop-dreamweaver-website-template-layout17

Photoshop-dreamweaver-website-template-layout18

[9] This is my result.

Photoshop-dreamweaver-website-template-layout19

[10] Take the Brush Tool apply the following settings.

Photoshop-dreamweaver-website-template-layout20

[11] Create the following shape with the help of Brush Tool.

Photoshop-dreamweaver-website-template-layout21

[12] Duplicate that layer a few time and place it like me.

Photoshop-dreamweaver-website-template-layout22

[13] Create a new shape with the help of Rectangle Tool.

Photoshop-dreamweaver-website-template-layout23

[14] After that add the following layer styles.

Photoshop-dreamweaver-website-template-layout24

Photoshop-dreamweaver-website-template-layout25

Photoshop-dreamweaver-website-template-layout26

[15] Create a few shape with Rectangle Shape Tool.

Photoshop-dreamweaver-website-template-layout27

[16] Apply the same layer styles. You get the result like this.

Photoshop-dreamweaver-website-template-layout28

[17] Create the following shape with the help of Polygonal Lasso Tool.
Fill that layer with white color.

Photoshop-dreamweaver-website-template-layout29

[18] Double click the layer to open layer style window. Apply settings as shown.

Photoshop-dreamweaver-website-template-layout30

Photoshop-dreamweaver-website-template-layout31

Photoshop-dreamweaver-website-template-layout32

[19] Duplicate that layer 2 time and place it like me.

Photoshop-dreamweaver-website-template-layout33

[20] Create a few shape with the help of Rectangle Shape Tool, Color is #1b252f.

Photoshop-dreamweaver-website-template-layout34

[21] Double click the layer to open layer style window. Apply settings as shown.

Photoshop-dreamweaver-website-template-layout35

Photoshop-dreamweaver-website-template-layout36

[22] I am adding a previously created website round button.

Photoshop-dreamweaver-website-template-layout37

[23] Then you can add alone some text, and some text buttons and we are ready.
I hope you like this layout.

Photoshop-dreamweaver-website-template-layout38

cool draw

cool text in photoshop

create a logo in photoshop

Photoshop Painting Brush Icon

Photoshop design car bmw logo in Photoshop

Leave a Reply

You must be logged in to post a comment.