Stylish WebStudio Web Layout
May 30th, 2007 by ART-D Posted in Adobe Photoshop, Web Layout
The small stars (the green one and the brown one) have also the equal parameters:
Blending Options>Drop Shadow
Select the same Custom Shape Tool (U) to represent the stars with the openings (the layer of the lowest yellow star should be placed lower than the yellow menu’s button).
The layer’s parameters for the stars containing the openings are equal for all of them:
Blending Options>Drop Shadow
We need to write now the site’s title:
The layer’s parameters:
Blending Options>Gradient Overlay
Gradient’s parameters:
Blending Options>Stroke
We’ll add above the “i” letter in the Webstudio word a small star, colored in #D1C5B0, selecting for this operation the Custom Shape Tool (U). Turn the figure over with Free Transform option.
The layer’s parameters:
Blending Options>Stroke
We’ll make a click on the right mouse’s button on the recently made star’s layer (on the layers’ palette). Choose the Create layer option and mark out the particularly separate layer. Using the Eraser Tool (E), try to delete those elements shown below:
Make a copy of the recently made star and select the Free Transform option to make the copy smaller a little.
The layer’s parameters:
Blending Options>Stroke
Write the titles for the menu’s buttons situated on the site’s header. Incline the text a little, applying the well-known option – Free Transform.
(home)
(about us)
(services)
(portfolio)
(contacts) 
Mark out each layer containing the button’s title and then make a mouse’s click on the layers’ palette on Add layer mask option. Next step includes choosing the Brush Tool (B). Apply a darker brush for the lighter inscriptions and for the darker inscriptions we’ll use a lighter brush. The Opacity should be on 90% on each layer on the layers’ palette.
Insert the necessary text on the site’s section, keeping the demands from the next tables:
(the bold text)
(the usual text)
Insert also the titles of the site’s sections:
Using the same operation, described earlier when creating the site’s menu, we’ll process out the sections too (applying the brush on the text). The brush is the same and the color is the same with the background’s one.
Introduce the screenshots of the works:
The layer’s parameters:
Blending Options>Stroke
Finished!
View full size here.
Post Pages: 1 2
Tags: design, layout, Photoshop, studio, web, Web Layout
keith
15/10/2009
can i do this at microsoft frontpage annd how??
eshanne
06/11/2009
Keith : Please read the tutorials before posting..
THis is Photoshop tutorials.. If you don’t know what is photoshop then you should check out them at :
http://www.adobe.com and search for the supports or anywhere that you can find adobe photoshop.
And yes Keith you need to learn a lot..
Sam
15/11/2009
This is just amazing! Thanks.
Daniël
16/12/2009
Amazing! Nice tutorial!
Keep up the good work!
mirel
18/12/2009
thanks dude that’s realy great …waiting for you’r every new stuff
good luck
Santiago
03/03/2010
Awesome tutorial, could someone point me in the direction for another tutorial to make it work, to uploaded an make the buttons work… thank you!
Melissa
05/05/2010
How did you create the rectangle for the site’s section?
And when I use the rectangle tool and follow with the convert tool the blending options do not work
The stroke is jaggered not smooth like urs
Please help
khushbu
29/05/2010
Amazing!!!nice tutorial…
Jack
16/07/2010
Hey can you create a multi-page site on photoshop? So that say I click on the ‘contacts’ button, it takes me to that page, or do I need to do that in HTML?
Dom
12/08/2010
I had the same question which Jack has. Can someone advise?
GarfieldP
23/08/2010
Great tutorial! I will try this out
venkate
25/04/2011
Hi, Awesome and innovative….
sa. t
24/08/2011
hi
i am a beginner web design student , its very nice tutorial , but iam wondering how to slice this design and use it in html and apply jquery on it , especially i dont know how i should slice the home,about us , services menu items , and how i can turn them to clickable anchors/buttons…please sombody advise how to do this the right way.
best regards.
sa. t
25/08/2011
can you please complete this tutorial and show us how you slice it and turn it to working html page…
thank you.
sa. t
Sagar
09/09/2011
Nice Work And Very Good…
Thanks…
jojo
19/11/2011
how to slice it to html ? do we have to use image map here ?
can sombody give some tips please ?
amrew
04/12/2011
wooooowwww….
chammua
08/02/2012
how to i can “+1″ for this topic?
i can’t see icon G+ :-s.
tks for share!
very cool! ^^