Photoshop in 60 Seconds: How to Save Your Images Correctly



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.



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.



A Bit More Detail
Want to learn more about the basics of Adobe Photoshop? Check out these tutorials below:
- The A to Z of Adobe PhotoshopMary Winkler19 May 2014
- Adobe Photoshop Actions, Explained in 60 SecondsHarry Guinness14 Apr 2016
- New Coffee Break Course on Using Layers and Artboards in Adobe IllustratorAndrew Blackman30 Jun 2016
- New Course: Building Your Own Actions in Adobe PhotoshopAndrew Blackman03 Nov 2015
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!
