How to Configure Photoshop for Web Development

These are the settings that I use with Photoshop CS5* for front-end web development. The main idea is to do everything in pixels and have the color settings match the monitor, which is important for the web and not for photos.

Photoshop > Preferences

• Units & Rulers
  • Rulers: pixels
  • Type: pixels
• Guides, Grid & Slices
  • Guides
    • Style: Dashed Lines
  • Grid
    • Style: Dots
    • Gridline Every: 30 pixels
    • Subdivisions: 6

Edit > Color Settings

• RGB: Monitor RGB
• CMYK: U.S. Web Coated (SWP) v2
• Gray: Gray Gamma 1.8
• Spot: Dot Gain 20%
• RGB: Off
• CMYK: Off
• Gray: Off
• Profile Mismatches: [X] Ask when opening

Window >

• [X] Application Frame (this puts it all into one window, instead of having tons of small windows strewn around like garbage)
• [X] Character, Color, and Layers (and add Info to Character box to easily see the widths and heights of things)

Save for Web

When you want to export an image to the web, if it’s for a design element, you want to do either PNG-24 or PNG-8. PNG is the best for images that have a limited number of colors, e.g., design elements, but if you’re working with real life photos, JPEG can get your better file sizes.

PNG-8

This is for really simple images—PNG-8 only supports a maximum of 256 colors, one of which can be transparent, but it can’t do semi-transparent (like a color that has opacity < 100%). It’s basically the same as GIF, minus animations. This is great for image sprites, since it’s smaller than PNG-24 and sprites usually have a limited color pallet.

Options:

• Selective - if there are too many colors it will pick the dominant colors, instead of making up new ones
• Diffusion
• √ Transparency
• No Transparency Dither
• Not Interlaced
• Not “Convert to sRGB” - otherwise things might end up as different colors
• Matte - this is the background color that is applied to any pixel that have a semi-transparent color in them. I leave this as white, and if I want custom matting, I usually do that explicitly in my image

PNG-24

This is for images that need to represent more colors than a PNG-8 or support semi-transparency. Not a lof options to tweak for this one…

Options:

• √ Transparency
• Not Interlaced (it usually looks dumb)
• Not “Convert to sRGB” - once again, this can lead to different colors than you’d expect in your image.

Let me know if there is anything you’d add or remove from this list that you do differently…

*This generally applies to most any version of photoshop, it’s pretty much the same as what I had for CS4.