Create Stylish Web-header using Photoshop Gradient tool

In this tutorial, we will show you how to easily create stylish web header using only Gradient Tool , Vector mask and Layer effect. The final web header image will include 3 layers consisted of 3 separate gradient this will allow you to easily edit each part later. If you like, you can download sample of final .psd file that create in this tutorial at bottom of this page.

Example of web header create from this tutorial

Layer 1: Light Gray Gradient Background

1. Create new file with width 950 pixels , height 130 pixels.
   
2. Choose Gradient Tool , select gradient style at option bar as Foreground to Background and choose Linear Gradient option. At photoshop toolbox, assign White (H: 0, S:0, B:0) as foreground color and Light Gray (H:0, S:0, B:90)as background color.
   
3. Hold-down Shift key and drag Gradient tool from middle of image to bottom edge of image as figure show below.
   

Layer 2: Top Blue Strip Gradient.

1. Click New Layer Button to create new layer.
2. Assign Light Blue (H: 203, S:83, B:85) as foreground color and darker shade of blue (H:209, S:90, B:70) as background color.
3. Choose Gradient Tool , then hold-down Shift key and drag Gradient tool from top edges to middle of the image as figure show below.
   
4. Choose Pen Tool , make sure that Path option at option bar is selected. Then draw path for your blue strip bar border.
   
5. With the path still active press Layer Mask Button twice to create vector mask from path you just create.
   
6. Apply "Inner shadow" layer effect using following setting.
   

Layer 3: Bottom Bar

1. Click New Layer Button to create another new layer.
2. Assign Dark Gray (H:0, S:0, B:90) as foreground color and White (H: 0, S:0, B:0) as background color.
3. Choose Gradient Tool , then hold-down Shift key and drag very short stroke for gradient at bottom of the image.
   
4. Choose Rectangular Shape Tool , make sure that Path option at option bar is selected. Then draw the path for the area that should be bottom bar.
   
5. With the path still active press Layer Mask Button twice to create vector mask.

Now you should have final result and layer listed similar to image show below . Now you can flatten image or use slice tool to slice the image as needed and export it to web image format using Save for web command.

If you like you can download the final .psd file in zip format below

Download: web_header_gradient.zip

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

		Bookmarks this Page

This entry was posted on Wednesday, January 2nd, 2008 at 11:35 am. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.