Create a Simple Gradient Header in Photoshop

1-5-08 Filed under Designing & Photoshop Tutorials

Step 9:
Move the design layer from the last step right above it.

Step 10:
Now design the navigation system. First select the Rounded Rectangle Tool and set the radius setting to 10 px with anti-aliased checked. Then in a new layer draw a white rounded rectangle, size 94×27 px. Finish it off by cutting the bottom rounded corners.

Step 11:
Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to your half rounded rectangle layer.

Step 12:
Now select the Horizontal Type Tool from the tools palette and set the font family to Arial, bold, 11 pt, none and blue, color code #0077F3. In a new text layer type your first navigation on the tab.

Step 13:
Add the rest of your navigation links with its own tab design.

Step 14:
Now if you want to add the more links like a category from the main navigation link. Use font Arial, regular, 13 pt, none and black for color.

Step 15:
Now select the Horizontal Type Tool from the tools palette and set the font family to Bauhaus, regular, 36 pt, charp and black for color. In a new text layer type your website name. Then under Layer Style(Layer > Layer Style) add a Gradient Overlay and Stroke blending options.

Step 16:
On the right end side of your header add a search box.

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