Design studio – web page layout

September 5th, 2008 by ART-D Posted in Adobe Photoshop, Web Layout

Next create a new layer and select the Paths option on the layers’ palette, make a double click on it and press OK. After that make a right click on the made layer, choosing the option indicated next image:

Create a professional design studio layout in Photoshop CS3

As a result we’ll get the next line:

Create a professional design studio layout in Photoshop CS3

Get back to the layers and select the Blending Options>Outer Glow on the line’s layer:

Create a professional design studio layout in Photoshop CS3

Blending Options>Gradient Overlay

Create a professional design studio layout in Photoshop CS3

Gradient Editor

Create a professional design studio layout in Photoshop CS3

In this case we’ll obtain a rainbowed line.

Create a professional design studio layout in Photoshop CS3

This way we can draw several small lines more, without Blending Options.

Create a professional design studio layout in Photoshop CS3

Place the layers on our picture under the rectangles, made earlier. Using the Rectangle Tool (U), try to make a thin line on the bottom part of our site, choosing the color #262B31

Create a professional design studio layout in Photoshop CS3

Create a new file of 5×5 px and 72 dpi. Applying the Pencil Tool (B), try to put on the new file a diagonal line.

Create a professional design studio layout in Photoshop CS3

Select on the main menu Edit>Define Pattern…. Our pattern is saved now. Get back on the first file and select there Edit>Fill and find our saved pattern in the Custom Pattern option, pressing OK here. This operation should be done on a new layer.

Create a professional design studio layout in Photoshop CS3

Take the Rectangular Marquee Tool (M) and the Eraser Tool (E) to erase the unnecessary elements, placing this layer under the rectangles. Select on the layers’ palette the option Fill 10% and in this case we must get the same thing from below:

Create a professional design studio layout in Photoshop CS3

Next we need to create an orange line, having the color’s code #C53300. Later we’ll represent a grey one on the bottom part.

Create a professional design studio layout in Photoshop CS3

Start inserting the logo.

Create a professional design studio layout in Photoshop CS3

  •  

  •    
  •  

 

Post Pages: 1 2 3

  • charitrajain

    12/12/2009

    good tutorial but i struck when you draw line from pentool
    because when i draw it appear in fill not like you . plzz help me.

  • car lock out

    06/01/2010

    The banner was really good.

  • Bloque

    07/01/2010

    I´ve got the very same problem as charitrajain…I stuck on this matter for about 30 minutes and cant find how to create the sharp edges…thanks for help

  • eloleon

    21/04/2010

    To charitrajain and Bloque: when you select Pen Tool in the top menu you have 3 icons: a square with little dots in each corner, square with pen inside and just square. By default, first option is selected. Just select second option so You will have stroke without fill

  • fereshteh

    24/05/2010

    our site is pretty good.

  • Joe

    28/05/2010

    Nice tutorial, I stuck with the pen tool part but at the end I did it. Thanks a learned a lot :D

  • Ravi

    29/06/2010

    The pentool trick is nice. the one part the guy missed was to show that you will have to turn on “simulate pressure” in the stroke path dialog box………that will get the edges sharp.
    the tutorial is actually very nice. ty! :)

  • sergio

    10/08/2010

    Hi, where I get the brush?

  • Rebach

    18/08/2010

    Buen Tuto…

  • Babatundeh

    19/09/2010

    i still dont get the sharp edges even after selecting simulate pressure…anyone knows why?

  • Carlos Rivera

    22/09/2010

    Excelente tutorial, Dios bendiga tu paciencia que te de muchos conocimientos mas para compartir.

  • Rasheed

    16/10/2010

    sorry i was stuck at two point “filter>bur>Gussie blur and from pen toll point i could not make that image. could you help me please!

  • ABINASH

    10/01/2011

    very useful and so glad to get the help like this .thank you very much!

  • Jon

    16/02/2011

    I was confused on how to make the lines after you do the simulate pressure with the pen line. I got past the rainbow part, but after than, your tutorial says to make some lines “Without Blending Options”. How do you do that?

  • Sharon W

    04/05/2011

    Nice, I love the bright colors.

  • JUNZMHINE

    06/07/2011

    pls give me a link for basic tutorials or send thru email benel18@yahoo.com. thanks really appreciate it
    :)