Export Using “Save for Web & Devices”
by Brittanie in Instructional / 02.23.09
How to Adjust your Export Settings to Be Optimized for the Web
Recently, I’ve become an expert at AllExperts.com in Adobe Photoshop, Desktop Video, Making Films & Videos, and Home Video & DVD. I can answer any question within these four categories as long as the troubleshooter is working on a MAC operating system. I try to always be as informative as possible but sometimes I want to visually explain each step and AllExperts does not have an easy way to upload multiple photos within one answer. Therefore, I’m providing detailed answers here, on the MindBites blog, starting with the one below.
Q:
I have Photoshop CS 8.0 & am having problems with the cartoons I color. I would like my cartoons to look like the ZIGGY cartoons that appear on the web (Example: http://news.yahoo.com/comics/ziggy;_ylt=AvZDRGRjRzEVlikG9JaovdiOoswF ). I right click on the ZIGGY cartoon for PROPERTIES & I see that the Width is 300 px & the Height is 292 px. So I go into Photoshop & I click on IMAGE from the top toolbar & then I click on IMAGE SIZE & then I type in 300 pixels for my Width & it calculates the Height for me automatically. Then I type in 72 pixels/inch for Resolution. Then I e-mail my finished cartoon to myself & when I open up my cartoon there are some WAVES & SQUIGGLES throughout the cartoon & background. There are waves & “ghosts” (like on a T.V.) around my characters in the cartoon. It is NOT clear & clean like the ZIGGY cartoons that appear on the web. Is the Photoshop RESOLUTION setting of 72 pixels/inch the same as 72 dpi? I’m trying to make my colored cartoons look good for the WEB (NOT for PRINT)! Please let me know how I can make my cartoons look nice & smooth for the web (so it looks good on my computer monitor & web site), without having ripples & diffusion in my cartoons. THANKS!
A:
Sounds like a really cool project. I’m pretty sure we can fix your problem. From what you have said, I think the solution lies in your export settings.
There is some terminology that I think is important to understand. First of all, ppi (pixels per inch) is for the web. Most monitors are 72 ppi and if you just want to save for the web then you’ll want to setup your project with 72 ppi (resolution). dpi (dots per inch) is for print. This setting is for magazines or other print mediums. You won’t need to go above 72 PPI if you’re exporting for the web.
Next, in Photoshop CS there should be a shortcut to export for the web, (in Photoshop CS4 it’s labeled “SAVE FOR THE WEB & DEVICES” under File from the menu bar). On my MAC the keyboard shortcut for saving for the web is:
[SHIFT] + [OPT] + [APPLE] + [S]
This command will open up a new viewer with controls that you can use to optimize your image. It is important to optimize your images for the web because you don’t want your users to spend a lot of time downloading the images. You want the images to be as small as possible without distortion. In this tutorial, the images have been optimized for your immediate enjoyment! :D
Adjusting Settings in SAVE FOR WEB & DEVICES:
File > Save for Web & Devices
1. Adjust your canvas to display 2-UP or 4-UP. This is so that you can compare how your settings look against other settings and determine how small you can get your image without distorting it. I suggest using 2-UP just to get you started and familiar with how this works.
2. Set the zoom level to “fit all” (the zoom level tool is located at the bottom left of the canvas, below your panels.
3. Next, select one of the 2 panels and choose a Preset (located at the top right to the right of the canvas). I think for your cartoons you should choose something like JPEG High…if you don’t like the quality at HIGH you can adjust the quality slider and set it to your liking.
I usually set my images to JPEG 80% quality.
4. Then once you have the image you’re adjusting with settings you like, all you have to do is select SAVE and place it in your site’s images folder and link to it or upload it.
Hope this solves your problem!
Happy drawing :D
Brittanie
Brittanie you have solved all my problems! Thank you for your expertise on this matter. My photos are perfect now.
Thank you!
Melissa