I.arc 211-212 Visual Communications: Week 5: Making Thumbnails

Home : Week 5 : Making Thumbnails

Making Thumbnails: Formatting Your Images for the Web Based Portfolio

1. Get Organized

On your zip disk you will want to create a set of folders. These folders will eventually hold all of your portfolio materials for the website.

Folder Set-Up

  1. Make a folder called "public_html." This folder will be a "mirror image" of the public_html folder you created on the web server." All of the HTML for your web site will be saved here.
  2. Within the "public_html" folder, create a folder called "images." All of the images for your web site will be saved here.

2. Formatting the Images

Open an image for your portfolio in Photoshop.

Open your image in Photoshop

First we will format the "full-sized" image, which will appear on its own page in the portfolio.

Select "Image Size" from the "Image" menu.

Choose Image Size

Set the width of the image to 500 pixels. This width should be large enough to see detail in the image, but not be too large for small monitors, or take too long to download.

Set Image Size

Click "OK." Your image should appear smaller on the screen.

Smaller Image

We will save this image as a JPG for use on the web.

Choose "Save For Web" from the "File" menu.

Save full sized image for web

Make sure the format is set to "JPEG" and the compression is adjusted so the file isn't too large, but still looks good. 30K is a good target file size.

Make sure to save this file in the "images" folder you created.

Save Full Sized Image with '_f'

Add an "_f" to the end of the file name, so you know this image is the full sized version.

Now we will make the thumbnail image, used as a link on the portfolio's home page.

Select the Crop Tool.

Select Crop

Set the Crop Tool to create a 100 pixel square image, at 72 dpi.

Set Crop Tool to 100 px by 100 px at 72 dpi

Crop the image. Choose an interesting section of the image to work with.

Nice Crop

This technique will make all of your thumbnail images consistant, which will be more visually appealing on your home page.

Save the thumbnail for web (File: Save For Web). Make sure JPEG is the selected file format, and the quality is adjusted appropriately. 4K is a good target file size.

Save Thumbnail Image for Web

Save this thumbnail image in the images folder with the first image. Add an "_t" to the end of the file name to distinguish it from the full sized image.

Save Thumbnail Image

Once the thumbnail image is saved, close the image you've been working with. Choose "Don't Save." You do not want to modify your original image.

Click Don't Save

3. Lather, Rinse, Repeat.

Repeat all of step two above five more times to create a set of 6 images with thumbnails, for a total of twelve images saved in your images folder.

Keep this work in a safe place. You will need it to complete the project.