Graphic Design Studio Web Layout
June 17th, 2009 by ART-D Posted in Adobe Photoshop, Web Layout
Applying the Ellipse Tool (U), we’ll represent the Close button on the right top corner of the site’s section panel:
The layer’s styles: Blending Options>Drop Shadow
Blending Options>Inner Shadow
Blending Options>Outer Glow
Blending Options>Inner Glow
Blending Options>Gradient Overlay
Gradient’s parameters:
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.
Post Pages: 1 2
rahul kmar tailor
28/09/2009
good tutorial
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)
Susanth.p.s
27/05/2010
Hi, godd tutorial. Thanks………..
Mr. K
12/08/2010
Simple and nice tutorial.. I like it.
Deko Web
14/08/2010
nice tutorial, thank you..
Karen Cayamanda
14/10/2010
The visuals really helped with this tutorial. Great job.
Fort Collins
13/11/2010
Great Tut.! I know this question comes a year and change late but, why 1000×8000px/72 dpi.? That is HUGE!. Again, thanks for the great post.
kenichifc
12/12/2010
thanks for tutorial. Love it, simple and effective
Ayo
01/01/2011
Nice tut.
willy
28/04/2011
I am confused with how to do design can design beautiful and please correct me on teaching couples the web as well as all the designs, I am confused please help me
ghin
14/07/2011
hi..mind if i ask how will you slice the links so when it is in dreamweaver it’s not hard to make finishing touches on the page