Your Customers are Mobile, you will be too …

In this tutorial we will be showing how to create an amazing background blending images into a standard gradient background. For this we will be using the color dodge tool and a gradient mask in Photoshop CS5. We will then combine a few CSS tricks to create our background for a website.

When Completed we should have a back ground image that looks something like this:This is down one side of a website I am working on. The background itself slide under the edge of the page itself where the shadow can be seen.


Photoshop CS5: Blending Images into a Website Background

We will break this up into a few easier to understand steps.

  1. Create a gradient image for our back ground
  2. Add our color dodge to to the image
  3. Apply a gradient over to it.
  4. Add the image to our background and complete its blending

Creating our Gradient Background Image.

Open a new file in photoshop and make it 1px wide by say 800px high. Add a box to the image that takes up the entire image and change its fill to a linear gradient. Now you should already have your websites color scheme already set up before you got this far. Change the gradient colors to colors that match your color scheme.

Save for web and devices using the best quality you can for the smallest file size. This may take some fiddling with various file types but but keep that file size as small possible. Keep your color schemes from this image handy as we will need them in the next step.

Photoshop CS5 Adding Color Dodge to an Image.

This is a simple process. Now that we have your gradient image ready and decided where this image is to be blended into the site we can begin. If you want this particular image to blend in at the top of of the background somewhere you need to set your foreground color to this color. Naturally if you wish to have your image blend into the bottom of the website background you need the color your gradient had at the bottom of the gradient image.

Right click on your background image in photoshop and select Layer from Background. Give this layer whatever name you like, the point is we need to ensure we are not using an image that has the background layer properties. It would be a good idea at this time to save your file under another name now so that we do not destroy the original image.

Now select the rectangle tool and draw a rectangle over the top of the entire image. Drop this layer down below the image we wish to use. Your photo should now be on top of the rectangle you just used. Select your blend mode:Click on it and when the popup menu appears change your blend mode to color dodge. Your image should have this sort of effect applied to it now.

So we now have our color dodge applied so time to move onto applying our gradient mask.

Photoshop CS5: Adding a Gradient Mask

Now we need to apply a transparent gradient mask to our image so the edge of our image will begin to blend with the gradient that will be behind it. To begin this we need to add a layer mask by hitting the Add Layer Mask button on our layers palette.Once you have done that our layers palette should look alittle like this:Ensure that the layer mask I have circle is the active item in our layers palette and go select the Gradient tool. Make sure that you are set to linear gradient and that Transparency is ticked.

Now if we want our image sit up the top of our background we need our gradient to eliminate the bottom edge of our image. So apply our gradient there for now. But what if we wanted to add a second gradient. Right now you can’t but as we need to for this image we now need to change the gradient mode to multiply.Now we can add as many gradients as we like. So if we want our image to occupy the top left corner we can now fade out the right side of the image to remove its edge and do the same across the bottom right corner.

Now if we reduce the images opacity to 80 or 90% we can give our image one last boost to make it blend nicely into our background.

Now once you are happy with your transparent gradients it is now time to Save for Web and Devices and move onto adding our images to our background with CSS. Be sure to keep your transparency when you save the image.

CSS: Combining our images into our Background.

Last step in our process is putting it all together in our browser. We will be doing this with a one easy CSS trick.

body {
  background-image: url(images/example.gif), url(images/bggradient.png);
  background-repeat: no-repeat, repeat-x;
  background-position: top left, top left;

We can now add both images as part of the background. By using 2 images instead of one big image we can save a lot on our file sizes and therefor our bandwidth. Remember to put the image you want underneath at the end of the image list or it will cover any other images we use. This is one side of a web site I am working on and how it turned out.

Hope this was helpful to you all and see you again soon.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: