Adobe Photoshop Tutorials - Blog Header Design

In this post, you’ll learn on how to design your very own customized header for your blog.



Before we start, let me share with you some of the Do’s and Don’ts in creating blog header.



Don’ts
- Stop creating header with Rectangular box!
- Avoid from using heavy outer glow and drop shadow effects (apply if it’s really necessary)
- Say no to gradient background!



Do’s
- Go wild when you design! Think outside the box.
- Do research, blog hop etc. to find out how you can be different then the rest.
- Come up with your very own identity.

Hope you’ll got what I meant. Ok, let’s start with the tutorial.

Step 1
You need to know your blog header size (width and height) If you're not sure, no worries...Simply go to your blog and press “Print Screen” button on your keyboard.

Step 2
Open up your Photoshop, create a new doc (File> New) and paste the Screenshot of your blog which you’ve just print screened.

Step 3

Use the Rectangular Marquee Tool and select the header portion of your header only. Once you’ve selected the header portion, go to Image>Crop.

Step 4

You will now see the header have been cropped out from your blog image. Now to find out your header size, go to Image>Image Size. A popup window will show the Width and Height of your blog (See above).

Step 5

Now that you know the sizes, let's create a new document. Go to File> New and create a new document (Use back the same width and height info)

Step 6

You can leave the new document at a side for now. Next, open a texture image (see right below this post to find links to different types of textures). In this sample, I’ll use paper texture. Once you’ve opened the image, go to Edit>Define Pattern and give it a name (see above).

Step 7

Now open back your document that you've created for your header and select the first layer (name it as "bg"). Then go to Edit> Fill. A small window will popup (see above). Select "Pattern" under the "Use" drop down and choose the paper texture. You will see the entire header document is now filled with paper texture.

Step 8

Open any image that you'll like to include as your main header image (probably your own photo or any other photos). In this sample, I'll be using a girl's photo that I've downloaded from Stock Exchange site. Cut out the girl from the background using Polygonal tool. You can also use pen tool or any other tools you familiar with.

Step 9

Create a new layer on your header document and set the layer blending modes to "Darken". By doing this, you'll notice that the girl's photo actually blends with the background. I've also erased some parts of the girl's photo to create some softness feel.

Step 10

To make the girl's photo to be more visible, all you have to do is duplicate the layer by dragging the layer to the new layer icon.

Step 11

Let's start coloring the header with some bright colors (any colors will do, according to your preference) and set the layer's blending mode to "Lighten". This is a long process, you can add as many colors as you want on to different layers. Try playing with the different types of the blending modes to see the difference.

Step 12

Import some brushes if you want. Just click on the small arrow (see above) and select "load brushes" (Download Free Photoshop Brushes from the Resources links below)

Step 13

You can see the brush appears on the left bar. Choose the shapes that you prefer and you use it on the header document. Please set the layer blending modes to "Soft Light". Try playing with different brushes or even add in more photos onto your header to create some montage feel.

I wont be going more details on this since it's a repeating process.

Here's the PSD header of this file. Download and check it out yourself.

Hold on a second, we're not actually done yet. You have your header ready to be uploaded,but your blog's background doesn't really blend with your header. You need to get that fixed. How?

Simply copy the css code below and replace with your current body css. Replace the "http://XXXX" path with the paper texture once you've uploaded the graphic anywhere on the internet. Remember to backup your codes first ya!


body {
background-color: #FFFFFF;
background-image: url("http://XXXXX");
background-repeat: y;
background-position: top center;
}

Last but not least, when you done with all that, your blog should look something like this :



Resources
Photoshop Brushes (Free)
http://www.brushking.eu/148/floral-brushes.html
http://browse.deviantart.com/resources/applications/psbrushes/

Stockphotos (Free)
http://www.sxc.hu/

Textures (Free)
http://www.spiralgraphics.biz/packs/index.htm
http://www.form8.org/download/textures.html

Walla! We're done! Do leave any questions or comments if you have any!