Saving Files for the

How To Render Cars In Photoshop

Learn Photo Editing

Get Instant Access

Photoshop files themselves can't be embedded into a web page. You will need to export your file and save it in a web-friendly format. There are three formats for web graphics: GIFs, JPEGs, and PNGs.

The GIF format (pronounced "jiff" or "giff" depending on which side of the tracks you grew up) can have a maximum of 256 colors. GIF files support transparency and animation, and work best with graphics that have large areas of the same color, as shown in the logo below.

The JPEG format (pronounced "jay-peg"), works best with photographic images or images that have more than 256 colors and gradients, such as the flower on the opposite page. Images saved in JPEG format are compressed, which means that image information will actually be lost, causing the image to degrade in quality.

The PNG format (pronounced "ping") is similar to the GIF format in that it supports transparency and works best with solid-color images like the logo shown to the right, but it's superior to the

( Your Company

Example of an image that should be saved as GIF or PNG

GIF format as it has the ability to

TIP Double-clicking Power

As if keyboard shortcuts weren't quick enough, Windows users have even more ways to open and save files, such as:

■ holding down Ctrl and double-clicking the work area to create new documents

■ double-clicking the work area to pull up the Open dialog box to open files

■ holding down Alt and double-clicking the work area to open existing files as new documents

■ holding down Ctrl-Shift and double-clicking the work area to save documents

■ holding down Shift and double-clicking the work area to access Adobe Bridge—Adobe's "control center" and file browser

The work area is the gray area behind the document windows. If your shortcuts aren't working, check that you are clicking on an empty spot on the work area, and not in one of the document windows or Photoshop tools! Alas, Photoshop on a Mac does not have a work area, so Mac users won't get to enjoy the goodness of double-click shortcuts.

Example of an image that should be saved as JPEG

support true levels of transparency for colored areas. Transparent PNGs are currently not in widespread use on the Web because older versions of Microsoft Internet Explorer do not support them; however, they're often used in Macromedia Flash movies. PNGs can produce a better quality image at a smaller file size than can GIFs. Photoshop allows you to save an image as a PNG-8 file (which works the same way as a GIF would with 256 colors) or a PNG-24 file (which allows for millions of colors as well as variable transparency).

To save for the Web in Photoshop, select File > Save for Web... or press Ctrl-Alt-Shift-S (Command-Option-Shift-S on a Mac). This will bring up the Save For Web dialog box shown overleaf, which will show you a preview of the image that will be exported, with its optimized size in the bottom left-hand corner. You can adjust the settings for the image using the options in the pane on the right. Choose whether you want to save the file as a GIF, JPEG, PNG-8, or PNG-24, and have a play with the other settings, keeping an eye on the optimized file size. Try to strike a balance between the quality and file size of the image. When you're happy with your result, click Save and give your image a filename.

If you tried the above exercise, you're probably quite pleased with yourself for saving an image of reasonable quality at a file size significantly smaller than the original. You managed this by altering the settings in the right-hand pane, but what do these settings actually do?



Adjusting this setting reduces the number of colors used in the image. This will usually make the biggest difference in the final image.

dither amount and type (No Dither, Diffusion, Pattern, Noise)

This setting has nothing to do with being nervous or agitated (although it's quite possible that you may have been a few moments ago!). Dither refers to a compression technique in which the pattern of dots is varied to give the illusion of a color gradient. Changing the dither will result in a more noticeable degradation for images that involve a large number of colors blended together.


If you want transparent areas in your graphic, check this box. We'll look more closely at transparency in Chapter 2.

matte color

For transparent images, the matte color is used to help blend the edges of your image into the background of the web page. For non-transparent images, the matte color defines the background color of the image. Using matte color with transparent images is covered in more detail in Chapter 2.



Changing the value in the Quality drop-down box alters the level of compression for the image. Reducing the quality may result in blurring or pixelation, but too high a setting will produce a large file that will take users too long to download. A good approach is to decrease the quality value gradually until you notice the degradation of your image becoming unacceptable. A reasonable compromise will be somewhere around this point.

optimized image preview

Save For Web - Powe/e<l By ImageReady

Original OpiiiJKed 2-Up 4-Up

The sacred lamp of day Now dipt in western clouds his parting day.

Color Table ' Image Size

214, SK

100% dither Selective palette 256 colors optimized file size

— Preset!





| Selective








| No Transparency ,. V


| | Interfaced ltd

| | Interfaced

Color Table ' Image Size

Edit in ImageReady

Save For Web dialog box

Saving Files for the Web in ImageReady

You can optimize images for the Web in ImageReady using the Optimize palette, shown at right. Set the file type and options in the Optimize palette in advance, and when you're ready to export your web image, select File > Save Optimized or press Ctrl-Alt-S (Command-Option-S on a Mac). ImageReady will save the image based on the settings that you've defined.

Why Two Tools:

Considering that it's possible to save files for the Web in Photoshop, it's perfectly reasonable for you to wonder why ImageReady even exists! While it's true that both programs can perform many of the same tasks, there are certain things that ImageReady can do that Photoshop can't, for example, creating animated GIFs. ImageReady also makes web-specific tasks easier, and since it's a smaller program that doesn't contain the full suite of Photoshop effects, it loads more quickly than Photoshop. As you work through this book you'll come to learn which tool is more suitable for particular tasks.

Add Metadata Setting:

Optimize palette in ImageReady

Add Metadata Setting:

Optimize palette in ImageReady

The sacred lamp of day Now dipt in western clouds his parting day.

The sacred lamp of day Now dipt in western clouds his parting day.

Was this article helpful?

0 0
Understanding Adobe Photoshop Features You Will Use

Understanding Adobe Photoshop Features You Will Use

Adobe Photoshop can be a complex tool only because you can do so much with it, however for in this video series, we're going to keep it as simple as possible. In fact, in this video you'll see an overview of the few tools and Adobe Photoshop features we will use. When you see this video, you'll see how you can do so much with so few features, but you'll learn how to use them in depth in the future videos.

Get My Free Video

Post a comment