With the exception of motorbikes, computer design has always been my love, this was compounded when I started my career many eons ago (hey im not that old, it was in the eighties) working in a newspaper with some of the first Macintosh computers to hit the shores of Ireland. My first experiences of the macintosh were with a monochrome game called Crystal Quest, Pagemaker and Adobe Photoshop. Photoshop was groundbreaking in it's day and today it is widely used by professionals (and novices) the world over. Justifiably so too I might add - the latest CS2 is one hell of a program. Photoshop has an endless array of uses, from "photochopping" that annoying relative out of a family picture, to indepth complex full colour CMYK manipulation for a printing press.

When I founded Driver Heaven in 2002 i wanted a "tech site" that would be more graphically oriented than those I frequented. Granted, content is the most important aspect of any successful site, but I was tired of reading page upon page with boring black text on a white background. What is even more baffling is the fact that many of these sites still follow this same layout. There are always the purists who prefer extremely simple site design with minimal graphic content but this is certainly not my vision of how to engage a reader.

I am not the kind of person to start a blog page even if it was to detail projects or photoshop work im involved in, probably because I like my personal life to remain that way, but in all honesty I tend to find them self indulgent, mediocre and a waste of server space. Of course there are exceptions to this rule, such as Pork Tornado.

I had planned last year to regularly update guides on Photoshop as im constantly being asked questions about certain aspects of the site or review design, i used to run a design site and had my own portfolio of renderings and sketches published on "Zardon's Den". I'll spare you the rant about not having enough time to do any of this, but I will try and update the occasional page on Driver Heaven with some tips or guides on certain aspects of the program, which leads me nicely into the whole purpose of this page.

Good, effective design doesn't have to be complicated, nor should it revolve around a total overkill of filters, just look around the net and see how overused a filter like "lens flare" has become. The whole idea behind this filter has bemused me for a decade now, there was a time, once upon a long ago that photographers went out of their way to avoid this unpleasant side affect, only for Adobe to introduce it into their program as a cool feature!

When I do a design regardless of whether it is for the internet or a magazine i plan out the goals I am trying to achieve and work from there. Quite often ill get a design idea in my head even before i read the editorial just based on the name of the product.

The joy with Photoshop is there are normally 10 ways to get to the same result and even if you are unfamilar with specific functions you can generally find a workaround to get the result you are trying to achieve.

Some of you may remember our Crossfire review we published last year and I have had a few people email me asking where I got that image from. ATi do in fact have a large and private FTP full of images of their boards, logos, and even full CMYK presentations for the printed medium, this can come in handy, however the ruby image in our crossfire article is in fact something I created myself. Why? Well sometimes you have an idea in your head and google search or stock images just dont achieve the result you are looking for. It isn't often you see Ruby the firejuggler, but I thought it was an effective design for the product.

I dont want to make this too complex so im going to look at a simple header design for a review we just published and take you step by step by the thinking and working process it took to achieve the end goal, im not going to be using any third party filters, nor am I going to be teaching anything to a skilled user of the program, there are in fact other ways to achieve the same end result but this is the easiest and probably one everyone can copy within 5 minutes. This is something you can attain with a "straight out of the box" Photoshop experience. Obviously if you have just opened Photoshop for the first time this might be a little tricky so im going to class it for a "novice" user who already has an idea of how to get around the program.

The first step is to open a new canvas, whatever size you want, lets say 800x800 pixels to keep it all uniform at 72 or 96 dpi (dots per inch) with a white background. Press D for default colors then select Filter/Render/Clouds, followed up by Image/Adjust/Auto Contrast. The auto contrast stage just adds more contrast to the tones within the image, we could manually alter this in levels or curves, but to keep the purposes of this guide uniform we will use the auto function.

Next create a new layer, and fill with a blue colour - again let's say #1745a2. Set layer blending to colour and merge these layers. This will take both layers and merge them together, keeping the default base colour aspect we require.

Merge the two layers and then duplicate the single layer we now have. Then go into Filter/Artistic/ PlasticWrap and enter the following settings. (please note the interface will be different depending on the version of photoshop you are using, but the end result should be identical).

On each of the two layers, head into Image/Adjustments/Invert or press Press Ctrl+I or - this is inverting the colour scheme and then set the top layer to "overlay" via Blending options. Overlay is a great option (via blending). It multiplies or screens the colors, depending on the base color. Patterns or colors overlay the existing pixels while preserving the highlights and shadows of the base color. The base color is not replaced but is mixed with the blend color to reflect the lightness or darkness of the original color.

On the top layer we are now going to go into the Filter/Distort/Polar Coordinates and check Polar to rectangular.

Next we are going to head into Filter/Stylise/Wind then set the wind to "blow" from the Left. Set this layer (top) to "Lighten". This looks at the color information in each channel and selects the base or blend color—whichever is lighter—as the result colour. Pixels darker than the blend color are replaced, and pixels lighter than the blend color do not change.

Create a new (third) layer and fill with the same blue we used before #1745a2.

Set the top blue layer to colour mode via blending as before, and then rotate the canvas by 90 degrees clockwise. The reason we rotate 90 degrees clockwise is to make the "wind" filter we used earlier have the icicle effects pointing downwards to create the illusion of a natural formation.

At this stage the background ice effect is finished, although if you are not happy with the contrast or the blue used it is easy to play with these options in variations or via fine tuning in curves or levels.

This image gives the feeling of cold as blue is the primary colour balance, and yet is soft and unfocused enough not to take the eye away from the main product in this instance which is the Corsair Nautilus cooler. Having a sharp brighter image would cause confliction in the composition as the human eye senses a blurred section as "in the distance". An effect we have been seeing in games lately.

So now we have the top header background image we need to apply text for the product information, and again we are keeping with the overall theme of the Corsair Nautilus being a high end "cooler".

After selecting our font for the header we can apply some of the same techniques used in the background ice section to the type. We are going to need to create an ice effect on the font and again to do this we will use the "wind" filter. Unfortunately Adobe failed to allow the wind filter to be used vertically along the axis but it is easily resolved by rotating the text or image we are going to apply first.

The next stage is to apply the Wind filter filter/stylise/wind and as we want it "blowing" from the right to the left in this rotation we select the correct option in the popup panel. If you rotated the type the other way the reverse would logically apply.

At this time it is worth pointing out that "blast" and "stagger" options in this panel are too extreme for the requirements of this particular effect on the type we are using, but it is simple and effective to run the filter twice, a shortcut is to hit control F after the first time.

Next we rotate the rasterised type in the opposite direction to return it to its original axis. Now we have our icicle effect on the type we can try other variations of the text with multiple layering techniques with a middle layer to give a little depth to the tri-layered text (below left), I ended up with several but I felt they detracted from the end result and reverted to the plain white effect.

All in all it is quite a simple exercise and above anything it might show some of you how useful the wind filter can be in creating special type effects but you also might have taken something away from the blending effects I detailed earlier. As always with Photoshop there are many ways to get the end result you are trying to reach, some are quicker than others and some give slightly different end results!

Ill sign off this time with a note to those benchmarks amongst you to try our Photoshop bench, it is a great real world stress test for your system.