Disclosure: We are a professional review site that receives compensation from the companies whose products we review. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.

Have you ever created or found that perfect background image but it just wouldn’t work on your website or your design project because you couldn’t repeat the pattern or just looked” funny” when the background image met the background color? Or have you ever wanted to learn how to fade images so it looks like it blends in the background of your text area? If, so I have created a tutorial that will help create this effect.

Recently, I was working on a design for a website and one of the requirements was a trendy image of their products with text about the project. When, they request was made, the first thing that popped into my head was the fading technique. After some testing, I was able to perfect this method. There several different ways to go about this, but for me this is the easiest and the fasted. After creating several images, I search for tutorials on this effect. I found several of them, but they were not very happy. So today, I thought I would create a tutorial based on how I did it and try to add as much info as I could. If I am missing a step, please let me know by commenting. I will try and explain those steps and update the tutorial…

This tutorial was created with Adobe PhotoShop CS4 but will work with all CS versions. The tutorial is very easy to do and can be done in less than 10 minutes once you learn how to do it. Fading an image tutorial is designed for beginner Photoshop users.

1. Image Prep

The first thing you want to do is choose the right images for this effect. If you choose the wrong one, it won’t look all that good. After doing the effect on several pictures you will start to understand what pictures will work and ones that will not work. After choosing the image, you will need to color correct, adjust brightness/darkness and anything else that will make the image look good. This type of effect works great for marketing products, logos, and backgrounds. So the better the image, the more dramatic the end product will be.

2. Creating Layers

Once you have your image ready, create a copy of your background layer( should be your image). To do this, you can select the layer you want to duplicate in the layers panel and then go to the top menu options and select Layer >>> Duplicate >> rename your new copied layer to “working” >>> click OK. Then go to your layers panels and and click the eye button to the right of the original image. This will turn off the original copy. By doing this, you will have a backup image. This way, you can always go back to the original copy quickly by deleting the new layers.

Then go the layers button at the top menu and click layers >>> select >>> New >>>Layer >>> Name the layer gradient  and make sure the color is set to transparent (none) >>> click OK.

3. Setup Gradient

Next, you will need to setup your gradient. You want to choose foreground to transparent. To setup your gradient, you can go to the Paint Bucket Tool on the left horizontal toolbar. Right click and select Gradient Tool. Then at the top menu bar toward the right side you will see the gradient options. Double click on edit gradient and look for the foreground to transparent option. Once you click on it should show up on the gradient name under the presets.

4. Applying the Gradient

After you set the gradient, you will want to create the gradient. Make sure your new transparent layer is selected. Then make sure you have a color selected.  For this example I used white since the completed image will displayed on an white background. But you can use any color you want. Later I will show how to use a different color.

Once you have the color selected and the gradient tool selected, start at the bottom of the image close to the center and hold the shift button down (if you want a straight line) and draw the line to about halfway to the top. If you want more of the background color to show through, then draw the line higher or apply the gradient again. The below image, I had to apply it twice.

5. Applying Text

The above image is what the gradient should look like. If you do not like the results you can apply the gradient again or go into the gradient editor and play with the settings and try again.

After getting the gradient the way you like it, then you can add text if you want. Add text to the bottom as big as you need it. Start in the solid color and only let a small part of the text go into the fading part.

NOTE: Styling the text through the layer panel properties is a great way to add a little pop to the text.

6. Final Results

How to Create a Fade for a Non White Color for a Website Background

If you wanted to create an abstract image image and fade it into your website’s background color. You could do that as well. By doing this, you are creating an almost seamless background for your site.

Why Would I Want to Fade my Background Image?

Sometimes when you create an image for a background and even if you choose the right background color, you can sometimes tell where the background image ends and the background color starts. By fading your image with the same color as your background, you will make it a little hard to see that seam. Mostly likely you will be the only one that can still see the seam.

To created a faded background works the same way as doing a white background but you have a few more steps. For this part of the tutorial, we assume you already know how to a fade an image. If not, please go back and try the first part of the tutorial again.

1. Setting Up the Gradient Layer

After setting up your new transparent layer, you will need to choose the right color for the gradient. The easiest way to do that is to get your hex code for the background from your websites CSS/HTML code.  Then click on the “set foreground color button on the left side horizontal button. This should open up the Color Picker. You can then enter the hex code into the bottom left column field with the “#” out to the left of the field. This will then set your foreground color. For this example I used #262626 (dark grey)

If you would rather set a color based on the color of the image then you could use the color picker eye dropper to select a color. To get this to work, just move the mouse off the color picker. The eyedropper appears. Then just move the mouse over the image and choose the color you like the best.

2. Appling the Gradient

Make sure you have the transparent layer selected and start in the middle at the bottom of the image then left click and drag the mouse about halfway up the screen and release.

You may have to do this several times, if you have a bright and colorful image. If you need to, you could also select different parts of the button edge and run the gradient again. You could come from the corner and moveto the center. To give the blending a little of a curve to it. If you need to blend the sides in as well, you can also run the gradient the same was on the sides as we did on the bottom.

3. Final Results

What do you guys think? Ever try it? If you have any questions, or if the tutorial is no working for me, please comment and example to us was happening. If I need to I will update the tutorial or explain it in the comments. If you tried out the tutorial, share your results with us!