GRAPHICS WORKFLOW

THE BASICS FOR PRINT & WEB

ALWAYSALWAYS

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

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

REVIEW3 IMPORTANT FILE FEATURES

1) COLOR MODEL (CMYK OR RGB)

2) FORMAT (.JPG, .GIF, .PNG, .PSD, .AI, .PDF)

3) RESOLUTION (DPI/PPI: DOTS/POINTS PER INCH)

1) COLOR MODELS: QUICK REVIEW

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

CMYK

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 imagesMakes files small through compression

GIF: Solid-colored images (cartoony)Makes files small through limiting number of colors

PNG: Photos OR solid colorsPreserves 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 sizesVendors can print from authoring files such as .psd, .ai, and .indd

RECAP:WHAT YOU NEED FOR

Print Images Images used in flyers, newsletters, magazines, books, etc. Format: Insert high-quality formats only, such as. psd, .ai, .tif, .pdf. Resolution: 200-300 dpi/ppiColor Mode: CMYK

Web/e PhotosPhotos/gradients inserted in web; PPT, PDF, & DOCs viewed on screenFormat: .jpg (low quality; small files)Resolution: 72 dpi/ppiColor Mode: RGB

Web/e Solid Colors Cartoons and other solid-color images inserted in web, PPT, PDF, & DOC’s viewed on screen Format: .gif (ow quality; small files)Resolution: 72 dpi/ppiColor Mode: RGB

.PSD (FILE > NEW)PRINT: 200 PPI/DPI CMYK | WEB: 72 PPI/DPI RGB

TO CHANGE .PSD DIMENSIONS OR RESOLUTION: IMAGE > IMAGE SIZE

TO CHANGE .PSD COLOR MODES: IMAGE > MODE

.AI (FILE > NEW)PRINT: CMYK | WEB: RGB

TO CHANGE .AI DIMENSIONS: FILE > DOCUMENT SETUP > EDIT ARTBOARDS (CHANGE DIMENSIONS)

TO CHANGE .AI COLOR MODES: FILE > DOCUMENT COLOR MODE

To SaveTo 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)

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)

USING YOUR FILES

printphotos

Options: tif, .pdf, .psd

InDesign (File > Place)

.psd 200 ppi /dpi CMYK

Photoshop

Options: .tif, .pdf, .ai

InDesign (File > Place)

.ai CMYK

Illustrator

printillustrations, logos

Your Authoring File

Bb uploadsSaving Print Layout Files for upload to Bb

You can save as .pdfand 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.)

.pdf for Blackboard

.jpg

Web

.psd 72 ppi /dpi RGBFile > Export > Save for Web > .jpg high

Photoshop

Web/ephotos

.gif

WebWeb/eillustrations

.ai RGBFile > Export > gif

Illustrator

Web/eTransparency

.psd or .ai RGB 72 ppi/dpiSave as .png 24.

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?

• Imagine you have printed out your flyer. Now you want to upload it to Blackboard. How will you create a file to do that?

YOUR LOGO/RESUME

GRAPHICS

FOR USE IN PRINT AND WEB

.gif or .png 24

Web

Illustrator

logofor web

.ai RGB; File > Save for Web > .gif or .png 24

.tif or .ai

Resume (created in MS Word, Illustrator, or InDesign) and then saved as .pdf for dissemination

Illustrator

logofor print

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.

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.

REQUIRED: PDF for download and printing

resumeAdditional Requirement

OPTIONAL: .Gif embedded in web page

Quiz YourselfQuiz 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?

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?