IT82: Multimedia

Adobe Photoshop Practical

(You have TWO weeks available to cover the material in this practical:
Week starting 24th Feb & Week starting 4th March)

The aims and objectives of this practical are four-fold:

• To give you some practical experience of some of the main features of Adobe’s
Photoshop, which is the leading software package for pixelmap image creation and
manipulation.
• To take a look at a few useful graphics creation techniques, suitable for multimedia
graphics.
• To help your understanding of colour and colour models.
• To practically illustrate some of the graphics material covered in lectures so far and that
you will encounter in future graphics lectures, particularly different graphics file formats.

This practical sheet compliments the material from the lectures covering representation of
graphical data and colour.

Introduction
Traditionally in computer graphics, painting programs have either been of the variety that
creates new images, or that manipulates existing images. Photoshop is historically the one for
manipulating existing images (photographs in particular!). It deals exclusively with bitmap
(pixelmap) images, rather than with vector-based graphics. But as you will discover during
the practical, Photoshop makes use of different layers in an image to give you some control
over individual objects, much like vector-based graphics. Without further ado, let’s start it
up…

⇒ Load up Adobe Photoshop (Start → Programs → Adobe → Photoshop 5.5 → Adobe

Photoshop 5.5).

⇒ Have a look around the screen

You should have various little windows on the screen, with a “toolbox” on the left and
various utility windows on the right.

⇒ If you don’t see a toolbox, open it up by selecting from the menus Window → Show
Tools

1
Toolbox
As a quick reference, here’s what the various features on the toolbox are (you may see
slightly different icons on your menu, depending on which ones are currently selected):

Marquee Tools
Move Tool
Lasso Tool
Magic Wand Tool
Airbrush Tool
Paintbrush Tool
Rubber Stamp Tool
History Brush Tool
Eraser Tool
Pencil
Blur Tool
Burn Tool
Magnetic Pen Tool
Type Tool
Measure Tool
Gradient Tools
Paint Bucket
Eyedropper Tool
Hand Tool
Zoom Tool
Foreground colour

Background colour
Edit in Quick Mask Mode
Edit in standard mode
Full screen with menu
bar
Standard screen mode
Full screen mode
Jump to default Graphics
Editor application
(ImageReady)

The tools with little triangles in the bottom right-hand corner have various options associated
with them. These can be seen by positioning the mouse pointer on the tool icon, then clicking
and dragging to the right – a little popup strip of further icons should appear.

2
Monitor Calibration
Before we get to creating images, we need to make sure the monitor is calibrated first. The
professional graphic designer makes careful choices about which colours to use in images,
and this is all based on what is seen on the screen, so it’s important to have the monitor
displaying colours as accurately as possible.

(Note: normally, when installing Photoshop, you’d run through a monitor calibration process
once just after installing, then so long as you didn’t alter your monitor settings, you wouldn’t
need to keep running through the process again. The settings have already been adjusted on
the machine you’re using, but we’ll run through the process again so that it’s adjusted
properly according to your eyes.)

⇒ First, adjust the lightness levels. That is, if there’s sunlight streaming in through the
window (we should be so lucky) then close the blinds as far as you can manage.

⇒ Select Help → Color Management from the menus, and follow the instructions. Also
see comments below.

Yes, you do want to open Adobe Gamma. Yes, use the step-by-step wizard. If in doubt about
what to do (there are a couple of questions about monitor profile), just select the default.

What you are trying to do with the Gamma wizard is to set the luminosity on your monitor
correctly. Remember the CIE colour model with X,Y,Z components, described in the colour
lectures? And where Y is the luminosity component, also known as Gamma (γ)? This is what
you’re setting, to check that the brightness of the monitor is set ok.

When you get to the step that looks like this:

You may be at an advantage here if you wear glasses. Take them off, and it’ll help to get the
smooth square aligned with the stripes. Otherwise, try squinting, or moving backwards
somewhat, it should help! Yes, you may end up feeling silly. Don’t worry about it, it’s all in a
good cause.

When you’ve completed the Gamma wizard, keep on going with the Color Management
wizard. You may wish to select the settings to optimize for web use.

3
 Colour Choosing
Now that we’ve calibrated the colours, we’ll need to have some colours set, before taking a
look at some of Photoshop’s main features.

Set the foreground and background colours:

⇒ Click on the foreground colour in the toolbox.

You should see a colour picker box.

⇒ Have a look at the various features of the box and try them all out (see below).

Click to select desired colour Current colour

(not web safe)

for picking
true-colour
matching

restriction
to web-safe values for current
colours colour in HSB
or not colour model

...and in the
Lab,
RGB,
CMYK models

currently-selected different brightnesses and

saturations of the same hue hex value of colour
hue
displayed in main box (eg for use in HTML)
(as hue currently selected)

This is an excellent opportunity to make sure you understand how the various colour models
work, so play around with the colour picker until you’ve got the idea of them. In particular,
follow these suggestions:

⇒ Click on the check box for web-safe colours (if it wasn’t already selected). Note the
difference in the range of colours available.

You probably have lots of colours of the same hue visible at the moment. One of the colour
models supported by this colour picker is the HSB model (one of the variants of HSV you
saw in lectures).

4
⇒ Try selecting different hues from the rainbow-coloured vertical bar, to see the shades
available for different colours.

⇒ Try clicking on the “S” radio button, to display all the colours available with the
same saturation.

⇒ Likewise, try clicking on the “B” radio button to display the colours available with
the same brightness.

⇒ Do the same with the RGB buttons for the RGB colour model.

You can also type in values for any of the fields. Try a bit of virtual paint mixing to
experiment with the CMYK colour model (think back to painting with water paints and big
blocks of colour). What do you think 50% cyan mixed with 50% yellow is going to look like?

⇒ Try it and see – type in the values, and see what colour you get.

You may also have noticed the L,a,b colour model there. Remember the CIE’s XYZ system?
This is another similar colour model from the CIE, where Y is proportional to L. The exact
conversions between the models are as follows:

L = 116 Y/3 - 16
a = 500 (X/3 - Y/3)
b = 200 (Y/3 - Z/3,

Again, you can try clicking on the radio buttons to see the range of colours available for the
setting you’ve clicked on.

⇒ Now try clicking on the Custom button.

You get taken to a page where there are several ranges of predefined colours. With the right
colour charts in your hand you would be able to exactly match colours on the screen to
printed colours. Have a look at the various colours available in the different ranges.

⇒ Finally, after all that, pick a colour you like for the foreground!

⇒ Now also select a colour for the background. Pick a colour that strongly contrasts
with your chosen foreground colour.

So far we have not had an image to apply our colours to. Let’s rectify that…

⇒ Open up a new image (File → New), of whatever size you like (400 by 400 pixels is a
useful size – you may need to change the dimensions to pixels), select background colour
and ensure the image is in RGB mode with a resolution of 72 pixels per inch (these
should be the defaults, so you may not have to change much).

5
Shapes: select then edit
There are various ways of selecting areas in Photoshop. You can use one of the tools to define
an area, or to select something already created. The marquee tool (top left of the toolbox) is
one of these, that can select simple rectangles and ovals.

⇒ Use the marquee tool (top left of the toolbox) to select a nice big rectangle or oval in
your image.

You should see a moving marquee outlining your shape. Now let’s do something with that
shape, say by using the gradient tools (halfway down the right-hand side of the toolbox).

⇒ Double click on the gradient tool, to bring up the gradient settings window. Make
sure the mode is normal, the opacity is 100% and the gradient is foreground to
background.

⇒ Select your choice of gradient tool, then you need to click and drag in your selected
shape to perform the gradient fill.

Don’t like it? Try several more times, with different gradient fills if you like, until you get one
you like. You can also try changing the settings, such as mode and opacity.

It’s also worth mentioning there are other ways to select. For example, when you have
selected one shape, you can also select everything but that shape. To create a really bizarre
image:

⇒ Choose new contrasting foreground/background colours. Go up to the menu: Select

→ Inverse. Now do another gradient fill on everything but your original shape.

Layers
Photoshop lets you organize your work on layers. With the use of transparency, it makes it
easy to combine images in different ways to form composite images.

You can see the layers palette at the bottom right of your screen. If you don’t have it, click on
Windows → Show Layers.

What you’ve done so far should be in a background layer and you should be able to see a
block in the layers palette, representing your background, with a tiny thumbnail of your image
so far on it.

Let’s create another layer. We’ll add some text to the picture.

6
Text

⇒ Select the Text tool from the toolbox.

You should get a different cursor, and then clicking on the image allows you to select the
position of entry of the text.

Now you should get a dialogue box with various options to play around with the text.

⇒ Type in some text, and try out the various options for text (see below for hints).

Select (highlight) the text you type, then font choices will show up immediately as you
choose them. Try a contrasting colour for your text. Try different fonts at different sizes.

Also, try out the various anti-aliasing options. For this, a good font to choose is Times. You’ll
also want to enlarge the image quite a lot so that you can see what effect the aliasing has on
the image:

⇒ To enlarge the image, press CTRL and + together. Repeat several times (and use the
scrollbars) to get a good size magnification. (CTRL and – will zoom out again)

What happens with the anti-aliasing options? How does that compare to no aliasing?

⇒ Now try out some different text. Type in “I’m going to YAWN!!!!” and highlight it.

What happens if you turn kerning to automatic or not?

Having tried out a very few effects in Photoshop, let’s try out some more sophisticated
features that can produce graphics that you might just find useful...

7
Graphics Example 1: Blended Text
This effect is quite good for titles and a bit of drama.

It’s actually created from three layers. First is the black background. Then the text is applied
in a second layer, with a gradient fill. Then the third layer is a copy of the second layer shifted
down a few pixels, except with the gradient fill going the other way.

⇒ First create a new image, of sufficient size, with a black background (set the
background colour to black first before doing so).

⇒ Now set the foreground colour to a light grey, and create your desired text:

You will probably want to choose a “chunky” font for a good effect. This example used the
Impact font.

⇒ With this text layer selected in the Layers palette, choose Layer → Type → Render
Layer from the menu.

⇒ Then tick the “Preserve transparency” check box on the Layers palette
(otherwise you’ll render the whole lot, not just the text)

⇒ Then use the gradient tool on the text.

You should now have something like this:

Now we want to make a copy of this layer.

⇒ With this type layer selected in the layers palette, choose Layer → Duplicate Layer
from the menu.

⇒ Select this layer in the layer palette, again ensure transparency is set on, and use the
gradient tool again, but this time in the other direction.

Finally, you want to move the copied layer down:

8
⇒ Select the Move Tool from the toolbox, and then either use the mouse to move the
layer or (more accurately) use the arrow keys on the keyboard to move the layer down
by about 3 or 4 pixels. You should now be able to see the finished image:

⇒ To save it, first convert it to an indexed mode image (restricted list of colours in an
image ; more details will be given in the lectures on Graphics File Formats) using Image
→ Mode → Indexed Color.
⇒ Now save your file as a GIF, using the “Save a Copy” option (NOT “Save”!) from
the File menu (remember to change the file format to GIF in the “Save As” box. DO
NOT save it in PSD format as this results in a VERY LARGE FILE!). SAVE IT
SOMEWHERE SENSIBLE IN YOUR OWN FILE SPACE! YOU WILL NEED TO
NAVIGATE IN THE Save a Copy DIALOG BOX, BEFORE ENTERING A FILE
NAME AND CLICKING OK. Accept default options in other dialogue boxes that
appear.

Images like this are ideal for inclusion as eye-catching titles on web pages or in multimedia
presentations.

Graphics Example 2: Little Ball Icons

This example looks at how to create little ball icons like that seen on the IT82 homepage to
highlight entries in lists of things.

Here’s an example, enlarged so that you can see it:

⇒ Open a new image, about 40 x 40 pixels would be a good size, with a white
background. (Make sure that the RGB colour model is being used when you initialise it.)

⇒ Now magnify it to a nice ginormous size, it makes doing the drawing bits a lot easier.
⇒ With the oval marquee tool, select a circle-sized area on your image:

⇒ Now select as a foreground colour whatever colour you want the ball icon to be, say a
nice medium blue?

⇒ Select the paint bucket tool

9
and click in the circle to fill it.

⇒ Now go to the menu and select Filters → Render → Lighting Effects.

⇒ Of the various styles available, select “Flashlight” and narrow the focus of the light
by dragging in the preview box. Drag the centre of the light towards the upper left hand
corner. Set the intensity to about 35, and the gloss to about 45. Click on Ok.

You should now have something like:

⇒ Now choose Select → Inverse from the menus.

You should now see everything but the ball selected. This enables you to draw on everywhere
but the ball itself.

⇒ Select the airbrush tool (3rd from the top on the left of the toolbox). Select the
foreground colour grey.

⇒ Now airbrush in a shadow behind the ball.

You should now have something like:

Finally, add a little highlight to the ball:

10
⇒ Do Select → Inverse to select the ball again, then still using the airbrush, but using a
white colour, and with a pretty small brush, brush in a little highlight to the lightest spot
on the upper left of the ball.

You can set the brush size from the palette on the right:

Hopefully you now have a ball like:

View it at the correct magnification. You can change the size of the ball to get an icon as
small as you want. Save it in a file for now, in GIF format, as you did with your text image.
But what if you want several balls of different colours?

⇒ Go to Image → Adjust Hue/Saturation and use the sliders there to adjust the colour!

11
Free Form Fun!
Now that you have a few Photoshop skills under your belt (or wherever else you like to put
them!), let’s have some fun. The instructions given here will assume that you have completed
the practical session so far. You may need to refer back to the instructions above to remind
yourself of how to do various things.

What we will do is play with an existing photo (perhaps one acquired earlier with a digital
camera or the scanner.) There are suitable photos stored in the Groups on Wide\IT82\Pix
folder.

In Photoshop, close any image windows you have finished with and then:

⇒ Create a new image of a suitable size (say 400 by 400 pixels), in RGB Color mode
and using Background Color.

⇒ Select foreground and background colours and fill the image, using a gradient tool
of your choice.

⇒ Now open one of the photo files, using File :Open and navigating to the Groups on
Wide\IT82\Pix folder.

A new image window will appear in Photoshop showing the photo. We will first resize the
photo, then incorporate it into your background image, as follows.

⇒ You may need to resize of the photo by selecting Image→Image size… to make it fit
onto your background.

⇒ Select the Move tool from the Toolbox, then click-and-drag the photo from its
window onto your “background” window.

This has put a copy of the photo on a new layer in your image. Having it on a separate layer
means you can easily manipulate the photo independently of the background. Move the photo
around until it is positioned where you would like it.

⇒ Add a title above the photo using the Text tool. Add any effects to the title that you
would like using Layer→Effects e.g. Drop Shadow.

Now we’ll have some fun with the photo. First we will adjust the brightness, contrast and
colour balance of the photo. Then we’ll try out the various filters that Photoshop provides.
And try different blends of the photo with the background. Make use of the online help to
find out about the filters and blends that are available.

⇒ Select the layer containing the photo.

⇒ To adjust brightness and contrast, select Image→Adjust→Brightness/Contrast…

Make sure Preview is selected, then move the triangular markers to adjust the
brightness and contrast. Click OK when you are satisfied.

⇒ Now adjust the colour balance by selecting Image→Adjust→Color Balance… and

adjusting the different colour channels in the same way as brightness/contrast.

Now try out some of the different blends and filters (BUT make sure you leave yourself five
minutes for the final section on Saving your File and Graphics File Formats – you must

12
complete that section!!). Blends specify how the pixels of the current layer are combined
with those of layers beneath it. Your photo layer should be in Normal mode (as shown in the
Layers window).

⇒ Click the arrow next to “Normal” on the Layers window and try some of the
different blending options. Return to “Normal” mode before carrying on.

Filters apply various mathematical transformations to the pixels in a layer. This can take
quite a long time, so do not be surprised if you have to wait to see the results. But let’s try
some anyhow.

⇒ Select any of the options from Filter and see what happens. Usually you will get a
preview window before it is applied to the image itself. Try Filter→Distort→Wave.
It’s particularly wild!

Saving your File and Graphics File Formats

Once you are happy with your image, save it, giving it a sensible name.

⇒ Select File :Save and save the file in Photoshop’s own special file format, which as a
.PSD extension.

Now we will try saving it in different file formats in order to compare them. Previously you
have saved your images in GIF format, which is particularly useful if you want to use your
images on web pages. There are many different possible formats in which you can store
graphics images, all of which have particular properties that are useful in different situations.
This will be explained in the lectures on graphics files formats later in the course. A major
difference between formats is the size of the files that are produced. We can explore that right
now by storing your photo image in different formats and comparing the files.

⇒ Select File →Save A Copy from the menus and select Bitmap (BMP) as the file format
(note the file name stays the same but the extension has changed and “copy” is included
– you could delete “copy” if you want). Click OK.

⇒ Repeat this procedure twice more, storing the file in GIF and JPEG formats. Accept
any default values that appear, including flattening the image. However, you can save a
couple of different JPEG versions with different quality settings if you like.

⇒ Now use File→Open to open the files that you have saved.

P.T.O. to finish this practical!

13
You should now have at least four copies of the image opened in Photoshop, but each from a
different file format. In the table below, under Image Quality, list any visible differences
you can see between the images, including if you cannot see any difference at all! Exit
Photoshop and investigate the sizes of these files using Windows Explorer, recording the
results below. We will talk about what you have discovered in the graphics file formats
tutorial later in the course.

FILE SIZE (kbytes) Image Quality

Photoshop (.psd)

Bitmap (.bmp)

GIF (.gif)

JPEG (.jpg)

NOTE! NOTE! NOTE! I am sure you have noticed that the .PSD (Photoshop) file is by
far the biggest. Only ever save files in this format while you are working on them in
Photoshop. Once you are satisfied with an image, flatten it and save it in another format
(e.g. GIF or JPG) and delete the .PSD file. Otherwise you will quickly run out of disk
space!!!

That’s all, folks.

Bruce Graham (but mainly Sharon Curtis), Spring 2002

14