Lesson Plan
Course Title: Digital & Interactive Media
Session Title: Create a Mascot Using a Vector Graphic
Design Editor
Lesson Duration: Will vary dependent upon instructor
Performance Objective:
Upon completion of this assignment, the student will be able to work with the brush and pen
drawing tools. The students will become familiar with strokes and fills.
Specific Objectives:
 Create a new document with a custom sized art board
 Place a hand drawn sketch on the art board
 Create and modify a custom brush
 Trace an image of an eagle with the Brush tool
 Duplicate and name layers in the Layers panel
 Trace the eagle with the Pen tool, and use the Direction Selection tool and the Pen tool
palette to fine tune the trace
 Fill the Pen tool trace with color
Preparation
TEKS Correlations: 130.278 (c)
(1) The student demonstrates the necessary skills for career development, maintenance of
employability, and successful completion of course outcomes. The student is expected to
(A) identify and demonstrate positive work behaviors that enhance employability and job
advancement such as regular attendance, promptness, attention to proper attire,
maintenance of a clean and safe work environment, appropriate voice, and pride in work;
(B) identify and demonstrate positive personal qualities such as flexibility, open-mindedness,
initiative, listening attentively to speakers, and willingness to learn new knowledge and
skills;
(C) employ effective reading and writing skills;
(D) employ effective verbal and nonverbal communication skills;
(E) solve problems and think critically;
(G) identify and implement proper safety procedures;
(5) The student analyzes and applies design and layout principles. The student is expected to
(C) identify and use principles of proportion, balance, variety, emphasis, harmony, symmetry,
unity, and repetition in type, color, size, line thickness, shape, and space;
(F) identify and use color theory;
(G) recreate and improve existing multimedia products by applying the appropriate design
and layout principles;
IT: Digital and Interactive Media: Create a Mascot Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
1
(6) The student designs and creates digital graphics. The student is expected to
(A) compare and contrast the characteristics of raster-based bitmap graphics and vectorbased graphics;
(8) The student demonstrates appropriate use of digital graphics. The student is expected to
(A) create and modify digital graphics using appropriate vector-based and raster-based
software following standard design principles.
Instructor/Trainer
References:
Using your favorite internet browser, perform a web search for “vector graphic design program
tutorials”.
Instructional Aids:
• Creating a Mascot Presentation
• Creating a Mascot Notes
• Creating a Mascot Assignment Instructions
• Creating a Mascot Grading Rubric
Materials Needed:
• Professional vector graphic design editor
• Instructional aids
Equipment Needed:
• Projector for the presentation and demo use of the vector graphic design editor
• Computer lab
• Electronic area to turn in files for grading purposes
Learner
The students should have a basic understanding of the interface for vector graphic design.
Introduction
MI
Introduction (LSI Quadrant I):
ASK, “What are the advantages to drawing a sketch on paper?”
(Ask the students to share some of their thoughts.)
ASK, “What would be the benefits of making the hand drawn sketch digital?”
(Ask the students to share some of their thoughts.)
ASK, “Why would you want to trace a scanned image?”
(Ask the students to share some of their thoughts.)
SAY, “Some people find it easier to draw on paper than on a computer. Making an
image digital gives you more flexibility to use the image in a variety of ways,
such as websites, brochures, videos, or animation projects. Tracing the image
makes the image a vector and converts it from a bitmap, which is what you
IT: Digital and Interactive Media: Create a Mascot Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
2
create when you scan an image.”
ASK, “Does anyone know the difference between a vector image and a bitmap
image?”
(Ask the students to share some of their thoughts.)
SAY, “All images can be categorized as either a bitmap or a vector image. A vector
image is defined mathematically by the computer and is easily scalable. A
bitmap image is mapped to a grid based on the resolution of the image, and
the image is made up of pixels holding a specific color value. When a bitmap
image is enlarged, the image loses detail, and the image appears jagged.
Bitmap is used in photo-realistic images that require complex color variations.”
Outline
MI
Outline (LSI Quadrant II):
Instructor Notes:
I. Draw/find an image to use as a mascot
A. Sketch your image on paper, and then
scan it into the computer as a black and
white image. If you cannot draw, use a
non-copyrighted photo or sketch.
II. Create the art board
A. Launch your professional vector graphic
design editor and create a new
presentation.
B. In the New Document dialog box, name
the document and set the dimensions for
the art board as shown. Click OK.
•
Review with students the
workspace—in particular,
the Toolbar and the Layer
and Brush panels.
•
Explain the difference
between drawing with the
Brush and the Pen tool.
•
Explain steps to placing
an image and tracing it to
create a vector image.
C. Use File  Place to import your image.
Place the image on the center of the art
board. Double-click on its layer. In the
Layer Options box, complete the following:
i. Name: Eagle Trace
ii. Lock: check
iii. Print: uncheck
iv. Dim Images to: check and set
value to 50%.
v. Click OK.
III. Set up the workspace
A. If necessary, reset your workspace to
Essentials.
B. Use Window  Workspace  Essentials.
IT: Digital and Interactive Media: Create a Mascot Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
3
C. Undock the Layers panel and the Brushes
panel to make them more accessible while
we trace the sketch of the eagle.
IV. Set up your brush
A. Create a custom brush to draw the outline
of the eagle.
B. On the Brushes panel, click on the New
Brush icon, select Bristle Brush, and click
OK. Use the figure to set the Brush
Options.
V. Start tracing
A. Create a new layer in the Layers panel to
begin tracing the outside lines of the
eagle.
B. Once you have outlined the eagle, zoom in
to get a better look to be sure all of the
lines are connected. Notice the stroke
does not look solid. Double-click on the
brush you created in the Brushes panel
and change the Bristle Density to 75%.
(Check Preview so you can see the
changes before clicking OK.)
C. Clean up your lines where necessary with
the eraser tool, or select the line with the
Direct Selection tool and delete it so you
can draw it again.
VI. Use the pen tool
A. Duplicate the layer you just did your
tracing on. Name the top layer Outline and
the middle layer Color.
B. Lock the Outline layer, and select the
Color Layer. Trace the eagle with the Pen
tool. (Ignore the face, talons, & tail tip)
C. Choose any Fill Color for the body of the
eagle. (I have chosen a dark maroon
color.)
D. Repeat this process for the other parts of
the eagle.
Application
IT: Digital and Interactive Media: Create a Mascot Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
4
MI
Guided Practice (LSI Quadrant III):
The teacher will demonstrate how to use the Brush and Pen tool and how to
duplicate and name layers in the Layers panel.
The teacher will demonstrate the steps to tracing the eagle by using the Creating a
Mascot presentation and demonstrating as the students follow along and trace the
eagle on their own.
MI
Independent Practice (LSI Quadrant III):
Students will trace and color an image of their choice.
Summary
MI
Review (LSI Quadrants I and IV):
Q& A Session
Q: What are the advantages and disadvantages of using the Brush tool?
A: The Brush tool allows you to draw in separate strokes and vary the thickness of
various strokes. You are not able to use the Fill to place color.
Q: What are the advantages and disadvantages of using the Pen tool?
A: The Pen tool allows you to create closed paths and, therefore, add fill color. The
Pen tool is tricky to work with when creating curves, and you are not able to vary
the thickness of the line.
Q: What are the advantages of tracing this image rather than simply using the
scanned image?
A: It becomes a vector image and is easy to change colors.
Evaluation
MI
Informal Assessment (LSI Quadrant III):
The teacher will monitor student progress during independent practice and provide
assistance as needed.
MI
Formal Assessment (LSI Quadrant III, IV):
The teacher will grade the students’ independent practice according to the rubric.
Extension
MI
Extension/Enrichment (LSI Quadrant IV):
IT: Digital and Interactive Media: Create a Mascot Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
5
For additional material, have the students perform a web search for “more ideas on
tracing drawings”.
IT: Digital and Interactive Media: Create a Mascot Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
6
Icon
MI
Verbal/
Linguistic
Logical/
Mathematical
Visual/Spatial
Musical/
Rhythmic
Bodily/
Kinesthetic
Intrapersonal
Interpersonal
Naturalist
Existentialist
Teaching Strategies
Personal Development
Strategies
Lecture, discussion, journal
writing, cooperative learning,
word origins
Reading, highlighting, outlining,
teaching others, reciting information
Problem solving, number
games, critical thinking,
classifying and organizing,
Socratic questioning
Mind-mapping, reflective
time, graphic organizers,
color-coding systems,
drawings, designs, video,
DVD, charts, maps
Use music, compose songs
or raps, use musical
language or metaphors
Organizing material logically, explaining
things sequentially, finding patterns,
developing systems, outlining, charting,
graphing, analyzing information
Developing graphic organizers, mindmapping, charting, graphing, organizing
with color, mental imagery (drawing in
the mind’s eye)
Use manipulatives, hand
signals, pantomime, real life
situations, puzzles and board
games, activities, roleplaying, action problems
Reflective teaching,
interviews, reflective listening,
KWL charts
Cooperative learning, roleplaying, group brainstorming,
cross-cultural interactions
Natural objects as
manipulatives and as
background for learning
Socratic questions, real life
situations, global
problems/questions
Creating rhythms out of words, creating
rhythms with instruments, playing an
instrument, putting words to existing
songs
Moving while learning, pacing while
reciting, acting out scripts of material,
designing games, moving fingers under
words while reading
Reflecting on personal meaning of
information, studying in quiet settings,
imagining experiments, visualizing
information, journaling
Studying in a group, discussing
information, using flash cards with
other, teaching others
Connecting with nature, forming study
groups with like-minded people
Considering personal relationship to
larger context
IT: Digital and Interactive Media: Create a Mascot Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
7
Create a Mascot – Using a Professional Vector Graphic Design Program
1. Step 1 – Draw/Find an Image to Use as a Mascot
a. Sketch your image on paper, and then scan it into the computer as a black
and white image. If you cannot draw, find a non-copyrighted sketch or
photo to work with.
2. Step 2 – Create the Art Board
a. Start your professional program for vector graphic design and choose
“Print Document”.
b. In the New Document dialog box, name the document and set the
dimensions for the art board as shown. Click OK.
•
•
•
•
•
•
Name: Eagle Mascot
Number of Art boards: 1
Width: 735 pt
Height: 550 pt
Units: Points
Bleed: 0 – 0 – 0 - 0
c. Use File  Place to import your image. Place the image on the center of
the art board. Double-click on its layer and in the Layer Options dialog box
complete the following:
•
•
•
•
•
•
Name: Eagle Trace
Lock: check
Print: uncheck
Dim Images to: check and set value to 50%.
Color: Light Blue
Click OK
3. Step 3 – Set up the Workspace
a. If necessary, reset your workspace to Essentials.
b. Use Window  Workspace  Essentials.
c. Undock the Layers panel and the Brushes panel to make them more
accessible while we trace the sketch of the eagle.
4. Step 4 – Set Up Your Brush
a. Create a custom brush to draw the outline of the eagle.
b. On the Brushes panel, click on the New Brush icon, select Bristle Brush,
and click OK. Use the figure to set the Brush Options.
•
•
•
•
Name: Thick Stroke
Shape: Flat Curve
Size 1.5mm
Bristle Length: 100%
IT: Digital and Interactive Media: Create a Mascot Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
8
•
•
•
•
Density: 33%
Thickness: 50%
Opacity 100%
Stiffness: 90%
5. Step 5 – Start Tracing
a. Create a new layer in the Layers panel to begin tracing the outside lines of
the eagle.
b. Once you have outlined the eagle, zoom in to get a better look to be sure
all of the lines are connected. Notice the stroke does not look solid.
Double-click on the brush you created in the Brushes panel and change
the Bristle Density to 75%. (Check Preview so you can see the changes
before clicking OK.)
c. Clean up your lines where necessary with the eraser tool, or select the line
with the Direct Selection tool and delete it so you can draw it again.
6. Step 6 – Use the Pen tool
a. Duplicate the layer you just did your tracing on. Name the top layer Outline
and the middle layer Color.
b. Lock the Outline layer, and select the Color Layer. Trace the eagle with
the Pen tool. (Ignore the face, talons, & tail tip)
c. Choose any Fill Color for the body of the eagle. (I have chosen a dark
maroon color.)
d. Repeat this process for the other parts of the eagle.
IT: Digital and Interactive Media: Create a Mascot Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
9
IT: Digital and Interactive Media: Create a Mascot Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
10
IT: Digital and Interactive Media: Create a Mascot Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
11
On Your Own - Create a Mascot
Design a mascot of your choice. If you do not feel comfortable drawing your own image, find a
non-copyrighted photo or sketch to use. Place your image on its own layer. Dim the image so
that the original image does not compete with the lines you must see to draw. Create a new
layer to trace the image using the Brush tool, but remember to vary the size of your strokes.
When you have finished tracing the image, create another layer to trace your trace with the Pen
tool so that you can add color.
There should be three layers when you are finished, and they should be named appropriately to
allow you to differentiate what is on each layer.
Grading Rubric
Criteria
4 - 5 points
2 - 3 points
1 point
0 points
1. Placed an image for tracing
Completed
Not Done
2. Layer with original image
has been locked and the
image has been dimmed; it
is the bottom layer and has
been named
3. A new layer was created to
trace the image with the
Brush tool; it is the top layer
and has been named
4. The image was traced
neatly with the Brush tool,
and strokes are varied as
appropriate
5. A new layer was created to
trace the trace with the Pen
tool; it is the middle layer
and has been named
6. The Pen trace is neat and
color has been added; there
are no "holes" in the color
Missing 1
element
Missing 2
elements
Missing 3 elements
Not Done
Missing 1
element
Missing 2
elements
Missing 3 elements
Not Done
Very neatly done;
strokes are
varied
Very neatly done;
strokes are not
varied
Messy work;
obvious time was
not taken
Not Done
Missing 1
element
Missing 2
elements
Missing 3 elements
Not Done
Very neatly done;
no "holes" in the
coloring
Obvious attempt
to do a good job;
minor "holes"
Very messy; colors
outside of lines;
lots of "holes" in
coloring
Not Done
Total Points
/30
IT: Digital and Interactive Media: Create a Mascot Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
12