Skip navigation
gooberHead
Currently Being Moderated

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

Feb 23, 2014 10:13 AM

Tags: #transition #edge #blue

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:

 

fadeYoSelf.png

 

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!

 
Replies
  • Currently Being Moderated
    Feb 23, 2014 10:33 AM   in reply to gooberHead

    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.

     
    |
    Mark as:
  • Trevor Dennis
    5,905 posts
    May 24, 2010
    Currently Being Moderated
    Feb 23, 2014 2:57 PM   in reply to gooberHead

    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.

    Man blend.JPG

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2014 3:09 PM   in reply to Trevor Dennis

    I don't disagree with either csubele or Trevor - however a bit of an update (excuse the pun) since the update before last you no longer need to alt/opt click to convert a background layer to a regular layer. You only need to click on the padlock (with no modifier key) - that is as long as you are using CC.

     
    |
    Mark as:
  • Trevor Dennis
    5,905 posts
    May 24, 2010
    Currently Being Moderated
    Feb 23, 2014 3:25 PM   in reply to John_Picton

    I am not completely sure if I like that particular JDI.  Of course, it is hard to go back and test the 'before' state, but it feels too easy to actually delete the BG layer now.  That also feels like a nonsensical thing to say, because why the heck would you delete _any_ layer inadvertently, but my intuition tells me there's a compromise going on.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2014 3:36 PM   in reply to Trevor Dennis

    Completly agree that there should be a way to either turn on or turn off the default behavior for this "feature". But it is there.

     
    |
    Mark as:
  • Noel Carboni
    23,488 posts
    Dec 23, 2006
    Currently Being Moderated
    Feb 23, 2014 5:10 PM   in reply to gooberHead

    That's a nice presentation - good job.

     

    -Noel

     
    |
    Mark as:
  • Trevor Dennis
    5,905 posts
    May 24, 2010
    Currently Being Moderated
    Feb 23, 2014 5:58 PM   in reply to Noel Carboni

    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?

     

     
    |
    Mark as:
  • Noel Carboni
    23,488 posts
    Dec 23, 2006
    Currently Being Moderated
    Feb 23, 2014 6:02 PM   in reply to Trevor Dennis

    Here, of course:  http://delorean.com/

     

    -Noel

     
    |
    Mark as:
  • Trevor Dennis
    5,905 posts
    May 24, 2010
    Currently Being Moderated
    Feb 23, 2014 6:54 PM   in reply to Noel Carboni

    [croaky voice]

     

    I wasn't going to post this, because it took me years to get right, and I thought you'd have forgotten about it, but I thought 'What the heck?'.  Programmed February 24th, all those years ago back in 2014, and the thread was still there.  BTW Adobe customer support still sucks in 2024 .

     

    [\croaky voice]

     

    Flux Capacitor.jpg

     
    |
    Mark as:
  • Noel Carboni
    23,488 posts
    Dec 23, 2006
    Currently Being Moderated
    Feb 23, 2014 7:09 PM   in reply to Trevor Dennis

    I recognize Doc (Russell) Brown's hair. 

     

    -Noel

     
    |
    Mark as:
  • Trevor Dennis
    5,905 posts
    May 24, 2010
    Currently Being Moderated
    Feb 23, 2014 7:18 PM   in reply to Noel Carboni

    Brush set from a recent thread.  Well worth downloading

     

    http://castrochew.deviantart.com/art/Skin-and-Hair-Texture-Brushes-256 198997

     
    |
    Mark as:
  • Noel Carboni
    23,488 posts
    Dec 23, 2006
    Currently Being Moderated
    Feb 23, 2014 7:35 PM   in reply to gooberHead

    You might be surprised to know I'm a software engineer, gooberHead. 

     

    But I do have to have a good sense of humor - I'm running Windows 8.1.

     

    -Noel

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2014 9:35 PM   in reply to John_Picton

    I like the single click to change a background layer to a regular layer, but the other method still works with all versions of PS including CC. 

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points