File Optimization Guide for Web: Photoshop, Illustrator, InDesign

1. How to save files for web

2. FIRST Back up all your original files (make copies)so you don’t end up accidentally ruiningyour originals. Remember, web files are going to be low-quality versions of your original files.

3. PHOTOSHOP Here’s how in Photoshop

4. To optimize files for the Web, you will change: O V E R V I E W • Resolution: Change to 72 dpi/ppi • Dimension: Change dimension of the image to be the exact dimensions you will need for the Web (not bigger or smaller) • File Format: - .jpg (on “high”) for photos- .gif for solid colors (choose #of colors needed)- .png (at 24-bit) for transparency

5. 1) View current image at 100% • Set view at 100% (lower left corner) and decide what new size you want it to appear on the screen.

6. 2) Go to Image > Image Size • Change Resolution to 72 Pixels/Inch (do this FIRST). • Change Dimensions(considering average laptop screen is set at about 1300 pixels wide).

7. 2) Go to File > Save for Web

8. 3) Choose .jpg (on high) for photos/gradients • Click “Save.”

9. ORchoose .gif for solid colors (choose #of colors) • Click “Save.”

10. ORchoose .png 24 if there’s transparency. • Then, check “transparency.” Click “Save.”

11. Remember, to prepare your image for transparency: • You have to turn the background layer off in Photoshop ahead of time.

12. Illustrator Here’s How in Illustrator

13. O V E R V I E W To optimize files for the Web, you will change: • You will be changing the dimensions and file format for the web, but not resolution, because Illustrator is not a pixel-based program and has no pixels. The web version will be automatically generated at 72 dpi for you.

14. 1) View image at 100% • Set view at 100% (lower left corner) and decide what new size you want it to appear on the screen.

15. 2) Change Image Dimensions: • Select All (Ctrl+A or Command-A) • Hold down Shift key and drag a corner of the image.

16. 3) Change Artboard size to fit. • Select Artboard tool. • Hold down Shift key and drag an artboard corner to resize.

17. 4) File > Save for Web • No need to worry about resolution (dpi/ppi) because Illustratorhas no pixels. It will generate pixels when you save for web.

18. 5) Choose .gif for solid-colored images (typically created in Illustrator) and choose #of colors.

19. ORchoose .png 24 if there’s transparency. • Then, ceck “transparency.” Click “Save.”

20. InDesign How to Optimize an InDesign File for Web

21. InDesign • You can “save for web” in InDesign, but it’s difficult to change dimensions of an image before-hand. So here’s an easier way. • 1) Save as a .pdf. • 2) Open the .pdf and take a screen shot:alt+prtsc in (Windows) or Command-Shift-3 (Mac) • 3) In Photoshop, resize and save for web. Here’s how: • Windows: Open a new document in Photoshop and go to edit>paste. Then resize and save for web. • Mac: Open the screenshot document in Photoshop—then, resize and save for web.

22. IMAGES WITH BOTHTEXT AND PHOTO Which file format should I use?

23. Options: • OPTION 1) Use a .png 24 (works for both print and photos) • OPTION 2)Choose the file format that creates the smallest file. • OPTION 3) Choose based on volume of text vs. volume of images (more text = .gif; more photos = .jpg)

24. REVIEW OF FILE FORMATS For Convenience

25. File Formats

26. What is a .png? • A .png does everything a .jpg OR .gif can do PLUS it creates beautiful transparency (which we’ll see in a second). • The drawback is that .png tends to be a somewhat larger size than .gif or .jpg, so we don’t use it often, but the one thing it does better than any other file format is “transparency.”

27. Transparency • In Photoshop, transparency is denoted with a checkerboard. • The background layer is turned off.

28. Transparency with odd shapes • Transparency around a graphic allows it to be placed on any color page. • This logo is surrounded by white, which is fine for a white page, but not a blue page. . . . It needs transparency.

29. QUESTIONS?