• Best Practices
• Size Specifications
• Photoshop
• Microsoft Editor
• Preformatted Graphic Banners

• Photos with large file sizes that slow loading time. Images should not be much larger than 15KB.
• Large photos which obscure content.
• Photos used repeatedly - they lose their impact and meaning
• Non-specific, unrelated or overly general photos. Images should reinforce content and be specific to the page.
• Background images that interfere with text.
• Outdated treatment of images (feathering, oval shapes, etc).
• Using photos without permission.
  

Pixel Height/Width Specifications in our Templates

Left-Hand Column: No more than 145 pixels in width.

Content Area: No more than 415 pixels in width. 200 pixels or less recommended.

Right-Hand Column: No more than 140 pixels in width.

Note: If graphics or photos are placed in these areas larger than the recommended size the template will break.

Photoshop

Photos


Save photos as jpegs, crop small, and optimize for speedy loading. Test file size to picture quality in order to find optimum size. Preferred settings:



Tip: Hitting SAVE reduces the quality of a jpeg file. When working on a jpeg file, save & replace over the existing file to maintain quality.



Photos stroked gray 666666, at one pixel, present an attractive framed image. Go to: Edit > Stroke > Select Inside and 1 px.

Save graphic images as gifs. Test file size to picture quality in order to find optimum size. Preferred settings:



If using graphic images to establish identity, make sure graphic style is consistent throughout the site.

Optimization in Photoshop

Images on the web display at 72 dpi. (Print images need 200-300 dots per inch.) Set resolution by going to: Image > Image Size > Resolution and inserting 72dpi . Enlarging a photo with 72 dpi will blur the photo.

Color mode for web is RGB. If you are having trouble working with a photo change it to RGB by going to: Image > Mode > Select RGB mode.

To doctor up a photo go to: Image > Adjust > Select: Color Balance, Brightness & Contrast, Hue & Saturation, and/or Levels.

To crop a photo select an area and go to: Image > Crop.

To shrink an entire photo go to: Image > Image Size > Select Pixels and type in size.

If you wish to decrease the width or height of a photo go to: Image > Canvas Size.

To sharpen a blurry photo go to: Filter > Sharpen > Unsharp Mask and play around with the slider.

For more on optimization see Web Style Guide.

Preformatted Graphic Banners

Web Services has designed a selection of generic banners we encourage you to use. The donate/giving banners are sized to fit under the left-hand menu. To align the image with the menu, select the image, and right align in Selection Properties.

The Special Event banners are sized to fit in the right-hand column. Align these center using the Selection Properties above.

The banners are located in your Graphics Library.