Page 1

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 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.

Tutorial - Taking Screenshots  

How to take screenshots of Processing sketches.