Article
Cool Web Design Effects Tutorials
Cool Headers
Difficulty: Intermediate
Pre-requisites: Knowledge of the 'layers palette' and how to use the 'move' tool.
What I find best to start off with is a detailed photo of some sort, but make sure it holds a lot of interest. I've decided to use this one of shells:
Step 1: The First Layer
Open up the shell image in Photoshop and right click the background layer. Select 'duplicate' (call it "RadialBlur" and hit ok). A new layer should appear.
Now change the layer's mode to 'multiply' and decrease the opacity to around 75%.
Once you've done this, use the 'move tool' to move the layer around a little, until it looks good.
Apply a radial blur (filter >> blur >> radial blur) of about 20 in 'best' mode. It should look something like this:
Step 2: The Second Layer
Now, create another duplicate layer (name it "RadialBlur2" like we did above). Right click the top layer (the blurred one you just created), and duplicate it.
Change the layer's mode to color burn. You can move this image around a little to add effect.
Now, select you original layer and then select filter >> motion blur, entering 40 degrees for the angle, and 25 for the amount. It should look like this:
Step 3: Creating Highlights
Duplicate the background layer again (call it "highlights"), and drag this new layer to the top of the list. Then, change the layer mode to 'luminosity' and the opacity to around 40%. You'll get something like this:
Step 4: Adjusting the Color
Just about finished -- but it looks a bit strange with all those colors! Click the half white / half black circle at the bottom of the layers palette:
and select hue/saturation. Once the popup box appears, check the 'colorize' box and enter these settings:
- Hue: 220
- Saturation: 100
- Lightness: +8
It should look pretty cool now, with lots of blue fades and highlights showing, a little like this:
To wrap up, cut out a nice 'header sized' piece. Apply a bit of text, maybe some grids and you should have a fine looking image! Here's what I ended up with:
Gavin is a Sitepoint Mentor and owns Platinum Website Design whilst studying I.T. at university.