Transcript How to Save and use Graphic Files

HOW TO SAVE & USE GRAPHIC FILES
FOR PRINT & 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
NOTE
This PowerPoint assumes you have already learned about file sizes and
types. Here is the link to the PowerPoint review of that material.
TOPICS
1) REVIEW: 3 Important File Features
(color models, file format, resolution)
2) HOW TO SAVE FILES FOR WEB
4) HOW TO USE FILES FOR PRINT
5) YOUR LOGO GRAPHICS FOR RESUME
REVIEW :
3 IMPORTANT
FILE FEATURES
1)
COLOR MODEL (CMYK OR RGB)
2)
F O R M AT ( . J P G , . G I F, . P N G , . P S D , . A I , . P D F )
3)
R E S O L U T I O N ( D P I / P P I : D OT S / P O I N T S P E R I N C H )
1) COLOR MODELS: QUICK REVIEW
CMYK
CMYK (Cyan, Magenta, Yellow, Black) is for Print
RGB (Red Green Blue) is for Screen (TV/computers)
(For in-depth info, see Color Models PPT)
RGB
2) RESOLUTION: QUICK REVIEW
The more pixels per inch an image has, the higher the quality the image.
Web: 72 dpi/ppi | Print: 200-300 dpi/ppi
(For in-depth info, see File Sizes & Types PPT)
4 pixels per inch
72 pixels per inch
3) WEB FORMATS: QUICK REVIEW
(FOR IN-DEPTH INFO, SEE FILE SIZES & TYPES PPT)
JPG: Photos and continuous tone images
Makes files small through compression
GIF: Solid-colored images (cartoony)
Makes files small through limiting number of colors
PNG: Photos OR solid colors
Preserves transparency; creates quality file,
somewhat larger file size than .jpg
PRINT GRAPHIC FORMATS: QUICK REVIEW
TIF: High quality; huge file sizes
PDF: High quality; large file sizes
Authoring Files: High Quality; large file sizes
Vendors can print from authoring files such as .psd, .ai, and .indd
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
RECAP:
WHAT YOU NEED FOR
Print Images
Images used in flyers, newsletters, magazines, books, etc.
l Format: Insert high-quality formats only, such as.
indd, .ai, .tif, .pdf.
l Resolution: 200-300 dpi/ppi
l Color Mode: CMYK
Web/e Photos
Photos/gradients inserted in web and
e-documents viewed on screen:
l Format: .jpg (low quality; small files)
l Resolution: 72 dpi/ppi
l Color Mode: RGB
Web/e Solid Colors
Cartoons and other solid-color images inserted in web and edocuments viewed on screen:
l Format: .gif (ow quality; small files)
l Resolution: 72 dpi/ppi
l Color Mode: RGB
.PSD (FILE > NEW)
PRINT: 200 PPI/DPI CMYK | WEB: 72 PPI/DPI RGB
.AI (FILE > NEW)
PRINT: CMYK | WEB: RGB
To Save
ILLUSTRATOR
 .ai (File > Save As)
 .tif (File > Export)
 .jpg (File > Save for Web)
 .gif (File > Save for Web)
 PHOTOSHOP
 .psd (File > Save As)
 .tif (File > Save As)
 .jpg (File > Export > Save for Web)
 .gif (File > Export > Save for Web)
HOW TO SAVE
FILES FOR WEB
STEP BY STEP
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, vector 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)
HOW TO USE
FILES FOR PRINT
STEP BY STEP
print
photos
Options: tif, .pdf, .psd
.psd 200 ppi /dpi CMYK
Photoshop
InDesign (File > Place)
print
illustrations, logos
Options: .tif, .pdf, .ai
.ai CMYK
Illustrator
InDesign (File > Place)
Bb uploads
.pdf for Blackboard
Saving Print Layout Files for upload to Bb
Your Authoring File
You can save as .pdf
and upload to Bb.
If the file is too large (over
4,000K/4MB):
1) save as .jpg or .gif,
2) insert image in Word,
3) and create .pdf.
You will need to type 20
words into the Word doc
first. (Weird, I know.)
INSERTING GRAPHICS
IN WORD DOCS
• If you are planning to print a Word document and want
high quality (e.g., for a resume or flyer), then insert .tifs.
• If you are planning to view a Word document only on a
computer and don’t need high quality, insert a .jpg or .gif
USING .PDF
• A .pdf has many benefits:
• It “freezes” a document so that fonts
don’t change and people don’t edit the
document.
• It’s a file format that most applications
accept (e.g., Blackboard).
• It can be used for print or web.
Quiz Yourself:
 For a print graphic, what file format,
resolution, and color model would you use?
 For a photo that will only be viewed on a
computer screen, what file format, resolution,
and color model would you use?
 For a cartoon that will only be viewed on a
computer screen, what file format, resolution,
and color model would you use?
 For a web/e-file image that combines
photographic and solid colored images,
which format will you use?
YOUR LOGO
GRAPHICS FOR
RESUME
FOR USE IN PRINT AND WEB
logo
for web
.gif or .png 24
.ai RGB;
File > Save for Web >
.gif or .png 24
Illustrator
Web
logo
Resume (created in MS Word, Illustrator, or InDesign)
and then saved as .pdf for dissemination
for print
.tif or .ai
OPTIONS:
For Illustrator or InDesign Layout:
You can place the .ai authoring file for your logo inside an .ai
or .indd file of your resume, or you can copy and paste.
Illustrator
For MS Word or InDesign Layout:
In Adobe Illustrator, go to File > Export > .tif and save the file.
Then, open up MS Word or InDesign and insert the .tif.
resume
Additional Requirement
REQUIRED: PDF for
download and printing
OPTIONAL: .Gif embedded in web page
Quiz Yourself
 What file format will you use to save your logo for
insertion into your resume?
 What file format will you use to save your whole
resume for dissemination?
 What file format will you use to save your logo for
insertion in a web page? How many dpi/ppi?
 What file format will you use to save your whole
resume as a graphic to embed on the web? How
many dpi/ppi?
QUESTIONS?
NOTE TO SELF:
• JUST SO I REMEMBER:
This is a new presentation that combines two old presentations and
updates them.
1) “How to Save Graphics For Web”
(www.julietdavis.com/COM302/howtosavegraphicsforweb.ppt).
2) “Basic File Formats”
www.julietdavis.com/COM302/basicfileformats.ppt
This new presentation combines these presentations and deletes
some slides so that there won’t be so many PowerPoints with so
much redundancy to confuse students. This PPT is long, but it’s broken
down into sections.
OLD SLIDES
TO CHANGE .PSD DIMENSIONS OR RESOLUTION:
IMAGE > IMAGE SIZE
TO CHANGE .PSD COLOR MODES:
IMAGE > MODE
TO CHANGE .AI DIMENSIONS:
FILE > DOCUMENT SETUP > EDIT ARTBOARDS (CHANGE DIMENSIONS)
TO CHANGE .AI COLOR MODES:
FILE > DOCUMENT COLOR MODE