Math-in-CTE Lesson Plan
Lesson Title: Digital Imagery
Lesson # IT07
Occupational Area: Information Technology
CTE Concept(s):
Photo editing
Math Concepts:
Ratios and proportions
Lesson
Students will be able to adjust the dimensions of a given
Objective:
graphic using proportions, scale factors, ratios and conversion
without skewing or distorting a graphic.
Supplies
Digital image editing tool (Paint), loose leaf paper, web
Needed:
browser with internet access or digital graphic, Digital Camera
Link to Accompanying Materials:
Information Technology IT07 Downloads
THE "7 ELEMENTS"
1. Introduce the CTE lesson.
Students will do the Picture Puzzle.
How many of you have used a digital
camera? How many of you have emailed
or received a digital graphic? Have you
ever downloaded an image that is too
large to be viewed on your screen?
What makes up a digital graphic?
Do you know how to find the resolution
and size (in pixels) of a given graphic?
TEACHER NOTES
(and answer key)
Picture Puzzle: Print out a large
graphic (multiple pages, ideally 9).
Make one copy for each group of
2 or 4 students in your classroom.
Have the students put together the
puzzle.
Pixels make up digital graphics.
Pixels are dots of color grouped
together to form an image. More
pixels per inch (dpi) allows for a
higher quality graphic for printing
or displaying.
Graphics with fewer pixels per
inch are more “transfer friendly”
and can be used on websites or
electronically transferred.
To find resolution and size, first
download your graphic. Then
right-click on it and click
properties. Click on the summary
tab to see the resolution and size
of the graphic.
*Unless otherwise noted, all
inches are linear, not square
(length, not area).
*dpi is Dots per Inch (or pixels
per inch)
2. Assess students’ math awareness as
it relates to the CTE lesson.
Why is it important to keep the same ratio
(height to width) of a graphic when
changing its size?
If you don’t maintain this ratio, the
image will be skewed.
What do you know about ratios? Have you
used ratios and proportions to convert
units? How can we relate this idea to
pixels and graphic sizes?
A ratio is a comparison of 2
quantities (numbers) by division.
It may be written three ways:
1/100 or 1 to 100 or 1:100.
What math could you use to change the
size? Can you come up with an example
of where you could use it in this class?
A proportion is a statement of
form:
A = C_
B
D
Use crossmultiplication to solve.
A·D=C·B
You have a graphic that has a width of
500 pixels and a resolution of 96 pixels
per inch (dpi). How many inches wide is
the graphic?
500 pixels = 96 pixels
x
1 inch
500 pixels · 1 inch = 96 pixels · x
500 pixel inches = 96x pixels
divide both sides by 96 pixels
500 pixel inches = x
96 pixels
5.21 inches = x
x = 5.21 inches in width
You can use the same steps to
find the height of the graphic.
Have you ever ordered a photo from the
photo kiosk and had it enlarged? How
about when you’ve tried to print a digital
picture at home and you wanted it a little
Usually it’s measured in %
(though not always). For instance,
a photo that is twice as tall and
twice as wide would be said to be
enlarged by 200% for both the
bigger? What was it measured in?
height and width. A photo that is
shrunk down to half as tall and
half as wide has a stretch of 50%
for both height and width.
We can find this number by taking
the new height (or width) and
dividing it by the original height (or
width).
I have a graphic that is 350 pixels high
and I need it to fit an area that is 613
pixels high. What would the stretch % be?
When the resulting answer is
greater than 1 (or greater than
100%), we know our image is
being enlarged. When it is less
than 1 (or 100%), we know it is
being reduced in size.
Stretch % = New height
Old height
=
613 pixels _
350 pixels
= 1.75
=
175%
3. Work through the math example
embedded in the CTE lesson.
We are going to replace the head of
George Washington on the provided Mt.
Rushmore image. Here are the steps:
Have the students calculate the height
and width of a picture of themselves taken
on a digital camera.
Have the students use the free-form
select tool (lasso) to remove the
background of the image and save only
the head.
Walk around and take a photo of
each student while working at their
station. This photo should be
taken with high resolution (1 to 5
megapixels) to allow for resizing
and extra assignments.
This answer is 1.42” by 1.42”.
115 pixels = 81 pixels
Copy the image and paste it to a new
X
1 inch
Paint document. Calculate the size your
head needs to be to fit into the space
115 pixels · 1 inch = 81 pixels ·
where George Washington’s head is (That x
space is 115 pixels both high and wide).
115 pixel inches = 81x pixels
(The resolution in paint is 81 dpi after
cropping, not 96dpi).
divide both sides by 81 pixels
115 pixel inches = x
81 pixels
In Paint, select Image and click Attributes.
Make the calculated changes to height
and width. This will make it so your head
will fit into the space where George’s head
was.
Finally, copy the photo and paste it onto
the Mt. Rushmore image in Paint. Drag
your image into a location so that it covers
George’s face. Deselect the DRAW
OPAQUE option in the Image menu. This
removes the white background.
4. Work through related, contextual
math-in-CTE examples.
You all need to create a power point
presentation in this class. You’ve been
looking on the internet and found a perfect
image for the title page of your
presentation. The only problem is: the
image is only 2 inches high and 3.5 inches
wide. You need it to be 7 inches high to
look good.
How wide will the image be?
2 inches (h) = 7 inches (h)_
3.5 inches (w)
x (w)
2 inches · x = 7 inches · 3.5
inches
2x inches = 24.5 inches2
divide both sides by 2 inches
24.5 inches2 = x
2 inches
x = 12.25 inches
So, the width would be 12.25
inches
5. Work through traditional math
examples.
Let’s do a quick example. Everybody take
out a sheet of paper (the paper is 8.5” x
11”). Now, if I wanted to keep the paper
the same shape, or the same RATIO of
height to width, but I needed it to be only
5.5” tall, how wide should it be? Work with
The paper should be 5.5” high and
4.25” wide. Now the height is ½ as
high, and the width is ½ as wide,
so our scale factor is ½. We can
use the scale factor in calculations
for our digital graphics.
folding the paper and use the ruler.
What happened to the paper? Now the
height is ½ as high, and the width is ½ as
wide, but do we have a ½ sheet of paper?
This is how our graphics are going to
work.
If a car is going 60 miles per hour, how
long would it take to go 200 miles?
The paper is now only ¼ the size
of the original sheet. Keep this in
mind for the website: if you want
something to take up ½ the space,
you can’t just cut the height in half
and expect it to work that way.
60 miles = 200 miles
1 hour
x
multiply
cross
6o miles · x = 200 miles · 1 hour
divide both sides by 60 miles…
x = 200/60
1
hours
3
x = 3 hours and 20 minutes
x= 3
6. Students demonstrate their
understanding.
Have students go out into the internet and
find a school-appropriate graphic they
like. Have the students determine the
resolution and calculate the pixels
required to create a picture that will fit a 4”
x 6” frame.
7. Formal assessment.
My computer has a viewable area of 12”
high by 14” wide. My resolution is set at
120 dpi. I will be creating a header for my
personal web site. The header needs to
be 2” high and 10” wide. How many pixels
high and how many pixels wide should my
header be?
Model solutions after the
examples. Answers will vary
depending on the resolution.
The viewable area is unnecessary
to answer the problem.
Height:
120 pixels =
1 inch
x = 240 pixels
Width:
x
2 inches
120 pixels =
x
_
1 inch
10 inches
x = 1200 pixels