How to Take and Edit Screenshots For Tutorials

All of the sites across the Tuts+ network are constantly on the lookout for top quality contributors. If you're interested in writing for us, drop us a line. Before you work something up though, be sure to read through this awesome guide that takes you through the complete process of taking and preparing your screenshots.

Learn From a Pro

Screenshots are probably the most important element of a written tutorial. Our readers will use them as a guide as they follow your instructions so it is important that your screenshots accurately depict the actions that are being taken during each step. There are many ways to produce screenshots for a tutorial but in this tutorial, veteran Psdtuts+ author, Ed Lopez will explain his method for producing high quality and descriptive screenshots using both screen recording and screen capture software to record video and screenshots for his written tutorials. Let's get started!

What You Need

This method of capturing screenshots for a tutorial involves the use of several applications. Please note that this method was done using some Mac only applications but you can also adapt this method for PC compatible applications.

• Screenflow (Mac)
• LittleSnapper (Mac)
• Adobe Bridge (Optional)

Final Result

Please take a look at an example of one of Ed's tutorials here.

Step 1: Recording

When I write a tutorial, I find the thought of stopping to take screenshots along the way to be very distracting. That is why I devised a method of taking screenshots that allows me to create artwork without interfering with the creative process.

The first step is to open up screenflow and begin a new recording. Now create your artwork just as you would if you were working on a normal project. Screenflow will now record all your actions in the background while you work.

Step 2: Finalize the Recording

Authors typically spend many hours on a project and can often spread those hours out over several days. This means that you may occasionally stop, take breaks, or work on other projects. When you take a break, feel free to stop the recording. It will show up in the sidebar under the media tab. Once each segment has been recorded, drag it down into your timeline for editing.

Step 3: Grab the Screenshots

Now that you have finished recording the entire project, you can now start taking screenshots. To do this, open LittleSnapper and create a new Smart Collection.

Set a Date Rule as shown below. This will make sure that all images created after this date will be placed into the same collection.

Step 4: Define Shortcut Keys

Now define a shortcut key for the Snap Area as shown below. Feel free to use whichever shortcut keys you are most comfortable with. I set mine to Command + Option/Alt + X.

Step 5: Start Snapping

Now that LittleSnapper is ready, open up Screenflow, load your recording, and press play. One of the nice things about using Screenflow to capture the entire process is that you can now zoom in and out, when necessary to make sure that you get the exact screenshot that you need.

When you're ready to take a screenshot, make sure to pause the recording at the right spot. Then hit the keyboard shortcut keys that you defined earlier in this tutorial to take your screenshots. Once you hit them, the screen will gray-out and will allow you to quickly drag out the area of the screen that you would like to save. Take careful note of the pixel indicator so that you do not drag out a screenshot larger than 600 pixels wide.

Step 6: Make Notations

Sometimes you will need to add notations to your screenshots. Notations can help the reader understand what they are looking at. For instance, if you want to direct your readers' attention to a particular part of the screen, you can draw an arrow to point it out. You can also (and should) draw lines, shapes, and text when necessary to help explain the step. Adding text to your screenshot can be helpful to insert color codes, for instance.

Once you click the snap button, you will be able to add any notations that you need for that particular tutorial.

Step 7: Export Your Images

When you take screenshots with LittleSnapper, your images will be arranged sequentially. If you want to rename a file, you can do this now. Once you are satisfied with how your images are named, you can export as shown below.

Your images will now be exported to your selected folder.

Step 8: Rename Files (Optional)

At this point, you may want to rename your files. Bridge can do this fairly quickly. Just open bridge, browse to your folder, select all the images in that folder, go to Tools > Batch Rename.

Step 9: Convert to JPG and Optimize (Optional)

Now optmize your images for the web and convert them to JPG files. We suggest that you do this using an application that is capable of batch processing. Adobe Bridge, Fireworks, and Photoshop can all do this. We will use Bridge in the example below.

Step 10: Export Video (Optional)

In this optional step, you can export the video that you recorded and provide it with the rest of your files. You can do this in a number of ways. You can remove the audio and provide the real time footage, or remove the audio, speed up the footage, and record a new track that includes narration that explains what you are doing.

Step 11: Write The HTML

Now you can begin to write your text and assemble your HTML. Use this template to format your HTML file. Be sure to follow the appropriate guidelines along the way.

Submit Something!

That's all there is to it! If you think you're up for the challenge of submitting something and joining the Mactuts+ team, hit up our new author page for more information on how to get started. Also be sure to check out our other sites to see if you can get plugged in anywhere else.