Personal Blog Header

Posted on Mon, 2006-03-06 17:06

This tutorial with guide you through how to make a banner for your personal blog:

This tutorial takes in to account that you know the basics of Photoshop.

 

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%.

white bar applied
3.

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

layers
4.

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

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%.

customshape
9.

Add your text to the left and save.

header finished with text
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.

sliced
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.