CSC/FAR 020, Computer Graphics, October 29-31, 2012

Dr. Dale E. Parsonhttp://faculty.kutztown.edu/parson

Outline for Week 9Vectors and Paths, also File Export

Photoshop Paths

• Vector outlines are Paths.• Like Type, they are vector shapes.• Create them using the Pen and Shape tools.• You can create, save and reuse Shapes (Paths).• Vector Masks are the vector graphical

counterparts to Layer Masks.• Vector Masks are sharp, precise, and consume less

storage space than layer masks.

Converting a Selection to a Path

• Open SymmetryLace.jpg in Folder type.• Crop to the lace projection on the screen.• Select with Magic Wand in New & Add modes.• Display Windows -> Paths.• Make Work Path from paths palette menu or

Work path from Selection icon at bottom.• High tolerance gives smoother, more usable

shape.

First Use of a Path

• Make an empty layer in this document and select it for editing.

• Go back to Path palette and Control-Click Fill Path after choosing a foreground color.

• Hide the underlying image layer.• Create a middle layer of black foreground.• Try shutting off visibility of all layers.

Manipulating a Path

• Highlight the path on the Paths palette.• Select Path Selection Tool (arrow) on Tools

palette.• Click small, “island” path on the image.• You can copy and move a path “island.”• Use Direct Selection tool (open arrow) to

select anchor points, Shift-click or drag a marquee to select more, Shift-click to remove.

Practice Manipulating Paths

• Open RuoriTrapezoid.jpg, duplicate layer.• Use Polygonal Lasso to select the trapezoid.• Convert it to a Path on the Path palette.• Hide image layers.• Use Path Selection (solid arrow) and Direct Selection

(open arrow) tools to select, deselect, and manipulate anchor points.

• Select and move a single anchor, or a line segment by selecting 2 anchors, or a direction line.

Saving and Using Paths

• Get a fresh path that matches the trapezoid.• Drag its anchors to create a rectangle.• Double click the Work Path, rename it.• Control-click the Path, Fill path to fill it.• Stroke path to select a stroke.• Go into that stroke-specific tool first to set the

stroking tool configuration parameters.

Pen Tool

• Add a new, empty Path. Select pen tool.• Single click to add vertices of a polygon.• Click and drag to create curved segments.• Click start point to close a polygon.• Alt-drag to create non-smooth points.• Enter or Escape to terminate current polygon.

Delete/Backspace deletes latest vertex.• Pen options to add or delete anchor points.

Freeform Pen

• Magnetic and non-magnetic options.• Magnetic follows edges in an image layer.• Option bar has various shape tools.• Rectangle and ellipse use Shift-drag for

symmetry.• Polygon shape has number-of-sides

parameter.• Custom shape has library of shapes.

Path to Selection

• Control-click a Path, Make Selection.• New / Add / Subtract / Intersect the selection.• Load path as Selection selects just one path.

Vector Masks

• Shape-defined masks similar to layer-masks.• Layer -> Vector Mask -> Reveal All, or• Layer -> Vector Mask -> Hide All.• Draw shapes on mask to reveal image area.• Apple-click the mask to make a selection.• You can also create a vector mask from a Path

via Layer -> Vector mask -> Current Path.• Rasterizing converts Vector to Layer Mask.

More Vector Masks

• Select on basis of a layer mask (Apple-click the Layer Mask thumbnail), then create a Vector mask from Selection. Discard Layer Mask.

• Add a Type Layer, then Control-click Convert it to Shape.

• You can Edit -> Transform type when it is a Shape.• Select using Vector Mask, Invert the selection, then

create an Inverted Vector mask.• Edit -> Define Custom Shape to add to shape library.

PDF

• PDF is useful for exporting to word processing tools that cannot read Photoshop files.

• Download export.zip, Open Concert1.psd.• Save as PDF without layers or Photoshop editing as

Concert1.pdf.• Save as PDF with layers and Photoshop editing as

Concert1.pdf.• Load into PowerPoint or Word (Insert -> Picture) and

compare quality.

Output for Web

• GIF is an 8-bit format, good for up to 256 colors, retains transparency.

• JPEG uses 24-bit format with adjustable quality / file size trade-off, no transparency.

• Use JPEG for continuous-tone images.

• Limit image size to 800 x 600 pixels at 72 ppi for compatibility with browser screen area and resolution.

• Smaller file sizes load into browsers faster.

File -> Save for Web and Devices

• Allows preview of GIF and JPEG options.• 2-Up and 4-Up tabs support comparisons.• Dithering - Diffusion mixes fewer colors

(smaller files) to simulate bigger gamut.• Restrictive color reduction is standard web safe.• Perceptual is biased towards perception.• Selective biases towards colors in the image,

compromise between the above two.• Adaptive adjusts to the document, bigger files.

JPEG

• Quality parameters trade file size versus image fidelity.

• Increasing Blur can reduce noisy artifacts caused by JPEG compression.

• Matte substitutes for transparent areas.• Use of either GIF and JPEG usually requires viewing

in the context of a browser.• Create / use thumbnails where possible to leave

original image at higher resolution.

Inserting images into web pages.

• SeaMonkey is a free, open-source browser with HTML editing ability. It comes with an editor.

• http://www.seamonkey-project.org/• Adobe editor is Dreamweaver.• Putting up a simple page to preview is

straightforward. Embed an image with some text.