Tutorial: Taking screenshots in Photoshop format and exporting parts to PNG with Slicy

On a Mac, you’ll usually be taking your illustrative screenshots by typing keyboard combinations such as “Command-3”, and automatically a PNG file will appear in the folder of your choice. When you need separate screen elements to be saved, you’ll use something like “Command-4” and save each element as a separate file. There’s an easier way: save the complete screen to a Photoshop file and take it from there.

Why would you bother creating Photoshop screenshots? The answer is: one file. Unless you have to save menus and menu items, you can save a screenshot of the whole screen and separate the screen elements inside your one Photoshop file if you take PSD screenshots.

If you use Mac OS X’s default, you’ll always end up with one file for each screen element. In terms of disk space, that may not amount to much, but in terms of file management, this can become quite messy if you have to take screenshots on a regular basis.

The “shoot to one Photoshop file / separate elements later” approach has the distinct advantage of saving all your shots into one file. That makes it easier to manage shots, and find back all screenshots that belong to the same story, book, or article when you need them later on.

To create Photoshop based screenshots you can use the Layers application (http://www.wuonm.com), which saves each screen element as a separate layer, and therefore lets you turn on/off all screen elements (including hidden ones!) individually.

However, if you’re also designing web or mobile sites, you might already own a copy of MacRabbit’s Slicy. You can use Slicy for processing screenshots as well as for design, and Slicy 1.1 just got more powerful for both usage scenarios.

I’ve created a PDF presentation free to download, that will take you through the steps from setting up your Mac system so that it creates Photoshop screenshots, right to saving your screenshots via Slicy into PNGs or JPEGs.

Slicy 1.1 PDF