Personal Blog Header

1. Open Photoshop and create a new image, 800x60 with background of #131422

2. Create a new layer and fill the top half of the canvas with #FFFFFF. Set the opacity to 20%.

3. Create a new layer and place it below the white bar layer.

4. Fill this layer with a pattern. I am using this pattern.

To create a new pattern of your own create a new image with a transparent background. Create your pattern then go to Edit » Define Pattern. Give it a name and press OK.

5. Select the rectangular marquee tool and make a selection from left to right taking about 75% of the width, 100% of the height. Then go to Select » Feather and set to 50px then press OK. With Layer 2 selected in the layers panel press Delete 3 times.

6. Ctrl + Click Layer 2 and fill with #FFFFFF by pressing D then X then Alt + Backspace.

7. Now set the opacity of Layer 2 to 20%.

8. Insert a shape or logo on to the right hand side of the canvas above Layer 2. I am using some custom rings that I made and set the opacity to 20%.

9. Add your text to the left and save.

Click to enlarge

10. To make the header work with width set to 100%. Slice the image in to 4 parts. You have the 1st section of the text followed by a small 1/2px slice, then a large area with stopping where our custom pattern starts then the 4th is the shape. To make the page load quicker you can remove the custom pattern and make slice #3 larger and #4 smaller.

Click to enlarge

11. Then create a table with 2 columns 1 row. In the first column set the background to the 2nd image and insert the 1st image in column 1. Do the same with column 2 but use the 4th image in the 2nd column. Slice 3 can be deleted as it's not used.