Demo 3 - Image Optimization Comparison, Anchor Links, Pop-up Windows

Part 1a: Image Optimization - Photos

We are optimizing images in Photoshop and Illustrator, first the right way, then, for comparison's sake, the wrong way. We will also make smaller versions of them that will go on a web page for users to click on and get a larger version of the image (more on that in Parts 2 and 3).

1. Create a folder called "demo3". Within this folder, create a folder called "images", and another folder called "originals. Put all of the images you brought to class today into "originals". The optimized files should be saved into the "images file" (or dragged over later).
2. Open your first digital photograph in Photoshop.
3. Go to Image>Adjustments>Levels. If need be, adjust the slider on the very left, which represents shadows, and the slider on the far right, which represents highlights so that they rest on the very edges of the black matter in the Levels dialog box. The midtones slider, in the middle, can be nudged slightly in one direction or the other. The exact adjustment will depend on your photograph, but the point is to increase contrast and richness of color in your image.
4. Save your file.
5. Now we'll compress, or export this file for the Web. Go to File>Save for Web...
6. Choose a .jpg setting that will allow your photo to look decent but not have a file size as low as possible (definitely not over 40K). The lower you can go in file size, the better.
7. Save this file as imagename_good.jpg. (by "imagename" I mean whatever you choose to name it).
8. Now go back to your Photoshop document.
9. We are now going to re-optimize the photo, but making it a .gif.
10. The file size will be hard to keep low, but do your best.
11. Save this as imagename_bad.gif.
12. Now we need smaller versions of each of these files, so open each one up and make the width 200 px wide. Go to File>Save for Web, adding "_sm" to each of the file names (i.e. imagename_good_sm.jpg and imagename_bad_sm.jpg).
13. Save this file as imagename_sm.psd.
14. Repeat steps 1-13 for your other digital photograph.
15. Make sure the optimized files are in the folder called "images". If not, drag them over.

Part 1b: Image Optimization - Graphics

1. Open your graphic file in Adobe Illustrator.
2. Go to File>Document Color Mode. Set it to RGB.
3. Go to File>Save for Web.
4. Decide if this document is a candidate for .gif optimization or .jpg optimization. Is it minimal in color range? Are there large areas of solid color? Make it a .gif. Does it have gradients or a significant amount of complexity and color variation? Make it a .jpg.
5. Save this file as imagename_good.gif (or .jpg).
6. Now, go back to the Illustrator document, and go to File>Save for Web.
7. This time, choose the opposite settings that you initially chose (i.e. if you chose .gif, make it a .jpg and vice versa). Try to keep the file size low and the quality high (tough as that might be).
8. Save this file as imagename_bad.gif (or .jpg).
9. Now we need smaller versions of each of these files, so open each one up and make the width 200 px wide. Go to File>Save for Web, adding "_sm" to each of the file names (i.e. imagename_good_sm.gif and imagename_bad_sm.jpg).
10. Save this file as imagename_sm.ai.
11. Repeat steps 1-10 for your other digital image.
12. Make sure the optimized files are in the folder called "images". If not, drag them over.