Designing vertical gradient background image
First of all, why you would bother with creating gradient images for web pages? Well it’s quite important to create and use subtle and eye-catchy color combinations and transitions to achieve modern and stylish effect for your web site.
Step 1: create an image
Select "file/new" and set the width and height for new image. In the most cases width set to 1 px. Height may vary depending on how you going to apply the background image to a web page. E.g. web page where this tutorial loaded, has background gradient image with 1 px wide and 596 px height.
Step 2: set colours
Now you need to decide on the colours. Depending of the font colour of your web page. Ensure that your text is visible on the both sides – the darkest shade and on the lightest part of the background.
Step 3: select the image
Select the image with the rectangular marquee tool
Step 4: activate gradient tool
Click on the gradient tool .
Step 5: open ‘Gradient editor’
click on the gradient tool to open ‘Gradient editor’. The colours loaded into ‘Gradient editor’ are determined by the colours you have selected for background and foreground.
Step 6: work with ‘Gradient editor’
Choose different colours for background and foreground and watch how the gradient changed. Remember about visibility of the text on web page on a dark background and on a light one.
Gradient options window has various options for setting the gradient. You can test various settings to get the desired result.
Step 7: fill the image
Place the pointer/cursor inside the image in left corner and drag to the right and the fill should now be applied to your image. If it doesn't work make sure the options window is still active and do it again.
Step 8: save the image
Now save your image. Please note: Sometimes, if you view the background on different computers or browsers you will see the different colours separated. This is called banding. A .gif image is limited to 256 colours. So for .gif images it is recommended to select dithering, which will prevent banding. If you choose to save the image as a .jpg, select millions of colours instead of thousands. If your background is still banded try adding a tiny bit of noise to the image.
| Step 4: activate gradient tool | |
| Step 5: open ‘Gradient editor’ | |
| Step 6: work with ‘Gradient editor’ Choose different colours for background and foreground and watch how the gradient changed. Remember about visibility of the text on web page on a dark background and on a light one. | |
Other SoftFern tutorials, related to Gradients in Photoshop