Creative Studio Web Page
October 28th, 2008 by ART-D Posted in Adobe Photoshop, Web Layout
In this detailed tutorial we will learn how to create impressive layout for Creative Studio.
Get more tips in making creative websites with this wordpress error page tutorial.
Begin your work by creating a new file of 845×900 px and 72 dpi. Select after that the Paint Bucket Tool (G) to give it the color #151616
Using the Rectangle Tool (U), try to represent a kind of illumination on the background’s top part.
Select for this layer the parameters from below: Fill 0%
Blending Options>Gradient Overlay
Gradient’s parameters:
Introduce now the site’s name, keeping the next shown demands:
creative
studio
The layer’s parameters: Blending Options>Drop Shadow
Blending Options>Gradient Overlay
Gradient’s parameters:
Using the Line Tool (U), try to make a horizontal line, colored with #323537
The layer’s parameters: Blending Options>Drop Shadow
Make a copy of the last made layer and select the Free Transform option to situate the copy the same way indicated below:
Now it’s time for drawing the buttons on the site’s header. In this case we’ll select the Rounded Rectangle Tool (U) with a radius of 10 px. But firstly we need to represent just one button colored with #3D4A4E
Then we’ll make two copies of the last made button and select again the Free Transform option to place the copies the same way demonstrated next picture. Just one copy should be left without any changes. For the other button we’ll apply the color #1194FC
Insert now the name of the buttons for the site’s menu:
Using the Rounded Rectangle Tool (U) (radius of 10 px) lower, try to make the primary layer of the basic web site’s panel:
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……………..