Photoshop: Simple Stylised Web Banner

To create a web banner like this, start with a new document at 468x60.

First, select Filter, Render, Clouds. Then select Filter, Render, Difference Clouds. Repeat the Difference Clouds process by pressing Ctrl+F several times untill you have something like this...

Go to Image, Adjustments, Brightness/Contrast. Change your Brightness and Contrast levels to blacken the darker areas and lighten the cloud sections. I used Brightness:+10, Contract:+50.

Duplicate your Difference Clouds layer by selecting Layer, Duplicate Layer. Leave the default name and select OK. Now rotate this layer 180 degree so that it is a vertical and horizontal mirror of the original layer. Do this by selecting Edit, Transform, Rotate 180.

Select the top most layer and change its Blending Mode. These can be found in the Layers Window, by default this layer will be Normal. Change this to Pin Light.

You should now have an image looking like this...

Merge your layers by selecting Layer, Merge Visible.

It's now time to add some colour. With the layer selected go to Image, Adjustments, Hue/Saturation. Tick the colourize box and adjust the Hue, Saturation and Lightness untill you get the result you want.

Next step is to add your name onto the banner. Select the T from the Tools Window, click into the banner and type your name, then move the text into place. Duplicate this Text Layer. Select the lower Text Layer and make sure the font colour is white. Now select Filter, Blur, Motion Blur, when asked about rasterizing this layer press OK. Select Angle:0, Distance:108, and press OK.

Finaly, select your Unrasterized Font Layer and change it to a colour of your choice, I found white worked quite nicely, even though its not 100% readable. That completes this tutorial.