• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 7. Creating a Web Page from a Ph... > Optimizing Graphics for the Web

Optimizing Graphics for the Web

After you have a Web page designed in Photoshop and have sliced the document, the next step is to prepare your graphics for export, which is also called optimizing and exporting your graphics. This is the process that actually creates the graphics for your Web page. The Photoshop document will stay intact and ready for you to use if you need to make changes to the graphics or design. Keep the Photoshop document with the rest of your production files in the Production Files folder of your Web site. See Chapter 3 of Book II about Web site structure and how to organize your files.

To optimize and export your graphics, follow these steps:

  1. Choose File⇨Save for Web.

    Notice that your slices still have the lines and numbers but now look like semi‐opaque white boxes over your document. Don't worry; the finished graphics don't have that appearance. Selected slices become transparent, so you can see what the graphics will really look like.

    The Save for Web dialog box launches. Tabs along the upper left allow you to choose among different ways of working in this window:

    • Original: Shows you the original document.

    • Optimized: Shows you the optimized version.

    • 2‐Up: Shows you the original in the left window and the optimized in the right.

    • 4‐Up: Shows you the original and three versions with different optimization settings, which is useful if you need to compare several possibilities.

  2. For these steps, select 2‐Up (shown in Figure 7-12 ) because it lets you see what you're doing to your image as you compress it, but doesn't overwhelm you with too many things to look at.

    Figure 7-12: The Save for Web dialog box in 2‐Up mode.

    You can select each slice individually or select groups of them for optimization.

  3. Click the Slice Select tool.

    It's located in the left margin of the Save for Web dialog box.

  4. Click a slice to select it; shift‐click to select multiple slices.

    Slices become transparent when they're selected.

  5. After you've selected a slice or slices, make your settings for file format and compression amounts.

    See the upper‐right area of the Save for Web dialog box, as shown in Figure 7-13 . JPEGS have presets for low, medium, and high quality. A slider gives you more control. In general, the higher the number, the less the image is compressed, the better it will look, and the larger the file size will be. The file size and approximate download time are displayed at the lower left of the Optimized preview window. You want to adjust the optimization settings until you get the lowest file size while still keeping the best quality in your image. While there are general guidelines to get you started, optimizing properly will take some experimentation because each graphic will have its own unique needs.

    Figure 7-13: Optimizing graphics in the Save for Web dialog box.

    GIFs have different settings; using more colors will generally give better image quality and higher file sizes.

    Remember, for all images, the trick to compression is to find the right balance between file size and quality. It can take some playing around, so don't get discouraged. See Book IV, Chapter 1 for more information about which file formats work best with different types of graphics.

  6. If necessary, resize a graphic by using the Image Size tab (in the lower‐right of Figure 7-13 ); enter the new size and click Apply for the changes to take effect.

    Notice that you don't have to make the same compression settings for each graphic in your document. This is a very useful feature. Your design is very likely to have some areas that will be best as JPEGs and others that need to be GIF. The ability to make different settings also allows you to make different settings for different graphics even if they are going to be the same type. This is handy because some graphics compress better than others. Each one will need special attention. The problem areas to look for are

    • Around text: Make sure you don't compress graphics with text (like banners and logos) so much that the text becomes messy looking. If it does get messy, you have gone too far and you need to increase the quality, and consequently the file size, just a bit.

    • Gradients or other areas with color changes: An example of this is a person's face, which can get banding or dithering when it is compressed too much. (To see what this effect looks like, take a photograph that has gradient type color changes and purposely overcompress it. You'll see strange bands of color with blotchy edges start to appear. It won't look good; you'll need to back off the settings a bit.)

  7. After making settings, click Save and navigate to the folder you'd like to save the images in.

  8. Click Save to save the images and files.

    Photoshop automatically creates an Images folder and saves your images to it. Note: Photoshop doesn't create an Images folder if you're saving out a single image that you didn't slice. The process of using the Save for Web dialog box is the same, except that you make settings for the whole image all at once and the file saved out is the whole document in it's entirety.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint