1 http://ww2.coastal.edu/jwinslow/tech/modules/303.pdf
Basic Image Editing SUMMARY: A hands-on introduction to the fundamentals of image editing using the rich internet application, Photoshop Express. A detailed-screen shot tutorial is included. LEARNING OBJECTIVES: After completing this module, students will be able to do the following: 1) 2) 3) 4) 5)
Distinguish a rich internet application (RIA) from conventional desktop-installed software. Demonstrate how to set up an account with the Adobe Photoshop.com service. Demonstrate how to upload photos to a Photoshop.com library or album. Demonstrate how to perform basic edits to an original photographic image. Identify JPEG as a standard image format.
OVERVIEW The expectation for teachers to integrate digital graphic content into instruction has never been greater. Proficiency in capturing and editing images enables teachers to embed content-relevant photos within a variety of instructional materials, including PowerPoint presentations, Publisher flyers, signs and newsletters, Word documents, Blackboard course management resources, and of course, email attachments. The emphasis in this module will be on the basics of imaging—capturing, editing, and exporting. The module will integrate the new Photoshop.com internet service available free from Adobe, and will conclude with a fun assignment that will require you to post two photos to your blog entry for this week, one raw image (before) and one edited image (after). ABOUT PHOTOSHOP EXPRESS Most of you are very proficient already at capturing photos with your digital cameras and uploading the images to your online social networking accounts, but you are probably less experienced at editing those images, and that is the real focus of this module. Photoshop.com is a free (yes, really, FREE) online photo editing and publishing service hosted by Adobe, the same company that makes the professional version of Photoshop (CS), as well as the
2 BASIC IMAGE EDITING
http://ww2.coastal.edu/jwinslow/tech/modules/303.pdf
consumer version (Elements). The new online version called Photoshop Express is watered down in capabilities relative to the others, but it costs nothing and requires only that you create a membership account. And no, your inbox will not get junked full of spam as a result. This service is entirely legit, and a very welcome application for classroom use because it requires no installation. The program runs entirely within the browser window and all that is needed is a broadband connection to the Internet. When you consider that the professional version (CS) costs upwards of $600 and the consumer version (Elements) costs nearly $100, this free online version is a very big deal, and may even represent the beginning of the end of locally installed software in favor of on-demand rich internet applications (RIAs), commonly called cloud computing (where the Internet is the “cloud”). LEARNING PHOTOSHOP.COM Let’s be honest; there are a lot of junky editing programs out there, many of which come bundled (bungled?) in a shrinkwrapped CD when you buy new imaging hardware, such as a flatbed scanner or digital camera. Most hardware manufacturers don’t want to pay the additional licensing fees to include a premium editor like Photoshop, and instead use lower tier applications that you’ve never heard of. Of course, there are basic image editing applications already preinstalled on your computer—Windows has Picture Manager and Macintosh has iPhoto. Now of course, to be fair, iPhoto is a very capable program, but Picture Manager remains very cumbersome, with an odd panel interface that has proven very clumsy for students in this course in the past. And so what follows in this module is a tutorial on how to upload, edit, and download an image file using Photoshop.com. As you work through the module, I strongly recommend that you also take the time to view the online videos at Photoshoponline.com. These demo-movies are free, short, and efficient vehicles for learning Photoshop.com. *If you prefer to use your own photo editor and not Photoshop.com that is entirely acceptable. Please skip ahead to the last page of this module for a summary of the homework task you will need to complete. But I strongly recommend that you take the time to learn Photoshop.com because it is very popular in the public schools, where limited budgets make free online tools very attractive. CREATING YOUR ACCOUNT Establishing an account at Photoshop.com is painless. It costs nothing except the time it takes to fill out your name, email address, password, and a few other fields. One word of advice—make sure you use a real email address because you will have to verify to activate, and if you’ve plugged in a bogus addy, your account will never be usable. If you are paranoid about spam, just make sure to deselect the option to receive Adobe communications and your inbox will remain unmolested. 1) From a browser window, go to the Photoshop.com home page and click the Join Now button.
1
2) Fill in the requested fields as prompted. Use a real email address (preferably your coastal account) and remember to deselect the receive communications option box if you prefer not to have Adobe send you email updates and incentives.
2
3 BASIC IMAGE EDITING
http://ww2.coastal.edu/jwinslow/tech/modules/303.pdf
UPLOADING PHOTOS Given that Photoshop.com is an internet application, you have to upload your photos before editing them. Photoshop.com will store them loosely in your library, or if you prefer, in a specific album that you name. Albums are like desktop folders, and are an efficient way to keep your photos organized. Later you can even publish an album into a public gallery (accessible by your own custom URL—yourusername.photoshop.com), to share with other users. It’s probably worth mentioning here that your homework for this module is to publish two photos to your blog—an unedited image and an edited image of yourself. This photo will be viewable by your classmates, so try to choose a photo that doesn’t present yourself in an entirely embarrassing manner. You probably have photos stored on your computer, your camera, your phone, or your profile at MySpace and FaceBook. Any of these photos are eligible for the homework assignment provided that meet two criteria:
They must use the industry standard JPEG format (.jpg or .jpeg). They should not shame yourself or this course (no drunk photos, please).
3) Log in to Photoshop.com and click Online Tools / Photoshop Express Editor.
3
4 4) Click the Upload Photos button
5) Read the confirmation message and click Upload. Then browse for an appropriate image. If you prefer to use an image that is already online, or is stored on your phone or camera, you will have to download the .JPG file to your computer first. If you’d rather just use the sample image in this module, then download the tahitibure1.jpg from the main modules link in Blackboard (rightclick, Save Target/Link As).
5
4 BASIC IMAGE EDITING
http://ww2.coastal.edu/jwinslow/tech/modules/303.pdf
EDITING PHOTOS There are three fundamental editing skills you need to master for basic competence with Photoshop Express—cropping, resizing and color correction. There are many others, but these three are foundational to all else. Cropping refers to the selection of desired content in a photo, usually with a geometric shape tool such as a rectangular or oval marquee, and the subsequent removal of everything else outside the selection shape. Cropping is the saving grace of amateur photographers who have yet to master the art of subject framing. How many photos do you have in your collection that were captured at a distance so far from the subject that the headspace (the distance between subject head and the border of the photo) is too large? Excessive headspace is easily the most common mistake amateurs make when framing their subjects. Although it is beyond the scope of this course to explore in great detail, please browse the Wikipedia entries for cropping, composition, and the rule of thirds. Resizing is exactly what it sounds like, changing the height and width pixel dimensions of an image. Although the process can be somewhat confounded by the principle of resolution, which is a measure of pixel density per square inch of display area. Most electronic systems (such as a monitor) display pixels at a density of 72-96 PPI (pixels per inch), but it is worth mentioning that hardcopy printers can display much higher resolutions (600-1200+ color dots per inch, or DPI) for more professional quality output. PSE does not enable modification of image resolution, however, and only allows users to change the raw pixel dimensions. This simplifies the resizing process significantly. Color correction is also very straightforward. Most cheap consumer cameras capture images with color problems of some kind, including saturation (color mixture and intensity), exposure (brightness and contrast), as well as tuning (focus and sharpness). PSE enables only basic color correction, but for teacher needs, the functions provided are entirely adequate. Both Photoshop Elements and CS have much more comprehensive color correction tools. 6) Select the Crop & Rotate tool.
7) Click drag the crop tool to darg a rectangular marquee around the principal subject of your photo. Try to honor the composition Rule of Thirds, if possible.
6
7
5 BASIC IMAGE EDITING
http://ww2.coastal.edu/jwinslow/tech/modules/303.pdf
8) Click on the Save Copy button and save a copy of the image by adding the word “_edited” to the file name. This preserves your original version in case you decide to edit it differently later.
8
After the copy is saved, the Photoshop Express Editor switches to the Organizer view, which looks like this:
9
9) Click the Edit button to continue editing your newly cropped photo.
6 BASIC IMAGE EDITING
http://ww2.coastal.edu/jwinslow/tech/modules/303.pdf
It is important to point out that PE will automatically zoom out of an image to a certain percentage of full size in order to fit it within the workspace. For example, in the screenshot below you can easily see that our cropped image is now displayed at only 53% zoom (your value may differ). 10) Practice using the slider to change zoom levels.
10
11) Note how once you expand the zoom to a high enough level (99% in this example), not all of the image can fit in the available space, but it’s still easy to change the displayed area by click-dragging the frame move tool:
11
Given that most of today’s modern megapixel digital cameras capture photos at very large dimensions, it is very unlikely that an uploaded file will display automatically at 100% (unless you are lucky enough to have a giant monitor of 32” or greater). For instructional use, if most of the photos you plan to edit are for integrating into other documents and not for stand alone full-resolution slide shows, then it will be very important to resize to dimensions that are logical for your intended use. For example, the native resolution of most classroom projectors is 1024x768 pixels, so any image you intend to project needs to be smaller than that for optimal image quality. If you intend to use an image in PowerPoint and the slide needs text on it as well, then the photo should be saved at a much smaller size to allow room for the text (for example, 320x240). Although an inserted image in PowerPoint can always be resized within the slide by dragging the handles, the quality of the image will degrade slightly, which may not be desirable. Fortunately, PE automatically zooms to 100% the moment you click on the Resize tool, and provides several dimension templates you can select to resize your image: Profile (150x120), Mobile (320x240), Email (640x480), Website (800x600), and even a Custom option where you can define your own size.
7 BASIC IMAGE EDITING
http://ww2.coastal.edu/jwinslow/tech/modules/303.pdf
12) For example, click the Resize button and choose the Email dimensions button.
10 12
Note that your resized image will be 640 pixels in width, but it will maintain the original aspect ratio so the height will be proportionate (and more than likely not 480).
PE also gives you the ability to specify custom dimensions (for example, 180x123 above). Be advised however, that the dimensions will be rejected if you are using the full-screen mode. This is most likely a bug and will hopefully be fixed in future PE versions. By the way, the full-screen toggle button is located in the top-right of the PE window, just below the exit X button.
8 BASIC IMAGE EDITING
http://ww2.coastal.edu/jwinslow/tech/modules/303.pdf
Color correcting a photo is a somewhat intuitive process guided by lots of trial and error, that’s all part of the fun of using Photoshop. Experimentation with a variety of different tools will ultimately yield a better looking image, and fortunately, PSE provides a very elegant interface for color correction. Once you choose a correction or tuning tool, you simply mouse over the preview tabs at the top to see the real time changes applied to your photo. When you find one you like, just click it. 13) Click the Auto Correct tool and mouse over the Preview icons to see different color corrections. Click to apply. Most of the other Basic and Tuning tools work the same way, so experiment as desired, especially with Exposure, Saturation and White Balance. It is also fun to play with the Advanced tools.
13
14) When you finally are satisfied with the look of your edited image, click the Save Copy button and enter a new name, preferably something with the word “edited” in it so that you will know it is the final version. This will ensure that your original remains unchanged, so that you may edit future copies if desired.
14
9 BASIC IMAGE EDITING
http://ww2.coastal.edu/jwinslow/tech/modules/303.pdf
After you save your edited photo as a separate file, PE should return you to the Organizer view, where you should see the original image and the newly edited one. Note however that you may need to change your view to medium thumbnails in order to see the photos side by side.
15 15) Click the medium thumbnails button.
The final step, of course, is to download your edited photo for use elsewhere (PowerPoint, email, Word, Blackboard...etc). And remember, the file format exported is .JPG, which remains an aging but universal standard format readable by virtually all modern productivity applications that teachers might use.
16) Mouse-over the edited photo and wait for the Photo Options pull-down menu to reveal:
16 17) Select Download Photo.
17
10 BASIC IMAGE EDITING
http://ww2.coastal.edu/jwinslow/tech/modules/303.pdf
18) Choose Original Size and then Download to save to your computer in a desired location (such as your USB drive).
18
19) Note also that your image is now automatically hosted live online at a unique URL that you can link from other documents, including PowerPoint, email, Facebook...etc.
19
So that’s Photoshop.com! Not bad for a free web app, eh?
HOMEWORK FOR THIS MODULE! Like the previous module, your blog post for this module will not be a written paragraph. Instead, it will be a pair of attached files that demonstrate you understand the basics of image editing, as described in this module. The first image will be an original photo of you in a non-compromising context (no drunk photos, funny though they may be). The second image will be an edited version of that exact same file. Here are the criteria: 1) 2) 3) 4) 5) 6) 7)
The The You The The The The
original photo must be at least 1024 x768. original photo must be a .JPG. must be in the original photo. edited photo must be cropped in an obvious way so that YOU are the dominant subject. edited photo must be resized so that the width does not exceed 640 pixels. edited photo must be color corrected or special effected in an obvious way different from the original. edited photo must renamed with the word “edited” integrated into the name.
Please post both of these files in Blackboard to Blog 10 for this module. Note that you can attach multiple files to your entry, so do not click the Post/Submit button until both files have been successfully attached. Remember that you do not HAVE to use Photoshop Express if you already are comfortable with an existing image editing application, but I strongly encourage you to do so because that is what the teachers are using (because it’s FREE!). Finally, I once had a student who had been placed in a government protection plan because of domestic abuse, and she was living under an alias, and terrified of having to post her own image online. I doubt that any of you are in a similar extreme situation, but if you are one of those people who prefers not to use their own image, then choose a kid picture, pet picture, or even a landscape. On one hand it is nice to put faces with names, especially with DL students, but ever since that episode years ago, I am very accommodating. Ultimately, what matters most to me is that demonstrate that you know how to perform the basic photo edits described in this module.
