Create Thumbnail Tutorial
Adobe Photoshop
Objective: To Create a "Thumbnail" of an Image
Introduction: If you do web design long enough, eventually you will need to make thumbnails. The term thumbnail refers to a smaller version of an image, frequently used when cataloguing lots of images. Thumbnails are a great way to reduce the overall file size of web pages. Thumbnails are often used as hyperlinks to larger versions of the same image. For example, instead of placing a 100k GIF of your dog on your web page, place a 10k thumbnail. Then, in your HTML, make the 10k thumbnail a link to the 100k GIF. Visitors to your site won't be paralyzed by an initial large download, but those who want to see every inch of your dog’s cute smile will have access to the much larger image.
Skill Practice: Creating a Thumbnail using Adobe Photoshop
Step 1: Select one of these images by "left clicking" on it. A window with a larger version of the image will appear. "Right click" on the larger image. A menu will appear. Select "Copy". A copy of the image has now been saved to the clipboard for you to practice with.
Step 2: Open Adobe Photoshop. Click on File > New. Name the image you just copied to the clipboard (whatever you want to name it). Click on "OK".
Step 3: A blank window will appear. Click on Edit > Paste. The image you copied to the clipboard will appear in the blank window.
Step 4: Click on File > Save For Web. The "Save For Web" window will appear. Click on Image Size (in small letters). A small window will appear that lists the dimensions of your image.
Step 5: Click in the “Width” box and adjust the image’s width to a smaller size (notice that if the "constrain proportions" box is checked, the image’s original proportions will be retained). When finished, click on "Apply". The image size will reduce. When satisfied with the new image dimensions, click on “OK”.
Step 6: A window will appear that will allow you to name and save the new smaller image (your new thumbnail). When completed, click “Save”. When saved, locate and open the image to examine your finished product.
