how to save files for web
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/1.jpg)
HOW TO SAVE FILES FOR WEB
![Page 2: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/2.jpg)
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).
![Page 3: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/3.jpg)
PHOTOSHOPFor images (e.g., photos) that don’t originate In Illustrator, use Photoshop to optimize them for the Web.
![Page 4: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/4.jpg)
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
O V E R V I E W
![Page 5: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/5.jpg)
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.
![Page 6: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/6.jpg)
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).
![Page 7: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/7.jpg)
3) Go to File > Save for Web(or in CC File > Export > Legacy Save for Web)
![Page 8: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/8.jpg)
4) Choose .jpg (on high) for photos/gradients Click “Save.”
![Page 9: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/9.jpg)
OR choose .gif for solid colors (choose #of colors) Click “Save.”
![Page 10: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/10.jpg)
Then, check “transparency.” Click “Save.”
OR choose .png 24 if there’s transparency.
![Page 11: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/11.jpg)
Remember, to prepare your image for transparency: You have to turn the background layer off in Photoshop
ahead of time.
![Page 12: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/12.jpg)
ILLUSTRATORFor images created in Illustrator (e.g., logos, illustrations)
![Page 13: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/13.jpg)
To optimize files for the Web, you will change:O V E R V I E W
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
![Page 14: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/14.jpg)
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.
![Page 15: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/15.jpg)
2) Change Image Dimensions:
Select All (Ctrl+A or Command-A) Hold down Shift key and drag a corner of the image.
![Page 16: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/16.jpg)
3) Change Artboard size to fit.
Select Artboard tool. Drag an artboard corner to resize.
![Page 17: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/17.jpg)
4) Go to File > Save for Web(or in CC File > Export > Legacy Save for Web)
![Page 18: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/18.jpg)
5) Choose .gif for solid-colored images
(which are typically created in Illustrator) and choose #of colors.
![Page 19: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/19.jpg)
Then, ceck “transparency.” Click “Save.”OR choose .png 24 if there’s transparency.
![Page 20: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/20.jpg)
INDESIGNHow to Optimize an InDesign File for Web
![Page 21: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/21.jpg)
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.
![Page 22: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/22.jpg)
IMAGES WITH BOTH TEXT AND PHOTOS
Which file format should I use?
![Page 23: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/23.jpg)
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)
![Page 24: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/24.jpg)
REVIEW OF FILE FORMATSFor Convenience
![Page 25: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/25.jpg)
Extension Format Used for `Loss `# Colors Transparency?
.jpgJointPhotographicExperts Group
Continuoustone (e.g.,photos) Web
Lossy ThousandsNO
.gifGraphicInterchangeFormat (Compuserve)
Solid colors(e.g., cartoons)
Web
Lossless
256 + transparency
Yes, GIF-8 (jaggies)
.pngPortableNetworkGraphicsformat
Web(continuoustone or solidcolors)
LosslessThousands
Yes (no jaggieds)but big file
.tifTagged ImageFile Format
Print Only Lossless Thousands Yes
FILE FORMATS
![Page 26: How to save files for web](https://reader035.vdocuments.net/reader035/viewer/2022062309/56814f49550346895dbced4e/html5/thumbnails/26.jpg)
QUESTIONS?