Save for Web Tutorial

This has got to be the most popular function in Photoshop. Everyone needs to be able to email  a good-looking image file without being afraid they’ve done it wrong. Websites need optimized files in order to load quickly, galleries  often request submissions as jpegs for viewing. Using Save for Web & Devices in Photoshop is the best way to get the job done.

This step-by-step tutorial is for the most inexperienced beginner. A short list of key points for my more knowledgeable readers can be found here.

Please let me know what you think, what is unclear or missing, or if you like it. ~Thanks

Skill Level 1: Novice/Beginner and up

PART 1

Launch Photoshop by double-clicking on the Photoshop icon in your Applications Folder.

Open the image you want to make Web friendly from within Photoshop

1. On the top right area of your Photoshop window are menu headings. Look for the heading File .
2. Click that heading to open the drop-down menu. Scroll down with your mouse to the sub-heading Open…
3. Click Open…
4. Now help Photoshop find your image file by navigating to it now.
5. Click to highlight the file name of your image.
6. Click Open.

Duplicate your image  ( FIGURE A)

FIGURE A

1. On the top left area of your Photoshop window are menu headings. Look for the heading Image.
2. Click that heading to open the drop-down menu. Scroll down with your mouse to the sub-heading Duplicate.
3. Click to make a duplicate copy of your image . By default it is named File Name copy.
4. Click OK to accept this name.
5. Close the original image, leaving the duplicate image open.

PART 2

Smaller than 7 MB is small enough, and the limit is actually 22MB for this feature.. My recommendation is to follow the steps to reduce the size if your image file is bigger than 10 MB. If it’s less than 10MB, skip the next section and go to PART 3

If you don’t know the size If you are unsure of the size,  here’s how to find out from within Photoshop.

• On the top right area of your Photoshop window are menu headings. Look for the heading Image .
• Click that heading to open the drop-down menu. Scroll down with your mouse to the sub-heading Image Size …
• Click to open the Image Size dialog box.
• Look at the top line in the box which reads Pixel Dimensions followed by a number. This is your image size.
• Anything that ends with a K (for kilobytes) is fine.
• Anything that is less than 22MB is also acceptable.

Larger than 22MB You need to reduce the image file size. ( FIGURE B)

FIGURE B

1. Reduce the duplicate image to a manageable size by going to Image->Image Size and change the resolution to 72 pixels/inch
2. You don’t have to change any other settings.
3. Click OKT

PART 3

Save for Web and Devices

1. Click the  menu heading File and scroll down to the sub-heading Save for Web & Devices
2. Click to open the Save for Web & Devices dialog box.
3. Select the Optimized Tab in the upper left of the box. This will show you what your image looks like with the settings you will chose next.

Starting at the top right half of the Save For Web & Devices dialog box: (FIGURE C)

FIGURE C

1. Choose JPEG Low from the Preset dropdown menu.  If your image looks bad in the Optimized window try JPEG Med
2. Check the box labeled Optimize
3. Check the box labeled Embed Color Profile
4. Check the box labeled Convert to sRGB

Recommended sizes

• If your image is horizontal, enter the new size, in pixels, into the box marked W
• If your image is vertical, enter the new size, in pixels, into the box marked H

• for web  800 pixels
• for email enter 400 pixels

To retain image proportions when changing the image size  the chainlink icon to the right of the W and H boxes should be a closed link icon.

Save the FIle

1. Click Save.
2. Enter a file name and location in which to save the image file.
3. Under Format, make sure that Images Only is selected.
4. Again click Save.

Advertisement