"I need an ad for the company home page advertising our spring sale," your supervisor says.
"Can you turn it around in the next hour?"
"The next hour?" you reply. "Just give me five minutes!"
The next thing you know, you're getting a raise in the time that i
t takes you to make a layer mask.
One of the best Photoshop tools to have in your arsenal is an
understanding of how to use Layer Masks to "fade" pictures (a thre
e-minut
e browsing session on your favorite Websites will show that lots of people use this effect). Not only do
es the effect look professional, it's quick to achieve. Within seconds, you'll ha
ve a sharp-looking image for your Website... and you might even impress a few supervisors while you're at it! Who would pass up an opportunity like that?
In this article, we'll show you two ways to use Layer Masks to fade pic
tures. A
s you learn how to use Layer Masks, you'll also pick up other sk
ills in Photoshop:
- Get images into a Photoshop document
- Work with layers
- Use the gradient, brush, and move tools
- Resize images and layers
Eager to get started? Open Photoshop, find a few graphic files that y
ou'd like to work with, and let's go!
The Basic FadeFirst, let's look at creating a basic fade effect that will result in an image like
this:
Open your original photo in Photoshop.
Since this tulip photo was from my digital camera, it was a whopping 1920x2560 pixels. If your image is a lot bigger than the size of the final Web image that you want to create, click on "Image," then select "Image Size," and specify a new width and height for your image. I resized my image to a workable 300x400 pixels.
Starting Your New Document
To preserve the original photo, we'll create a new document. Go to "
File", click on "New", and specify a new document with the dimensions that you want
your final i
mage to have (we created a new, 200x300 pixel document). Then, go back to the original image and type Ctrl-A. This will select everything in the image. Type Ctrl-C to copy, an
d then close the image without saving. In the brand new document, type Ctrl-V to paste your photo. You should now have a new 200x300 Photoshop document in w
hich your original photo a
ppears on its own layer.
If the photo is bigger than the new document, don't worry -- this is good! We'll discuss how to change the size later, but for now, we'll just focus on creating the fade effect.
Let's add a layer mask. With the Layers Palette open, click the "Mask" icon at the bottom of the palette.
This will add a layer mask, which you can see as a linked rectangle next to the picture.
Working With the Layer Mask
A layer mask is essentially a black and white "image." You can paint on the layer mask in white, black, and any shade of grey. White areas will allow the picture to show thro
ugh; black areas will hide the picture. Shades of grey will affect the transp
arency -- also known as the opacity -- of the picture. For now, we'll create a simple black-to-white gradient on the layer mask. To do that, first select the Gradient Tool from the tool palette (you can hit the "g" key o
n the keyboard, as well, to toggle between the Gradient Tool and the Paint Bucke
t Tool).
Set your foreground color to black and your background color to wh
ite. You may click on the foreground and background boxes in the tool pal
ette and choose the colors. Or, if your foreground is already white and your backgr
ound is black, click the arrow icon to switch them.
Click once on the layer mask to make sure that you're "on" it, so that you don't accidentally paint your picture black! Then, click at the bottom of the picture, hold the mouse, and drag the mouse straight up. You can hold the shift key while you drag to "force" the cursor to move in a straight line. Move the cursor up to about where you want the fade to "end," and let go.
And there you have it -- your first beautiful fade using a layer mask!
Now, as I look at the picture, I decide that I don't like the way the fade "hides" part of that tulip. In fact, I want to somehow move the whole picture "up," but leave the gradie
nt the same. The beautiful thing about layer masks is that this is possible!
A quick word about the wrong way to achieve this effect: It would have bee
n just as easy (and saved a few steps) to set the gradient tool to a white-t
o-transparent gradient, then add a white gradient to the bottom of
the picture layer. The problem with this approach is that the white gradient becomes a permanent part of your picture. You can't move the picture or the gradient around and, if you decide you don't like the gradient several steps down the road, you c
an't get rid of it without losing any other changes that you've made.
All of this should convince you that layer masks are awesome!
Back to the how-to: in the Layers palette, you'll see a little "link" icon t
hat connects the picture to the layer mask. Click the link icon to "unl
ink" the picture and layer mask.
Click somewhere within the document, hold the mouse button down, and drag your mouse to move the layer around. I moved the tulip up to fill most of the picture.
Note that this step can only really happen if your picture is actually larger than the canvas size. Recall that the pasted-in picture was 300x400 pixels wide, while our
actual document canvas size is 200x300 pixels.
Finally, add the text, select "save the picture for Web," and email it to your supervisor.
Here's an extra tip. What if you want the image to blend into a site that has a different background color? The answer is simple -- use the paint bucket to fill in the Background layer with your desired color. Another beautiful aspect of layer masks is tha t they change the actual transparency of parts of the image, so you can overlay the picture on any background! The picture below shows the colored Background layer, and our perfectly fading tulip and ad copy.
Sumber : posted by Gusdiwanto
