HOW TO SAVE FILES FOR WEB

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

PHOTOSHOP Here’s how in Photoshop

To optimize files for the Web, you will change:  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 O V E R V I E W

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.

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).

2) Go to File > Save for Web

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

OR choose.gif for solid colors (choose #of colors)  Click “Save.”

 Then, check “transparency.” Click “Save.” OR choose.png 24 if there’s transparency.

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

ILLUSTRATOR Here’s How in Illustrator

 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. To optimize files for the Web, you will change: O V E R V I E W

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.

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

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

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

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

 Then, ceck “transparency.” Click “Save.” OR choose.png 24 if there’s transparency.

INDESIGN How to Optimize an InDesign File for Web

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.

IMAGES WITH BOTH TEXT AND PHOTO Which file format should I use?

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)

REVIEW OF FILE FORMATS For Convenience

Extension FormatUsed for`Loss`# ColorsTransparency?.jpg Joint Photographic Experts Group Continuous tone (e.g., photos) Web LossyThousands NO.gif Graphic Interchange Format (Compuserve) Solid colors (e.g., cartoons) Web Loss less transpa rency Yes, GIF-8 (jaggies).png Portable Network Graphics format Web (continuous tone or solid colors) Lossless Thousa nds Yes (no jaggieds) but big file.tif Tagged Image File Format Print Only LosslessThousandsYes FILE FORMATS

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.”

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

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.

QUESTIONS?