HOW TO: Make a Blog Header Graphic

This one’s a quick & dirty guide for the people that asked me how I created my header graphics. Header graphics mark a blog as unique and can lure a reader in from the get-go. Create several of them, make them rotate and your blog will give off a dynamic appearance.

My image editor of choice is currently Photoshop CS2. I am not too sure if this tutorial can be easily followed utilizing other image editors, but if you have any questions my hotline is always online (pun not intended). This guide will mainly follow how to make my specific header, but feel free to experiment and play with different colors and shapes.

Fire up Photoshop and create a new file via Open>New…. For this example, I will be using dimensions of 800 pixels wide and 140 pixels high.

First we will color the background by double-clicking on the color palette and changing the default color to #A6B0BF, which is the background color of this website.

Then, select the paint bucket tool. If you do not see it, click and hold the icon for a menu, then select the paint bucket tool. Move your cursor to the image and click once. It should all be colored in #A6B0BF.

The next step is creating the links bar. Select the Rectangle Tool.

Getting the correct height for the links bar was a bit of trial and error, as you have to save it, upload it and see how it looks on the site. I finally got the dimensions of the links bar to be 800 pixels wide by 32 pixels high; bottom-aligned. Change your default color to #3388CC and start using the rectangle tool from the bottom left of the image and drag across until you get the desired look. After you have that working nicely, change the opacity to 80% via the slider in the layers pane. You should have something like this.

Change the color to #FFFFFF and still using the rectangle tool make a thin line directly above the links bar you just created.

Now on to adding the text box and the text. Select the Rounded Rectangle Tool and change the Radius to 25 pixels.

Change the color palette back to #3388CC and create a text box that will be large enough to hold your header and sub-header titles. Set the opacity of the rounded box to 80%. In the layers pane, select the shape layer for the rounded box you just created and double-click the little f icon on the bottom. Check the inner shadow box and play with the settings until you find something you like.

Whip out the text tool, select the font, font color and font size you wish to use. Use the tool once for the header title, and a second time for the sub-header title. Don’t create them in one layer. It is easier to manage them if they each have their own layer. Select the move tool (pointer) and position the two text layers so that they are positioned correctly within your text box.

Now to the actual image of the header. Find one of your favorite images, open it in Photoshop and crop it to 800×140. Select the Rectangular Marquee Tool, select the entire image, switch to the Move Tool and drag your image to the header image we’ve been working on. Nudge the image with the cursor keys to get it into position. You can hold shift while pressing a cursor key to move by a larger amount, rather than by pixel. You may use the Saturate tool at about 30% if you wish to liven up the colors; make the reds more red, greens more green, etc.

We are almost there. We just need to round the corners, and add a gradient to the links bar. Select the Rounded Rectangle Tool and change the Radius to 35 pixels.

Starting from the top left, create a rounded rectangle that goes all the way to the right border but extend it below the entire image so that the bottom of the header doesn’t get rounded. This is what you should see, it doesn’t matter what the color is at this point as we will be discarding the shape and leaving the path.

The next part is a bit tricky. We need to drag the path from the rounded rectangle shape onto the image layer. Look over at your layers pane, specifically at the following two layers.

Still in the layers pane, click and hold your cursor on the white “Shape” box. Then drag it onto the image layer. You should be left with this.

Now we just need to delete the remaining shape. Drag it to the trash on the bottom of the pane.

You can now see the near final product. Earlier when we created the links bar we dialed the opacity down to 80%, this was so we could create a gradient behind it to provide a subtle overall blue gradient. Create a new layer and put it right below the links bar. Select the marquee tool and create a selection of the same dimensions as the links bar. Select the gradient tool now, and assuming the default white to black gradient is selected, drag the cursor from the bottom of the selected area to the top. This is what the gradient layer only looks like.

And the completed image. If yours doesn’t look the same, make sure your layers are in the proper order.

Resources

If you want to learn how to do other things in Photoshop I highly recommend checking out Photoshop Support, Tutorial Select, Photoshop101, Good Tutorials and PRAGT.

digg   del.icio.us   lifehacker

Tagged as: How To's, Web Dev