[How-To] Create Beautiful Thumbnails (Photoshop)

[zelo]

We as web designers have either had to severely reduce the size of an image or use thumbnails in our code. The problem is when you reduce an images size there are less pixels for the computer to manipulate and often times the picture comes out as looking blurry, out of focus, or at times almost unrecognizable.

There is a solution to this problem and it is using the SHARPEN function in Photoshop (and other graphics programs I am sure).

Here are the steps to making GREAT looking thumbs.

1. Load the image
FILE/OPEN (CTRL+O)

2. Reduce the size of the image to a workable size ~1MB or 640x480 in size
IMAGE/IMAGE SIZE
(Width 640 / Remember to keep Scale Size/Constrain Proportions/Resample Image (Bicubic))
Note: If you have a picture that is taller than longer then make that the 640 in size

3. Increase the size of the picture to 100%
Double-click on the ZOOM tool in your toolbar
Note: if you don't see your toolbar go to Windows/TOOLS and make sure that is checked

4. Sharpen the image
Filter/Sharpen/Sharpen
The image may look "funny" at this point, but it will look fine when reduced.

5. Decrease Picture Size
Image/Image Size
Note: for a 640x480 picture you would normally reduce to 120x90. If you want a square cut what you want to use as a thumb (in a later lesson)

You should notice your thumbnail is sharper than what it was before and any pixilation you may have seen when it was large is gone. Playing around with brightness/contrast will also help (Image/Adjustments/Brightness&Contrast). Normally increasing the brightness and contrast (50/30) will make your picture a lot better looking if not a little washed out.

6. Save the thumbnail
File/Save for the Web (Alt+Control+Shift+S)
Normally you will want to use either HIGH JPEG when saving. The difference is MEDIUM is 1/2 as large but because the image is so small it is not noticeable when you are loading the picture. If you have a LOT of thumbnails you can see if you can get away with the MEDIUM setting but don't offset the work you have just done by making the picture fuzzy again by saving in a low quality.

Hopefully this little tip has helped you out. If you have questions you can post a reply or e-mail me.

Examples:

Optimized Pictures
http://www.4mtdorahomes.com/bin/web/real_estate?ZKEY=&acnt=AR185139&action=HOME_SEARCH&inwindow=&hs_action=VIEW_DETAIL&listing_id=REAGAD34437996&start=25&grp=ALL

Non-Optimized Pictures
http://www.4mtdorahomes.com/bin/web/real_estate?ZKEY=&acnt=AR185139&action=HOME_SEARCH&inwindow=&hs_action=VIEW_DETAIL&listing_id=REAGAD33687929&start=25&grp=ALL

As you can see the optimized pictures are much brighter and you can see what you are about to view. The non-optimized pictures are fuzzy, out of focus, and dark.