Thought I would whip up a quick tutorial on how to do a cool vista style background for your footer or head background.
Main tools used will be:
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.
make your gradient from the bottom of your image to about 3/4 of the way to the top.
and start hacking into the top of your gradient with it. avoid editing the edges and just hit the top and middle.
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.
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
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.
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.
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.