Graphic Artist Ralph Hawke Manis

Save for the Web Adobe Photoshop Image Tutorial - Optimizing Images

How to resize images and reducing file sizes for your Websites content with Adobe Photoshop and Image Ready. Editing images to load faster in Web browsers. If your images take to long to load then you could loose visitors so, it is best to optimize all of the images and graphics on your Website. For beginners to intermediate. This tutorial is for creating copies of your graphics for use on the Web, not for final saving of your originals.

 

For this tutorial you will need a basic understanding of Adobe Photoshop and is intended for beginners to intermediate users.

*Tip: Where ever you see: (Ctrl+S) or (Ctrl+Shift+N) or something similar, these are "Keyboard Shortcuts" or "Key Strokes" By holding down these key combinations together they will manifest different commands. It is a good practice to use them when you can, they will become second nature and speed up your workload.

 

1. Open up the image that you want to resize. File> Open. (Ctrl/Command +O)

2. From the "Image" drop down menu, select Image Size. (Right click> Image Size)

3. Type in the desired Width and Height. To resize the Width and Height evenly, check the Constrain Proportions box.

From the "Image" drop down menu, select Image Size. (Right click> Image Size)

Opening and Resizing image.

 

4. From the "Filters" drop down menu select Sharpen> Unsharp Mask.

From the "Filters" drop down menu select Sharpen>Unsharp Mask.

Using the "Unsharp Mask" filter.

 

4a. In the "Unsharp Mask" setting pop up window use sliders or type in these settings:

In the "Unsharp Mask" setting pop up window use sliders or type in these settings: Amount: 500, Radius: 0.5 & Threshold: 255

Amount: 500
Radius: 0.5
Threshold: 255

*Tip: This step should not be applied to small size changes. If you see to much highlighting happening then you can skip this step.

*Tip: The "Sharpening" step will sharpen your images very slightly but, will make a difference in the clarity of your images.

5. From the "File" drop down menu, select Save for the Web. (Alt+Shift+Ctrl+S)

6. Select either the 2-Up Tab on the upper left (Before and After Optimizing) or 4-Up will show you 4 options to chose from.

From the "File" drop down menu, select Save for the Web. (Alt+Shift+Ctrl+S)

Save for the Web settings.

6a. Select either Jpeg or Gif. (Jpeg is for images with color gradients in them and Gif is best for images with solid colors) Try both and look at to differences as well as the file sizes that different setting create.

6b. Select either Low, Medium or High. These options will alter the file size as well as the quality so, look carefully at the outcome before choosing one. (I find that "Medium" works fine for Web quality and file size)

6c. Leave Progressive and ICC Profile "Unchecked"

7. Click on "Save" In the "Save Optimized As" pop up window, find the folder that you wish to save your image in and hit Save.

That's it! The secrets to creating images for your Websites that look good and load fast! I hope you enjoyed this tutorial and if you have any questions, please feel free to contact us.