Page 5 - Making the header

9. Now lets start some work on the header. First of all you need some useful images: you may find some here:
http://www.clantemplates.com/renders/gallery/
- Once you have saved your image and imported it into Photoshop, move it place on your site, you may need to resize it. Then cut away the bits you don't need so that the image only shows on your header. The next thing i usually do is make the image fit in a little more with you site. You can do this by going to Image >> Adjustments >> Hue / Saturation, or Brightness & Contrast, or Levels.

You should have a play with these things until your image seems to fit in a little more. Then i usually duplicate the layer, give it a Gaussian blur ( Filters >> Blur >> Gaussian Blur) with a radius of about 4, then setting the Blend Mode to overlay, and moving the duplicated layer (now blurred) behind the original character, and you get something that looks like this. You can use as many or as little characters as you want, its always good just to limit it to maybe 1/2/3 though.



Now the header needs a background, i went for a simple city landscrape background which i found
here.
All you then have to do is the adjustments as mentioned above, especially the Hue/Saturation, that is something you need to get used to as it is a useful colour tool.
Make sure you use the Rectangular Marquee tool as before to clean up the side of the image so it doesn't go out of the header area. Another good piece of advice when you are doing your background for the header, is to duplicate the layer, set the Blend mode to overplay then use the Motion blur tool, Filter >> Blur >> Motion Blur >> until you get something that looks nice.
You can then change the opacity of this layer until you have something more pleasing. Always remember to clean up the layer to make sure nothing goes out of the area of the header. Here's what i have so far:



Now one of the best ways of making your header look great is using brushes, particularly Grunge or abstract brushes, there are various sites for finding brushes, but here are some you can check out.
http://www.bluevertigo.com.ar/bluevertigo.htm or http://browse.deviantart.com/resources/applications/psbrushes/ make sure to scroll along to the Free Brushes.



Save the brushes to your computer somewhere, then to load them into Photoshop simply

1. Select the brush tool
2. Press the down arrow at the very top of your window next the the ?brushthat is already selected
3. Press the arrow facing right
4. Select Replace Brushes

Then simply locate the .abr file and going to step 2 of how to use the brushes you can see the brushes will appear on that scroller.
Then simply dab the brushes on. It is best to dab on white or black, then changing the blending mode to Overlay, this gives a nice blending effect.

Now i don't want to spend to long explaining brushes because the best thing is to try various brushes that you think work best, and try different methods of applying them. Its always good to build up layers and play with the Blending modes, and duplicating layers and using the blur tool. Just play around with it, you get the idea.
Here is how mine looked when i was finished playing around with the brushes. & I also added another character.




Now all that is left is to add the logo or name of the web site to your header. Simply using a nice font with some good effects and blending will be good enough for any site. So find yourself a good font from www.dafont.com and add some text to the header. Its always good o have your Antialiasing set to sharp, you do this by using your text tool, then going up to the drop down menu next to the two "a"'s at the top, and selecting sharp from the drop down menu.



For my website name i simply drew a box around the text and gave it a motion blur, and cut off part of it so it looked like this, again this part of it is all about finding something that works for you. I tried to keep mine simple, but you don't have to have it as simple as this, it can be more advanced. However always remember to have light text on a dark background, or dark text on a light background, and if you don't have that then do what i have done and make a box around it, and blur it, it looks cool and has a function.



This is the final preview... Go to the next step please to finish this off!