Skip to main content
G
gooberHead
Participating Frequently
February 23, 2014
Question

How do I fade the edge of a picture into the background?

  • February 23, 2014
  • 2 replies
  • 25441 views

I am using the trial of PhotoShop and am learning web design. I would like to know how to fade the edges of a picture so that they gracefully transition to the background color. Allow me to illustrate:

Here is a stock photo of a kind man I purchased online and as you can see, he's sitting on top of a light blue background of my web page:

I want to provide a smoother color transition at the horizontal edges, maybe near his right elbow and left hand so that the color transitions more gradually into the background. To see what I'm trying to accomplish, navigate to http://unBounce.com and scroll down to the third band where you see an Asian man explaining something. See how the horizontal edges nicely blend into the blue background? That's what I'm trying to accomplish. I realize that the Asian photo is doing some other sophisticated and cool things like blurring the background. I don't need anything that fancy. I just want to have better edge transition via blurring or some other technique.

Sorry for the rudimentary nature of this question. Thanks!

This topic has been closed for replies.

2 replies

G
gooberHeadAuthor
Participating Frequently
February 24, 2014

Thanks so much for the help, everyone. It's much appreciated!

The approach I ended up using was:

If you take the raw picture of the man as originally downloaded from Shutterstock, you can create a background layer with the color #e8f5ff and let the picture layer sit on top of it. Then, with the picture layer selected, you can set the foreground color to #e8f5ff and choose the gradient tool -- placing it in the mode of "foreground to transparent." On the left edge I create the gradient by dragging to the right and on the right edge I create the gradient by dragging left.

What you end up with is this:

You can see that as opposed to the version of the picture in my original post, the image fits nicely on my web site's #e8f5ff background.

Thanks again for pointing me in the right direction!

Noel Carboni
Noel Carboni
Legend
February 24, 2014

That's a nice presentation - good job.

-Noel

Trevor.Dennis
Community Expert
Trevor.DennisCommunity Expert
Community Expert
February 24, 2014

Reminds me of 'Back to the Future' where people faded out of a photograph when history was changed. But I guess even Chuck's method in post #1 is easier than building a time machine.  I mean where would you even get the DeLorean

from noawadays?

Chuck Uebele
Community Expert
Chuck UebeleCommunity Expert
Community Expert
February 23, 2014

To fade the edged, you need to make your original file able to have transparency. 

holding the alt/opt key, double click on the thumbnail of the background layer to change it to a regular layer.

Add a layer mask by clicking on the mask icon in the layer's pallet.

Set your foreground color to white and you background color to black.

Select the gradient tool and use the foregound to background , and choold linear gradient.  Also set the tools blend mode to multiply.

select a distance into your image to start the gradient and then drag out to the edge holding down the shift key.  Do the same on the other side.

save your file for web using png-24.

G
gooberHeadAuthor
Participating Frequently
February 23, 2014

looks like I've got my work cut out for me. I'll give it a whirl (that's just an expression). Thanks for taking the time to read my question.

Trevor.Dennis
Community Expert
Trevor.DennisCommunity Expert
Community Expert
February 23, 2014

If you follow the above one step at a time, it honestly isn't that complicated.  I tried to think of an easier way though.

So you see here the backgound layer has the light blue colour, and the stock image of the mab is on the layer above.

If you Ctrl (Cmd) click Layer 2 to load it as a selection, and then click on the Layer mask icon (third from left at bottom of Layers panel) you will have a layer mask that looks the image above.

Now select the paint brush, and with Black as the foreground colour, a size of about 50 pixels and Hardness set to 0%, draw down each side of the black/white intersection in the layer mask.  Hold down the Shift key to force the brush to a vertical straight line. 

You need to have less than half the brush width intrude into the white of the mask.

Note:  The layer mask should have a thick white line round it (as above).  Otherwise you will paint on the image itself.

Good luck.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices