1. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2016 by Pearson Education, Inc. All rights reserved.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

2. Chapter 3 Capturing and Editing Digital Images
Part 8
Vector Graphics
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

3. In this lecture, you will learn:
what make up a vector graphic object
what are paths, anchor points, direction handles, strokes, fills
the common tools to create and edit vector graphics
how to adjust the curviness and tangent of a path
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

4. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Vector Graphics
Objects and shapes made up with paths, points, strokes and fills
Not pixel based
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

5. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Paths
open path
closed path
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

6. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Paths and Points
A mathematical description of an abstract line or curve
Defined by a set of points, called anchor points
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

7. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Tangent and Curviness
Each point has direction handles or tangent handles.
Handle's angle: tangent at the point
Handle's length: curviness at the point
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

8. Angle of Handle: Tangent
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

9. Length of Handle: Curviness
Longer handle
Curvier at the point
Shorter handle
More angular at the point
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

10. Corner Points vs. Smooth Points
appears sharp and angular
handles have zero length
used for creating straight segments
In vector graphic programs, a corner point does not have handles.
Smooth point:
has direction handles to let you adjust the tangent and curviness at the point
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

11. Corner Points vs. Smooth Points
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

12. Common Tools in Adobe Illustrator
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

13. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Tools to Create Paths
Pen tool:
Simple click: Corner point
Hold the mouse and drag: Drag out a handle to create a smooth point
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

14. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Pen Tool
Play the Pen Tool Game to learn how to use the Pen tool of Adobe Illustrator:
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

15. Tools to Convert between a Smooth Point and a Corner Point
Convert Ancher Point tool:
Click on a point to convert it into a corner point
Click-drag on a point to drag out a handle, making it a smooth point
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

16. Breaking Dependency of Handles
A handle has two sides
Each side can be adjusted separately
ALT-drag (Windows) or Option-drag (Mac OS) on one of the handles to break their dependency
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

17. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Also try out the Activity described in the book:
Drawing Paths with Pen Tool
Practice drawing a simple path by using Pen tool, Convert Anchor Point tool, adjusting handles, and breaking dependency of handles.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

18. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Strokes
A path does not have a physical appearance--line width or color--until the path is stroked with a specified line style, width, and color
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

19. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Strokes
A path without stroke.
It will not be printed.
It will not show up during the editing unless you select the path.
A path stroked with orange line
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

20. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Strokes
The path stroked with a line of charcoal brush style
The path stroked with a line of custom brush style of a small fish
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

21. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Fill
A color, pattern, or gradient inside a shape defined by a path
Can be applied to open and closed paths
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

22. Preset Shapes and Free-Form Drawing
Preset shape drawing tools:
ellipses
rectangles
polygon
stars
spirals
Free-Form drawing tool:
draw a freeform path with a continuous stroke without manually defining the points
a freeform path is still made up of points
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

23. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Selection Tools
Selection tool
select a whole object
Subselection or Direction Selection tool
select the points and handles
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

24. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Other Useful Features
Layers
Effects
Filters
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

25. Create Complex Shapes Using Boolean Tools
Adobe Illustrator
Pathfinder (Window > Pathfinder)
Shape Builder tool
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

26. Adobe Illustrator Pathfinder (Window > Pathfinder)
Shape modes:
unite
minus front
intersect
exclude
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

27. Adobe Illustrator Pathfinder (Window > Pathfinder)
Pathfinders:
divide
trim
merge
crop
outline
minus back
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

28. Adobe Illustrator Shape Builder Tool
Play this game and learn how to use Shape Builder tool to create composite shapes:
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

29. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Activity
Create Complex Shapes Using Shape Builder Tool
(1) Watch the video and follow its instruction to create a skull graphic: (2) Design and create your own graphic.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

30. Vector Graphics for the Web
SVG – Scalable Vector Graphics
file describes vector graphics in XML format
advantage over bitmap, such as PNG, JPEG, and GIF:
scalability: graphics remain crisp when displayed at any size on the Web
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

31. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Ways to Create SVG
Write it in XML format using a text editor
Save the vector graphic as SVG in a vector graphic program, such as Adobe Illustrator
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

32. Vector Graphic To Pixel-based
Adobe Illustrator:
File > Export ...
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

33. Pixel-based To Vector Graphic
Adobe Illustrator:
Image Trace
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

34. Use of Pixel-based Images in Vector Graphic
Adobe Illustrator:
File > Place to place an image
Use of clipping mask on a placed image to reveal part of the image
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

35. Use of Vector Graphic in Pixel-based Images
Adobe Photoshop:
Pen tool
Line and shape tools
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

36. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Questions
Note to instructor:
Depending on your preference, you may want to go over the review questions at the end of this lecture as an instant review or at the beginning of next lecture to refresh students' memory of this lecture.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

37. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
A path does not have physical appearance until ___.
it is stroked with a specified line style, width, and color
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

38. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
Matching:
path
fill
stroke
(i)
(ii)
(iii)
A – (ii)
B – (i)
C – (iii)
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

39. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
Fill in the blanks with 2 of these words: path stroke fill curviness tangent width color The handle's length controls the ___ at the point and the handle's angle controls the ___ at the point.
curviness
tangent
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

40. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
Which of the following apply to corner points?
appear sharp and angular
used for creating straight segments
handles have zero length
have direction handles to let you adjust the tangent and curviness at the point
A, B, and C
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

41. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
Which of the following apply to smooth points?
appear sharp and angular
used for creating straight segments
handles have zero length
have direction handles to let you adjust the tangent and curviness at the point D
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

42. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
Which point's handle dependency is broken? C A B C
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

43. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
The Selection tool let you select ___.
the whole object
the points and handles on a path A
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

44. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
The Subselection or Direct Selection tool let you select ___.
the whole object
the points and handles on a path B
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

45. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
True/False: When you use the free-form drawing tool to draw a path, it is not made up of anchor points any more.
False
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

46. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
SVG stands for ___.
scalable vector graphics
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

47. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
What are the two possible ways to create a SVG?
Write it in XML using a text editor.
Save the vector graphic as SVG in a vector graphic program, such as Adobe Illustrator.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

48. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
What are the two possible ways to show your vector graphics works on Web pages?
Rasterize the vector graphic into PNG, JPEG, or GIF, and then embed the rasterized image on a Web page.
Embed the vector graphic as a SVG element directly on a Web page.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.