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.

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

Create Creative Studio Web Page in Photoshop CS3

Using the Rectangle Tool (U), try to represent a kind of illumination on the background’s top part.

Create Creative Studio Web Page in Photoshop CS3

Select for this layer the parameters from below: Fill 0%
Blending Options>Gradient Overlay

Create Creative Studio Web Page in Photoshop CS3

Gradient’s parameters:

Create Creative Studio Web Page in Photoshop CS3

Create Creative Studio Web Page in Photoshop CS3

Introduce now the site’s name, keeping the next shown demands:

Create Creative Studio Web Page in Photoshop CS3

creative

Create Creative Studio Web Page in Photoshop CS3

studio

Create Creative Studio Web Page in Photoshop CS3

The layer’s parameters: Blending Options>Drop Shadow

Create Creative Studio Web Page in Photoshop CS3

Blending Options>Gradient Overlay

Create Creative Studio Web Page in Photoshop CS3

Gradient’s parameters:

Create Creative Studio Web Page in Photoshop CS3

Create Creative Studio Web Page in Photoshop CS3

Using the Line Tool (U), try to make a horizontal line, colored with #323537

Create Creative Studio Web Page in Photoshop CS3

The layer’s parameters: Blending Options>Drop Shadow

Create Creative Studio Web Page in Photoshop CS3

Create Creative Studio Web Page in Photoshop CS3

Make a copy of the last made layer and select the Free Transform option to situate the copy the same way indicated below:

Create Creative Studio Web Page in Photoshop CS3

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

Create Creative Studio Web Page in Photoshop CS3

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

Create Creative Studio Web Page in Photoshop CS3

Insert now the name of the buttons for the site’s menu:

Create Creative Studio Web Page in Photoshop CS3

Create Creative Studio Web Page in Photoshop CS3

Using the Rounded Rectangle Tool (U) (radius of 10 px) lower, try to make the primary layer of the basic web site’s panel:

Create Creative Studio Web Page in Photoshop CS3

  •  

  •    
  •  

 

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……………..

We are the pioneers in providing 350-029 and 642-504 tutorials with 100% exam pass guarantee.Download our latest 70-646 & 70-511 questions to pass real exam of JK0-016 in time.

Looking for rental properties try Alameda real estate agent.