| Effective use of Photoshop: | | | | |
| | | | |
| Applying a Drop Shadow | | | | |
| | | | | |
| Solution | | | | Saving as a transparent GIF |
| Choose the layer to which you wish to apply the | | | | |
| drop shadow, and select Layer > | | | | Discussion |
| Layer Style > Drop Shadow. Adjust the opacity, | | | | Images with curved, smooth edges, like the one in |
| angle, distance, and other settings in the Layer Style | | | | this example, maintain the illusion of crisp edges as a |
| dialog box until you're satisfied. | | | | result of anti-aliasing -- partially transparent pixels are |
| Note that the value for Angle will affect all drop | | | | added onto the edges of the image to smooth them, |
| shadows in your document, so that the light source is | | | | as shown below. |
| consistent across your entire image. | | | | However, when you save an image as a GIF, these |
| Dragging your Shadow | | | | partially transparent pixels are saved as |
| You can also click directly in the document window | | | | non-transparent pixels where white are the default |
| and drag the drop shadow around, as shown here. | | | | "background". |
| Make sure Drop Shadow is highlighted in the Layer | | | | |
| Style dialog box, otherwise this won't work! | | | | |
| | | | Close-up of anti-aliased shape |
| Moving the drop shadow | | | | |
| | | | | If you're not placing this image on a white |
| Images with Transparent Backgrounds | | | | background, it might be wise to define a custom |
| | | | | matte color by clicking on the Matte arrow, as shown |
| Solution | | | | below. Otherwise, you'll end up with a white "color |
| Open a Photoshop document that contains | | | | halo" around the image. |
| transparent areas. | | | | |
| You'll see that Photoshop marks the transparent | | | | |
| areas with a gray, checkered pattern. | | | | Choosing alternate matte color |
| | | | | |
| | | | Let us place this graphic against a bright red |
| | | | | background. Click on the Matte arrow, choose |
| | | | | ‘Other’..., and select a bright red. |
| Document with background layer turned off | | | | |
| | | | | |
| Select File > Save For Web..., or press | | | | |
| Shift-Alt-Ctrl-S (Shift-Option-Command-S on a Mac). | | | | Setting a bright red matte color |
| In the dialog box that appears, choose GIF and | | | | Now you'll be able to see a red color halo around the |
| check the Transparency option, as shown in the | | | | graphic. If you zoom in, you'll see that those |
| image to the right. | | | | anti-aliased pixels behave as though they're sitting on |
| While both GIFs and PNGs support transparency, | | | | a red background. |
| some browsers (including Internet Explorer 6) donot | | | | |
| support PNG transparency. For this reason, we | | | | |
| recommend that you use GIFs to meet your | | | | Close-up of color halo |
| transparent image needs. Click Save and name your | | | | |
| file. | | | | Click the Save button to save your image. |