GDT 150 Design for the Internet: Fall 2002

September 30

Cutting Graphics in Photoshop

Setting Up the Document

  1. File > Save As "..._guides.psd". That way you've got the original backed up.

  2. Arrange your guides:

    • Around your grid
    • Along HTML text boundaries
    • Around whitespace
    • Defining boundaries around each graphic
    • Make sure that your guides are at even pixels by zooming in to 600% and turning rulers on (Command-R). If rulers aren't set to pixels, change it if the Prefs.
  3. Make a new layer, opacity 50%, and name it "guides"
  4. Set your foreground and background colors to two different colors
  5. Use the marquee tool with anti-aliasing off and snap to guides on to make boxes around the blocks that you've defined with the guides, and then fill with a keyboard shortcut (Option-delete for foreground, Command-delete for background), alternating colors in each square. Use different colors as necessary. You can also use the paintbucket tool, but make sure anti-aliasing is off.
  6. Make sure that you have all your text areas and whitespace defined also. I like to use grays for non-graphic areas.
  7. Save

Alternatively, you can use slices to set your cut guides, but the previous way is far better.

Setting Up the Directory Structure

  1. In the root directory of your website create a folder called "graphics"
  2. Inside the graphics directory, create a separate folder for each general type of graphic -- often buttons, titles, etc.

Cutting Graphics

  1. Select the guides layer you just created in your layers palette, and hide it. You'll keep this layer selected and use the Magic Wand to select each box in the layer.
  2. Magic Wand options: Tolerance: 0, Contiguous checked, Anti-Alias unchecked.
  3. Click in one of the boxes that you set for a graphic. All the contiguous pixels of the same color are selected.
  4. Image > Crop
  5. Determine the appropriate file type and export

    • If the graphic is a gif

      • Method 1 -- transparent background and Export as Gif plugin has been manually installed
        1. Image > Mode > Indexed Color
        2. Choose the following options:
          • Color selection method -- usually Selective or Exact
          • Choose as few colors as possible, while preserving appearance -- use a power of 2 if possible (2, 4, 8, 16, 32, 64, 128, 256)
          • Choose forced colors if you're drastically reducing the number of colors and certain colors are crucial
          • Unless there's already transparency in your .psd that you want to preserve, uncheck Transparency
          • Matte is usually irrelevant unless there's already transparency in your .psd that you want to fill with color
          • Generally Dither: None, if necessary, Diffusion and choose a percentage (usually 25 - 75 %)
          • Check Preserve Exact Colors if you've chosen any dithering
        3. File > Export > Gif89a Export
        4. Select the background color to be transparent
        5. Check interlaced for larger graphics (larger than 100 x 100px)
        6. Save into the appropriate folder
      • Method 2 -- transparent background
        1. Layers > Flatten
        2. Magic Eraser Options: Contiguous Off, Anti-Alias Off, Tolerance: 0
        3. Click in the background to make transparent.
        4. File > Save for Web
        5. Choose gif with following options:
          • Transparency checked
          • Choose as few colors as possible, while preserving appearance -- use a power of 2 if possible (2, 4, 8, 16, 32, 64, 128, 256)
          • Color selection method -- generally Selective
          • As few colors as possible, while preserving appearance -- use a power of 2 if possible (2, 4, 8, 16, 32, 64, 128, 256)
          • Generally choose No Dither, or if dithering is needed, choose Diffusion, and then a percentage, usually between 25-75%
          • Lossy: 0
          • Check Interlaced for larger graphics (larger than 100 x 100px), unless it drastically increases file size
          • Web Snap: 0
        6. Save into the appropriate folder
      • Method 3 -- no transparency
        1. File > Save for Web
        2. Choose gif with the following settings:
          • Color selection method -- generally Selective
          • As few colors as possible, while preserving appearance -- use a power of 2 if possible (2, 4, 8, 16, 32, 64, 128, 256)
          • Generally choose No Dither, or if dithering is needed, choose Diffusion, and then a percentage, usually between 25-75%
          • Lossy: 0
          • Check Interlaced for larger graphics (larger than 100 x 100px), unless it drastically increases file size
          • Web Snap: 0
        3. Save into the appropriate folder

    • If the graphic is a jpeg

      1. File > Save for Web
      2. Choose JPEG with the following settings:
        • Quality -- the higher the number (0 - 100), the higher the image quality and the larger the file size
        • Check Optimized
        • Blur: 0
        • Never include ICC profile -- usually more than doubles file size, browsers can't use it
        • Unless you have transparency in your .psd, don't bother changing Matte
        • Check progressive for graphics larger than 100 x 100px
      3. Save into the appropriate folder
  6. After the graphic is saved, undo to the Magic Wand state. You can set multiple levels of undo in PS6 under Edit > Prefs > General. Choose Command-Shift-Z for redo. That way, just hit Command-Z as many times as you need to go back to the Magic Wand state. Otherwise, use the History palette.
  7. Continue until all graphics are saved in the graphics directory in your root folder.