Creative Studio Web Page
October 28th, 2008 by ART-D Posted in Adobe Photoshop, Web Layout
The layer’s parameters: Blending Options>Gradient Overlay 
Gradient’s parameters: 
Introduce the next indicated picture on the made panel, preliminary cut out according to the panel’s sizes or you can place picture above the panel layer (on the layers’ palette) then press Alt button and make a mouse click between the picture layer and the panel layer (the right corner of the picture should correspond with the beginning of the menu buttons). 
The layer’s parameters: Blending Options>Inner Shadow 
Blending Options>Stroke 
Introduce now the text we need on the panel, on the picture’s right part. 
Applying the Line Tool (U), draw a horizontal line under the text, having the color #363A3C 
Under the already made line we need to apply the Rounded Rectangle Tool (U) (radius of 10px) for representing a button colored with #F79700 
Write the button’s title: 
Next we need to get the appropriate result by merging together in a group all the layers composing the panel, the picture, the button there and the text (press Ctrl button to mark out all the necessary layers and hold on the left mouse’s button to take down the marked layers on Create a new group selection). Make two copies of this new group and select Free Transform option to place the copies lower. Insert also other pictures on the panels’ copies. 
Write the data on each panel: 
Create a new layer to represent on it a pattern, like the one from below. In this case we’ll use the Pencil Tool (B), the brush of 1px and the color #363A3C 
Save it: Edit>Define Pattern.
Using the Line Tool (U) now, try to draw a dividing line between the panels: 
The layer’s parameters: Fill 0%
Blending Options>Pattern Overlay 
The last step includes introducing the copyright in footer: 
The final result!
View full size here.
Post Pages: 1 2
Web designers
04/09/2009
Very nicely dashing creativity applied to design to leverage the website .
dlv
14/10/2009
great! I love it!
thanks for share this nice a clear explanation with really good final result !!
congrats!
alex
15/03/2010
Very nice layout and very well explained tutorial. Congrats and good luck in making more :>
anonymous
16/04/2010
can’t really do the tutorial.
Can you please explain how to get to the required windows? that would make it a whole lot easier to complete the tutorial.
Jacob
16/04/2010
Pity at this moment I don’t have Photoshop to do this amazing graphics, but really thats wondeful
Web Design
04/05/2010
this is great thanks for the share
Mildred
16/09/2010
This looks good, i hope its easy to make! thanks anyway!
Vízfaragó
04/10/2010
Nice tutorial!
adrian
17/10/2010
brilliant tutorial, very helpful and simple steps towards a great finish!
alex
19/10/2010
this is good. im meen!
Diesel Engine
06/11/2010
Simple and pretty cool , simpler thinks are allways the best. The white glow could be a little bigger but like this is ok too.
wedding photographers sydney
29/11/2010
awesome article ! great ! Thanks for sharing.
Stephanie
17/12/2010
This tutorial is amazing for building a Layout site from scratch! It definitely teaches you in a wonderfully easy and friendly way.
After you’re done building this beautiful PSD site for yourself though, what should you do next? Pick up a fat book on coding, or attempt to figure out how to imput CSS? To make an INSTANT website from your design, you should check out http://www.psd2cssonline.com! Here, you can simply read the first tutorial, assign some of your layers to names like _content, _menu or _jpg … upload your PSD file onto our website … and within a minute– voila! You have a Zip file with everything that you need, your CSS stylesheet of your graphics, etc. And you’re done!
It’s easier than pie.
Great job!
Steph
Matt
07/02/2011
I don’t get why in step 1 the circle keeps getting cut off at the bottom. Any suggestions? I’m doing exactly what the step tells me to do and the circle keeps getting cut off on the bottom.
Jimmy Rodden
09/02/2011
I will be taking this further!.. great time saving tips and style within minutes.. thank you.
Theo Jeffrey
17/02/2011
I cannot seem to understand just how to get the illumination effect. I’ve been trying, but cannot understand exactly what settings to use. My rectangle doesn’t generate that effect.
EyeDevelop Web Designer
02/03/2011
Clean & Simple, just how i like it
Design My Own Website
16/04/2011
Nice tutorial. I like the use of your “not-entirely-black” palette to make the rest of the web design easier on the eyes. Thanks!
Timir
28/04/2011
Although this seems to be a very old article, the first part is very unclear I struggled hard but could not get the radial gradient over lay following the steps.
I appreciate the effort and also love your site, would be better if screen shots of which settings the rectangle tool should be choosen along with i.e., shape layers, path or fill pixels.
I also saw that couple of ppl that commented above faced the same issue, any help by the author to explain in detail to get this effect would be highly apreciated.
Sharon W
06/05/2011
Good tutorial and very easy to follow.
jaxob
28/05/2011
Muchas gracias!!! Grax!
pradeep
31/05/2011
thanks…… for it. i greatly enjoyed and learn to create website using photoshop.
praveen
22/06/2011
its to very nice to explain. in web, very great.
praveen
22/06/2011
very nice……………..