Effective use of 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. Adjust the opacity, angle, distance, and other settings in the Layer Style dialog box until you’re satisfied.

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, we 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 are the default “background”.

 



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 us 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

go to the main articles

 

 

Read more web design articles