Thought I would whip up a quick tutorial on how to do a cool vista style background for your footer or head background.

footer image

Main tools used will be:
Gradient
Soft eraser
Feather Tool
Pen Tool
Gaussian Blur

First up select your image size, if your pretty savvy at HTML you should be able to make these footer repeat but for today i will just be talking about how to actually make the footer…not how to implement it… that’s for another day.

So i started with an image thats 1024px wide and 295 high, resolution of 72ppi.

Made a new layer and we are away.

Start by choosing a nice background colour for the image. I’m using a nice blue (#008bec) as the base.

On the new layer, use the gradient tool gradient and set it to foreground colour to transparent gradselec

make your gradient from the bottom of your image to about 3/4 of the way to the top.

Select eraser > eraser and set it to a soft brush about 170px

erasersoft

and start hacking into the top of your gradient with it. avoid editing the edges and just hit the top and middle.

hackedgrad

That’s what i have now.

and i just put a Gaussian blur on it at a radius of 40px just to soften it up a bit.

so that’s our base done. now we need to add a little depth to it.

Using the pen tool pen im going to make some smooth shapes over the top of the base.

wisp 1

And the right click and make selection, set feather to about 20px, its up to you though. Then go over it with the eraser (it will bring up a dialogue box asking if you wish to rasterize the image. Click OK)

should look something like this

wisp2

Next step is to add some sections of light to the gradient,

grab the brush tool > select a soft brush and your size, I’m using 70px. and set it to white.

On a new layer just do a little bit of painting.

whitepaint

Hit that layer with some Gaussian blur. I’m using a radius of 26px. and then bringing the layer opacity down to about 60%.

Try doing that same trick with a diffrent colour, using strong contrast colours can look pretty sweet…I’m going to run with the dark green, which is pretty standard to vista. but try some different colours and you will get sweet results.

The trick with strong contrast colours is it make them very transparent and blurred to mix in better.

Keep throwing around those few ideas with the pen tool and brush/blur tools, and just try and mix in some other colours as well.

Good luck

footer image

Oh P.S if you managed to avoid editing the edges of your gradient at all, you should be able to grab a pixel wide strip (top to bottom) from each end and repeat them on your web page depending on how you actually implement it to your page.

Advertisements