Creating Transparent Graphics

1
Creating Transparent Graphics

• Photoshop CS2

2
Transparent Graphics

• In Chapter 10 you will learn several techniques
  for creating transparent GIFs.
• Youll also learn how to simulate transparency
  with the JPEG format
• GIF transparencies can produce unwanted halos
  around the graphics, you will learn tools to help
  counter this problem

3
Transparent Graphics

• All computer-generated graphics are rectangular
  or square
• You can work around the rectangular limitation by
  creating transparent GIFS
• Currently, GIF is the only file format in wide
  use on the Web that supports transparency

4
Limitations of GIF Transparency

• Graphics with soft edges, such as drop shadows,
  glows, feathered edges, or anti-aliased edges use
  an 8-bit (or 256 level) transparency. As a
  result, edges appear smooth.
• GIF file formats supports only 1-bit masking
  instead of 8-bit transparency which means pixels
  in a GIF are either fully transparent or fully
  opaque.
• The 1-bit masking limitation causes unattractive
  halos (sometimes called a fringe or matte)
• (see page 297 for examples)

5
Transparent Layers

• Transparent layers are recognized by the
  checkerboard pattern in the background of images.

6
GIFs, Masks, Transparency

• GIF A file format for optimizing Web graphics.
  Best used for flat or simple graphic images.
• Masks hide the visibility of specific areas of
  an image.
• Transparent means you can see through pixels
  to images or layers below.
• Transparent GIF include an invisible mask that
  hides and shows transparent areas of the image in
  a Web browser.

7
Transparent GIFs

• If youre designing a Web site with a flat,
  single-color background color, you can
  incorporate that color into the background of
  your image, but,
• If your background image is made with a pattern
  or a photograph, your foreground image will not
  line up correctly with the background image you
  end up with an unwanted offset.

8
Creating Transparent GIFs

• Choosing the Image selection from the Output
  settings tells ImageReady CS2 you want to specify
  the image as a foreground image, not a background
  image.

9
Transparent GIFs

• Output Settings dialog box
• Choose the image from your computer that you want
  to use as a background image

10
Transparent GIFs

• Preview in browser to see your results and notice
  the transparency settings are working

11
Fixing Edges of Transparent GIFs

• To remove the halo that is around the image,
  select the background color with the eyedropper
• Choose Foreground Color from the Matte pop-up
  menu in the Optimize panel

12
Fixing Edges of Transparent GIFs

• In the Original image you can see the edges fade
  from opaque to transparent
• In the optimized image (Preview tab) you an see
  the edges fade to beige

13

• TIP
• Switching back to the Original tab is important.
  You can only edit your image when the Original
  tab is active

14
Fixing Soft Edges

• When you add a glow the matte color surrounds the
  glow
• The image glow keeps its integrity when previewed
  in the browser

15
Create Transparent GIFs from Nontransparent Images

• With a nontransparent image open in Photoshop
  click File gt Save for Web
• Select the Gif and Transparency options, notice
  that nothing happens because the image does not
  contain any transparent pixels

16
Create Transparent GIFs from Nontransparent Images

• With the eyedropper tool, select the light green
  color around the outside of the image

17
Create Transparent GIFs from Nontransparent Images

• Click the Map Transparency button on located on
  the bottom of the color table

18
Create Transparent GIFs from Nontransparent Images

• The light green pixels turn to transparent pixels
  indicated by the checkerboard pattern

19
Create Transparent GIFs from Nontransparent Images

• To create transparent pixels in the image itself
  use the Magic Eraser from the Toolbox, works best
  on solid colors

20
Simulate Transparency with JPEGs

• So far weve learned how to optimize transparency
  as GIFs because GIF is currently the only Web
  file format that supports transparency.
• But, what if you have a continuous tone image,
  such as a photograph with areas of transparency?
• Well simulate transparency using the JPEG file
  format, but there are limitations

21
Simulate Transparency with JPEGs

• From the Optimize palette select a Matte color to
  match the BG of your image
• Choose Preview and see the transparent pixels
  turn to the background color
• Works best with flat colors rather than patterned
  backgrounds