Photoshop in 60 Seconds: How to Save Your Images Correctly

Final product image — What You'll Be Creating

Welcome to our new series, Photoshop in 60 Seconds, in which you can learn a Photoshop skill, feature, or technique in just a minute!

Photoshop in 60 Seconds: How to Save for Web

Saving images for online use is an essential skill for any Photoshop user. And you can bypass the headache of doing this step manually with a quick Photoshop Action. Consider this Save for Web Action from GraphicRiver, for instance, to instantly resize your images all with just a click of the button.

Got a minute? Learn how to use the Save for Web feature here.

Export As...

Photoshop CC 2015 added some helpful new features for saving images for online use. Check those out here!

How to Save for Web

Learning how to correctly save your images for online use is an essential skill for any Photoshop user. Now traditionally, we don't include text when we save images for online use. We add the text later on, usually using some sort of markup language. The classic way of saving the image is with the save for web dialog box, that's found through File > Export > Save for Web. Keyboard shortcuts are Alt+Shift+Ctrl+S.

The first thing you'll need to pick is the Preset. In this case, I'm selecting JPEG High because it is a photograph. If it had any type of transparency on it, I would select the PNG file.

The second thing that I need to pay attention to is the Image Size. My width is at 2500 pixels, I want to narrow that down to 600. Notice because the two fields are linked together, the height adjusts along with the width.

Picking a Photoshop Preset and Image Size

I often also use the 4-Up View so I can see any type of visual differences between the types of compression. I find that 30% Quality for this image is a good trade off between size and image quality. And I'll click the Save button, specify the folder and the file name, then click the Save button again.

Using 4-Up View in Photoshop Before Saving

A Bit More Detail

Want to learn more about the basics of Adobe Photoshop? Check out these tutorials below:

60 seconds?!

This is part of a new series of quick video tutorials on Tuts+. We’re aiming to introduce a range of subjects, all in 60 seconds—just enough to whet your appetite. Let us know in the comments what you thought of this video and what else you’d like to see explained in 60 seconds!