Adobe Photoshop Elements 6.0

1
Adobe Photoshop Elements 6.0

2

• Please note that this presentation has not been
  updated to reflect Adobe Photoshop Elements 6.0.
• You are welcome to check out a book about version
  6.0 from Dr. Flaherty for a short period of time.
  

3
About Adobe Photoshop

• Adobe Photoshop CS2

• Adobe Photoshop Elements

• Retails around 700
• 250 for an academic license

• Retails around 90
• 60 for an academic license
• A bit more if bundled with Adobe Premiere
  Elements (the video companion)

4
Digital Image Basics

• Every digital image is just a grid of tiny blocks
  of color called pixels.
• Pixels are the only unit of measurement that a
  computer can truly understand.

This example shows an image with a portion
greatly enlarged, in which the individual pixels
are rendered as little squares and can easily be
seen.
5
Resolution

• Resolution is a concept that is critical getting
  good results with any digital photography, but is
  one of the most misunderstood. The term
  resolution refers to the spacing of pixels on the
  printed page. The resolution setting has no
  effect on the display of the image while it is on
  a computer, only when it is printed.
• Resolution is referred to most of the time as ppi
  (pixels per inch) or dpi (dots per inch). For
  example, in the dialog box below, the resolution
  of the page is set at 72 dpi.

6
Print Versus Screen Image Standards

• Print - Images for newsletters, brochures,
  newspapers, magazines, or any other type of print
  medium.
• The baseline standard for a good photographic
  print is 300 ppi.
• Screen - Images for web pages, HTML newsletters,
  PowerPoint presentations, or any other electronic
  medium.
• 72 ppi is the standard for on-screen presentation
  (though some are moving to a 96 ppi standard as
  screen resolutions steadily increase).

7
Use Image Image Size to adjust values on an
image

• In order to use resolution effectively you need
  to do a little math. The chart below can be used
  for reference.

8
Getting Started

• Open up Adobe Photoshop Elements below is CS
  (change to elements)

9
Getting Started

• Create A New File
• File New or CTRLN
• Change the width, height, and resolution to the
  numbers below

10
Getting Started

• After creating a new file, you should see
  something similar to

11
The Organizer and The Editor

• The Organizer
• Find, organize, and share image files
• The Editor
• Create, edit, and fix images

12
The Components of the Workspace

• Menu Items
• Shortcut Bar
• Options Bar
• Tool Bar
• Palettes

13
1. Menu Items

• File/Open Many menu commands arent available
  until you use this command to open an image.
• File/New You can create an empty cnvas to
  compose a new image from scratch. Try something
  about 500 x 500 pixels if you want to experiment.
• Window If you can not find a palette, there is
  a list of all of them under this menu. A check
  mark means its already visible on the screen, so
  clicking it again will make it disappear.
• Enhance The enhance menu contains lots of great
  tools for making digital photos look better.
  This is a big advantage over the maze of menus
  necessary to complete thse same tasks in the full
  version of Photoshop.
• Edit/Preferences You can reset most of the
  defaults here, so if you find yourself changing a
  particular option over and over again, this can
  help. Unlike most areas of Photoshop (where
  experimentation is encouraged), if you dont
  understand what a preference does, it may be best
  to leave it alone. However, a re-install will
  likely fix any mishaps.
• Edit/Undo This is my favorite function since
  everyone makes mistakes. Undo pretends that your
  mistakes never happened.

14
2. Shortcut Bar

• This bar contains shortcuts to commonly used
  items that can be found in the menus.
• If you dont know what a shortcut button does,
  just hover your mouse over the button for a
  second and a little flag will appear telling you
  the name of the button.

15
3. Options Bar

• This bar will look different depending on what
  tool you have selected from the Tool Bar (number
  four coming up).
• The vast majority of options for any tool will be
  found here, and we will cover the most important
  ones. Feel free to experiment to learn the rest.

16
4. Tool Bar
17
5. Palettes

• Palettes are available in both the Editor and
  Organizer workspaces however, they behave a
  little differently in each.
• Palettes help you manage, monitor, and modify
  images.
• Some palettes have menus that provide additional
  commands and options.
• You can organize palettes in the workspace in
  many different ways.
• You can store palettes in the Palette Bin to keep
  them out of your way, but easily accessible, or
  you can keep frequently used palettes open in the
  workspace. Another option is to group palettes
  together or dock one palette at the bottom of
  another palette.

18
Palettes in the Editor

• The Palette Bin in the Editor lets you store
  multiple palettes in a single area that you can
  easily configure, close, or keep open for easy
  and fast access.
• By default, the Palette Bin appears on the right
  side of the workspace.
• When you adjust palettes, they remain as you
  leave them until you reset or change them.

19
The Palette Bin in the Editor

• A. Collapse or expand a palette
• B. Adjust palette height
• C. Palette menu
• D. Scroll to view rest of palette
• E. Change palette tools
• F. Adjust palette width
• G. Show or hide Palette Bin

20
Palettes in the Organizer

• In the Organizer, the Task pane appears on the
  right side of the Photo Browser. It contains a
  tab for each of the basic steps of photo editing
  Organize, Fix, Create, and Share. You can open
  the Task pane to access the tabs, or close it to
  expand the Photo Browser.
• The Organize tab
• A. Show or hide Task pane
• B. Collapse or expand palette
• C. Adjust palette height

21
The Project Bin in the Editor

• Located at the bottom of the Full Edit and Quick
  Fix workspaces, the Project Bin displays
  thumbnails of open photos. Its useful for
  switching between multiple open photos in your
  workspace. The Project Bin has controls that let
  you open or close images, hide images, navigate
  through open images, make a specific image the
  frontmost, duplicate an image, rotate an image,
  or view file information. Because the Project Bin
  appears in both Full Edit and Quick Fix, you can
  easily bring open images into Quick Fix for
  editing. Multiple-page projects are highlighted
  by a gray frame around the page thumbnails. To
  show or hide the individual pages, click the
  right edge of the frame.
• The Project Bin
• A. Selected photo
• B. Collapsed photo creation
• C. Click to expand photo creation
• D. Drag up or down to adjust Project Bin height
• E. Show or hide Project Bin
• F Project Bin drop-down menu

22
Saving Your Files

• Formats
• PSD
• Default Photoshop extension
• Preserves layers, etc.
• TIF Good for files that will be printed, high
  quality
• GIF 8 bit file format (a maximum of 256 colors)
• Can be transparent
• JPG 24 bit file format ( maximum of 16 million
  colors)
• PNG Supports 24 bit, but format is lossless,
  meaning that although it preserves details, the
  file sizes are large
• Not supported by older browsers

23
Saving Your Files

• To optimize your graphics for the web, save them
  via File Save For Web
• Photoshop will bring up a preview window to
  compare the image and file sizes across different
  compression ratios

24
Two Very Important Photoshop Concepts

• 1. Selection
• 2. Layers

25
1. Selection

• In order to use Photoshop to the fullest extent,
  you must learn how to select the part of the
  image that you want to manipulate.
• When you successfully select something using the
  Marquis tool, you will see dotted lines or
  marching ants around the selected area.
• Sometimes, in order to select part of an image,
  you must de-select something else.
• There are different ways to select
• Normal
• Add
• Subtract
• Intersect (not used very much will select only
  where 2 sections intersect)

26
2. Layers

• Layers gives you the ability to combine different
  elements in a safe way, so that edits to any one
  element does not affect the other elements.
• Layers work similarly to clear sheets used on the
  old overhead projectors.
• Use the layers palette to control how the
  different layers interact with each other.

27
Exploring the Toolbar

• The arrow appearing in the bottom right corner
  means more tools are available by clicking and
  holding the mouse on the button.

28
Exploring the Toolbar

The Marquee Tools allows for selections on the
image using rectangles, ellipses, rows and
columns.
The Move Tool moves selections and layers on the
image
The Lasso Tool allows for freehand selections
The Magic Wand automatically selects parts of an
image based on similar areas in adjacent pixels
The Crop Tool allows for selection of the image
to be trimmed The Slice Tool slices the image
into sections for creating an HTML document
The Brush Pencil Tools allow for drawing on the
image. The brush makes strokes, the pencil makes
straight lines
The History Brush Tool allows for the correction
mistakes by drawing over the image
The Eraser Tools allow for the user to erase
parts of the image
The Gradient Tool allows for the user to fill an
image with a transition from one color to
another. The Paint Bucket Tool fills in the image
with a single color
The Blur Tool smoothes the edges in the image.
The Sharpen Tool makes the edges in the image
more defined
29
Exploring the Toolbar
The Dodge Tools lightens and the Burn Tool
darkens the selected area
The Type Tools allows for a variety of text to be
added to an image
The Shape Tools allow you to add shapes to your
image
The Eyedropper Tool allows you to capture a
specific color from a portion of your image
The Hand Tool allows you move the image within
the window
The Zoom Tool allows you to zoom in and out from
an image to view it from different perspectives
The Foreground / Background Color Selector
specifies the colors you are currently working
with. For example, adding a text object will take
the foreground color by default. Inserting a
gradient will transition the colors from the
foreground to the background
30
Exercise Making A Banner

• Create a blank canvas, change the Width to 500
  pixels and the Height to 100 pixels
• Photoshop will then create a workspacelike that
  shown below
• Use the type tool to insert text
• Note that in the lower right-hand corner that you
  have added a new layer with the type tool. You
  can now apply modifications to one layer without
  affecting the other

31
Exercise Making A Banner

• To change the color of the text
• Make sure the type layer is selected
• Select the type tool from the toolbar
• Change the color by clicking on the color
  selector from the toolbar

32
Exercise Making A Banner

• To apply a gradient or fill to the background
• Make sure the background layer is selected
• Select the desired gradient colors by settingthe
  foreground and background colors from the
  toolbar
• Select the gradient tool
• Then just click and drag a line across the image
• Note how the length and direction of the line
  drawn affect the gradient

33
Exercise Making A Banner

• The different layers of the banner can also be
  edited to add more styles
• Common applications to the textlayer include the
  Drop Shadow and the Stroke
• Note the before and after effectson the text

or by clicking
34
Exercise Working With Photos

• Resizing A Photo
• Open flowers.jpg from http//cob.jmu.edu/flahertb
  /images/flowers.jpg
• From the menu, selectImage Image
  Size
• A dialog box will appear allowing you to specify
  the new size for the image

35
Exercise Working With Photos

• Creating a Thumbnail
• As a continuation of the previous exercise,
  resize the flowers.jpg to a width of 200 pixels.
  The height should automatically adjust
• Now this file can be saved with a different file
  name to allow users to click on the smaller image
  to load the larger.
• Example HTML codesrcsmallflowers.jpg

36
Exercise Working With Photos

• Rotating an Image
• To change an images orientation selectImage
  Rotate Canvas

37
Exercise Working With Photos

• Adding a Border
• To add a border to an image, apply the Stroke
  effect to the background
• First, add a layer to the background
• Layer New Layer From Background

38
Exercise Working With Photos

• Then add a Stroke Layer Style
• Change the Position to Inside
• You may modify the Color and Size to the desired
  attributes

39
EXERCISE Simple Image Enhancement

• From my website, open redbarn2.tif. File Open
  redbarn2.tif
•  Almost all images will be improved by a small
  amount of sharpening. Filter Sharpen Unsharp
  Mask will give you the most control over that
  sharpenss.
•  The color is off (too bright and under
  saturated). Image Adjust Levels will adjust
  the brightness and Image Adjust
  Hue/Saturation will help you bring out the color.
•  Note Levels is generally considered a better
  tool that Brightness and Contrast. They are
  really just different ways of looking at the same
  tool, so feel free to use whichever gives you the
  best results.

40
EXERCISE Improving Digital Images

• There will always be a quest for perfect pictures
  with proper dimensions and balanced foregrounds
  and backgrounds.
• In reality, though, stunning photography is not
  always captured through a lens. You must
  sometimes create the perfect picture in
  Photoshop.
• The evaluation process determines what tools you
  select and the creative techniques used to
  correct an image. There is no correct, proper,
  right, or wrong way in Photoshop.
• Understanding the visual content and knowing what
  you want to change in Photoshop is the most
  important thing.

41
EXERCISE Improving Digital Images

• Save the boats1.tif file from my Photoshop Images
  page. Insert it into your Adobe Photoshop
  Elements workspace by selecting FileOpen.
• Notice the image is a little skewed. To fix
  this, go to image Rotate Canvas. Since the
  image doesnt need to be rotated 90 or 180
  degrees, choose Arbitrary. The right side needs
  to be shifted upward, so select the CCW (counter
  clockwise) button. The number of degrees to be
  rotated will be small so try a low number. If
  you feel the image still is not straight, add a
  few degrees. Reminder The image adjusts from
  the point at which it is currently positioned,
  not the original position.

42
EXERCISE Improving Digital Images

• 3. Now the image is ready to be cropped. There
  are two methods you can use. The first method
  uses the crop tool found on the tool bar. To use
  the crop tool, select the portion of the image
  you want to keep by clicking and dragging. A
  broken line will appear, with small boxes in the
  corners and the middle of each line. If you need
  to adjust the size of the selection, drag the
  boxes in the desired direction. To apply the
  crop, press the return key.
• 4. The colors in the image look muted and the
  image is not extremely clear. Use the Unsharp
  Mask and Adjust Levels. Filter Sharpen
  Unsharp and Image Adjust Auto Levels.
• 5. Next, use the clone stamp tool to remove the
  boat in the water. Select the water image by
  holding down the alt key and clicking. Start
  slowly covering the small boat by clicking the
  rubber stamp tool over the image.

43
For more practice working with photos, try the
Photoshop Tutorial athttp//www.lunacore.com/phot
oshop/tutorials/tut018.htm

• To modify this picture

• into this picture

44
The Layer Menu

• Layers allow for the editing of specific image
  components without editing the image as a whole
• For example, to change only the background color
• The Layers menu is located in the lower
  right-hand corner of Adobe Photoshop
• This menu allows layer manipulation including

Changing The Layer Opacity
Visibility
Deleting A Layer
Changing Layer Styles
Creating A New Layer
45
EXERCISE Selection and Using Layers

• In this exercise, youll take the tomato and make
  a new image incorporating layers, text,
  gradients, and a basic filter.

Original File
New File
46
EXERCISE Using Layers

• Save the file tomato.tif from my Adobe Photoshop
  Images page. Insert the file into Photoshop by
  selecting File Open tomato.tif.
•  Select the white background using the magic wand
  tool, Select Similar. Hold down the shift key.
  
• Choose Select Inverse to select the tomato
  instead of the white background.
•  Copy your selection. Edit Copy or Ctrl C.
•  Create a new file. File New. File specs 8
  inches (width) by 2 inches (height), 72 dpi, RGB
  mode, white background.
•  Paste the tomato into the new document. Edit
  Paste or Ctrl V.
•  Create a copy of the layer by pulling the layer
  onto the new layer button. The new layer is
  automatically placed above the layer that was
  previously active.
•  Create a text layer using the Horizontal Type
  Mask Tool. Type T mat.
•  Use the gradient tool to create a gradient from
  red to yellow. This will create the effect of
  gradient text in the selection.
•  Move the two tomato layers into the area where
  the letter O would go.
•  While on the text layer, click the New Layer
  Style button and choose Drop Shadow from the
  popup menu. Adjust the settings to your liking.
•  Again, click the New Layer Style and choose
  Bevel and Emboss from the popup menu. Again
  adjust these settings to your liking.
•  Right click on the layer and choose Copy Layer
  Style. Right click on each of the other layers
  and choose Paste Layer Style. You will see that
  the settings for each layer style has been
  applied to the layer.

47
Composting


48
EXERCISE Composting

• Open the file balloons.tif and redbarn1.tif.
• Using the crop tool, crop the green and yellow
  balloon.
• Use the Quick Mask mode to color in the sky
  (everything that is not the balloon). The will
  allow you to select the sky and then easily
  delete it.
• Using the marquee tool of your choice, select the
  area around the balloon. Copy the balloon using
  Edit Copy or Ctrl C.
• Bring redbarn1.tif to the front.
• Switch to the field scene and paste the balloons.
  Edit Paste or Ctrl V.
• The balloon was pasted into the image on a new
  layer so you can now position it wherever you
  want.
• The balloon is larger then it would be in real
  life. To make the balloon smaller you should
  scale the layer. Edit Transform Scale (Ctrl
  T for free transform).
• The suns reflection on the balloon is also
  opposite of the picture. To fix this problem you
  need to flip the layer. Edit Transform Flip
  Horizontal.

49
EXERCISE Making A Navigation Button

• Basic navigation buttons can be made quickly with
  Photoshop
• Applying a basic Bevel and Emboss gives a 2-D
  image a 3-D appearance
• Create a new image with a Width of 150px and
  Height of 50px
• Fill the background with a gray (hex 666666)
  color
• From the menu, choose Layer Layer Style Bevel
  and Emboss
• You can now add text to complete the button

50
EXERCISE Using Photoshop To Design a Web Site

• Design a site using Photoshops shape tools
• Click on the Edit in ImageReadybutton from the
  toolbar
• Once in ImageReady,click on the Slice tool
• Use the tool to define sections of the site

51
EXERCISE Using Photoshop To Design a Web Site

• Once youve completed the Slices, click on
  File Save Optimized As and save the .html file
  to your desktop
• You then can edit the .html file to replace the
  main area of the page with HTML content

52
EXERCISE Using Photoshop To Design a Web Site

• Example http//www.jmu.edu/jmuappreciationday/

53
Alternatives to Photoshop

• Photofiltre (http//photofiltre.free.fr/download_
  en.htm)
• Free!
• Interface and controls are similar to tools to
  Photoshop
• Doesnt support layers