julianna kunstler

Vector Graphics

© JuliannaKunstler.com

WI State Standards:

  • AA Cr11h
    Plan: Formulate original concepts by practice, experimentation, and revision. (planning/experimentation)
  • AA Cr12h
    Make: Create works of art that introduce students to media, care of tools, and basic craftsmanship skills.
    (skills)
  • AA Pr10h
    Develop meaning: Create s body of work incorporating personal, historical, and contemporary art to communicate one or morepoints of view.
    (aesthetics / communication)

Learning objectives

  • what is a path?
  • What are path’s components?
  • how vector graphics are working?

Something that characterizes a vector-based image from a raster one is that you can create, edit, and re-edit existing shapes by modifying their points and paths.

Vector graphics are not built with pixels (like bitmap/raster images), but with mathematical formulas that define the way a path is generated and the properties of that path.

A vector path is a drawn (or generated) line that defines a shape or a line and is "invisible" until additional properties are applied to it, like color, stroke thickness, etc.


paths and anchor points

What’s it all about?

path

paths and anchor points

Unlike bitmap images (JPEG, PNG, GIF, etc.), vector graphics are not made up of a grid of pixels.

Instead, vector graphics are comprised of paths, which are defined by a start and end point, along with other points, curves, and angles along the way. 

paths and anchor points

The paths are independent of resolution.

Because vector-based images are not made up of a specific number of dots, they can be scaled to a larger size and not lose any image quality.

When you blow up a vector graphic, the edges of each object within the graphic stay smooth and clean.

This makes vector graphics ideal for logos, which can be small enough to appear on a business card, but can also be scaled to fill a billboard.

paths and anchor points

paths and anchor points

A path is an invisible line that connects two anchor points.

Open path:

Open path is a line with two end points (start point and end point).

paths and anchor points

paths and anchor points

To end a path: Command/Ctrl click outside it.

Closed path

Closed path is a shape with no end points.

paths and anchor points

paths and anchor points

Path automatically closes when you return to the START point.

Path Tools

paths and anchor points

In both Adobe applications: Illustrator and Photoshop your #1 vector drawing tool is the Pen tool.

It works the same way in all graphic applications.

In all applications the main Selection and Editing tools are:

paths and anchor pointsSelection tool

and

paths and anchor pointsDirect Selection tool

paths and anchor pointspaths and anchor points
paths and anchor points

Path Selection Tool – selects the entire path with all anchor points.

paths and anchor points

Direct Selection Tool – allows you to edit a path by selecting and (or) moving one or few anchor points, one or few segments of a path.

Pre-made paths

Choose a path, then click and drag to draw a line or a shape. paths and anchor points

Illustrator offers a set of open paths (lines)

paths and anchor points

… and closed paths (shapes)

In Illustrator: you can click on the artboard and set specific parameters for your path.

paths and anchor points

Click and drag to draw a shape.

paths and anchor points

… or you can just click on the artboard and set the precise dimensions.

paths and anchor points

If you hold SHIFT key – you can draw a perfect square or a circle.

paths and anchor points

Photoshop is limited on the choice, but still offers basic shapes and lines.

Drawing Paths

Drawing paths: straight

paths and anchor points

To draw a straight path:

Choose Pen tool

Click to place your start anchor point.

Click again to place your next anchor point.

The two points will be connected with a straight path.

paths and anchor points

You can add more anchor points by clicking with the Pen tool.

paths and anchor points

When you are closing a path (return to the start point), a small circle appears next to the cursor. That tells you that you are creating a shape.

Drawing paths: curves

paths and anchor points

When you click and drag – you create an anchor point with direction lines.

Direction lines go in two directions.

Direction that you drag the direction line will be the direction the curve will go through this point.

When you click-and-drag with a Pen tool – you are creating an anchor point with a curved path property.

paths and anchor points

You can reposition the direction points and that will change the slope of your curve.

Drawing curves with the Pen tool requires some practice.

corner points

paths and anchor points

Look at this path.

Note that the curve goes down through point B; then it goes up through the same point B.

How is that possible? The answer is Corner Point!!!

By creating a corner point you stop one segment and start the next one fresh.

paths and anchor points

Option/Alt click on the anchor point to stop the first segment and to continue with independent next segment.

edit paths

paths and anchor points

If you need to add an anchor point to a path:

Choose Add Anchor Point Tool

Just click on a path.

paths and anchor points

If you need to remove an anchor point to a path:

Choose Delete Anchor Point Tool.

Just click on an anchor point.

paths and anchor points

If you need to convert an anchor point from straight to curved or visa versa:

Choose Convert Point Tool.

paths and anchor points

Place the cursor over the anchor point and drag to convert to a curve, or click to convert to straight.

Parcourez les avantages proposés sur https://winouienligne.com/ et découvrez un casino pensé pour le public francophone.

Copyright © 2008–2026 Julianna Kunstler