HOW TO SAVE FILES FOR WEB

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.

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

INDESIGNHow 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 BOTHTEXT 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 Format Used for `Loss `# Colors Transparency?

.jpgJointPhotographicExperts Group

Continuoustone (e.g.,photos) Web

Lossy ThousandsNO

.gifGraphicInterchangeFormat (Compuserve)

Solid colors(e.g., cartoons)

Web

Lossless

256 + transparency

Yes, GIF-8 (jaggies)

.pngPortableNetworkGraphicsformat

Web(continuoustone or solidcolors)

LosslessThousands

Yes (no jaggieds)but big file

.tifTagged ImageFile Format

Print Only Lossless Thousands Yes

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?