Gradient background

Question

I bought a template and I want to change the background.

Now it is looks like this:

I have this background:

How can I make from this a gradient background like on original image?

Answer 1

1. Create a Photoshop file the height and width (I'm assuming the current width and a height of around 700 to fit in a typical 1024 x 768 screen)

2. Copy and paste the desired artwork into this file, select the selection tool (V), and move the pasted artwork to the top of the file.

3. Here's the tricky part: if your artwork is tileable, all you'll have to do is copy the artwork (option-click and drag) down; as long as snapping is still on it'll snap to place. If it's not tileable, copy the artwork as above; you'll see a seam. Go to Edit -> Transform -> Flip Vertical. This'll usually get rid of any obvious edges.

4. Merge the two layers down (Cmd+E) into one.

5. Click-drag down to create another copy of the artwork; repeat this until you've filled your file from the top to the bottom.

6. Merge all these layers (Shift+Cmd+E).

7. Create a layer mask by clicking on the Layer Mask icon in the Layers window.

8. Select the gradient tool (G) and make sure you've got a black-to-white (or white-to-black) gradient.

9. Click-drag to create a new gradient. Play with this since this will allow you to set where and how quickly the fadeout happens. When you're happy with the result save the resulting file as a .png to preserve its transparency.

10. Make sure you set the background color in your CSS sheet (or in-line CSS) to whatever you want - the nice thing about using an image with alpha properties is you're not stuck having to fade to just white.

11. Crack beer, lean back and enjoy the visual results. This step is critical.