Image Development

IMAGES



A.	Images
B.	Image Use
C.	Image Collection
D.	Image Analysis
E.	Layer Analysis
F.	Jpegs
G.	Replication
H.	Info Screens
I.	Image Dev
J.	Image Build
K.	The Image

CONTACT:

Don Bergland
bergland@uvic.ca

Developing IMAGES

1. IMAGE DEVELOPMENT

In the exercises below, we will explore a variety of different methods for acquiring and processing photographs. Consider this as essential drill in using some of the acquisition skills studied previously. As a professional engaged in the process of increasing your productivity skills, you should practise as many acquisition and processing skills as you can. We will work through 4 project-based productivity activities based on photographs:

1. Copy/Paste
2. Sizing Photographs
3. Transforming Photographs
4. Replication
5. Your Own Promo Image

2. COPY/PASTE TECHNIQUE

A very useful skill in Photoshop is that of copying a selection from one layer, and pasting it to another layer. This skill can also be used to copy a selection from one Photoshop file and to paste it into another Photoshop file..

ACTIVITY

You need to access the Resources webpage for this activity. Access RESOURCES. In the left side menu, find section D. Tutorials. You will see a variety of Photoshop online tutorials listed in this section. You can find others using a Google Search.

Create a Desktop folder called, “photowork.” You will save all aspects of this Session to this folder.

For this activity, you will obtain two photographs:

Photograph #1 – Found at the Stock Vault sight. This can be found on the Resources page of the course website (Resources – B. Images – Free Photographs – 14 Stock Vault). Click on this link to be taken to the Stock Vault site. When there - Categories - Objects – industrial. The first image listed - “sewer.” Download this image to your Desktop folder. It downloads as - med_1129148648-6375.jpg

Photograph #2 – This image can be obtained from the course CD-ROM. Insert CD-ROM in computer, open the CD-ROM - Images - Corel-RF. Find the image with the number - p0317497.jpg - junk cars. Drag this file to your Desktop folder (or simply open it from within Photoshop).

Put both these photographs in your “photowork” folder. Rename them in the following way:
Photograph #1 – sewer
Photograph #2 – junkcars

Launch Photoshop. We will be opening photos from inside Photoshop, so when the “Start from Scratch screen appears, click CLOSE. From inside Photoshop, open the first photograph (sewer) by going to the TOP MENU BAR – FILE – OPEN.

In Photoshop Elements, note the PHOTO BIN at the bottom of the screen. Any file open in Photoshop will appear in this Bin. This is a quick way to keep track of the Photoshop files you have open and to be able to toggle back and forth between them. For those using Photoshop, you will not have this bin. When you open multiple files, you will have to track them on the Desktop yourself and either toggle back and forth by clicking on the window to activate the appropriate one, or open all the work files, then minimize them. Use the Task Bar (or Dock) to activate the appropriate file. When you are not using the file, minimize it again. Note - as we will be working with multiple open files, developing a technique for toggling back and forth between open files on the Desktop is necessary.

Now, from inside Photoshop, open the second photograph (junkcars). In Photoshop Elements, note that this second photo appears as an icon in the Bin.

You now have two Photoshop files open on your Desktop - sewer and junkcars.

Activate the “sewer.” In Photoshop Elements, you only need to click on the appropriate icon in the Photo Bin. For those using Photoshop, click on the appropriate file icon in the Task Bar (or Dock).

Let’s first explore the skill of copying/pasting from one layer to another.

From the TOOLBAR, choose the RECTANGULAR MARQUEE. Move to the image and draw a rectangular selection around the “sewer” sign in the middle of the image.

Go to the TOP MENU BAR - EDIT - COPY. When you release the mouse, a copy of what is in the selected area is copied to the Clipboard on your computer. This copy remains in the clipboard, waiting for your next operation.

Now go to the TOP MENU BAR - EDIT - PASTE. When you release the mouse button, the copy in the clipboard is immediately pasted to a NEW LAYER in Photoshop. See its appearance in the Layers Palette. Note - when PASTING, Photoshop creates a new layer for you. Click on the MOVE TOOL and move the new layer around to see it.

Now let’s try copy/paste between two open Photoshop files. As indicated earlier, it is possible to copy a selection from one file and paste it to another file.

Activate “sewer.” Put a rectangular selection around the word “sewer” in the center of the image (there may already be a selection from the last operation).

Go to the TOP MENU BAR - EDIT - COPY.

Now activate the image called “junkcars (click on the icon in the Photo Bin, maximize it from the Taskbar/Dock, or just activate the window on the Desktop).

In the image file called “junkcars,” go to the TOP MENU BAR - EDIT - PASTE. Note that the “sewer” selection is automatically pasted to a new layer inside “junkcars.”

Now, go to the TOOLBAR and choose the LASSO tool. Inside “junkcars,” make a lasso selection of some area. Activate the file called “sewer” and paste this lasso selection inside the file.

Practise copying and pasting selections back and forth between these two images. IMPORTANT - when you return to an image to make another selection, always make sure you go to the LAYER that the image is actually on. You will be generating many new layers. Return to the Layer with the main image on it in order to select and copy.

Note - If you want to select the whole image in a file, go to the TOP MENU BAR - SELECT - ALL. A selection will be place around the whole image. You can now copy.paste the whole layer.

Now CLOSE the two photo image files without saving any of the changes.

For those of you who want to develop some speed in the copy/paste technique, try the keyboard commands:
PC - Copy - Command - C
PC - Paste - Command - V
Mac - Copy - Apple - C
Mac - Paste - Apple - V

3. SIZING PHOTOGRAPHS

Digital images come in an infinite number of sizes, dimensions, and resolutions. This is very true of digital photographs. Although digital photographs may look the same size on screen, they may be very different in reality. When you bring one photo (or part of a photo) into the layer system of another photo, the sizes of the photos should be fairly close. Otherwise the imported photo (or part) may enter the file being too large or too small. If you are starting to work with photographs, then your ability to resize photographs is necessary.

ACTIVITY

You need to access the Resources webpage for this activity. Access RESOURCES. In the left side menu, find section I. Fonts. You will see a variety of information about typography and fonts.

Use your Desktop folder called “photowork.”

For this activity, you will need one photograph as well as a new Photoshop file you will create:
1. Photograph #1 – This photograph will be sent to you be email. It is called “pv033.jpg.

When you receive this jpeg file by email, put it in your photowork folder. Rename it in the following way:
Photograph #1 – vallarta.jpg

Launch Photoshop. From inside Photoshop, open “vallarta.jpg” by going to the TOP MENU BAR – FILE – OPEN. Note the photo icon that appears in the Photo Bin.

Now, in Photoshop, create a standard new document with the following parameters:
Width - 800 px
Height - 600 px
Resolution - 72 ppi

Save this to your “photowork” folder as “small.psd.” Note that this new file appears as a second icon in the Bin.

We have two files. Our target file is “small.psd.” Our acquired file is “vallarta.jpg.”

Let’s check the size of “Vallarta.jpg” by activating it and going to the TOP MENU BAR - IMAGE - RESIZE - IMAGE SIZE. A window will open indicating the size of “vallarta.”
Width - 1536 px
Height - 1024 px
Resolution - 150 ppi
This image is almost twice the size of the file we created (small.psd). If we tried to copy the whole Vallarta image and place it in the “small” file, it would not fit. This will be a common event when you go on the Internet and collect image files. They will all be different sizes. Some will be large, some will be small. They key for you is to be able to size the images you find so they approximately fit the file you are bringing them into. The “acquired” image must approximate the size of the “target” image.

To size “vallarta” so it is fairly close to the “small” file, do the following:

1.	Activate “valllarta.”
2.	Open the IMAGE SIZE window.
3.	Look at the bottom of the window and find three boxes with “checking” functions:

	Make sure all three boxes are checked (Scale Styles, Constrain Proportions, Resample Image)
4.	First UNCHECK the box beside Resample Image.
5.	Next type in the RESOLUTION of the target size. In this case, it is 72.
6.	Now CHECK the box beside Resolution (so all three boxes are again checked.
7.	Let’s look at the width of our target image. It is 800 px.
8.	Find width in the Image Size window and type in 800 pixels. Note that the Height will automatically change. This is because the box called “Constrain Proportions” is checked. The proportions of “vallarta” will remain constant.
9.	The size of “vallarta” should now read 800 px X 533 px @ 72ppi. This is close enough to our target image. Click on OK. The image will be resized.

You will now be able to bring the entire image into the target file if you want (Select All - Copy/Paste).

Note - You only have to do this when the acquired image is “larger” than the target file. If the “acquired” image is smaller, nothing needs to occur in respect to changing size.

Close all files without saving.

4. TRANSFORMING PHOTOGRAPHS

Once you have photographs inside the Photoshop environment, you can transform them in a variety of ways. You already know what can occur when the photos are on layers. Every skill you have learned to this point regarding shapes and text on layers, applies also to photos on layers. There are other ways to transform photos on layers:

- Hue & Transformation
- Scale
- Rotate

ACTIVITY

For this activity, you will obtain two photographs:

1.	Photograph #1 – This image can be obtained from the course CD-ROM. Insert CD-ROM in computer, open the CD-ROM - Images - Corel-RF. Find the image with the number - p0106729.jpg - Autumn Scene. Drag this file to your Desktop folder (photowork), or simply open it from within Photoshop.
2.	Photograph #2 – Found on the Internet. Go to - http://www.boldeye.com. When you arrive at this site, you will see one central image. Download this image to your Desktop folder. It downloads as - splash2.jpg

Put both these photographs in your “photowork” folder. Rename them in the following way:
Photograph #1 – autumn
Photograph #2 – boldeye

From inside Photoshop, open the first photograph (autumn). Note the photo icon that appears in the Photo Bin. Open the second photograph (boldeye). Note its appearance in the Photo Bin.

You now have two Photoshop files open on your Desktop.

Activate “autumn” (click on the icon in the Bin, or the icon on the Task Bar/Dock).

Let’s first explore a very useful color alteration tool in Photoshop, called HUE & SATURATION.

Go to the TOP MENU BAR - ENHANCE - ADJUST COLOR - ADJUST HUE SATURATION. A window appears. Look at the top slider bar called HUE. If you drag this slider, the image should cycle through the color spectrum. Try this. When you have what you want, click on OK to install the changes on the layer. Note that this particular technique works for anything on a layer. If you have a colored shape or text on a layer and you want to alter its color, use HUE & SATURATION.

Activate the file called “boldeye.” Examine the image. Use the RECTANGULAR MARQUEE tool to make a rectangular selection of the city scene in this image.

Paste this selection into the file called “autumn.” Name the layer - cityscene.

Now let’s try some transformations of this particular layer.

First, let’s try the Hue/Saturation technique we just learned. Select the “cityscene” layer, go to the TOP MENU BAR - ENHANCE - ADJUST COLOR - ADJUST HUE SATURATION. Explore color changes on this Layer.

Let’s review how we SCALE a Layer. Go to the TOOLBAR and select the MOVE tool. Move your cursor to the right and check SHOW BOUNDING BOX. The Layer will have handles placed around the edges. If you drag these handles, you will SCALE the image. If you want to maintain proportions, first hold down the SHIFT key and then drag handles. When you have the scaling you want, you have to press the ENTER (RETURN) key on the keyboard to install your changes on the Layer.

Let’s learn to ROTATE a layer. Make sure you have selected the “cityscene” layer. Now go to the TOP MENU BAR - IMAGE - ROTATE - FREE ROTATE LAYER. Handles will be placed on the layer. If you move your cursor to one of the corners, you can drag/rotate the image. Once again, when you have what you want, press the ENTER/RETURN key on the keyboard to install your changes.

Note that this particular technique works for anything on a layer. If you have a colored shape or text on a layer and you want to rotate it, use this technique.

You have two images open on the desktop. Practise copying and pasting selections back and forth. Practise Hue/Saturation, Scaling, and Rotation on the created layers.

Close the files (without saving) when you have finished.

5. REPLICATION

We will continue with our replication exercises. As we progress, the images will become more complex, utilizing the new techniques and ideas you have been learning.

1.	Examine the source image in its entirety. Use the Visual Analysis we learned in Session 2: - Aspect - Shapes - Text - Photos - Layers
2.	Open Photoshop and create a new document. If the size is not given, then estimate the dimensions of the image.
3.	Look at the source image. Select a component (shape, text) and start your first layer.
4.	Continue to work object by object and layer by layer.
5.	Remember to SAVE the file as a .psd file. While working, SAVE frequently.
6.	Use your eyes to make comparisons and adjustments until the replicated image is finished. Save.

ACTIVITY

REPLICATION 3 - Examine the following image. Note some of the features: the textured background, the photo sitting on a rectangular shape, the two white bars (with opacity on them).

In order to replicate this particular image, you will need two external images - a texture background and a main photo. Both these images can be downloaded below:

photo.jpg

texture.jpg

Click on each of these icons to download the photos needed for this replication activity.

Create a folder called replication3. Put all files connected with this project in this folder.

Launch Photoshop. Create a document - 600 px X 422 px @ 72ppi. Use the method above to replicate the image as closely as possible. Save it as “replication03.psd.

Once again, note the features of this particular replication:
- the background is the “texture.jpg” image
- two white rectangles have opacity on them (to give a transparent look)
- there is a brown rectangle over top of these white rectangles. It has a drop shadow on it.
- the photograph is a section selected out of “photo.jpg,” copy/pasted, and scaled.

Save the image (replicaton03.psd).

6. ALTERING A CREATED IMAGE - A PORTFOLIO PROMO IMAGE

You have now created a replication of a given image (above). The format of the image you created uses all three of our image components - shape, text, and photo. The image itself is a standard information format. When you have an image in a .psd file, you can begin the process of reconstruction. Reconstruction means altering and substituting elements to change the image so that it becomes your own invention.

ACTIVITY

For this activity, you will take “replication03.psd” and reconstruct it so that it is your own personal image. This image could end up being a personal promotional image for yourself.

a.	Examine your replicated image. Think about customizing it so it is now “your own” image. Some of the things you could do include: - Use Hue/Saturation to change the color of the background, the white bars, the photo panel and the photo itself. - Use the Move Tool to re-arrange the layers. Add new shapes. - Change the text. Add more text. - Remove the photo and substitute on of your own. Add a photo that reflects your personality or even a photo of yourself. - Remove the background texture and substitute one of your own.
b.	Play with the image until it start reflecting a good promotional image for your Portfolio page.
c.	Save the image as a .psd file. Now save a .jpg..
d.	Hang on to this jpeg. You might want to use it in some promotional way.

Click on IMAGE categories at the top left side of the page to access further knowledge and skills.