Web Domination Using Photoshop

Applying a Drop Shadow

Solution

Choose the layer to which you wish to apply the drop shadow, and select Layer >
Layer Style > Drop Shadow. Play with the opacity, angle, distance, and other settings in the Layer Style dialog box until you're happy with the effect.

Note that the value for Angle will affect all drop shadows in your document, so that the light source is consistent across your entire image.

Dragging your Shadow
You can also click directly in the document window and drag the drop shadow around, as shown here. Make sure Drop Shadow is highlighted in the Layer Style dialog box, otherwise this won't work!

Moving the drop shadow

Images with Transparent Backgrounds

Solution

Open a Photoshop document that contains transparent areas.

You'll see that Photoshop marks the transparent areas with a gray, checkered pattern.

Document with background layer turned off

Select File > Save For Web..., or press Shift-Alt-Ctrl-S (Shift-Option-Command-S on a Mac). In the dialog box that appears, choose GIF and check the Transparency option, as shown in the image to the right.

While both GIFs and PNGs support transparency, some browsers (including Internet Explorer 6) donot support PNG transparency. For this reason, I'd recommend that you use GIFs to meet your transparent image needs. Click Save and name your file.

Saving as a transparent GIF

Discussion

Images with curved, smooth edges, like the one in this example, maintain the illusion of crisp edges as a result of anti-aliasing -- partially transparent pixels are added onto the edges of the image to smooth them, as shown below.

However, when you save an image as a GIF, these partially transparent pixels are saved as non-transparent pixels where white is the default "background" color.

Close-up of anti-aliased shape

If you're not placing this image on a white background, it might be wise to define a custom matte color by clicking on the Matte arrow, as shown below. Otherwise, you'll end up with a white "color halo" around the image.

Choosing alternate matte color

Let's say that we're going to place this graphic against a bright red background. Click on the Matte arrow, choose Other..., and select a bright red.

Setting a bright red matte color

Now you'll be able to see a red color halo around the graphic. If you zoom in, you'll see that those anti-aliased pixels behave as though they're sitting on a red background.

Close-up of color halo

Click the Save button to save your image.

No matte vs red matte

Summary

In this chapter, we looked at solutions to some of the basic functions that Photoshop users should master. We learned how to import graphics into a Photoshop document, how to resize and rotate images and selections, how to use the Shift key to constrain movements, and how to use masks and basic layer styles to create effects. We also looked at the basics of creating vector shapes and saving transparent GIFs. These skills form a great foundation for using Photoshop, and we'll definitely turn to them in the coming chapters!