1. HOW TO SAVE & USE FILES
For Print & WEB

2. CONTENTS Advance to section needed.
Overview: File Formats, Resolution, Color Models Preparing For Output USING FILES FOR SOCIAL MEDIA & ONLINE PORTFOLIOS See Separate Social Media PPT Using Screenshots for Online Portfolios
USING FILES FOR PRINT (slide #10) Print Workflow Print Output To Export as PDF Packaging InDesign Files SAVING FILES FOR WEB (slide #20)
Saving PDF For Web or e-viewing Saving Graphics For Web In Photoshop Saving Graphics For Web In Illustrator Saving For Web In InDesign (Portfolio Thumbnails) Using Screenshots for Online Portfolios
Advance to section needed.

3. Overview
File Formats, Resolution, Color Models

4. Print Layout l Authoring Files: InDesign is best for layout, particularly multi-page work (magazines, newspapers, books, etc.) One-page layouts can be done in InDesign, Adobe Illustrator or even MS Word NO professional layouts can be created in Photoshop (because it creates fuzzy type with pixels). l File Formats for Printer (talk with the printer to plan your job): PDF is usually the file format provided, but printers can usually accept authoring files as well. l Resolution: Not applicable (layout programs link image files) l Color Mode: CMYK / spot color with Pantones Print Images l Best original file formats for photographs are high quality formats such as .psd and .tif, but a lot of people use large-format .jpg l Authoring files for vector and bitmap illustrations are Adobe Illustrator (.ai) and Photoshop (.psd), which can be imported into InDesign so the files are linked. l File Formats for Printer (coordinate with printer): typical formats include .psd, .ai, .tif, .pdf. l Resolution: dpi/ppi l Color Mode: CMYK / spot color with Pantones Some people like to start in RGB if they can because colors are most vibrant Web/e Photos For photos/gradients inserted in web/mobile spaces and into e-documents viewed on screen: l File Format: .jpg (low quality; small files) or .png l Resolution: 72 dpi/ppi l Color Mode: RGB (Photoshop and Illustrator automatically convert CMYK images to RGB; you don’t have to) Web/e Solid-colored Images Cartoons and other solid-color images inserted in web and into e-documents viewed on screen: l Format: .gif or .png (low quality; small files) l Resolution: 72 dpi/ppi l Color Mode: Authored in RGB / hexadecimal colors (or Photoshop and Illustrator automatically convert CMYK images to RGB; you don’t have to)
Web/e Images w/ Transparency Cartoons and other solid-color images inserted in web and into e-documents viewed on screen: l Format: .png-24 (low quality; small files—but higher quality and larger files than .jpg) l Resolution: 72 dpi/ppi l Color Mode: Authored in RGB / hexadecimal colors (or Photoshop and Illustrator automatically convert CMYK images to RGB; you don’t have to)
Overview

5. Preparing for Output
Print or Web

6. 1. Use the right tools for the job
1. Use the right tools for the job. Logos can be created in which Adobe program? Photos can be combined and edited in which Adobe program? Newsletters can be created in which Adobe program? Q?

7. Never author layout in Photoshop (because pixels make fuzzy type)
Never author layout in Photoshop (because pixels make fuzzy type). Use a layout program (e.g., InDesign) or Vector program (e.g., Illustrator). To create logos, Use a vector program like Illustrator (so it can be resized without pixilation). Remember, you can place Adobe authoring files (like .psd and .ai) directly inside other Adobe files (and link the two so changes in one file also appear in aother). For quick social media graphics and reports, Canva ( is helpful.
ALWAYS

8. ALWAYS 2) In Photoshop, when you’re done with an image, you should:
A. save your layers B. flatten layers ]
ALWAYS

9. 3) Make copies original files before you alter them for output (e. g
3) Make copies original files before you alter them for output (e.g., dimensions).
For example, are you going to create a version of a file with smaller dimensions? Make copies of all your original files so you don’t end up accidentally ruining your originals. Also, 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

10. A. highest B. lowest C. average
4) In Photoshop, you should start at the ________ dimensions and resolution you will ever need.
A. highest
B. lowest
C. average

11. Always start a Photoshop image at the highest dimensions and resolution you will ever need to use it.
You can always create a copy at lower dpi or dimensions for web and mobile devices, which takes away quality.
But you can’t add quality back in after it’s taken away.
Even if you increase the pixels per inch later, the image won’t get better because the image has already been degraded.

12. USING FILES
FOR PRINT

13. Print Workflow
.ai .psd .indd .pdf

14. print Photographic Images
InDesign (File > Place)
Options: tif, .pdf, .psd
PRINTING PRESS: Usually supply .pdf or authoring file. Coordinate w/printer.
Remember, you can insert the entire Photoshop document (for example, placing it in InDesign or Illustrator), which has big benefits: any time you edit the Photoshop document, the image updates in your layout program automatically because they are linked. Another option is to insert any other high-quality image format such as .tif or .pdf into your layout program. NOTE: If you create a .tif (File > Save As > .tif), make sure you are saving a copy, not replacing your current file.
.psd 200 ppi /dpi CMYK
Photoshop

15. print illustrations, logos
InDesign (File > Place)
Options: .tif, .pdf, .ai, eps
Remember, you can insert the entire Illustrator document (for example, placing it in InDesign), which has big benefits: any time you edit the Illustrator document, the image updates in your layout program automatically because they are linked. Another option is to insert any other high-quality image format such as .tif or .pdf. NOTE: If you create a .tif (File > Save As > .tif), make sure you are saving a copy, not replacing your current file.
.ai CMYK or RGB (some start in RGB because colors are most vivid)
PRINTING PRESS: Usually supply .pdf or authoring file. Coordinate w/printer.
Illustrator

16. Bb uploads Saving Print Layout Files for upload to Bb
.pdf for Blackboard
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.)

17. A NOTE ON 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), “Export for MS Word” or create a .tif.
If you are planning to view a Word document only on a computer and don’t need high quality, you can insert a .jpg, .gif, or .png
MS Word is not considered to be a professional layout program but can be used for small jobs.

18. Print Output
.pdf or authoring file (with any fonts and linked files)

19. Adobe PDF
Portable Document Format (PDF) is a universal file format that:
1) preserves the fonts, images, and layout of source documents
2) can be created on a wide range of applications and platforms.
3) can be shared/viewed/printed by anyone with free Adobe Reader®.
Using .pdf

20. TO EXPORT AS .PDF More Information from Adobe
From an open file, choose File > Export.
Specify a name and location for the file.
For Save As Type (Windows) or Format (Mac OS), choose Adobe PDF (Print), and then click Save.
When you select the Adobe PDF (Print) option, you cannot include interactive elements in the PDF. To export an interactive document to PDF, see Create interactive documents for PDF.
Do one of the following: To use a predefined set of job options, choose a preset from the Adobe PDF Preset menu. To create a PDF/X file, either choose a PDF/X preset from the Adobe PDF Preset menu, or choose a predefined PDF/X format from the Standard menu. To customize options, select a category from the list on the left and then set the options.
For Compatibility, choose the lowest PDF version necessary to open the files you create.
Click Export (Windows) or Save (Mac OS).

21. PACKAGING AN INDESIGN FILE (FILE > PACKAGE)
Go to File > Package.
Click the Package button at the bottom of the Summary window (This window was called the preflight window in older versions.)
Click continue on the “Printing Instructions” window (most people ignore these instructions).
Browse to where you’d like to create the package folder (desktop would be fine) and enter the name of the folder.
Make sure that the “Copy Fonts,” “Copy Linked Graphics,” “Update Graphic  Links in Package,” and “Include Fonts and Links from Hidden….” are all checked. Other boxes should be unchecked.
Click the package button.
Find the new folder that InDesign created and verify that it contains copies of all required files.
Right-click the folder and choose “Compress” (Mac) or “Send to ZIP” (Windows, might be something different but similar depending on what software you have installed). This will zip it up.
If the file size is less than 10MB, you can probably safely it. If it’s more, then you should use some other method (DropBox, FTP, YouSendIt, web server, etc.) to share the file.
Credit:

22. FOR SOCIAL MEDIA & ONLINE PORTFOLIOS
USING FILES
FOR SOCIAL MEDIA & ONLINE PORTFOLIOS

23. Social Media Images
See This Separate PowerPoint

24. Using Screenshots for Online Porfolios
Portfolio Thumbnails and HTML Pages

25. PORTFOLIO THUMBNAILS: Screenshots
You can view a print document in preview mode and take a screenshot (alt+prtsc (Windows) or Command-Shift-3 (Mac), then open it in Photoshop to resize if necessary.
Or, export the file as a .pdf (File > Export (export as PDF), take a screen shot, and resize it in Photoshop Web pages can also be captured with screen shots for portfolios. You can even take screen shots on your mobile devices to show those perspectives in your portfolio.

26. Flyer, WebSITE, Phone

27. Saving FILES
FOR WEB
This presentation assumes you have already viewed “File Sizes & Types.”

28. Saving Graphics for Web in PHOTOSHOP
JPG, GIF, PNG

29. .PSD (File > New) Print: 200 ppi/dpi CMYK | Web: 72 ppi/dpi RGB
Remember to create new Photoshop files at the highest dimensions and resolution you will ever need them (you can always reduce size later).
Start in RGB or CMYK (many say RGB because it’s more vibrant). If you start in CMYK, Photoshop will automatically shift to RGB for web.
- File > New - Set your dimensions. - Set your resolution (72 for web; 200 or 300 for print) and make sure the setting is on Pixels/Inch (not inches or other). If you think you will ever need to use the file for print, start at 300 dpi (you can always save versions later at lower dpi). - Then, set the Color Mode (RGB for web; CMYK for print). NOTE: Some people like to start in RGB for all files, because the colors are more vibrant—and then they shift to CMYK to create versions for print (duller colors) and keep the RGB files for use with Web.

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

31. To Change .PSD Color Modes: Image > Mode
If you ever need to change color modes . . .
To Change .PSD Color Modes: Image > Mode

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

33. 3) Go to File > Save for Web (Or In CC File > Export > Legacy Save For Web)

34. 4) Choose .jpg (on high) for photos/gradients
Click “Save.”

35. OR choose .gif for solid colors
Choose number of colors that create the best quality. Click “Save.”

36. OR CHOOSE .PNG 24 IF THERE’S TRANSPARENCY
Then, check “transparency.” Click “Save.”

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

38. R E V I E W 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

39. Saving Graphics for Web in ILLUSTRATOR
JPG, GIF, PNG

40. .AI (File > New) Print: CMYK | Web: RGB
The file can start in CMYK or RGB (many recommend RGB for its vibrancy). Illustrator will automatically change the color mode for saving web files.
- File > New - Input the dimensions. - Set the Color Mode (RGB for web; CMYK for print). NOTE: Some people like to start in RGB for all files, because the colors are more vibrant—and then they shift to CMYK to create versions for print (duller colors) and keep the RGB files for use with Web. - Last but not least, create your illustration and save it as an .ai file (Adobe Illustrator) with layers intact. Note: Illustrator is not a pixel-based program, so you will not set a dpi/ppi, but you can set “raster effects” (which most artists keep on high all the time, because they will adjust for web).

41. To Change .AI Color Modes: File > Document Color Mode
If you ever need to change color modes . . .
To Change .AI Color Modes: File > Document Color Mode

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

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

44. 3) Change Artboard size to fit.
Select Artboard tool.
Drag an artboard corner to resize.

45. 4) Go to File > Save for Web (or in CC File > Export > Legacy Save for Web)

46. 5) Choose .gif for solid-colored images (which are typically created in illustrator) and choose #of colors.

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

48. R E V I E W 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: In Photoshop, change resolution to 72 dpi. In Illustrator, there’s no “change” here because it’s vector-based.
File Format: Choose the proper file format for the highest quality and lowest download times. - .jpg (on “high”) for photos - .gif for solid colors (choose #of colors needed) - .png (at 24-bit) for transparency

49. Saving a PDF for the Web or e-viewing

50. TO REDUCE THE SIZE OF PDF’s FOR WEB
For PDF files that are intended to be distributed for viewing purposes only, you may want to reduce the size of PDF files when you export:
1) Choose File > Export
2) Choose [Smallest File Size] from the Adobe PDF Preset menu.
3) In the Compression area, downsample images to 72 pixels per inch, select automatic compression, and select either low- or medium-image quality for color and grayscale images.
When you work with photographic images, use Automatic (JPEG) compression; when you work with images that are mostly solid color, such as charts and graphs, use ZIP compression.
4) In the Output area, use the Ink Manager to convert spot colors to process colors.

51. Saving for Web in InDesign
Portfolio Thumbnails and HTML Pages

52. PORTFOLIO THUMBNAILS
Typically, we don’t use InDesign to create web pages, even though they can be saved for Web. Instead, we build web pages using Dreamweaver or Content Management Systems (CMS’s) such as WordPress, Wix, or Squarespace However, one case for saving InDesign layouts to a web format is for portfolio thumbnail images ) InDesign can save a graphic file of a layout (e.g., a gif or png of a magazine page, flyer, etc.). Resizing the file beforehand can be a bit awkward. Be sure to make a backup of any file you manipulate ) Or, you can go into Preview mode, take screenshots, and save the screen shots as .png files or other web files (see earlier slides in this presentation).

53. Which file format should I use?

54. Questions?

55. NOTE TO SELF:
JUST SO I REMEMBER: This is a new presentation that combines two old presentations and updates them ) “How to Save Graphics For Web” ( 2) “Basic File Formats” 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.