Debbie offers hands-on, one-on-one Web design training
Contact Debbie for details

Agenda
-Let's walk through the process of creating and saving images
-Those scary technical terms defined
-Lots of tips, tricks and shortcuts!

What's This RGB Thing All About?
-RGB=Red, Green, Blue RGB=millions of colors
-millions of colors=true color (more color than the human eye can see)

Image Measurements
-Pixel
-Your monitor is made up of pixels
-pixel=picture element pixel=unit of measurement for the Web

3 Things That Affect File Size
-The dimensions of the image
-The number of colors in the image
-The file format (GIF vs. JPG)

GIF
-Solid-colored images
-Logos, clipart and illustrations
-Can be saved with 256 color max.
-All images are saved in the shape of a rectangle
-GIF Transparency /GIF 89a
-Interlaced GIFs (image loads in stages and appears to load quickly)

Remember: ALL images are saved in the shape of a rectangle
*if you're going to place an image on a colored background and you want the image to blend into the background seamlessly, create a transparent gif

JPEG
-Used for continuous-tone images
-Photos, gradients
-Save images in RGB color
-Progressive JPEGs (image loads in stages and appears to load quickly)

GIF vs. JPG
-GIF decreases image file size by deleting color
-Gif uses lossless compression (no quality is lost)
-JPEG decreases image file size by deleting image data
-JPEG uses lossy compression (quality can be destroyed)

Creating Background Images
-Create a 100-by-100 pixel image file
-Image repeats up and down and across the screen
DO NOT interlace background images

TIP AND TRICKS
LOW SRC
-Create 2 versions of a large image
1-large color image
2-grayscale or b/w image that loads first and more quickly

Slice An Image into Smaller Pieces
-Use a graphics program to slice and dice a large image
-Slice an image into no more than 6 pieces (too many slices may slow down download time)
-Piece images back together again inside of a table

Photoshop 5.5 NEW WEB FEATURES
-Indexed Color Palette
*Perceptual: Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.

*Selective:Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of Web colors. This color table usually produces images with the greatest color integrity. Selective is the default option.

*Matte: Save an image with a "matte" color (the same color you'll be using for your background on your Web page) so that the image will blend into the background seamlessly. This is especially useful for soft-edged images. -Save For Web *See up to 4 versions of your image all at once on-screen

*Compare different levels of JPEG and/or GIF all at once on-screen *Use up to 100 levels of compression for JPEG

Source: These lessons were developed especially for YOU by Debbie Berg :-)

WATCH FOR MORE DEB TIPS TO COME! STOP BY AND SEE MY NEW DEB TIP EACH MONTH...

back to top

about debbie | debbie's clients | deb's schedule | deb's monthly tip
flawebdeb home | dreamweaver | flash | frontpage | photoshop
web seminar | digital design camp | dreamweaver/flash conference