Create a Simple Gradient Header in Photoshop

1-5-08 Filed under Designing & Photoshop Tutorials

Step 1:
Let’s start out by creating a new file. I used a 900×200 pixels canvas set at 72dpi, and I filled my background with a white color. Then grab the brush tool with a soft brush and 28 px for the diameter. In a new layer paint black in a straight line across your canvas.

Step 2:
Select the Rectangular Marquee Tool and make the same selection you see on the picture, then go to Edit > Cut.

Step 3:
Now set the layer from the last steps opacity level on the layers palette to 22%.

Step 4:
On top of your gray faded area with a little white space draw a blue(color code #00A3F7) rectangle, size 900×137 px. Then under Layer Style(Layer > Layer Style) add a Inner Shadow and Gradient Overlay blending option.

Step 5:
Create a new layer and draw a 1 px white line on the gray faded area, check the picture below for the position.

Step 6:
Now add a white fade on top of your blue rectanglem, use the same technique from step one and two. Then set the layers opacity level to 7% on the layers palette.

Step 7:
Create a new layer and draw a bright blue(color code #00C6FA) line across your canvas, see the picture below for the proper location. Then above that last line draw a darker blue(color code #005CED) line.

Step 8:
Choose your Rectangle Marquee Tool again and make the selection shown on the picture. Then go to Edit > Copy and back to Edit > Paste. You should now have a new layer with the design you selected and copied.

Pages: 1 2 3 4
Did you enjoy this design? We publish fresh tutorials
on a daily basis so why not Subscribe to our RSS Feed?

---

3 Responses to “Create a Simple Gradient Header in Photoshop”

1. Ilikeit Says:
   January 5th, 2008 at 2:29 pm

   Nice header!

2. Colurz Blog »  Webdesign: Einen Header in Photoshop erstellen Says:
   January 30th, 2008 at 3:47 am

   [...] richtig anwendet. Um einen kleinen Einstieg in den Bereich des Webdesign zu geben, ist das Tutorial »Create a Simple Gradient Header in Photoshop« genau richtig. Der Schwierigkeitsgrad ist nicht besonders hoch, eignet sich also auch sehr gut [...]

3. Michael Says:
   April 21st, 2008 at 1:12 pm

   I really dont get Stap 6, When I select the layer andmake it 7% opacity it will disapear.

   I used the same technique from step 1 and 2.

   Looks nice tho, but if you could explain me step 6 again, that would be awesome

Add a Comment

Name (required)

Mail (required)

Website