KURSUS ASAS MEMBINA WEBSITE

Jabatan Teknologi Sains Komputer dan Maklumat

PENGENALAN
KEPADA
ADOBE PHOTOSHOP
I

Disediakan Oleh:

Pensyarah MOHD KHAIRULNIZAM BIN MOHD SALLEH

Jawatan Pen.Pensyarah Kanan J36
Teknologi Maklumat (Rangkaian)

JTSKM ,Institut Latihan Perindustrian Mersing

Mersing, Johor
 DAFTAR ISI

Why Use PhotoShop? 2

Obtain the Software 3

Working with Images 5

Creating a New Image 7

Image File Types 10

Tools 13

Copying / Pasting 15

Drawing / Painting 17

Working with Layers 19

Cropping 22

Using Type 23

Compositing 25

Retouching Photos 26

Ghosting Photos (opacity) 30

Making Selections 31

Transformations 34

Fun Stuff (filters, actions, & more) 35

Copyright 39

Other Resources 41

Documentation of Graphic Techniques 42

1
The internet was originally created by U.S. Departm ent of Defense researchers to exchange
textual documents. Once someone discovered how to add graphics to the exchanged document,
however, the internet really began to take off.

As HyperStudio author Roger Wagner has observed, we live in a mediacentric society that
increasingly relies upon multimedia in its varied forms to both inform and entertain us. It is natural
for people living within this media -saturated culture to want to create some of that media -- and
Adobe PhotoShop is the perfect tool for that ta sk.

With PhotoShop, you can:

1. Create original artwork

2. Design graphics for a webpage or website
3. Make "ghosted" images that can be used as the background for webpages
4. Correct flaws and imperfections in a photograph
5. Create a photo collage: a composition made u p of several different photos
6. Create a deceptively realistic photo that is not real
7. Alter photographs for political / propaganda purposes
8. Design smashing layouts for a classroom newspaper, brochure, or flyer
9. Have a ton of fun being CREATIVE!

PhotoShop is a program that is so rich, complex, and powerful, people literally spend most of the
waking hours of their life using it, and are still always learning new tricks and techniques!
Thankfully, however, the learning curve for PhotoShop is not steep, and users can create very
appealing products with a short introduction to the concepts and tools of PhotoShop. That is one
of the primary goals of this workshop!

To help spark your own creativity, I have provided documentation of how I created the images
used in this online curriculum in the last section, " Graphics Techniques." Every image in this
curriculum that is not a "screenshot" is clickable to the provided documentation.

Here are a few quotations on creativity to reflect on ( source1 and source2):

 Discovery consists of seeing what everybody has seen and thi nking what nobody has
thought. - Albert Szent-Gyorgyi
 There is an incessant influx of novelty into the world, and yet we tolerate incredible
dullness. - Henry David Thoreau, Walden
 When you do the common things in life in an uncommon way, you will command the
attention of the world. - George Washington Carver (1864 -1943)

2
PhotoShop is expensive soft ware if you purchase it commercially, but educators can receive a
sizable discount. Suggested retail price in Spring 2001 for the full version of PhotoShop was
$609, upgrade price was $199. Educators could buy the full version for $279.99, or upgrade for
$199. Details about the $99 PhotoShop Elements are available below . Order at a local
educational software reseller or by calling 1 -888-724-4508 (6 am - 8 pm Pacific, M-F).

Updated information about the latest release of PhotoShop is available on Adobe's website . You
can download a "tryout version" of PhotoShop from the Adobe website as well: but a fast internet
connection is recommended as the file size is very large! (Over 40 MB)

 Download the tryout on www.adobe.com/products/photoshop/tryreg.html

Minimum Requirements for Windows Minimum Requirements for Macintosh

 PowerPC® processor
 Intel® Pentium® processor  Mac OS software version 8.5, 8.6, or
 Microsoft® Windows® 98, Windows 9.0
Millennium, Windows 2000, or Windows  64 MB** of available RAM (with virtual
NT® 4.0 memory on)
 64 MB of available RAM  125 MB of available hard-disk space
 125 MB of available hard-disk space  Color monitor with 256-color (8-bit) or
 Color monitor with 256-color (8-bit) or greater video card
greater video card  Monitor resolution of 800x600 or
 Monitor resolution of 800x600 or greater
greater
** 128 MB of RAM required to run Photoshop
and ImageReady concurrently

When creating digital graphics, it is often helpful to capture parts of your computer screen.
Techniques and shareware utilities for capturing screenshots are detailed in my Multimedia
Madness workshop.

A less expensive version of PhotoShop is available, called PhotoShop Elements. Unlike the
previously released PhotoShop LE and PhotoDeluxe (which were both rather sparse in features
compared to PhotoShop), Elements is a robust program that can meet the needs of most
computer users. Because it does not support CMYK color separations, commecial printshops will
have to use the full version of PhotoShop, but 'the rest of us' could get by quite easily with
Elements for just $99. Read more and download a demo on:

 http://www.adobe.com/products/photoshopel/main.html

Elements includes some cool features NOT included in the current full -blown version of
PhotoShop until version 7, like creating a s imple photo-gallery webpage without typing any
HTML, and also a useful file browser. If you do want to create a photo -gallery without Elements,
the freeware PhotoPage sofware is excellent for Macintosh, or Catalog Wizard for Windows
computers.

Software alternatives to PhotoShop include:

3
 Windows Macintosh
 Graphic Converter ($30 shareware)
 PaintShop Pro (approx $100)
 StoneStudio (OS X only, $299)

More information about putting images online is des cribed in my article, "Digital Photos Online."
Other good programs for creating photo -gallery webpages with images (great for digital camera
photos) include:

Windows Macintosh
 Catalog Wizard ($25 shareware)  iPhoto (OS X only, free)
 Arles Image Web Page Creator ($49  Image Rodeo (OS X only, $30)
trialware)  Photopage ($30 shareware)

4
From the WINDOW menu, make sure LAYERS and NAVIGATOR have checkmarks beside them.
These are floating palettes that are in the bottom right and upper right corners of the screen by
default.

These basic techniques will help you view and navigate around within an image in PhotoShop:

1. Select a Layer
1. In the Layer palette (lower right corner) click on a layer to selected it.

2. The layer will be blue when selected:

2. Hide / Show a layer
1. Click on the eye ( ) next to a layer to hide it.
2. Click on the same box (which will be empty when the image is hidden) to show
the layer again.
3. Use the Navigation Palette to zoom in/out and move around in a zoomed image

4. Resize the displayed window

1. Click on the lower left corner of a PhotoShop window and hold down the mouse
2. Drag the corner to resize the window
5. Move contents of a layer with the MOVE tool
1. Select the layer containing the content you want to move or reposition (hide/show
to find it).

5
 2. Click on the move tool (arrow tool) in the upper left corner of the toolbar (left side

of the screen):
3. Click and drag on the layer to move it as desired.

Other PhotoShop Palettes can be viewed or hidden from the WINDOW menu at the top of the
screen.

Basic Keyboard Shortcuts can also be helpful:

Windows Macintosh
Ctrl + A Select all Command + A Select all
Ctrl + C Copy Command + C Copy
Ctrl + V Paste Command + V Paste
Ctrl + N Create a new file Command + N Create a new file
Ctrl + S Save your file Command + S Save your file

6
Composing Your Images (by Mark U.)

One thing we need to do whether it's taking the photograph or creating one in Photoshop is to
make sure we compose it right. This section will introduce you to the rule known as "The Rule of
Thirds".

Okay, so what exactly is this rule of thirds? Simply put, you place an imaginary grid over your
images that divides your image into equal thirds horizontally and vertically - which in turn gives
you striking composition. (Take a look at this picture on the right to see a typ ical image set up
with a grid.)

The idea is, like on this picture, you don't place the horizon in the middle of the middle square. By
taking the photograph with the bridge just over the top of the first middle square you are not
detracting from the main s ubject (the bridge and river) by placing far too much sky in the image.
However, if it were the sky you wanted to mainly focus on, you would possibly place the bridge at
the near bottom of the middle square, or into the next square below.

Sound confusing? Try it yourself... look through the viewfinder of your camera, pick a subject and
then place an imaginary grid over the image, (some digital cameras offer the chance to place an
actual grid on their LCD screen). If you are using a digital camera, take a f ew shots of the subject,
but move the camera around. Take one with the subject dead centre, and take some more using
the rule of thirds.

Although this is a rule to be followed when taking your photographs, like all rules, it can be
broken. For example, what about a close up shot of a flower? With the image opposite, the rule of
third has been broken, however, the centre of the flower is in fact in the centre anyway.

Hopefully, this will have given you some idea on how to compose images you create and your
photographs.

When creating your images from scratch, place a grid on a separate layer to help you with the
guides.

After opening PhotoShop, set your preferences for images. I recommend doing this by:

1. Choosing EDIT - PREFERENCES - UNITS AND RULERS

2. Select pixels for the Rulers unit:

7
 3. By making this preference setting, PhotoShop will by default ask you how many PIXELS
wide and high you want a new image to be when you create it.

Next, choose FILE - NEW. Specify the height and width of the new image. For your first image
make it 450 pixels wide and 300 pixels high :

As a rule of thumb for webpage images, use a maximum width of 450 pixels. If you make images
too wide, they will not completely be displayed if a web visitor's screen size is set to 640 x 480, or
their browser window is small.

RESOLUTION

 Resolution is how many pixels (dots) are included in a defined measurement. Often dpi
(dots per inch) are used as a unit of resolution.
 Basic guidelines for resolution:
o For screen display (PowerPoint) and webpage work: Use 72 dpi
o For graphics that will be printed: Use 300 dpi

Image Mode is important, because it determines the type of FILE FORMAT you can save an
image as. In general, stick with RGB color unless you are saving a file as a GIF (discussed
below):

INDEXED COLOR is used for GIF images. This format is limited to a 256 color pale tte. The fewer
the colors contained in the palette, the smaller the file size.

CMYK and other image modes are used extensively by commercial print shops, who must have
precise "color separations" for their printers.

More on resolution image settings from M ark U:

Definition: Resolution is a measurement of the output quality of an image, usually in terms of

samples, pixels, dots, or lines per inch. The terminology varies according to the intended output

8
device. PPI (pixels per inch) refers to screen resolutio n, DPI (dots per inch) refers to print
resolution.

Often images are referred to as high resolution (hi -res) or low resolution (low-res). High resolution
would be an image intended for print, generally having 300 pixels per inch or more. Low
resolution refers to images only intended for screen display, generally having 100 pixels per inch
or less.
Scanner and digital camera manufacturers often refer to two different types of resolution when
listing product specs: optical resolution and interpolated, or dig ital, resolution. The optical
resolution is the true measurement of resolution that the output device can capture. Interpolated,
or digital, resolution is acquired artificially.

Resolution is also known as: rez, res, dpi, ppi, hi -res, lo-res, low-res

Contrary to what you might think, ppi is not the same as dpi. Almost everyone these days has a
inkjet printer so let's think about your inkjet printer for a moment. How many colors of ink are in
your inkjet printer? Most of them have at least four and possibl y six ink colors. When your printer
lays down ink, it lays it down in overlapping dots of these four or six colors. Images are made up
of pixels (see definition below) and Photoshop defines resolution in pixels per inch. In a typical
RGB image, a single pixel represents one color out of the millions of colors that can be
reproduced on-screen.

(Pixel: a pixel is the smallest display element that makes up the images you see on a computer
monitor or television. A typical image contains millions of pixels, whic h is why digital camera
output is defined in megapixels (mega=millions). In bitmap -based images, the more pixels an
image contains, the higher its resolution.)

So how can a printer with only six colors of ink reproduce millions of colors? Well, certainly n ot by
printing a single dot for each pixel in your image! In reality, for each pixel in an image, your printer
may lay down several dots of overlapping color that mix together to make up the color of that
single pixel. All this is said to help you understa nd why you would use an image resolution setting
of 150 ppi in Photoshop in order to output an image with a printed resolution of 300 dpi. It's
simple; your printer needs to use more than one dot to represent the color of a single pixel.

To clear up another confusing matter, resolution (ppi or dpi) has no bearing at all for images that
will be viewed on screen. The only thing that means anything for screen display is the pixel
dimensions; that is, the number of pixels that make up the width and the number of pixels that
make up the height of the image.

If you've been told that you need to use 72 or 96 ppi for the Web, it's only because that is
approximately what a typical monitor can display. But, because we have the ability to adjust the
pixel dimensions of our monitor, and because monitors come in varying sizes, an image with the
same pixel dimensions is not always going to appear the same size on screen on every system
and with every monitor.

9
Image File Types
A large variety of image file types ex ist that can be confusing. If you want to get confused, take a
look at this exhaustive list compiled by the Center for Innovative Computer Applications .
Whenever you save a file in Pho toShop, you can choose the FILE FORMAT to save in:

In this class we will keep things a bit more simple. We will primarily save our files in
PHOTOSHOP format. This format has the benefit of retaining the different layers you create in
the image (they stay separate, instead of being "flattened")

 As a technique, I recommend creating a temporary version of any image you are working
on and SAVING IN PHOTOSH OP FORMAT.
 After the image is finished, choose to save a copy of the file in the desired format (FILE -
SAVE - under SAVE OPTIONS check "As a Copy"):

Two of the best known image formats (because they are widely used on the internet) are:

10
 JPEG (Joint Photographic Experts Group) retains 24 bit color (millions of colors).

 extension is .jpg
 Can compress JPEG up to 4:1 (lossy compression, some detail may be lost)
 Can compress in PhotoShop.

GIF (Graphics Interchange Format) developed by Compuserve.

 extension is .gif
 Limited to 8 bit color palatte (256 colors)
 Needs to be in INDEXED COLOR format
 Best for simple graphics
 3 variations of GIF: transparent, animated, and interlaced

Transparent Animated Interlaced

(also animated)

To resolve problems with some graphics appearing differently on Macintosh and Windows
computers (which share 216 of the 256 colors in the 8 bit color palette) download a Photoshop
"web safe" color palette: www.homepage.co.uk/webcolour/

The standard operating system graphic file formats ha ve been:

 WINDOWS: Bitmap (.bmp)

 Macintosh: PICT (.pic or .pct) - (OS X uses a different default format however: Adobe
PDF)

When saving a PhotoShop image as a JPG file, several options will be presented:

11
Select image quality based on the expected use of the file (internet images should be smaller)
and desired quality.

SAVE FOR WEB OPTION:

 One of the best "new" features of PhotoShop, introduced in version 5.5, is the " Save for
Web" option.
 Choose FILE - SAVE FOR WEB to display a variety of optimized file saving options, in
different formats.
 Select the version you prefer and save in the desired location.

This tutorial on "Basic Image Manipulation Using Photoshop" is excellent.

PhotoShop 7 includes support for web transparency, missing in previous versions. This is most
useful to web designers making graphics with transparent backgrounds.

Additional information about images and their use in webpages is available in the ADVANCED
IMAGE TECHNIQUES section of my INTERMEDIATE WEBPAGE WRITING workshop.

12
Tools
The PhotoShop toolbar contains a large array of selectable tools for i mage manipulation. The
toolbar in PhotoShop 6.0 for Windows looks like this:

Many of these tools have multiple options, which can be selected by clicking on them and holding
down the mouse.

Tools with other options have a small arrow in the lower left corner:

13
 *

* Both of these graphics / diagrams were scanned from the Adobe PhotoShop 6.0 Quick
Reference Card for Windows

Multiple Undos

One of the best features of PhotoShop is its ability to allow multiple undos. This means that,
unlike most programs which allow you to just "undo" the last thing you did, PhotoShop will let you
go back MANY steps.

14
Use the History palette ( ) to "move back in time" and undo
past actions.

After a file is closed, actions are not saved, however, so complete all undos before closing.

One of the best sources for graphics is the internet. Any image copied from a webpage can be
inserted into PhotoShop easily.

1. After an image is copied to "the clipboard," create a new image in PhotoS hop (FILE -
NEW). The dimensions of the photograph will automatically correspond to the exact
height and width of the image copied on the clipboard!
2. When you paste the clipboard contents into the PhotoShop image (see instructions
below) the copied picture is brought in as a NEW PHOTOSHOP LAYER.
3. Choose to save the image file as a copy and select the desired format. Remember most
photographs should be saved in JPG format to preserve colors most accurately.

Refer to the information below from my Intermediate Internet workshop for review of copy / paste
skills.

Copying and Pasting with the Clipboard ( separate handout available )

All computers have a short term me mory bank called the "clipboard." Unless you install special
software, the clipboard will remember one thing at a time that you copy. This can be a bunch of
text, an image file, or a sound file.

Copy and Paste Instructions: Internet and PhotoShop

(Mac/Windows)

Multitasking Instructions:

Multitasking: Using more than one software application at a time.

When we copy and paste text or multimedia elements, usually we need to multitask. This means
that more than one application is open at the same time.

1. Open a Internet Explorer and PhotoShop. Windows Users: Make sure only ONE Internet
Explorer window is open - close other pages by clicking the X in the upper right corner).
2. To multitask, click on the open program at the bottom of the screen you want to switch
into

1. Windows: Use the taskbar:

15
 2. Macintosh OS X: Use the dock:

3. Macintosh OS 8 and 9: Click on the corner icon and select the application
you want to make "active"

TO COPY AND PASTE PICTURES/GRAPHICS: (On a Windows computer, this only works
with IE, not Netscape)

1. Go to the webpage in Internet Explorer which contains the picture /graphic you want.
2. Move your mouse over the graphic you want to copy
3. Copy the picture by:

o WIN: Click with the RIGHT MOUSE BUTTON on the picture, and from the
popup menu choose to "COPY."

o MAC: Click the mouse button and hold it down till you see a popup menu,
then choose to "COPY IMAGE" (or hold down CONTROL and click)
4. Switch into PhotoShop (make it "active")
5. From the FILE menu, choose NEW, then click OK.
6. From the EDIT menu, choose PASTE.
7. The image on the clipboard should be pasted into the PhotoShop file as a new layer.
8. Choose FILE - SAVE and choose to save as a copy, usually in JPG format. (See
instructions above for SAVING AS A COPY .)

Information about saving internet images as separate files is also availa ble.

Notes for Webpage creators:

1. If you are using a webpage editor like Homepage, Frontpage, or AOL Press ( more info
and download links are available ), you can paste an image from the clipboard d irectly
onto your created webpage and the editor software will convert it into a GIF or JPG
format.
2. This is handy if you used a screen capture utility or key combination to copy a region of
the screen to the clipboard. ( More info is available about this technique .)
3. This option does not allow you to edit, crop, and otherwise change the image like you can
in PhotoShop, but it is a shorcut that can save time, especially if you do not need t he
editing power of PhotoShop for the captured image.
4. If needed, however, you can LATER open the image in PhotoShop and edit it.

16
Drawing / Painting
The drawing and painting tools are located in the second part of the PhotoShop toolbar

Whenever a tool is selected, like the Airbrush tool ( ), options for that tool are shown at t he
top of the screen and can be changed by clicking on each setting:

Note that some tools, like the Fill tool (Paint Bucket), are hidden by default behind anot her tool
choice (in this case, the Gradient Tool):

Also note the differences between tools: the Paintbrush tool ( ) located beside the Airbrush

tool, and the Pen tool ( ) located below the Path Component Selection Tool ( ):

 The Airbrush tool "applies gradual tones (including sprays of color) to an i mage,
simulating traditional airbrush techniques." (PS 5.0 Manual, p. 197)

 The Paintbrush "creates soft strokes of color." (SSAA, p. 197)

 The Pencil tool "creates hard -edged freehand lines and is most useful for bitmapped
images." (SSAA, p. 197)

 The Pen tool "lets you create straight lines and smooth flowing curves with greater
precision than possible with the freeform pen or magnetic pen tool. For most users, the
pen tool provides the best control and greatest accuracy for drawing." (SSAA , p. 153)

17
Refer back to section on other tool options for more details on other tool choices.

Of all the drawing and painting tools, the pen is the most challenging to use.

This tutorial on the pen tool is excellent!

To practice, try this pen tool excercise:

http://www.designsbymark.com/pstips/misc_pentool2.shtml

As a technique, create a new layer (as described next) for each different part of your image
before you draw on it. This gives you more control and ability to undo past changes.

18
Working with Layers
One of the most powerful features of PhotoShop its is ability to preserve different parts of an
image on different "Layers."

How do Layers work? (by Mark U.)

Well, one way to think about it is this. You are making a

sandwich for a quick snack; you place your butter on the
bottom slice (Background). You then add a piece of ham
(Layer 1), some cheese (Layer 2), and some tomatoes (Layer
3). Finally you put a piece of buttered bread on top (Layer 4).
Apart from making you hungry, just think of layers in this way.

According to Adobe:

Layers provide a powerful way for you to organize and manage the various components of your
image. For example, by placing an artwork element on a separate layer, you can easily edit and
arrange the element without interfering with other parts of the image. To organize related groups
of elements, you can nest several layers under a layer set. Lay ers also provide the basis for
managing and defining advanced features such as Web animations and rollovers.

When working with an image, I usually keep the background layer empty (blank) and paste all the
image components on different layers.

The Layer palette within PhotoShop displays different layers, and can be shown by choosing
WINDOW - SHOW LAYERS.

The image below includes different layers, including a TEXT layer and background layers:

19
 Source: Adobe

Create a New Layer

 From the LAYER menu, choose LAYER - NEW - LAYER, or

 Click on the Create New Layer button ( ) at the bottom of the layers palette
 After creating the layer, name it if desired. Layers can be renamed later if desired by
double clicking on their name.

Move or Delete a Layer

 Move a layer to a new relative location by clicking and dragging it within the layers
palette.
 Delete a layer by clicking on the Delete Current Layer button on the layers palette. It
looks like a trash can:

Hide or Show a Layer

 Click on the eye ( ) next to a layer to hide it.

 Click on the same box (which will be empty when the image is hidden) to show the layer
again.

Duplicate a Layer

 From the LAYER menu, choose DUPLICATE LAYER.

 As a technique, before modifying something in PhotoShop create a duplicate layer, then
hide the original (click on the eye). Then make changes to the copy. If you don't like t he
changes, delete the duplicate layer and repeat these steps.

20
Cropping
One of the most basic ways to edit an image is to CROP it: remove unwanted portions and focus
the viewer's attention on a particular aspect or element.

Cropping a photo means cutting out parts of the photo by making it a smaller rectangle. This
example of photos taken of Elian Gonzalez as he was rescued / taken by US officials in Miami
shows cropping. The top photo includes a sign on the fence, while the second photo does not.

Aspect Ratios

Aspect Ratio is the comparison of the width of an image to its height. You might have heard of
aspect ratio of DVDs. According to the website DVD Dymystified:

Video can be stored on a DVD in 4:3 format (standard TV shape) or 16:9 (widescreen). The
width-to-height ratio of standard televisions is 4 to 3; in other words, 1.33 times wide r than high.
New widescreen televisions, specifically those designed for HDTV, have a ratio of 16 to 9; that is,
1.78 times wider than high.

21
Aspect ratios are also important with digital images and photographs. If an image in Photoshop
does not have the correct aspect ratio, when it is printed (by a service like Shutterfly.com) then
part of the image will be cropped off. This is because of aspect ratio: the same reason a
widescreen DVD played on a standa rd television only fills the middle part of the screen. The
movie size is made smaller so it all fits on the screen without being cropped off. If a movie is NOT
shown in widescreen format, parts of the movie edges have been cropped. That is what the
message "This movie has been adjusted to fit your screen" means at the start of VHS movies.

These are common aspect ratios for film and print sizes:

Ratios of common print sizes: Ratios of film sizes

4x6 = 1.5 35mm = 24x36mm = 1.5

5x7 = 1.4 4x5 (medium format) = 1.25
8x10 = 1.25 6x7 (medium format) = 1.17
11x14 = 1.27
16x20 = 1.25

Impact for PhotoShop Users: If you are going to print a digital image as a standard size
photograph, make sure the image size has the correct aspect ratio. Aspect ratio is cont rolled by
changing the image size (descripted in the section on Transformations )

Crop an image in PhotoShop:

1. Open the image you want to crop.

2. Click on the crop tool in the toolbar, under t he lasso:
3. Click and drag on the image to define the part you want to KEEP. As a technique, click in
the upper left corner first and then drag down, to the right.
4. Stretch the crop region "handles" (the boxes in the corners and on the sides of the

selected area) as desired:

5. Press ENTER to crop the photo as selected.

22
Using Type
After selecting the text tool ( ), text options are displayed at the top of the screen that can be
changed as desired:

To add text to an image:

1. Create a new layer (LAYER - NEW - LAYER)

2. Click on the text tool:

3. Click on the layer where you want to insert text
4. Change the Text Options at the top of the screen, below the menu options, as desired.
5. Type your text

To add a fancy layer effect:

1. Click on the text layer in the layers palette.

2. From the LAYER menu, choose LAYER STYLE, then the desired effect. More than one
can be selected.

23
Layer styles can be used on ot her layer types also! (See the section on Fun Stuff for more layer
effect tips)

More information about entering / creating type is available.

Try this exercise for using type:

 The Software zone activity

More suggestions for cool text effects are available on Cool Text
(http://webdeveloper.com/design/ )

24
Compositing
Create a photo collage, or composite i mage, by creating or inserting different images within the
same PhotoShop file.

This image was created by a 5th Grader at Rush Elementary during 2000 -2001 and entered into
a state digital graphics contest (where it placed in the top 3 for grades 3 -5):

This image was actually created using PaintShop Pro rather than PhotoShop, but the techniques
and concepts are the same:

To create a photo composite:

1. Each image should be inserted as a separate LAYER. Refer to the previous section on
copying/pasting.
2. When you save the final version as a JPG image, it will be FLATTENED so the different
layers will not be preserved.
3. Save a copy of the original image in PhotoShop format (PSD) to keep the layers
seperate, in case you want to change something later.

25
Retouching Photos
Curves, Levels, and Contrast/Brightness (intro by Mark U.)

Photographs scanned into the computer or taken with a digital camera are rarely exposed
perfectly. Which of available methods in PhotoShop should you use to adjust the contrast and
brightness of your images? The standard wisdom is that Curves are best, Levels are decent, and
Contrast/Brightness is only for beginners. But this isn’t necessarily true.

In many cases, Contrast/Brightness is just fine. And, quite often, the precise control available in
Curves leads to very unnatural looking images. The human eye is exquisitely sensitive to
variations in lighting. If a part of an image is brighter, sharper, clearer than the implied lighting
throughout the rest of the image requires it to be, we don’t trust, or believe in the accuracy of that
image. We’re not talking about overcorrected, poorly done images. Instead, we’re tal king about
the ones that have been carefully manipulated by a Photoshop expert. You may not be able to
put your finger on exactly what is out of place, but at a subconscious level, you can feel that it is
wrong.

If a picture is intended for commercial use where the details in a product, or a the face of a CEO
are what is important, then manipulation may be useful. However, if you are making art, or trying
to create convincing illustrations, keeping your images believable should be very important to
you.
With close-up images, where the sources of light cannot be seen, a picture can be heavily
manipulated, and remain convincing. However, when lighting clues such as shadows, reflective
surfaces, windows, doors, the sky, or the sun are included, there is very li ttle room for local tonal
shifts. The eye needs to see a reason for extra brightness or clarity if one area looks different
from the rest of the image.

Curves can make local changes that are not believable. It doesn’t have to be used this way, but it
usually is. Levels spread or compress the overall tones of the image, while allowing you to
position the endpoints in a way that does not lose any image detail. This is believable because
the changes are global.
Brightness/Contrast also makes global changes th at are believable. The bad thing about
Brightness/Contrast is that it does not allow you to position the endpoints of the tonal scale. Tonal
detail that is almost white, or almost black can be shifted to be pure white or pure black by
contrast or lightness moves made with this adjustment.

Some techniques for color correction include:

26
Adjust the CURVES

1. With an image open and selected in PhotoShop, choose IMAGE - ADJUST - CURVES.
2. Click and drag on the line to make the image darker or lighter:

3. With the PREVIEW box checked, you can immediately see the effects of your curve
changes.
4. Click OK to save the changes.

Adjust the LEVELS (the definition of pure white, pure blac k, and the point midway between
these values)

 Try to adjust levels automatically by choosing IMAGE - ADJUST - AUTO

LEVELS:

If this result is not desirable, manuall y define the pure white and black values for your image by
choosing LEVELS from this menu and:

27
 1. Dragging the triangles under the graph on the left and right sides u nderneath the levels
graph.
2. Click on one of the eyedroppers, and then click on the appropriate part of the photograph
(white eyedropper on the right defines pure white, black eyedropper on the left defines
pure black, middle eyedropper defines mid -gray.)
3. Your image may not include pure white or pure black pixels. If this is the case, don't use
these eyedroppers.

Adjust Contrast, Brightness, and Color Balance

 From the same menu (IMAGE - ADJUST) select other variables to change
 Either drag sliders to adjust v alues, or directly input numerical values:

Use the Clone Stamp Tool to "Touch Up"

1. Use the Magnifying glass ( ) to zoom in on your selection first.

2. The Clone Stamp Tool allows you to duplicate one part of the screen on another, by
"painting it on"

28
 3. After selecting it, choose the desired type and size of the brush, depending on what size
and type of cloning you need to do:

4. Make sure you are in the desired L AYER before using the Clone Stamp Tool.
5. Hold down the ALT key (Mac: Option key) and click to DEFINE the part of the image you
want to clone.
6. Release the key and click / drag over the area you want to erase and STAMP a clone of
the defined area.

Color Enhancement

One of the things Photoshop is widely used for is color enhancement. We can achieve this using
a combination of the Levels and Hue & Saturation commands.

1. The first thing we need to do is adjust the levels of the photograph using the Levels
command. Press CTRL+L to access the dialogue box.
2. Move the far right slider towards the left until it reaches the start of the first peak. Next
alter the gamma by moving the middle arrow towards the right or left. You will see the
changes as you move the arrow. Se lect OK when you are satisfied with the new colors.
3. Now to brighten up the colors. From the Image menu, select Adjust... Hue & Saturation
(or press CTRL+U (WIN) or COMMAND+U (MAC)). From the Edit drop down list, choose
Reds. Move the Saturation slider to t he right. Straight away you will notice that only the
red colors within the image have brightened.
4. You can do the same with any of the other colors in the Edit drop down list. Press OK
when you are finished.

Your image should now have colors that are more vibrant and stand out a lot more than the
original image.

Additional resources on Photo Retouching are available:

 http://www.psptips.com/5/phoman/

29
Ghosting Photos (Opacity)
PhotoShop can be used to take a normal photograph (like this close-up of my golden retriever,
Bailey) and create a "ghosted" version that can be used as the background for a webpage or
another document, with readable text on top of it.

This technique involves three basic steps:

1. Cutting all parts of a saved image and pasting them in a new lay er
2. Changing the opacity of the layer (usually to 20 or 30 percent for a webpage background)
3. Saving the image again as a flattened JPG image

To create a "ghosted" image:

1. Open a saved image in PhotoShop

2. Select the entire picture by pressing CONTROL - A (Mac: Command - A)
3. From the EDIT menu choose CUT
4. From the EDIT menu choose PASTE (the image should be pasted as a new PhotoShop
layer)
5. In the Layers palette, change the OPACITY setting (for that layer) between 20 and 30

percent: It may look too faint in PhotoShop, but in a

web browser a background with an opacity greater than 30% tends to compete with
overlaying text.
6. From the LAYER menu, choose FLATTEN IMAGE (this removes th e separate layer)
7. Save the image (FILE - SAVE)
8. Alternatively, skip steps 6 and 7 and choose FILE - SAVE AS COPY

30
Making Selections
The key to creating professional looking images with PhotoShop is usually being able to SELECT
just the part of the image you want to do something to: apply an effect, cut out a background, etc.
These tips may help.

MAKE SURE YOU ARE ON THE RIGHT LAYER!

 Look at your LAYERS palette first before making a selection.

 Make sure the appropriate layer is selected, otherwi se you may select something you
don't want or nothing at all.

The Pen is more powerful

 The pen tool is the most powerful PhotoShop tool for making complex selections,
because it allows you to define precise "paths" that can be saved and used for other
tasks.
 Using the pen tool takes a LOT of practice and really distinguishes a casual PhotoShop
(or Illustrator) user from a novice. Don't be frustrated if it seems too diffi cult-- it is NOT
necessary to use the pen tool to make selections.... there ARE easier ways, tho possiblity
not as powerful....
 Refer to links in a previous section about using the pen tool for helpfu l tips and practice
exercises.

Remember to ZOOM IN

1. When making a selection, use the magnifying glass to zoom in and out of an image.
2. With the zoom tool selected, right click (Mac: Control Click) to see zoom options:

3. Use the Navigator to move around within an image once you have zoomed in. Enter a
numeric value for zoom or use th e slider alternatively instead of clicking on the image to

change magnification:

The Lasso is powerful too

31
  PhotoShop includes three different lasso tools.
 The standard Lasso Tool is powerful for selecting an irregular shape, but the other
Lassos may be easier to use.
 The Polygonal Lasso allows you to click along the border of an object (kind of like
the pen tool, but less powerfully) and finally double click to close the selected shape.

 The Magnetic Lasso will impressively attach itself to similarly colored pixels to make
a selection. Zooming in is a must for using it!

Use your magic wand!

1. The Magic Wand tool selects pixels of a similar type, within a specified tolerance
range.
2. If you need to select more or less pixels after clicking on the image, change the
TOLERANCE value at the top of the

screen:
3. Once you have selected some pixels, try the SELECT - GROW or SELECT - SIMILAR
menu commands to select other pixels like those you've chosen.

Select the Inverse

 Sometimes once you have selected an object, you want to get rid of everything else.
 In this case selecting the inverse is helpful.
 Select the inverse after making a selection by choosing SELECT - INVERSE.

Use a LAYER MASK

Masks can be created in PhotoShop to hide or re veal parts of an image. A Layer Mask is a
special greyscale image attached to a layer, which determines how the two layers blend.

 White pixels in a layer mask = top layer pixels are OPAQUE

 Black pixels in a layer mask = top layer pixels are TRANSPARENT
 Grey pixels in a layer mask = blended pixels in top and lower layers

To create a layer mask:

1. Select the a layer you want to blend with a lower layer.

2. From the menu bar choose LAYER - ADD LAYER MASK - HIDE ALL.

32
 3. This layer mask will be filled with black pixels: now use paint tools to fill in with WHITE
pixels the part of the top layer you want to include.
4. To preserve the image for later adjustment, SAVE A COPY of the final image as a .jpg
and also save the original file as a .psd file.

If you want to learn more about Masks, try these tutorials:

 About.com's PhotoShop Mask and Selection tutorials

 http://www.grafx-design.com/01photo.html

33
Once you have made a selection in an image, different types of trainsformations are possible.
These include changing the size (scale) of the selection, rotating it, or changing its shape in other
ways (skewing or distorting). Selections ca n also be flipped vertically or horizontally.

To transform a selection:

1. Choose EDIT - TRANSFORM:

2. Drag the "handles" (the squares on the corners and in the middle of each side of the
selection) as desired.
3. Hold down the SHIFT key to maintain proportions.
4. Press ENTER to complete the transformation.

To apply a transformation to an entire image, choose EDIT - SELECT ALL before choosing a
transformation.

Images can also be resized by choosing IMAGE - IMAGE SIZE from the menu bar:

Increasing image size will result in a loss of resolution.Make sure the units of measurement are
set to pixels, and leave the Constrain Proportions checkbox checked, so that your image isn't
squished horizontally or vertically when you resize. Change either the vertical or horizontal pixel
measurement, and Photoshop will adjust the other measurement acc ordingly.

Choose to increase the CANVAS SIZE when you need more work area / space.

34
Fun Stuff (filters, actions & more)
Layer Effects / Styles (by Mark U.)

Many of the well known PhotoShop techniques (like beveling and creating drop shadows) have
now been made LAYER EFFECTS.

After making a selection (as described in the previous section), choose LAYER - LAYER
EFFECTS as described in the section on using type.

Layer effects can be applied to any lay er in an image. They cannot be applied to the image
background layer, if there is one. Turn the background into a regular layer if you want to apply an
effect or style to it. To do this, double -click the background and give it a name. Or, after double -
clicking, you can simply click OK to accept Adobe’s default name of Layer 0.

If a layer already has effects or styles applied to it, and you want to add the new effects to those
rather than replacing them, press the Shift key as you use any of the ways descri bed below to
add the additional effects or styles.

There are many ways to add effects or styles. The quickest is select the layer and then click one
of the styles thumbnails in the Styles palette. This will instantly add that style to the selected
layer. You can also double click the layer’s name to open the Layer Styles dialog box. All of the
individual effects can be added or removed from here by checking, or unchecking items in the
menu at the left side of that dialog box.

A style thumbnail can be dragg ed from the Styles palette onto the layer you wish it applied to in
the Layers palette. A thumbnail can also be dragged onto the image. It will be applied to
whichever layer contains the pixels where you drop the thumbnail.

Other methods of adding layer ef fects are—select the layer you want the effect to be applied to
and then click the Layer Style button at the bottom of the Layers palette (shown at the top of this
page) or choose Layer > Layer Style and pick the effect you want from the menu. Both of thes e
methods will open the Layer Styles dialog box where you can customize the effect.

Layer styles already applied to one layer can be copied and applied to another layer. There are
two ways to do this. To copy and paste, select the layer which has the styl e you want to copy.
Then choose Layer > Layer Styles > Copy Layer Style. To paste the effects onto one layer,
choose Layer > Layer Style > Paste Layer Style. To copy the effect onto multiple layers at once,
link them and then choose Layer > Layer Style > P aste Layer Style to Linked.
You can also copy effects by dragging from one layer to another. Drag either a single effect, or
the Effects bar (which is shown at the top of the illustration at left) to copy multiple effects. If you
like, you can drag an eff ect from the Layers palette onto the part of the image to which you want it
applied. It will be added to that layer which contains the pixels you drop it onto.

Layer effects move and change with the layer. You don’t need to be worried that they will become
out of alignment, or fall apart if you transform the layer. You can add or remove effects at any
time. Their settings can be edited at any time. Double -clicking the layer, or one of the effects, will
open the Layer Style dialog box where you can make any changes you like at any time.

35
Styles applied from the Styles palette can be removed by selecting the layer which has the style
applied and then clicking the No Style thumbnail. It’s the very first one in the palette in the upper
left corner. It’s a white square with a red line drawn diagonally across it.

Remember that most of the layer effects work on the edges of the layer’s content. The Overlays,
and Satin are exceptions.

Dodge and Burn (by Mark U.)

These are two very useful tools for image editing. They can be used either to increase or
decrease local contrast, as well as for apparent sharpening of fine details.

Dodging and burning are techniques used by photographers during printing to increase or
decrease exposure to particular areas of the image.
The tools by this name in Photoshop have one big advantage over traditional burning and
dodging techniques; they can be limited to shadows, midtones, or highlights. This means you can
either increase or decrease the intensity of highlights or shadows.

Consider the fact that the Levels, Curves, and Brightness/Contrast commands work by
brightening highlights, and darkening shadows throughout the image. Curves can be selectively
applied to one level of tones, but the tones of that value throughout the image will be affected.
With the Dodge or Burn tools, you can manipulate highlights, midtones, or shadows, only, and do
it locally.

The Dodge tool is used for lightening tones, and the Burn tool is used for making tones darker.
Please note that neither of these tools is good for using on evenly toned areas such as open sky,
or untextured surfaces.

Filters

A few, very basic tips on using filters:

1. Many of the filters require a lot of RAM. They can take a long time to be applied to large,
high-resolution images. It is suggested that you make a selection of a representative area
on such images, and apply the filter to just that area to see if you like it before applying it
to the entire image.
2. As indicated above, filters can be applied to selections. The active, sele cted layer is the
one that will be affected by the filter.
3. Many of the filters only work on RGB images. None of the filters will work on 1 bit Bitmap
mode, or indexed-color mode images.
4. Filters which look awful on one image will look great on another. You should experiment
with different types of pictures to find ones you like.

Available filters are listed in the FILTER menu. Filters are organized into categories. Additional
(third party) filters can be added also:

36
To apply a filter:

1. Make sure the desired layer is selected in the LAYER palette

2. Make a selection as desired, to which the filter will be applied
3. From the FILTER menu, choose and apply the desired effect.

Photoshop Actions (by Mark U.)

If you use Adobe Photoshop, but have never used Actions, you are missing a large portion of
what the program can do. Don't get me wrong, one can live without actions, but once you use
one, you find out how much more efficient and easier they make graphics work.
Several action sets are included on your workshop CD.

Installing an Action

1. First, you may want to open a new browser window, so you can switch back and forth
between here and the other pages. Go to New | Browser Window or a similar menu
command in your browser to open a new browser window.
2. Look for actions you like. I'm going to choose the Cryptic Wall Action. Then, click on
Download Now.
3. It will ask whether you want to open the file, or save it to disk. Choose save to disk. Note:
If the browser automatically starts downloading, try using Save As. Save the file to the
Goodies/Actions or Goodies/Photoshop Files Only/Actions directory in your Photoshop
folder.
4. Open Adobe Photoshop, and make sure your Actions menu window is open . If you can
not see it, go to Window | Show Actions Menu.
5. Click on the triangle button on the menu.
6. A menu will pop up, and select Load Actions. Go to the Goodies/Actions directory, and
select the name of the action(s) you want to install. After clicking Load, the actions will
appear in the menu window. Note: Actions may require plugins such as Eyecandy, but
the action will tell you what it needs as you try to use it.
7. You have now installed your actions!

37
Using Actions

1. Create a new file or open a working i mage.

2. Let's say you followed the instructions above, and your action is now installed. Make sure
your action is selected.
3. Then, just hit the PLAY button (the one that looks like a triangle pointing right), and then
just do what the instructions during the action say. Once in a while, the action will ask you
to do something, such as duplicate a channel, etc., and after you do it, you must click the
PLAY button again.
4. And you're done!

Internet image tools

 This image manipulation tool can online be used if t he image you want to change is
already online, and you can type or copy/paste the URL for the image location: Flaming
Text Photo Manipulation:http://www.flamingtext.com/photos/ .

38
This caution from the Adobe PhotoShop tutorial should be heeded:

Please remember that existing artwork or image s that you may want to include in your project
may be protected under copyright law. The unauthorized incorporation of such material into your
new work could be a violation of the rights of the copyright owner. Please be sure to obtain any
permission required from the copyright owner.

Be conservative: Be safe

"Do I have to get permission to use this?" "Is this legal?" "If it doesn't have the copyright symbol
on it, is it still copyrighted?" These are important questions, which unfortunately do not often hav e
clear answers when it comes to using multimedia created by someone else in your own work.
The most conservative guidelines are:

1. Create all your graphic content from scratch: if it is original, no copyright issues should be
encountered.
2. Obtain permission from the actual creator / copyright holder(s) before using someone
else's work.

Do educators have to follow such conservative, stringent guidelines in order to remain in

compliance with US copyright law? No. But if you don't, the answers to the above quest ions can
be vague and harder to understand.

"Educational Fair Use" = Language of the Past *

In the past, educators enjoyed additional rights when it comes to copyright and multimedia,
thanks to EDUCATIONAL FAIR USE provisions of US copyright law. These rig hts were not
unlimited, however. Restrictions existed for:

 the way materials may be used (always non -commercial, for instructional purposes)
 the length of time materials may be used
 the amount of a "work" that may be used

The Digital Millenium Copyright Ac t did away with "Educational Fair Use." Now, there are no
"bright line rules' for determining "fair use" (like a certain percentage of the work is permissible.)

The following considerations should be used to determine "FAIR USE:"

1 - Purpose / Character / Nature of the Work

 Purpose and character of the use (commercial or nonprofit)

 The nature of the copyrighted work (if a highly creative work, using it would weigh against
fair use)
 Facts can’t be copyrighted, so if it is something from an encyclopedia it is more likely to
be viewed as fair use than something that is less factual

2 - Publication status

39
  If it is unpublished, this factors against fair use
 If it is published (including posting on the web) - this weighs in FAVOR of fair use
sometimes

3 - Portion used

 Also, the substantiality of the portion used in relation to the copyrighted work as a whole
 General rules: the more you take, the less it weighs in favor of fair use, and vice versa

4 - Effect of use

 Effect of the use upon the potential market for or value of the copyrighted work
 Even out of print works can’t just be put on the web, because of the impact this might
have on a new edition of the work

Note that whether or not the use of another's materials is properly documented is immaterial to
whether or not the use constitutes FAIR USE.

* These guidelines were provided by a lawyer specializing in intellectual property law in a

presentation hosted by the Teaching, Learning, and Technology Center of Texas Tech University
on April 10, 2002.

Teach students respect for copyright and documentation skills

Proper documentation of sources is very important, and should be modeled by educators as well
as taught to students. This is required by the Technology Application TEKS (TA -TEKS) in Texas,
as well as by law.

For example, provisions of the Technology Applications TEKS for Grades 3-5 (§126.3.B.3.b)
require that students:

model respect of intellectual property by not illegally copying software or another individual's
electronic work.

Provisions of the Technology Applications TEKS for Grades 6 -8 (§126.12.C.3.a) require that
students:

discuss copyright laws/issues and model ethical acquisition and use of digital information, citing
sources using established methods

For more information about Copyright:

 Remember that older documents referring to "EDUCATIONAL fair use" are outdated!
 Refer to: http://www.itts.ttu.edu/documentation/laws/lpc3.html
 Also refer to Stanford Library' s site: http://fairuse.stanford.edu/

40
Other Resources
Quickly Locating Educational Resources on the Internet

World Trade Center Tourist page

Good PhotoShop Practice Exercises:

Designs by Mark PhotoShop Tips

1. Pen Tool Exercise

Laurie McCanna's Photoshop Tips

1. Create the World in Sixty Seconds (and without draw ing a circle!)
2. Making Those Little "Colored Ball" Icons in Photoshop
3. Using Layers in Photoshop - Experimenting with Composite Modes
4. Making Icons With Beveled Edges
5. Fitting into a New Size without Diet or Exercise!

Other PhotoShop Resources

1. Do You Really Need All That Resoulution?

(http://www.scanhelp.com/288int/scontent/needres.html ) - Good discussion of scanning
resolution issues
2. Get Rid of Red Eye
(http://freespace.virgin.net/eye.eye/photoshop/tips_tricks.htm#RedEyes ) - One of several
suggested tricks
3. GrafX Design (www.grafx-design.com/phototut.html)- Offers online tutorials on creating
web graphics
4. PhotoShop World(http://www.planetphotoshop.com/ )- Wealth of tips and resources
5. Photoshop Central (www.photoshopcentral.com)- tons of resources, including
discussion groups and tips. The self -proclaimed "center of the PhotoShop Universe"
6. Books about PhotoShop (recommended by Adobe)
7. PhotoShop for the Web (www.kent.wednet.edu/staff/epeto/photoshop/index.html )
8. Cool Text (http://webdeveloper.com/design/ )
9. PhotoShop Tips (www.designsbymark.com/pstips/index.shtml )
10. PhotoShop Basics
(http://graphicssoft.about.com/ compute/graphicssoft/cs/photoshopbasics/index.htm )
11. Magic's PhotoShop Tutorials (www.magicpixel.com.au/html/workwel.html )
12. Absolute Cross's PhotoShop Tutorials
(www.absolutecross.com/tutorials/photoshop.htm )

41
Documentation of Graphic Techniques
I have used a wide variety of PhotoShop techniques on the images included in this online
curriculum. Descriptions of these techni ques follow. The original PhotoShop files can be
downloaded as a zip file. The name of each original image follows each description.

1. introtophotoshopbanner.jpg - Reprise font, 40 point, Layer Effects: Drop Shadow (40%

opacity, distance 8), Bevel and Emboss (Inner Bevel) - banner.psd
2. tribe_aqua_red.gif (horizontal rule graphic) - image from the Claris Homepage library:
horizontal_rules.hlb
3. whyusephotoshop.jpg - Sign Painter font, 40 point, Layer Effect: Inner Shadow (60%
opacity) - whyuse.psd
4. obtainsoftware.jpg - Arial Black font, 36 point, Layer Effects: Inner Shadow (60% opacity),
Outer Glow (Normal, 75, 7, 95), Bevel and Emboss (Outer Bevel) - obtainsoftware.psd
5. workingwithimages.gif - Comic Sans font, 36 point, Wrapped Text - Flag - 50% bend
(made with PhotoShop 7), Layer Effects:
1. Drop Shadow: normal, 50% opacity, Distance 15, Spread 5, Size 10
2. Satin Style: linear, light, 50% opacity, Distance 11, Size 14
3. Stroke Style: Size 2 pixels, position outside, opacity 100%, red color
6. copyright.jpg - Techno font, 40 point, Layer Effect: Beve l and Emboss (Pillow Emboss) -
copyright.psd
7. createnewimage.jpg - Sand font, 32 point, Rendered (Layer - Type - Render Layer),
Filters: Eye Candy 3.0 Inner Bevel, Eye Candy 3.0 Perspecti ve Shadow -
createnewimage.psd
8. copypaste.jpg - Capitals font, 40 point, Layer Effects: Drop Shadow (40% opacity,
distance 10), Bevel and Emboss (Inner Bevel), Inner Shadow (20% opacity) -
copyandpaste.psd
9. tutorial.jpg - Arial Black font, 36 point, Layer Effects: Gradient Overlay (Yellow), Bevel
And Emboss (Contour) - tutorial.psd
10. transformations.jpg - Times font, 48 point first character, 24 point for remainder, used
EDIT - TRANSFORM - DISTORT to stretch out lower corners, Drop Shadow 50% opacity
and distance 10 pixels, Inner Shadow opacity 20%. - not included on participant CD

42