Taking Screenshots

DSDN142 CREATIVE CODING

In this tutorial, you will learn how to take screenshots in a number of ways.

Capture in Processing (recommended)

Capture in Windows

Capture in OSX

Photoshop

Cropping

Saving

Alternatives to Photoshop (Gimp)

Capture in Processing (RECOMMENDED)

You can use the following code to save an image from inside Processing itself. This is very handy, because you don't have to use Photoshop to crop the image!

void keyPressed()

//Takes PNG screenshots when you push S

//Careful - doesn't prompt when overwriting files!

{

if(key == 's' || key == 'S')

{

String filePath = selectInput("Saving PNG - Select or Type File Name"); // Opens file chooser

if(filePath != null)

{

save(filePath + ".png");

}

}

}

This code is included in pattern_maker.pde. To use the code in other sketches, place it at the end of your program. Run the program and press 'S'. You will see a dialogue box asking for a file name.

Type the name you want and press Open. You now have a PNG file suitable for upload as tumbnail in openprocessing, on your blogger account or for editing in Photoshop.

(Why do you click Open, not Save? Because this is a quick and simple method of saving images, without any polish.)

CAUTION: The code does NOT check for duplicate files. Be sure you are not overwriting other files.

CAUTION: The code does NOT work the same way on Apple computers, because the operating system provides a different dialogue box. You will encounter difficulties if you try to save an image on an Apple. Because we will be using Windows in the classroom, we are providing the code as-is. Like all code, you are encouraged to change it and experiment. Although you will not be marked on a better save dialogue box, you will learn a lot, and it will be noticed.

Capture in Windows

Windows has an area of memory called the Clipboard. When you copy things, they go to the Clipboard, and you can paste them back somewhere else.

Press Alt + PrintScreen to place an image of the current window in the Clipboard.

If you only press PrintScreen, it places an image of the whole screen in the Clipboard. You will probably never need to do this.

Capture in OSX

Apple computers have several methods for taking screenshots. Some are complicated.

Press Command + Shift + Control + 4 + Space and select a window to copy just that area of screen.

Press Command + Shift + Control + 4 to select an area with a crosshair cursor. The area of screen you select will be copied.

Press Command + Shift + Control + 3 to capture the entire screen. Again, you will probably never need to do this.

Omit Control to save the image to your desktop instead. For example, press Command + Shift + 4 + Space to save an image of your window to the desktop.

Now go on to the section on Photoshop.

Photoshop

Use Photoshop to trim and correct images. Open Photoshop. Make sure that you have copied an image to the clipboard. Select the menu option File New. Photoshop will ask you about image size. The values are taken from the clipboard; you do not usually have to change them. Click OK.

Cropping

You probably still have window borders in the screenshot. Let's take a moment to remove them.

Use the rectangular marquee select tool (seen below, or press 'M), and draw around the part of the image you want to keep.

Hint: If you see an ellipse or other tool in place of a rectangle, don't panic. Click and hold on the icon or press Shift + M to cycle through different marquee selectors until you find the rectangular tool.

Drag the rectangle around the part of the image you want, like so:

Now select the menu item Image Crop, and the edges will be trimmed neatly away.

You can also use the Crop tool to draw a rectangle, then press Enter to crop.

Saving

When you are happy with your file, save it. Select File Save As. The following box will appear.

Make sure you have set the Format option to JPEG.

Name your file and save it in a sensible folder you will create many files every week and you should start sorting them now.

A Note on File Types

You should use different files for different situations.

Photoshop PSD files are best for work. They preserve all information about your file, such as layers and smart objects, and do not abstract or discard data. But they are large.

JPEG files are best for the internet. They use lossy compression to shrink your file size. This means they are small and easy to upload or download. However, every time you save as JPEG, you lose information and cannot get it back. If you repeatedly save and reopen a JPEG, you will notice that it starts to blur. Use JPEG files only at the end of your work process.

PNG files (along with TIF files and other types) occupy a middle ground. They are compressed, but do not use lossy compression, so they preserve the image. This means that they are larger than JPEG files, but are still conveniently small and may be used on the internet.

Celebrate

You're done!

Alternatives to Photoshop: The GIMP

If you want to do photo editing at home, you may be able to get Photoshop on a cheap student deal. If you don't or can't use Photoshop, try The GIMP, available free at http://www.gimp.org.

The GIMP (GNU Image Manipulation Program) has similar features to Photoshop, with powerful layers, masks, drawing tools, and effects. It is not quite as polished as Photoshop, but has many useful common-sense features. And it can open PSD files, although it will not use advanced layer features.

In The GIMP, use Ctrl + Shift + V or select File Create From Clipboard to create a new document straight from the clipboard.

Press R or click the rectangular selection tool (you can drag the edges and corners for fine adjustments) and select the menu item Image Crop to Selection; or press Shift + C to use the Crop tool.

When you are happy with your image, select File Save As, and input a file name. The GIMP is smart enough to recognise file extensions, so if you type .jpg after the name, it will save it as a JPEG.