Optimizing Photos for Web

Optimization is the process of fine- tuning the display quality and file size of an image for use on the Web or other online media.

**Do NOT use Dreamweaver to resize your images--Please use only Photoshop**

RESOLUTION:

When you create a graphic for the Web, you must think in pixels, not in inches, millimeters etc. The resolution measurement used with the graphics and photos for print (pixels/inch) is useless on the web. The web browser measures the width and the height of a graphic in pixels, no matter if the graphic is 72 pixels/inch or 300 pixels/inch (ppi - pixels per inch). So, a 200x300 graphic looks the same size on the monitor with either 72ppi or 300ppi.

COLOR:

Only RGB! Browsers don’t understand other color modes such as CMYK, Lab and Multichannel,
Saving JPG files with the Save as.. command

SAVE AS ...

In the Image Options section you specify the quality and the size of the saved file. The higher the quality, the higher th

e file size.
In the Format Options sect

ion you can chose from three JPG encoding options:
- Baseline (Standard) - You will leave this option selected almost always as this type of encoding is supported by

all browsers, even the oldest versions. Choosing this option you make your file "user friendly"

as there will not be people which cannot see your graphic.
- Baseline Optimized - This is a newer compressing algorithm that produces slightly better image quality, but it's not fully compatible with some old browsers.
- Progressive - This option produces a photo, that will display gradually (in a series of scans) when it is downloaded to the browser. With the first scan, a low quality image will be displayed, then, with the second scan will appear a better quality graphic and with the final scan will appear the high quality final graphic. You can specify the number of scans from 3 to 5. The Progressive mode produces larger files and is not supported by all browsers.

SAVE FOR WEB

Once you are ready with the image corrections and you have the image with the proper pixel dimensions, then:

Go to File > Save For Web...

The "Save for Web" command is an easy and comfortable way to save graphics for the Web. It allows you to save files for the web in GIF, JPEG and PNG formats directly from a Photoshop file, and most important, without affecting the original. You can also resize the photo (the graphic).
Another good thing with the "Save for web" is that you can work with slices, saving each slice with different settings. The slices can be saved with or without the HTML code.

In "Save for Web" window you can see both the original of the graphic and the optimization preview side-by-side. This will help you to optimize the graphic making it to look very close to the original, retaining a small file size.
As we mentioned above, you can easy work with slices here. Just pick-up the slice selection tool, select a slice and assign it the desired saving options.
On the bottom of the window you will see file size and the average download time.
All other options are the same as with the "Save As.." command.

Step by Step guide to using Save As.

(from:http://www.e-cobo.com/design_tips/grdesign/optimizing_graphics_for_web.php)

Moving it>Gif Creation

What is Animation?
At its most basic, an animation is a series of images presented in rapid sequence to produce the illusion of motion. Many people make a distinction between animation as non-photographic artwork presented in this way, and movies as photographic images presented in sequence; but conceptually they’re very similar.

Reasons to Use Animation:

• Calls attention to something
• Illustrate a point that cannot be made with static images
• Entertainment

Reasons not to Use Animation:

• Distracting
• Can look unprofessional
• Will add load time to websites
  

Image Ready?
ImageReady has fewer features than Photoshop and is designed for quick editing of web graphics rather than effects-intensive graphics editing. ImageReady is a "pixel-based animation tool". This means that it stores the aimations as frames where each varies from the next based on differences in small square dots of color that used to display thins on the screenTo that end, ImageReady has such features as animated GIF creation, image compression optimization, slices for creating rollover effects, and HTML generation.

Tips and tutorials for creating animated GIFs and other animations with Adobe Photoshop and Imageready.

In Class Example

Easy:
Shake Effect

Snow Globe--create a Christmas wonderland

Harder
Animated TV

Moving Sunset

Invisible Text

Hardest:
Creating Giffs using movies