1 / 29

How to save files for web

How to save files for web. FIRST. 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. PHOTOSHOP. Here’s how in Photoshop.

virgo
Download Presentation

How to save files for web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. How to save files for web

  2. FIRST 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.

  3. PHOTOSHOP Here’s how in Photoshop

  4. To optimize files for the Web, you will change: O V E R 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- .gif for solid colors (choose #of colors needed)- .png (at 24-bit) for transparency

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

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

  7. 2) Go to File > Save for Web

  8. 3) Choose .jpg (on high) for photos/gradients • Click “Save.”

  9. ORchoose .gif for solid colors (choose #of colors) • Click “Save.”

  10. ORchoose .png 24 if there’s transparency. • Then, check “transparency.” Click “Save.”

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

  12. Illustrator Here’s How in Illustrator

  13. O V E R V I E W To optimize files for the Web, you will change: • 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.

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

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

  16. 3) Change Artboard size to fit. • Select Artboard tool. • Hold down Shift key and drag an artboard corner to resize.

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

  18. 5) Choose .gif for solid-colored images (typically created in Illustrator) and choose #of colors.

  19. ORchoose .png 24 if there’s transparency. • Then, ceck “transparency.” Click “Save.”

  20. InDesign How to Optimize an InDesign File for Web

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

  22. IMAGES WITH BOTHTEXT AND PHOTO Which file format should I use?

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

  24. REVIEW OF FILE FORMATS For Convenience

  25. File Formats

  26. 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.”

  27. Transparency • In Photoshop, transparency is denoted with a checkerboard. • The background layer is turned off.

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

  29. QUESTIONS?

More Related