The Digital Portfolio, English @ ASU Technology Training

Image Manipulation with Photoshop 5.5

About images:

Images can be created in several different formats such as .jpg, gif, bmp, and Photoshop's own format, .psd and .pdf
When it is time for you to save the image you have created we will talk about why certain formats are prefered, and which format to choose for your image. However, when you start out you need not know in what format the image will be saved later.

Images can be photos, graphic art, or text. Most importantly, they are all images. Even if an image contains text, it is still regarded as a more or less uneditable object, just like a photo. If you add regular text to a webpage that can be edited just like any ordinary document. However, when text is added as an image (for example a logo or navigation bar) it can generally not be changed without some serious elbow grease. In fact, when changing text-as-image you are manipulating the image itself, not actually editing text. However, Photoshop does allow you to make changes to such images.

In this workshop we will go over the intermediate functions of Photoshop 5.5 in the context of designing a "header" or "lead" graphic for your webpage or other document.

The example we will use is the header graphic for this workshop series:

Step 1. The first step is to procure your base content. In this situation, I used a piece of free clip art from the Web (to follow along with this workshop, right click on this image and save it to your machine):

Step 2. Sketch out the concept for the header. In this simple case, I want to write "Humanities Computing Workshops" across the screen.

Step 3. Considering that this graphic will be used for the Web. One of my first considerations is what color the background of the image should be. In this case, I want the background to be white. So I will change the background from grey to white.

To accomplish this, I must first select the current background. I can select a like-colored region such as this using the magic wand tool. The magic wand is the highlighted tool in this image of the toolbar:


Once you've selected the toolbar, click on the grey background of the image. You will notice that your selection looks something like this:

It does not, however, select the entire background. This is due to what's called the "tolerance" of the magic wand. If you look closely at the grey background you can see that it's not exactly one solid color. And since the magic wand makes its selection based on color similarities, it is not selecting it all. I therefore need to increase the tolerance so that the wand will select more similar colors. Select the magic wand tool again, then look in the "options" window under the "Magic Wand Options" tab. It looks like this:

On my computer, the tolerance is at zero, meaning the wand is very restricted to like colors. If I type "25" into the tolerance blank, then click on the grey background again, you can see that the selection is much more comprehensive. You can experiment now with different tolerance levels to see how it effects the selection. Now I must go around the image, holding down the shift key to make multiple selections and click on all the grey background.

Once, I have selected the entire background, I go to the "Edit" on the menubar then "Fill". Since I want my background to be white, I select "white", then click "ok". Your image should now look like this:

Step 4. Now I want to get rid of the tiny bit of grey left on the top center of the image and the two highlights on the screen surface which will interfere with my text. This step can be considered cleaning up the image.

To edit out very small bits of color, it is wise to use the magnifying glass tool to zoom in. Click the magnifying glass tool on the toolbar:

And now click on the top center of the image where there is a few specks of grey left above the computer monitor. Click five times. (TIP: at any time you can double click the magnifying glass tool from the toolbar to return the image to it's real size.) Now you are ready to paint out the remaining grey pixels using the paintbrush tool:

Before using the paintbrush tool, you must select the color and the brush you want to paint with. To select the color, double click the box that is the maroon box on the toolbar in the above image. This box represents your foreground color and is the color the brush will paint with. Select white and choose "ok".

To choose the brush you must activate the brushes palette:

Here you can experiment with the different brushes to see their stroke, but the one you should select is at the far top left. This is the single pixel brush.

Next

Back | Home | English @ ASU