Gone are the days when a developer could focus on writing beautiful code and let the art majors worry about colors or creating logos. Today, web developers—particularly freelance developers—have to be as familiar with Adobe Photoshop and Illustrator as they are with PHP, JavaScript, or HTML.
So, let me help you become more familiar.
Basic Adobe Photoshop and Illustrator Features: Save for Web and Devices
What to Expect from The Tutorial Video
In this tutorial video, I'll show you how to use the "Save for Web and Devices" feature in Adobe Illustrator CS4 and Adobe Photoshop CS4 to optimize images for your clients' websites and decrease the page loading time. In many instances, it is poorly optimized images that slow load times.
I'll be using a sample web banner as my example for this tutorial. Once you've accessed the “Save for Web and Devices” feature, I'll show you its various aspects, including the image sizes, color options, view tabs, and image types. I'll explain image file size and type adjustments, and I'll walk you through accessing and changing the type of image file you’ll be outputting.
You'll also learn about the differences with exporting Flash .swf's and Scalable Vector Graphics, or SVG's. And I’ll discuss how to change the view of your image using the tabs in the “Save for Web and Devices” dialogue box.
This tutorial will also show you how to use the Original, Optimized, 2-up, and 4-up tabs to compare your original image to your web-optimized image. I'll explain the color tool located in the “Save for Web and Devices” feature panel, and I'll describe how it shows the color of the image where your cursor is. After reviewing the “Save for Web and Devices” tool in Adobe Illustrator, we'll move over to Adobe Photoshop to look at it there. I'll go over the similarities and differences between the “Save for Web and Devices” tool in both.
By the end of this tutorial you should know your way around the “Save for Web and Devices” feature in both Adobe Photoshop and Adobe Illustrator and be able to export optimized images in multiple file types to be used on a website.
