CS 200 Assignment 3 Pixel Graphics Due Tuesday September 27th 2016, 9:00 am Readings and Resources Texts: Suggested excerpts from Learning Web Design Files The required files are on Learn in the Week 3 > Files for Assignment: Pixel Graphics. You will need: SantaMaria.psd AssignThreeRaw.doc TreeMan.psd TreeMan.pdf TreeManPalettes.pdf Assignment Objectives To explore the interface of Photoshop and critically compare it to other applications used so far in class. To use a pixel graphics program to modify/enhance a photo. To modify dimensions and layers in a pixel graphics program. Assignment Strategy Questions 1 through 4 must be done independently. Question 5 may be done independently or with a partner. If you work with a partner, please add both of your names, hand-in codes, and student IDs to the file and name the files with yhc1_yhc2. CS 200 Assignment 3 Page 1
Your Tasks 1. (10%) Use Photoshop to crop and resize a digital image so that it is exactly 180 pixels high & 150 pixels wide, with a resolution of 100 dpi, and shows just your face, like the example on the right. This image does not need to be manipulated, although you are free to do so. (Sharpening and Levels Adjustment are nearly always a good idea.) Save this image in a png file with the name yhc_a3q1.png. Make a copy of this file and rescale it by one half so that it is exactly 90 pixels high and 75 pixels wide. Convert the reduced image to gray-scale and save it in a high-quality jpeg file with the name yhc_a3q1.jpg. Hints: In Photoshop, use the menu item Image > Mode > Grayscale to eliminate color information from an image. (Eliminating the color information reduces the file size by two thirds. Be sure you understand why.) Use Photoshop s Image > Image Size... dialog to resize an image or to change its resolution. In the Image Size dialog, check the o Constrain Proportions checkbox to preserve the aspect ratio Photoshop will then automatically compute a new width if you change the height, and vice-versa. In the Image Size dialog, if you check the o Resample Image checkbox and click OK after changing the width and/or height, Photoshop builds a new image by sampling the existing image per the dialog box s settings. When you do this, you will nearly always want to have selected Bicubic sampling, which causes Photoshop to make each new sample a weighted average of nearby pixel colours. Don t check Resample Image if you just want to change the image s resolution. Most programs use the image resolution to determine the actual size of the image when you insert it into a document. (Image pixel width in inches / resolution in dots per inch = image display width in inches.) CS 200 Assignment 3 Page 2
2. (20%) In the Week 3 > Files for Assignment: Pixel Graphics folder on Learn, you will find a Photoshop document called SantaMaria.psd, which contains three layers. Make a copy of the file in your Documents folder. The original photograph stored in the bottom layer of the SantaMaria.psd document needs to be corrected: the façade verticals are not parallel, as they should be to look right (this is especially noticeable when looking at the right and left sides). The image shown above is the corrected version of the photograph. The bottom layer is the original photograph that you should work from (duplicate it to a new layer for each manipulation). The second layer is an example of a transform from the Edit menu applied to the original photograph. The third layer shows the screen snapshot of this manipulation in process taken with the Snapz Pro application. The snapshot shows the transform handles and frame as well as the cursor. Starting from the original photograph each time, investigate the different types of transformations available in Photoshop s Edit > Transform menu, by moving the control handles of the frame or grid. Identify the transformation type that corrects the verticals in the most efficient way (i.e. the least amount of work the user has to do). Then, use Snapz Pro to take a snapshot of the Photoshop transform with the frame and control handles (as the third layer illustrates for one transformation). Do not take a screenshot of the entire screen, only the relevant portion. (Note that you invoke Snapz Pro with the key combination shift-command-3 (X-apple-3). If you want to select a specific area of the screen to take a screenshot of, use shift-command-4 (X-apple-4). By default it places snapshots on the desktop.) Save the snapshot as yhc_a3q2_transformname.png where TransformName is replaced by the transformation you used. 3. (20%) In Week 3 > Files for Assignment: Pixel Graphics on Learn, you will find AssignThreeRaw.doc, the formatted text for the document you are now reading, but without the graphics. Download the file, rename it yhc_a3q3.doc, and then a) Copy/paste or use Insert > Picture > From File... to insert yhc_a3q1.jpg from question 1 into the document. b) Use Word s Format > Picture... menu or contextual menu item to position your image in yhc_a3q3.doc where the image is in question 1. Corrected photograph using the TransformName transform. c) Use Word s Format > Picture... menu or contextual menu items to add a one-point black border to the image. d) Use similar steps to insert your snapshot, yhc_a3q2_transformname.png into yhc_a3q4.doc. Position it at the place of the corrected photograph in question 2. e) Update in the caption TransformName with the transform you used in question 2. CS 200 Assignment 3 Page 3
4. (20%) See how much you can improve a photo of your choosing (or the photo from question 1) using the image transformation tools in Photoshop. You must use at least two different transformation/manipulation tools. Place the original scanned image and its improved version together in a Photoshop document named yhc_a3q4.psd. If they are in separate layers, make sure they are visible together (ie. not directly on top of each other). Label the two Before and After, respectively, and add a text label containing your name, userid & student ID number. Sign this document with your name using at least two visibly distinct brushes in two visibly distinct colours. In a separate, short MS Word document named yhc_a3q4.doc write a brief summary of the transformations you found useful, or those that you tried but which did not improve your image significantly if none helped (minimum of 2). 5. (30%) For this question only, you may work together with a partner. If you do so, only one of you should submit an answer for this question, and name the files yhc1_yhc2_treeman.psd and yhc1_yhc2_treeman.png. Consider the images in TreeMan.pdf (found in Week 3 > Files for Assignment: Pixel Graphics on Learn). Your task is to use Photoshop s various selection tools and adjustment layers to convert the image in TreeMan.psd (rename this to yhc_treeman.psd) into the right hand image appearing in TreeMan.pdf. Start by: Selecting the nose and saving that selection as a channel named Nose; Selecting the right eye and saving that selection as a channel named Right Eye; Selecting the left eye and saving that selection as a channel named Left Eye; Combining the left and right eye masks to create a mask for both eyes. At this point, your Channels palette should look like the palette shown in TreeManPalettes.pdf, though the alpha channels (aka mask channels) need not be in the same order. Then, create adjustment layers as shown on the right of TreeManPalettes.pdf. Modify the various adjustment layers until yhc_treeman.psd matches what you see in TreeMan.pdf. Then, create a file named yhc_treeman.png from yhc_treeman.psd that shows the result of your work. CS 200 Assignment 3 Page 4
Hints You may find the following selection tools useful: Elliptical Marquee tool, Magic Wand tool, Lasso tool, Zoom tool It s useful to know that in Photoshop you can add/subtract pixels to/from an already selected area by holding down the shift/alt key while using a selection tool to select pixels in the image. You will probably also want to feather your selections by a few pixels to obtain a smooth transition from areas effected by layer transitions to areas that are not effected. Feathering specified in the options bar must be set before you select an area; feathering can be increased for an existing selection via the Select > Modify > Feather... menu item, but not decreased. Remember that you can select an alpha channel to display it in the image window and modify it with a brush, thus modifying the selection that it represents. While doing so you will often find it convenient to zoom in several hundred percent or more on an area of interest. Sometimes a hardedged, one-pixel black, white or gray brush is useful! Note: When color balancing the eyes and nose, you ll want to be adjusting highlights, not adjusting mid-tones, because the eyes and nose are the brightest parts of the image. In fact, the nose is sufficiently bright that you will need to reduce its brightness (aka luminosity) before changing its colour balance that s what the H/S reduce luminosity adjustment layer is for. Submission Instructions Create a folder called yhc_assign3, containing the following: Question 1: The large cropped & resized image yhc_a3q1.png and the smaller grayscale version of this file named yhc_a3q1.jpg. Question 2: Your snapshot of the transformation in action that you identified in question 2, named yhc_a3q2transformname.png. Question 3: Your modified copy of AssignThreeRaw, named yhc_a3q3.doc which contains the two images you added. Question 4: The Photoshop document yhc_a2q4.psd including your before and after photos, and the summary of your transformations in yhc_a3q4.doc. Question 5: The Photoshop document, yhc_treeman.psd, with the various adjustment layers, and the file yhc_treeman.png created from it (or yhc1_yhc2_treeman.psd and yhc1_yhc2_treeman.png if you have a partner). Compress the folder, name it yhc_assign3 and submit to the Assignment 3 DropBox on Learn. CS 200 Assignment 3 Page 5
Additional Information By default, Word snaps pictures to a grid as you move them, which can make it impossible to place the picture exactly where you want it. You may want to check Word s online help for information about this grid, and for information about pictures. Recall that the colour at a given pixel is represented as a triplet of intensities, one each for red, green and blue. (Usually each is a value between 0 and 255, and occupies one byte of storage.) Conversion to grayscale amounts to replacing these with a single integer that represents the equivalent monochrome intensity (grey level) at that pixel, again with a value between 0 and 255 that occupies one byte of storage. If you check Resize Image and change one or more settings in Photoshop s Image Size dialog, you are telling Photoshop to do its best to alter the image file so as to approximate the result of having rescanned the image with the resolution you specify, or of having first scaled the image and then sampled it at the resolution specified, depending on what value(s) you change. Changing pixel resolution to shrink an image usually produces a satisfactory result. Changing pixel resolution to enlarge an image will not; it s better to re-scan. Can you figure out why? If you don t check ý Resample Image in the Image Size dialog box and change the resolution, you are telling Photoshop to treat the image as if it had been scanned at a different number of dots per inch (dpi). The image will not appear to change size on the screen, 1 and its file size will not change, but it will change size when printed on a laser printer because the printer will use different-size blocks of printer pixels to approximate each image sample (different screen frequencies ). Masks, selections, layers and filters are important concepts in pixel graphics applications. Be sure you understand them. 1 In Photoshop a zoom factor of 100% implies that each image pixel is displayed as a single display pixel, a zoom factor of 200% implies that each image pixel is displayed as a 2x2 block of display pixels, and so on. By implication, the meaning of a particular zoom factor is completely independent of an image s resolution, or of a change in that resolution. To display an image on the screen at the size it will print, which IS affected by resolution, click the Print Size button on the zoom bar. CS 200 Assignment 3 Page 6