Colorful Website Header

1. Open up a blank canvas by pressing on your keyboard Ctrl+N. select a size you want your overall website to be. mines is 750x600.

2. On the vertical tool bar select the rectangle shape tool. on the top toolbar make sure you select to create a path and not a new layer shape.

3. Press and hold the Pen tool button and select the pen with the + symbol next to it. it'll let us add anchor points and do some cool stuff.

4. On our rectangle shape we created, put some anchor points on it and drag it around, and manipulate it so you get a kind of wave effect. This part is hard to explain but it isn't hard. once you get to this step most likely you will understand the concept.

Click to enlarge

5. Create a new layer (Ctrl+Shift+N) and name it NAV1, still having our Pen tool selected, right click on the shape and a) click Fill Path. fill in the shape we made with a color of your choice. i am going to fill with a pattern. b) right click on it again and select delete path.

6. Duplicate NAV1 and name it NAV2. right click on NAV1, select blending options. go down to color overlay and select a color of your choice. now select Stroke and give it a color and size of your choice as well. now drag that layer so it is slightly below the top layer (NAV2).

7. On the upper left hand corner, type out the text to your main navigation.

8. Select the rounded edge shape tool and a color of your choice. on the upper left hand edge of the canvas, draw out a couple rectangles depending on how many links you want to show based on step 1. make sure this layer is below the navigation layer.

9. The logo area is optional, i am going to just put in a stock design from one of photoshop's many shapes. I will also add in a fictional company name, you should add a real one =)

Click to enlarge

10. Go to the very bottom layer (background), and create a new layer, name it BG.

11. On the vertical tool bar, select the gradient tool. choose your colors.

12. Towards the middle of the header, drag the gradient from the center up. do this a couple times until you get the right shades.

13. Using the rectangle marquee, draw a box out in the lower portions of the gradient and press delete.

14. Check out the final product!

Click to enlarge