Photoshop Gradients

March 23, 2004 1:16 PM

Photoshop gurus: I've got a rectangular photo, which I plop down in the middle of a colored background. I'd like to create a smooth transparency gradient in the photo with respect to the background (more transparent at the top, opaque at the bottom). How would one do this?

(Specifically, I'm contructing a header image for a website... the top of the header is a solid color, with logo, etc. in it, while the bottom of the header is the photo. I'd like the solid area to dissolve into the photo).

Thanks- if anyone ever needs PHP/Postgresql advice, let me know!
posted by gsteff to computers & internet (6 comments total)

Add the photo as a layer on top of the background. Then, go to Layer->Add Layer Mask->Reveal All. Go to the Channels window (grouped with layers, on the right, usually) and select the layer mask that has been created. Use the gradient tool to make the part of the image you want transparent have a black layer mask. When you're done, click the RGB channel to go back to editing the image.
posted by yarmond at 1:30 PM on March 23, 2004

> Create a new layer (optional, I guess).
> Create a background color to transparent gradient (in Photoshop CS this is on the toolbar, directly to the right of the brush type -- you'll want to use the one that's a solid color going to the little checkerboard pattern -- which signifies transparency) using the linear gradient tool on this new layer.
> The gradient begins where you START the line of gradient tool and goes completely transparent where the line ends, so in your case you'd like to start near the bottom of the photo, and go towards the top.

(the gradient tool is the little button that, uh, looks like a gradient)

There are a million other ways to do this too, using regular gradients and then different types of matting/layer mixing options, but hopefully that'll work for you.

if you have a different (read: way old) version of photoshop the method *could* be a little different.
posted by fishfucker at 1:31 PM on March 23, 2004

(yarmond's way is much more versatile, as you could make a gradient to something that wasn't a single-color background -- so that's probably the one you should use).
posted by fishfucker at 1:33 PM on March 23, 2004

Put the photo on a layer on top of your background color.

On the photo layer, enter quick mask mode (press Q). Use the gradient tool to draw a gradient from white (fully opaque) to black (fully transparent) on top of the image. Press Q to exit quick mask mode. Press Delete to delete the selected part of the image and reveal the background color below.

If the wrong part got deleted, Undo, Select > Inverse, Delete again.

Flatten image.
posted by kindall at 4:14 PM on March 23, 2004

Or don't flatten it. Rather, save the layered file as a PSD, in case you need to edit it, and then use Photoshop's "Save for Web ..." command to save out a JPEG version.

Also, I'd recommend yarmond's method over kindall's, as a layer mask doesn't actually delete pixels you might want to get back later. (Or, use kindall's, but duplicate the photo layer first and work on the duplicate. Just hide the original layer.)
posted by macrone at 4:53 PM on March 23, 2004

Well, presumably, when you paste the photo in, you're pasting it in from somewhere. You'd keep the source document, obviously.
posted by kindall at 5:52 PM on March 23, 2004