USING PHOTOSHOP CS3

1
USING PHOTOSHOP CS3

• Obtaining Information
• Canvas Size vs. Image Size
• Cropping an Image
• Changing Image Size
• Rotating an Image
• Adjusting the Color of an Image
• Drawing Tools
• Using the Paint Bucket to Change or Add Color to
  a Region
• Blurring, Smudging, and Sharpening Images
• Dodging, Burning, and Sponging Images
• Using the Clone Stamp tool
• Adding Text to an Image
• Using Filters
• Saving and Optimizing Images

Using Dreamweaver, Photoshop, and
FireworksGraphics Production for the
Webhttp//www.stanford.edu/group/csp/cs38/
2
Obtaining Information

• When a graphic is viewed in Photoshop, the
  program offers information about the amount of
  disk space the graphic uses. In this example,
  the su.gif graphictakes up 1.86 K of disk space.

By default, Photoshop uses inches to describe the
size of an image. On the Web, however, pixels
are used. To configure Photoshop to use pixels,
select the Units Rulers preference (Edit gt
Preferences gt Units Rulers) and change the
Rulers field to pixels.
3
Obtaining More Information

• The Info window (Window gt Info) provides detailed
  color information about each pixel in the
  graphic. Placing the cursor at a specific spot
  on a graphic will display the color (in RGB code
  Red Green Blue) for that spot. In the example
  below, at location 28x28, the color is 254,0,0.

4
Canvas Size vs. Image Size

• In graphic programs, the canvas is the work space
  around and including the image. Photoshops
  Canvas Size window (Image gt Canvas Size) provides
  information about the size of the graphics
  canvas. It also allows the graphic designer to
  change the size of the canvas.
• The Image Size window (Image gt Image Size)
  provides information about the size of the image.
  It also allows the graphic designer to change
  the height and width of the image.

5
Cropping an Image

1. Select the Rectangular Marquee Tool.
2. Draw a box around the area to be cropped.
3. Under Image, select Crop. The new dimensions for
   the image will be displayed in the Info window.

6
Changing an Images Size

1. Under Image, choose Image Size.
2. Enter the new height/width desired, and press OK
   to finalize the change of size.

7
Keep this chart in mind when choosing image size

• Monitor Resolution Maximum Size of Material
  (Width x Height)
• WebTV (TV set) 544 x 738
• 640 x 480 600 x 300
• 800 x 600 760 x 420
• 1024 x 768 955 x 600
• Monitor Resolution can be set at
• - Windows Start gt Settings gt Control Panel gt
  Display gt Settings
• - Mac OS X System Preferences gt Displays gt
  Display
• - Mac OS 9 Control Panels gt Monitors gt
  Resolution
• If you already added this graphic to your web
  page before changing its size, you will need to
  change the height and width attributes in the
  source code. In Dreamweaver, this is done by
  clicking the Reset Image to Original Size icon
  in the Properties palette.

8
Rotating an Image

• Open the image you wish to rotate in Photoshop.
• Under Image, choose Rotate Canvas, and then the
  transformation desired.

9
Adjusting the Color of an Image

• Under Image, choose Adjustments, and select the
  adjustment desired

Before ImagegtAdjustmentsgtInvert After
10
Drawing Tools

• Brush Used to paint brush strokes in a bitmap
  graphic
• Pencil Used to draw 1-pixel wide lines or to
  edit single pixels. This tool is accessed by
  clicking the mouse button on the Brush Tool and
  selecting the Pencil Tool (Brush gt Pencil Tool).
• Pen Used to draw by placing points that define a
  path
• Freeform Pen Used to paint paths in a vector
  graphic. This tool is accessed by clicking the
  mouse button on the Pen tool and selecting the
  Freeform Pen Tool (Pen gt Freeform Pen Tool).
• Rectangle Used to draw rectangles
• Rounded Rectangle Used to draw rectangles with
  rounded corners. This tool is accessed by
  clicking the mouse button on the Rectangle tool
  and selecting the Rounded Rectangle Tool
  (Rectangle gt Rounded Rectangle Tool)
• Elipse Used to draw circles and other elipses
  (Rectangle gt Elipse Tool)
• Polygon Used to draw multi-sided objects. To
  select the number of sides, select the Polygon
  Tool. Then, in the toolbar, in the Sides field,
  enter the number of sides desired. (Rectangle gt
  Polygon Tool)
• Line Used to draw straight lines. (Rectangle gt
  Line Tool)
• Custom Shape Used to draw a custom shape.
  (Rectangle gt Custom Shape)

11
Using the Drawing Tools

• After selecting a tool, in the toolbar region,
  select the color, size, and style of the drawing
  tool as appropriate.
• Draw by clicking and dragging the mouse. The
  example below shows a frame drawn using the Line
  Tool

12
Using the Paint Bucket to Change or Add Color to
a Region

1. Select the Paint Bucket Tool (Gradient gt Paint
   Bucket Tool)
2. Select a foreground color by clicking Set
   foreground color, then selecting a color.
3. Click on the object or region you wish to color.

13
Blurring, Smudging, and Sharpening Images

• Photoshop has several tools to affect the pixel
  focus and the colors in images.
• The Blur tool lets you emphasize or de-emphasize
  parts of an image by selectively blurring the
  focus of elements.
• The Sharpen tool (obtained by clicking the mouse
  button on the Blur tool and selecting the Sharpen
  tool) can be useful for repairing scanning
  problems or out-of-focus photographs.
• The Smudge tool (obtained by clicking the mouse
  button on the Blur tool and selecting the Smudge
  tool) lets you gently blend colors, as when
  creating a reflection of an image.
• To blur, sharpen, or smudge an image
• 1. Choose the Blur, Sharpen, or Smudge tool.
• 2. Drag the tool over the pixels to be sharpened,
  blurred, or smudged.

14
Dodging, Burning, and Sponging Images

• The Dodge Tool is used to lighten parts of
  an image.
• The Burn Tool is used to darken parts of an
  image.
• The Sponge Tool is used to gently remove
  parts of an image (like applying a sponge to a
  painting)
• To use the Dodge or Burn tool
• 1. Select the tool (both are obtained by clicking
  the mouse button on the Dodge tool and selecting
  the Dodge or Burn tool).
• 2. Set the brush options in the Options Window
• Brush sets the size and hardness.
• Range sets the range
• Shadows changes mainly the dark portions of the
  image.
• Highlights changes mainly the light portions of
  the image.
• Midtones changes mainly the middle range per
  channel in the image.
• Exposure sets the exposure
• The exposure ranges from 0 to 100. For a
  lessened effect, specify a lower percentage
  value for a stronger effect, specify a higher
  value.
• 3. Drag over the part of the image you want to
  lighten or darken.

15
Using the Clone Stamp tool

• The Clone Stamp tool creates a duplicate of
  part of the image you select (a clone). You can
  then place that image over another image or a
  different part of the same image. You can also
  clone part of one layer over another layer. Each
  stroke of the tool paints on more of the sample.
  The Clone Stamp tool is useful for duplicating an
  object or removing a defect in an image.
• To use the Clone Stamp tool, set a sampling point
  on the area you want to copy over another area.
  Then, click and drag the mouse to paint that
  section onto the new area.
• Because you can use any brush tip with the Clone
  Stamp tool, you have a lot of control over the
  size of the area you clone. You can also use
  opacity and flow settings in the options bar to
  finesse the way you apply the cloned area. You
  can sample from one image and apply the clone in
  another image, as long as both images are in the
  same color mode.
• In this example, we added an extra flowerto the
  vine by sampling the flower and then cloning it
  below

16
Adding Text to an Image

1. Click the Horizontal Type Tool.
2. Click and drag to draw a rectangle around the
   area in which you wish the text to appear.

17
Adding Text to an Image (continued)

1. When the cursor appears in the text area, enter
   the text. In the toolbar, choose the properties
   desired

18
Using Filters

• Filters change the look of your images. They can
  make images appear like impressionistic paintings
  or mosaic tiles they can add unique lighting or
  create distortions. You can also use filters to
  clean up or retouch your photos. The filters
  provided by Photoshop are listed in the Filter
  menu. Additional filters are available as
  plug-ins from third-party developers. Once
  installed, the names of these plug-in filters
  appear at the bottom of the Filter menu.
• To use a filter, choose the appropriate command
  from the Filter menu. These guidelines can help
  you in choosing filters
• Filters are applied to the active, visible layer
  of a selection.
• For 8-bits-per-channel images, most filters can
  be applied cumulatively through the Filter
  Gallery (FiltergtFilter Gallery). All filters can
  be applied individually.
• Filters cannot be applied to Bitmap-mode or
  indexed-color images.
• Some filters work only on RGB images.
• All filters can be applied to 8-bit images.
• The following filters can be applied to 16-bit
  images Liquify, Average Blur, Bilateral Blur,
  Blur, Blur More, Box Blur, Gaussian Blur, Lens
  Blur, Motion Blur, Radial Blur, Sampled Blur,
  Lens Correction, Add Noise, Despeckle, Dust
  Scratches, Median, Reduce Noise, Fibers, Lens
  Flare, Sharpen, Sharpen Edges, Sharpen More,
  Smart Sharpen, Unsharp Mask, Emboss, Find Edges,
  Solarize, De-Interlace, NTSC Colors, Custom, High
  Pass, Maximum, Minimum, and Offset.
• The following filters can be applied to 32-bit
  images Average Blur, Bilateral Blur, Box Blur,
  Gaussian Blur, Motion Blur, Radial Blur, Sampled
  Blur, Add Noise, Fibers, Lens Flare, Smart
  Sharpen, Unsharp Mask, De-Interlace, NTSC Colors,
  High Pass, and Offset.
• Some filters are processed entirely in RAM. If
  all your available RAM is used to process a
  filter effect, you may get an error message.

19
Filter examples

• Examples of Filters
• Simulating static on a TV screen using Add Noise
• Correcting images that are blurry by using
  Sharpen
• Softening an image using Blur

20
Saving and Optimizing Images

• The best choice for saving images in Photoshop is
  to use the Save for Web option.
• Under File, choose Save for Web.
• Select 4-up to display four different versions of
  your picture.
• Pick the one that is the most optimized the
  version that is smallest in size but still looks
  decent for your web page. In this case, since
  they all look approximately the same, we pick the
  one that has the smallest disk size.
• Then, click Save.
• In the Save Optimized As field, choose the
  location of the local files for your Dreamweaver
  Site, then click Save. If you are replacing an
  existing file, in the Replace Files field, click
  Replace.
• Under File, prefer Close.

21
Step 1

Steps 2and 3
Step 4
22
Step 5
Step 6