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:

As a result we’ll get the next line:

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

Blending Options>Gradient Overlay

Gradient Editor

In this case we’ll obtain a rainbowed line.

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

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 new file of 5×5 px and 72 dpi. Applying the Pencil Tool (B), try to put on the new file a diagonal line.

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.

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:

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.

Start inserting the logo.




























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