Digital Imaging: Save For Web

Saving Images for Your Webpage

Digital Imaging: A Photoshop Workshop
Teacher: Ken Kimura
email: ken_kimura at lsrhs dot net
telephone: (978)443-9961 XT2221

Organizing your PSD files

Make sure all your (PSD) Photoshop files are gathered together in one place.
Make sure that all your files are named correctly and follow the filename guidelines for this class - see "Anatomy of a filename."

For Each PSD file you will do the following:

Make a JPEG copy of the image

Open the file and select File menu > Save for Web & Devices
Settings should be for JPEG, High (quality 60)
Go to the "Image Size" setting (near the bottom) and make sure the image would fit into a 700 x 700 pixel window. If either the height or width is greater than 700, change it to 700.
Click the Save button to save the JPEG

Make a Thumbnail JPEG of image

Select the top most layer
Option / Merge Visible layers [skip this step if your file only has one layer] - hold down the option key while selecting "Merge Visible" from the dropdown menu found at the top right of the layers palette.
Using the rectangular marquee tool, select a SQUARE portion of your image that will become the thumbnail.
Copy - Edit menu > Copy or ⌘C.
Create a new file - File menu > New or ⌘N
Paste - Edit menu > Paste or ⌘V
Resize the image so that it is 80 pixels square. Image menu> Image Size. Make sure the checkbox for “resample” is checked. Type in the pixel dimensions and click OK.
Sharpen the image - Filter menu > Sharpen > Sharpen
Save for Web (see step 1 from the section above). Name the image by adding “th” after the number. ie. A1th_kimurak.jpg. Save this into your thumbnails folder

Edited 11-22-11