Professional Modern Web Layout
May 10th, 2007 by ART-D Posted in Adobe Photoshop, Web Layout
Using the Line Tool (U) on the right and left sides, try to make two vertical lines along the edges of the recently created stripe, colored in #8D8D8D
Choose the Pencil Tool (B) to draw a double vertical line on the buttons’ panel, upper than the left flare.
The layer’s parameters:
Blending mode-Soft Light
Make a copy of the new made layer and select the Free Transform option to place the flare upper than the flare situated on the right side.
Using the Ellipse Tool (U), draw now the primary layer, reserved for the site’s logotype.
The layer’s parameters:
Blending Options>Outer Glow
Blending Options>Gradient Overlay
Gradient’s parameters:
Using the previous instrument, represent the next layer reserved for the logotype.
The layer’s parameters:
Fill 0% on the layers.
Blending Options>Gradient Overlay
Gradient’s parameters:
Selecting the Ellipse Tool (U), try to make one more layer reserved for the site’s logotype, colored in #0A0F12.
The layer’s parameters:
Blending Options>Stroke
Select the last applied instrument to draw now a flare on the logotype’s made element.
The layer’s parameters:
Fill 0% on the layers.
Blending Options>Gradient Overlay
Gradient’s parameters:
Press the Alt button and make a mouse’s click between the layers for the flare to be applied in the limits of the primary layer.
Select the Ellipse Tool (U) to draw the next logotype’s layer.
The layer’s parameters:
Fill 0% on the layers.
Blending Options>Outer Glow
Blending Options>Inner Glow
Blending Options>Stroke
Next step includes creating a special section situated on the left side of the panel on the site’s sections. We’ll select the Rectangle Tool (U) for this operation.
The layer’s parameters:
Fill 0% on the layers.
Blending Options>Gradient Overlay
hossart
30/09/2009
very nice tutorial
ThunderEmperOr`
15/10/2009
nice tutorial. . da best, but can u make electric tutorials? plz send to my ym. . zorilla_aldrian1293@yahoo.com
-send the tutorial plz. . XD
GodblesS
Stephen
29/10/2009
great tutorial,
too bad it’s 17 pages for more ad page views
anonymused
14/12/2009
very nice…keep post
rajkumar
29/12/2009
its nice, thanks
Panther
12/02/2010
It’s a great job you have done there RESPECT !!!!
The J Man
30/04/2010
This tut seems good … But it’s hard to follow.
I start with it but ya lost me at:
“Applying the previous instrument, try to make the next layer belonging to the site’s header, which corrections can be made with Convert Point Tool.”
The wording or technique doesn’t seem to be quite right. I dunno what I’m doing wrong but I can’t get the same result as you are.
ziin
31/05/2010
Hola, perfecto e! quiera descargar el archivo psd pueden publicarlo
Agung
22/07/2010
cool
Devan
04/08/2010
Very Nice
PhaseGrafix
05/09/2010
Wares the rest of the tut ;’
coder
03/10/2010
looks too plain and boring needs more detail
Hidayath
14/10/2010
Its excellent. I Got 98% same result, but it took me 4 hours to develop.
honey
21/11/2010
tutorial is good but hard to follow…can u describe it in detail.
harry fox
22/03/2011
oh…yeah! very very nice, thanks
murat
24/03/2011
very nice tutorial
sawebdesigns
13/05/2011
great job just what im looking for
Varian
31/05/2011
Sir Can You Gave Me The PSD file ?
thanks
Jay
10/08/2011
Sir i like this much, can i get your PSD file?? cause i can make exactly the way you do it… pleassssseee……
Martin
22/08/2011
Hey would you please be able to send me a psd file of this cheers!
Prateek
17/09/2011
Awesome man awesome……
Shan Mathur
27/10/2011
A very good tutorial.Thanks for the post.
sakul
27/10/2011
Hey, i like this very much! i was trying so hard to make it exactly the way you do it, but i cant
can i get your PSD file pleaseeee
lukas
27/10/2011
where i can downloade the psd file?
Düğün
29/10/2011
tutorial is good but hard to follow…can u describe it in detail.