Download PPT - Juliet Davis

HOW TO SAVE
FILES FOR WEB
First, How to Save the Authoring File
Start a graphics file at the LARGEST dimensions and resolution (dpi/ppi)
you will ever need it. (If you create a small image and enlarge it later,
your image will degrade.)
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, so you don’t want to lose the original high quality files.
Always save layers intact in your original authoring programs.
(You can’t unflatten after you’ve closed).
ALWAYS
PHOTOSHOP
For images (e.g., photos) that don’t originate In Illustrator,
use Photoshop to optimize them for the Web.
OVERVIEW
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 and other continuous tone images
- .gif for solid colors (choose #of colors needed)
- .png (at 24-bit) for transparency
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).
3) Go to File > Save for Web
(or in CC File > Export > Legacy Save for Web)
4) Choose .jpg (on high) for photos/gradients

Click “Save.”
OR choose .gif for solid colors (choose #of colors)

Click “Save.”
OR choose .png 24 if there’s transparency.

Then, check “transparency.” Click “Save.”
Remember, to prepare your image for transparency:

You have to turn the background layer off in Photoshop ahead of time.
ILLUSTRATOR
For images created in Illustrator
(e.g., logos, illustrations)
OVERVIEW
To optimize files for the Web, you will change:
Dimension: Change dimension of the image to be the exact
dimensions you will need for the Web (not bigger or smaller.
Resolution: We will not have to “change” resolution in Illustrator
because it’s not a pixel-based program. There are no dots per inch
or pixels per inch, so Illustrator automatically saves at 72dpi when
you save for web.
File Format:
- .jpg (on “high”) for photos
- .gif for solid colors (choose #of colors needed)
- .png (at 24-bit) for transparency
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.

Drag an artboard corner to resize.
4) Go to File > Save for Web
(or in CC File > Export > Legacy Save for Web)
5) Choose .gif for solid-colored images
(which are typically created in Illustrator) and choose #of colors.
OR choose .png 24 if there’s transparency.

Then, ceck “transparency.” Click “Save.”
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) Open or paste the image in Photoshop.
4) Resize and save for web.
Which file format should I use?
IMAGES WITH BOTH TEXT AND PHOTOS
Options:



OPTION 1)
Use a .png 24 (it works for both
print and photos, though it creates
a somewhat larger file than .jpg
or .gif)
OPTION 2)
Choose the file format that
creates the smallest file
(if size is a central concern).
OPTION 3) Choose based on
volume of text vs. volume of images
(more text = .gif; more photos = .jpg)
REVIEW
OF FILE FORMATS
For Convenience
FILE FORMATS
Extension
Format
Used for
`Loss
`# Colors
.jpg
Joint
Photographic
Experts Group
Continuous
tone (e.g.,
photos) Web
Lossy
Thousands
.gif
Graphic
Interchange
Format
(Compuserve)
Solid colors
(e.g., cartoons)
Web
.png
Portable
Network
Graphics
format
Web
(continuous
tone or solid
colors)
Lossless
.tif
Tagged Image
File Format
Print Only
Lossless
Loss
less
Transparency?
NO
256 +
transpa
rency
Thousa
nds
Thousands
Yes, GIF-8
(jaggies)
Yes (no
jaggieds)
but big file
Yes
QUESTIONS?