Graphic Design Studio Web Layout
June 17th, 2009 by ART-D Posted in Adobe Photoshop, Web Layout
insert the Close indicator: 

Make a copy of the last made layer and choose Free Transform option to place the copy the same way as below: 

The styles for the copy’s layer: Blending Options>Inner Shadow 

Now we’ll represent the button of the menu on the site’s header, above the sections’ panel. In this case we’ll apply the Rounded Rectangle Tool (U) (radius of 20 px) 
The layer’s styles: Blending Options>Gradient Overlay 
Gradient’s parameters: 

Make three copies of the last made layer containing the button and select again Free Transform option to place the copies as it is shown below: 
Next we need to add the titles for the menu’s buttons situated on the site’s header: 

Select the same styles for the layers containing the buttons’ titles: Blending Options>Drop Shadow 

The last step includes inserting the site’s name (used font): 

The layer’s styles: Blending Options>Drop Shadow 
Blending Options>Inner Glow 
Blending Options>Gradient Overlay 
Gradient’s parameters: 

Finished!
View full size here.




















rahul kmar tailor
28/09/2009
good tutorial
clippingimages
28/10/2009
WoW
Awesome tutorials. Thanks for sharing this nice post.
Charles
08/12/2009
That’s really fabulous to know how the things can be when done in proper way, I am really glad that you have given some valuable insights, thank you.
Pudinn
16/01/2010
Please publish de tutorials in only one page for better view
Brendan
16/01/2010
hey, i love this, but im really knew to Designs for Sites in photoshop but catching on fast! i have a quesiton isn’t 1000×8000 a huge file?
and how do i make this work on the web?
that would be another great tutorial!
(email me if you can with any info! ; brendan3457@aim.com)