Tutorial: Screenshot Trimming 101

.... shhhh... it's still Monday... somewhere. >_>

Turning this into the week of the screenshot was definitely not wholly intentional. However, I find that when the situation stands up and stuffs a half-dozen neon-colored hints right in your face, it's best to shut up and take them. (Else you go blind. I mean, we're talking 250 candles worth of hot, hot pink in front of the eyeballs, here.) So, since I value my vision and my momma didn't raise no hint-missin' fools, we're going to take a quick pictorial trip through the process of trimming a screenshot with Adobe Photoshop.

Step 0: The setup

Once upon a time, when we were waltzing through the wilds of Warcraft, we came upon a thing. It was a wonderful thing! A perfect thing! And we had to have it. So, with all the grace and agility at our command, we hit that crazy little button that sits above our "Insert" key on the keyboard. The Print Screen button works some massive mojo behind the scenes, plying our World of Warcraft game with its irresistible charm until WoW happily deposits a JPG file into the Screenshots folder of its install directory. Our thing is there, safely ensconced in that file.

Now, we need to rescue our thing. We want to use it as a pretty doodad on our blog, so we need to trim it away from its background and set it on a transparent one so it will always match our blog-layout-du-jour. Enter our hero, Photoshop! Using some relatively simple tools and techniques, he is going to let us extract our thing from its environment and place it on a happy, healthy, and ever-so-transparent background.

Step 1: Unnatural Selection

There are two concepts that are key to doing anything in Photoshop: layers and masks. Whether you're cropping, slicing, scrambling, doodling or painting your masterpiece, they are the cornerstones of the program's higher functions. Thus, I hope you'll excuse me if I take a moment to explain them both.

1. Masks: A 'mask' in art is something that literally blocks off a part of the canvas or paper. We don't want to get into artistic media, but imagine a mask like a sheet of glass that you're cutting to shape and putting over your piece of paper. You can see your drawing through it, but if you try to apply paint over the glass, nothing happens. It doesn't reach the paper.
   
   This is exactly the concept of masking an area in Photoshop. You're defining a boundary. Within that boundary, you're working on your paper... painting, drawing, applying a filter or effect - whatever you like. Outside of that boundary, your tool can't touch the paper, so if you try to paint or apply an effect, nothing happens.
   
   
2. Layers: If you think of a layer in a very literal sense, you're probably on the right track. If you took your painting and, instead of just painting on a canvas, you painted it on 5 different pieces of glass that were stacked one on top of the other, you would have painted on layers. This gives you the freedom to, say, change or destroy layer 3 without altering layer 1, or maybe move the apple on layer 5 a little farther to the right with respect to the orange that you painted on layer 2. When the layers are stacked and viewed together, you see your picture, but when handled separately, they let you work on only the orange instead of the whole fruit basket.
   
   That's all I'm going to say about Layers, but if you want to see a great graphical representation and further explanation, I recommend you go visit The Web Design Library.
   

Okay. Wake up, now. We're going to start the step-by-step rescuing of our thing. Open up that crazily-named JPG that WoW deposited in your WorldofWarcraft/Screenshots directory. (Clicky for source file, if you please.)

Well, will you look at that?! Our thing is a door. A very pretty, ornate door from Silvermoon City. Luckily for us*, this door seems to have really high-contrast colors compared to its background. That means that we can use a really friendly tool when we mask the door to trim it away from its background. Hold your horses, though. First, we need to play a little footsie with the layers.

See, Photoshop is sometimes too smart for our own good. When it opened your JPG file, it said to itself, "Well, self. This JPG is a file format that doesn't support transparency. Thus, of course our esteemed user doesn't want to be able to put transparency in here!" Operating on that erroneous assumption, it opens our file on a transparency-locked background layer.

I'm sorry. I have to apologize here because I am wholly self-taught. There may be some way to unlock this special layer type, but I have never found it. So, we need to bust free from the restrictions imposed on the 'Background' of a JPG. We do that by duplicating the layer and deleting the original Background. In your layers toolbar (by default, it should be on the right side of the workspace), right-click on the Background layer and select "Duplicate Layer". It will open a dialog that lets you specify a name and location for this layer. I don't usually bother to rename it, but you can feel free to give it whatever name you want. Don't change the location, however, or cowthulu will fall from the sky and squash you dead. Plus, you'll get really confused. Drag the original Background layer to the little trash can in the lower right corner of your layers window to delete it.

Now that you have a workable, unlocked layer (notice that the padlock icon to the right of the Background name is gone?), you need to use the Magic Wand Tool to make your mask. Go to your toolbar and grab your Magic Wand**. In CS3, it is hidden under some crazy new tool I haven't played with. In CS2 or older, it should be staring right at you from the toolbar.

The Magic Wand Tool makes selections based on color. It's a very versatile tool, but if I go into too much detail right now, you're going to be asleep by the end of this tutorial. Feel free to email me if you want to know more. Today, we get to use it on some pretty standard settings. Once you have the tool selected, you will see that the horizontal menu bar immediately above your image has changed its options. (General tip: This menu bar is always specific to whatever tool you're using.)

Use a 'Tolerance' of 32 (default) and make sure both 'Anti-alias' and 'Contiguous' are checked. 'Sample All Layers' might as well be unchecked, but it doesn't really matter. We only have one layer right now, anyway. Also, make sure that the 'Add to Selection' button is depressed. It's the second one from the left of those four funny-looking little boxie-things.

Alright, we're ready to select, now. We are choosing the areas of the image that we want to CUT AWAY, so start clicking the wall and the flooring below the door. You've selected 'Add to Selection', so each click should extend the dotted 'marquee' that marks the boundary of your mask. I put little stars on some of the places that you'll need to click. I think you'll get a feel for how the wand works pretty quickly, but just remember... it's choosing contiguous areas of similar colors to the one pixel you click on each time. You can always use Edit >> Undo to go back to your previous click, and if you click outside the image, you can blank the boundaries of your mask and start over again. (CTRL+D does the same thing.)

After a while, you should have a mask boundary that looks something like this:

That pesky golden filigree on the pillars is causing a headache, though. Sure, we could click a dozen more times with the Magic Wand to add it into the mask, but let's take easy-mode. We gotta get back to WoW, after all!

The remaining area is far enough from the door we want to keep that we can safely just draw a square around it, so we're going to switch to the Rectangular Marquee Tool. This is the dumber-but-likeable version of the Magic Wand. It just draws a square and masks everything in it. Remember, though, we are still adding to our previous mask, so make sure that you've got that 'Add to Selection' option toggled.*** Draw squares around the areas of the columns that are still unselected, similar to the handy red dotted-lines I've put in the image above for you. Now you have the entire background 'masked' away from the door, that beautiful thing that we love so much! It's time to cut it free, boys and girls...

Step 2: Sweet Freedom

Under the edit menu, select the Clear option. This will take everything you selected back in Step 1 and make it completely transparent. Well, except that Photoshop shows transparency as a grey-on-white checkerboard pattern. You'll have to get your head around 'checkerboard = transparent.'

Lovely! We have a free and independent door. But we really don't need our 150-pixel-wide door to sit on a 550-pixel-wide transparent background. That's mad internet magumbo. So we need to make another mask and crop this baby down to good-magumbo size. I'm showing you a little tool that can help with this in the screenshot above, but you don't have to use it. The grids are just guidelines on the image, and when activated, they give your mouse pointer a 'snap line' that it will cling to. It helps for drawing straight lines and boxing in doors without clipping any corners. Of course, with or without the guides, this step is simple. Grab your Rectangular Marquee Tool and draw a nice, tight box around your door. (Highlighted in red in the image below.)

Under the Image menu, you want to select the Crop command. That will trim everything outside your marquee completely out of the file, thus making your file a nice, small, tight little view of your door and nothing else. Don't fret. If you don't like your Crop, just hit Undo. (Undo is the GOD of Photoshop, and if you haven't noticed it yet, the program lets you 'undo' about the last 25 actions or so. CTRL+ALT+Z steps backwards through what you've done.) If you turned on your Grid, you can feel free to turn it off, now, by the same method. Or not. S'up to you.

Step 3: Mini-Me

Great! Liberated and skinny door! However... if your screen resolution is anything like mine, your door is still over 400 pixels wide and nearly 600 tall. You don't want your cute little blog doodad to overshadow your witty words of wizardly wisdom. It's time to scale it down to a more sidekick-appropriate size. Under the Image menu, select Image Size.

Since you didn't hit the Daily Double, I'm guessing a dialogue box popped up. Make yours look something like this (choose whatever size you like most, but make sure the "Constrain Proportions" option is checked before you change anything):

You will probably find that your Resolution defaults to 72. Generally speaking, 72 pixels per inch is sufficient for any web image, as that's the best pixel density modern monitors bother with. Higher PPI ratings are purely for print images. Hit Okay.

Your door is now a properly sidekick door. We like that, however we (being me) also kinda dislike how Photoshop tends to let things get a little 'fuzzy' when it shrinks them. This is an optional step, but I do this on almost every image I resize. I want to use a Filter to Sharpen the lines in the door. We're not going to talk about the math of it all, but it makes all the detail of a small image just a tad clearer.

Open your Filter menu and select the Sharpen command.

... no 'and then'. That's all there is to it. You can repeat that if you want it even more sharpened. Since you haven't played with Photoshop (presumably) as long as I have, here is a side-by-side of exactly what this Sharpen thing is doing to our door. Left is unSharpened, as it was when Photoshop first shrunk it down to sidekick size. Right is with the Sharpen filter applied twice.

Step 4: Set In Stone

And there you have it. Your door is trimmed, transparencied, possibly sharpened, and definitely liberated from the confines of its background. Now all we need to do is save it before the dog kicks the power cord and kills the computer. In your File menu, select Save As. Choose PNG as the file type. No, not GIF. GIF is so 2007. We use PNGs these days, because they are clean, friendly and they don't add that nasty gunky pixelation to the edges of the transparency. Look, just do it. You'll thank me later.

And there you have it. You've got a shiny, wonderful, blog-friendly thing, and you can hug it and squeeze it and call it George. Would you like to see George the door in all his glory?

I knew you would. :)

Epilogue: Summing Up

So, what did we learn in this lesson?

• How to Duplicate and Delete Layers.
  
• How to use the Magic Wand Tool and the Rectangular Marquee Tool to make masks.
• How to Clear a portion of a layer to transparency.
  
• How to show and hide the Grid system and what it means to 'snap' to the Grid.
• How to Crop and Resize images.
• How to apply a basic Sharpen filter.
• How to create a PNG file.
  

Next lesson, we'll take a lower-contrast image to work with. Because all the colors are similar, our Magic Wand Tool doesn't work as well, so we'll be using the Onion Skin and the Lasso Tool for more refined control of masking. Until then!

* Ah, but is it luck or is perhaps the author a devious being who planned it this way?? ... the world may never know.
** ... that sounds wrong, doesn't it?
*** If you accidentally forget, it will clear the mask. Don't fret, though. Just Edit - Undo (or CTRL+Z) to get your mask back.