Images, and graphics can be great additions to a web page. On one hand, they can add life to content, and stimulate visual interest, but on the other, they can distract from the message and slow page load times.

From a design standpoint, the number of images on a page should ideally be kept a minimum (1-2), unless they are vital to the content.

Thumbnail images linked to larger images are a good alternative, but if you have series or collection of images, creating a separate page that features these images in one location may be a better way to go. This way, if browsers are only interested in the content, they will not deterred from their quest by slow loading images.

Treatment of Images

The majority of images featured in the colleges' web redesign feature a simple drop shadow in the lower right corner to create a 3D feel to the image. (see image above). This treatment is a simple, consistant way of showcasing the image and it can easily be recreated if additional images are added to a page later.

The process creating a drop shadow in photoshop are as follows:

Open image in Photoshop.
Select all of the image
Cut the image
Go under Image> canvas size

With white selected as the background color, increase the canvas size by approx. 1/2 inch. all around.

Paste the select image back onto the canvas

Under Layer >Effects > Drop Shadow:

Apply drop shadow base on the following:

Mode: Normal
Opacity: 75%
Angle: 120 (Use Global Angle)
Distance: 5
Blur: 5
Intensity: 0

A note about creating Saint Mary's Colors in photoshop:

For Photoshop versions earlier than 6.0:
The Pantone color #648 is to comparable to hex #: 003366
The Pantone color #646 is comparable to hex #: 336699
Photoshop version 6.0 and later provide an option for selecting hex colors directly.

Alt Tags

Please don't forget to provide alt tags for your header graphic or any other graphic you add to your site.  Alt tags (short for alternative representation) can simply repeat the words in a graphic or briefly explain the contents of a photograph.  It's one mechanism those with sight disabilities use to navigate the web.  If you want to comply with standards set to accommodate those who must use voice synthesis to navigate the web, you need to include Alt tags.

FYI: (Place your mouse over the picture frame image above to see the alt tag which should read: "picture frame image")

Maintainers may use any other graphics they believe to be appropriate and applicable to their pages. 

Additional questions about image treatments or availabilty of Saint Mary's campus images may be directed to: webstandards@saintmarys.edu

For clarification about design and content issues, contact: webstandards@saintmarys.edu

For clarification on technical issues contact: webmaster@saintmarys.edu