| • | Two-DimensionalDesign | ||||||||
| Part One | Part Two | • | |||||||
| • | Exercise—Value Analysis/Black & White Photo | ||||||||
| • | Objectives: | ||||||||
This exercise will promote the understanding of the principle of visual variety for sustaining interest in a 2-dimensional design through the examination of the complex light and dark relationships in a well balanced black and white photograph. |
|||||||||
| The two parts of the project will introduce various aspects of digital design software. Photoshop techniques will be practiced in the first part. The second part will introduce Flash animation software. | |||||||||
| Final output for both parts will be presented using Dreamweaver Web design software. Each student will publish the project on her/his Two-Dimensional Design Portfolio Website. | |||||||||
| • | Procedure: part one | ||||||||
| 1. Start by putting a digital photograph selfportrait on your design center computer. Both the process for taking a digital selfportrait and the process for putting the digital image on your computer will be explained in class. | |||||||||
2. Open the photoshop software. You should be able to click on the photoshop icon in the dock. If it is not there, go to the finder and select >applications from the left column. Locate Adobe Photoshop folder and then the photoshop program in the folder. |
|||||||||
| 3. Open your digital selfportrait in photoshop. Go to the file menu at the top and select >open then locate your photo which should be on the desktop. | |||||||||
| 4. The first thing we want to do is crop the image so that your face is the dominant focal point. Go to the tool box on the right side and pick the crop tool which is the third tool down in the left column. Then go to your photo and drag a rectangle that is the size and shape you want your photo to be with the face as the primary focus. Once you drag the rectangle you can still adjust the location and the size/shape by either dragging the whole box or clicking and dragging an anchor point to resize. Once you have the dimension and location you want, double click inside the box, or click again on the tool in the toolbox. If you click on the crop tool you will be allowed to choose to keep it or start over. If you double click on the box it will immediately resize. | |||||||||
| 5. Adjust the resolution and final dimensions of the image. Go to the top menu >image, then >Image Size. In the window that comes up change the document size so that the largest dimension is 10 inches. Make sure the constrain proportions box is selected. If inches is not displayed, click on the drop down menu and select inches. Then change the resolution to 300 pixels/inch. Click OK. | |||||||||
| 6. Convert your color photo into a black and white photo. Go to the Image menu at the top and then >mode, >greyscale. Now save the black and white copy. Go to >file, >save as. Change the format in the drop down menu in the lower section, to JPEG. Give the file a new name and save it to the desktop or into your 2d folder. | |||||||||
| 7. Next we will simplify the image into a grid of gray squares that show the variety of values presented in the image. To do this go to the Image menu, then >image size. Simply change the resolution to one (1) pixel per inch, then click OK. The image will get a lot smaller on your screen but its actual size is still 10" by x" as you determined earlier. Enlarge the image by using the keyboard: apple key and the PLUS key, until it stops getting larger. | |||||||||
| 8. Now we must make some counter-intuitive moves to get the results we need. Change the mode of the color to Index color by going to the Image menu at the top, choose >mode, >index color. Very little should change but this is crucial. Then change the resolution of the image back to 300 by going to Image menu, >Image Size. Type 300 as the new resolution and 5 inches as the largest dimension. Then OK. The photo should become quite large. To make it wholly visible in the screen use the keyboard again and hold down the apple key and the zero number key. This will make the image fit in the screen. (The key strokes for adjusting the screen size are found in the View menu at the top.) Now switch the color mode back to greyscale. Go to Image menu >mode >greyscale. | |||||||||
| 9. Save this pixilated image with a new name. Go to >save as, in the file menu at the top. Give the file another new name to distinguish it from the others. | |||||||||
| 10. Next we will create a larger document size (called canvas size) to hold both the pixel photo and the black and white selfportrait. Go to the file menu at the top and choose >new. Make a document that is 10" wide and 8" high with 300 ppi resolution, white background, rgb color mode. | |||||||||
| 11. Now arrange your desktop so that you can see both the new document and the pixilated image. Select the move tool from the tool box (it's the first tool at the top on the right). With the move tool click on the pixilated image and drag it to the new 8"x10" document. Photoshop puts a copy of it on a new layer in the document. Drag it to the right side. | ![]() |
||||||||
| SAVE your document often from now on. | |||||||||
| 12. Then open your original black and white selfportrait. It is too big to fit so the image size needs to be reduced. Go to Image menu at the top, then >image size. Make the largest dimension 5 inches to match the size of the pixilated image. Make sure the resolution is 300. Now use the move tool and drag the photo to your new larger canvas size. Place it to the left of the pixilated image. Try to arrange the two images so they are together, centered and high in the rectangle so there is room for the gray scale squares at the bottom (as seen in the illustration at the right). | ![]() |
||||||||
13. Now we are ready to make the scale of grays found in the pixilized photo. There are two ways to select the gray squares. One is to use the magic wand tool (second one down on the right), click in a square and if there is enough difference between its color and the ones next to it, a marquee with delineate it. With the magic wand chosen, adjust the tolerance in the contextual menu at the top to 1. That should help it choose a square of one color. The other method of selecting is to choose the rectangle marquee tool (first from the top on the left). Hold down the shift key when you drag the marquee to constrain the dimensions to square. Be careful to keep all your squares the same size. I will tell you how to do this in class. |
|||||||||
| 14. To copy the square (and you must copy it so that you don't leave a white "hole" in the image) go to the edit menu at the top and choose >copy, then >paste. When you paste, photoshop pastes the image into a new layer directly on top of the original selected image. Get the move tool and click and drag. The new square should move and you can place it in the location desired. Make sure that the Layers window is open (go to the window menu at the top, choose >layers. When you paste a new layer, pay attention to the fact that the layer is selected. You can only work in a selected layer. So when you want to select another gray square you have to go back to select the layer with the pixilated image in it. Then select another gray square, >copy, >paste, move to gray scale at the bottom. | |||||||||
| 15. Arrange your grays from light to dark. Try to maintain an even step between each color. Place at least eight different grays. If you choose a gray that is too similar to a previously selected one, place it above the similar one. | |||||||||
| 16. Label your grayscale diagram. Get the eyedropper tool (second from bottom on the right side of tool box) and click on a gray. When you do, the percentage of black is shown in the color window (if the color window is not open go to window menu at top and choose >color. Type this percentage in a place to label the gray color. | |||||||||
| 17. To type, get the type tool (the eighth tool down on the right, the "T". Click in the picture and type. Set the color of the type, the size and font in the contextual menu for type at the top of the screen. Photoshop places the type in a separate layer. Try to type all the info in one or two layers. You can always go back to the layer and change the type characteristics. | |||||||||
| 18. Layers can be arranged so that different things are in front or in back. Click on a layer in the layer window and drag it up to place it in front, or down to place it behind. Making sure you are on the right layer for the object you want to work with is important. | |||||||||
| REMEMBER TO SAVE OFTEN. | |||||||||
19. Go to >file, >save as, and save this into your website folder. Choose the JPEG format if it isn't already chosen. |
|||||||||
| 20. Print your page on either Blanche or Design Center LJ. Print on 8.5"x 11". I will show you how to post this image on your portfolio webpage in class. | |||||||||
| THAT IS THE END OF PART ONE | |||||||||
| GO TO PART TWO>> | |||||||||