UCSF School of Pharmacy

Downloads

Thumbnail Method 1

For PDF files, Excel spreadsheets, Word documents, and other downloadable files:

1. Create a thumbnail representing the first page of the file. Make the thumbnail 73 by 95 pixels (or 95 by 73 pixels). Resolution doesn't matter; you can use either 72 or 96 pixels per inch. If there's not enough detail to make the thumbnail distinct, make a thumbnail of a crop of the image rather than the whole image.
2. Use the Select Color eyedropper in Photoshop to select the white (or whitest) portions of the image.
3. Optionally feather the selection by 1 pixel if you need to reduce jaggies.
4. Delete the selected area.
5. Save as GIF, using the lowest number of colors that still accurately renders the image to your eye.
6. Set the thumbnail image in an unbordered table made of 1 row and 3 columns.
7. Put the thumbnail in column 1 and make it link to your downloadable.
8. Put a 25-pixel-wide spacer in column 2 (preferably using our spacer function defined in /.nav/globalfunctions.php).
9. Put text labels for the downloadable in column 3. An example follows.

This method enables the thumbnails you create to follow CSS properties for hover highlighting.

Thumbnail Method 2

A second method for creating thumbnails: Replace steps 2 and 3 above with:

2. Select > All.
3. Select > Modify Border. Use a width of 1 pixel.

This method makes the hover highlighting appear as a border rather than as replacing all the white areas of the image. The second method is better when your thumbnail has few or no white areas.

You can also use thumbnails to link to a Web site if both of the following are true:

1. You want to draw attention to the link.
2. A thumbnail representation is significantly more useful than a text link because the image is likely or expected to be a familiar one.

Use thumbnails as links to Web sites sparingly. Example: E-mail.

Go To: Visual Design or Style Guide