Technical Illustration
Writing 282 - Fall 2012
Instructor:
Office:
E-mail:
Office Hours:
William Wells
Midway CWA Office (1380 Energy Lane)
william.wells@metrostate.edu
by appointment only
Course description:
 This course introduces students to the way technical illustration complements technical
communication. In addition to covering the types of illustration narrowly considered comprise the
field of technical illustration; this course will introduce other forms of imagery which a graphic
artist/illustrator is routinely called upon to produce.
Course outcomes:
By the end of this course, students will be able to:
 Understand and apply basic vector drawing concepts
 Understand and apply the process of developing sequential images
 Understand the concept of an orthographic projection
 Create an isometric drawing from a blueprint
 Create an exploded drawing from a blueprint
 Create a cutaway drawing from a blueprint
 Understand and apply basic raster image manipulation
Course overview:
 This course is designed with an emphasis on creating portfolio pieces which demonstrate student
understanding of basic illustration ideas. The blend of online and in-class experience seeks to
focus instructor input where it will be of most value to the development of these pieces. Lectures
and tests will be delivered online and review and discussion will occur in the classroom.
Required texts:
 None
Required online materials:
 Lynda.com: Up and Running with Illustrator with Deke McClelland
Lynda.com: Typographic Principles with Don Barnett
Lynda.com: Up and Running with Photoshop for Photography with Deke McClelland
If you have a disability that could affect your performance in this class or that requires an accommodation under the
Americans with Disabilities Act, please see me as soon as possible so that we can make appropriate arrangements.
MSU complies with all federal and state laws and regulations regarding discrimination, including the Americans
with Disability Act of 1990 (ADA). If you have a disability and need reasonable accommodations for equal access
to education or services at MSU, please contact the Disability Services Office at (651)793-1525. For other
concerns about discrimination, you may contact your advisor, department chair, or the Student Affairs Office at
(651)793-1520.
Grading
Grades for this course will calculated on a scale of 1000 points and divided between tests and
projects.
TESTS
You will attend three online video lectures. You will take a test after attending each lecture. Each test
is made up of 20 questions and worth 100 points. Tests can be taken at any time but, before you begin
the subsequent project, you must have passed the appropriate test with a score of 16 or better (80%).
For example, before beginning the Isometric Drawing Project, you must have passed the test on
Illustrator CS5 One-on-One: Fundamentals. If you do not take the test beforehand, you will score
0 points for the subsequent project. Tests may be retaken at any time and your grade will reflect
your best score for a given test.
PROJECTS
Projects will vary in scope and complexity, and the points possible for each project will vary
accordingly. Grading criteria specific to each project appears on that project’s specification sheet.
Remember, in order to receive any points for a project, the appropriate test must have been completed
before the class in which the project is begun. Final versions of each project must be submitted before
the class session indicated on the schedule.
Attendance
ONLINE ATTENDANCE
All lectures and lecture tests will be available from the first day of class until the last. Students are
advised to attend online lectures according to the schedule but the tests on each lecture must be taken
before the in-class session indicated on the schedule. Failure to pass the test on the lecture associated
with a project before the in-class session will result in no points being awarded for that project.
IN-CLASS ATTENDANCE
Attendance will be taken at the beginning of each class. Students are strongly advised to attend each
in-class session because it has been designed to optimize instructor input. A new project will be
explained in detail and initiated in each class session. Students who work on the projects in-class
should be able to bring them to completion or near completion by the end of that class and receive the
maximum value from instructor input.
Academic Honesty/Plagiarism
Students must do their own work in order to get full value/credit for this course. Any student
submitting another’s work as his or her own will receive no points for that assignment and be reported
to the Dean of Students.
This course schedule is tentative; that is, some assignments may be revised because of time
constraints, student input, or progress on assignments. It is your responsibility to keep abreast of
the changes.
Date
In-class/online
Subject
Due before class
Week 1
in-class
Class introduction
What is a Technical
Illustration?
Charts and graphs
Project: Flowcharting the
process of design
Week 2
online
Up and Running with
Illustrator
Illustrator test
Week 3
In-class
Illustrator review
Flow chart
Reading Blueprints
Illustrator test
Orthographic projection
Isometric Drawing
Week 4
online
Typographic Principles
Typography test
Week 5
In-class
Exploded illustration
Isometric Drawing
Typography test
Week 6
In-class
Cutaway illustration
Week 7
online
Up and Running with
Photoshop for Photography
Exploded illustration
Photoshop test
Week 8
In-class
Photo manipulation and InDesign preview
Cutaway illustration
Photoshop test
WRIT 280 – Technical Illustration Specification Sheet
Project 1: Flow Chart
POINTS: 50/1000
PREREQUISITE LECTURE AND TEST: none
INTRODUCTION
Just as charts and graphs are a visual translation of numbers, flow charts translate processes into
visual media. If you have a process for which you would like to build a flow chart, please feel free to
use it. Otherwise, use the process developing an exploded view drawing listed below. This is both a
writing exercise and a problem of visual organization.
PROCESS
 You will need to condense the bullet points below so that they communicate each step’s meaning
within an area of similar visual compactness.
o Identify the objects in the assembly which you would like to draw and locate third-angle
orthographic projections for each of them.
o Create an isometric drawing for the first object in the assembly by…
 Positioning the three views so that they intersect at the point they have in
common.
 Scale the intersecting three views vertically by 86.66%.
 Select the top view and shear it by -30 around the common point of intersection.
 Rotate the top by 30 degrees around the point of intersection.
 Select the side view, shear it by -30 and rotate it by -30 around the point of
intersection.
 Select the front view.
 Shear the front view by 30.
 Rotate the front view around the common point of intersection by 30
o Repeat this process for each of the remaining parts of the assembly.
o Arrange the isometric drawings on a sheet of 8 ½” x 11” piece of paper, scaled to fit
comfortably and separated by join lines, angled at 30 and 60 degrees.
 Lay out the flowchart so that it fits comfortably on a portrait orientation (short width, long height)
of an 8.5” x 11” sheet of paper.
 Each task should be enclosed in a rectangle and each decision (if/then) should be enclosed by a
diamond.
 Draw arrows of equal lengths to join the appropriate boxes and diamonds, and make sure that the
arrowheads butt, but do not overlap, the sides of the boxes.
 HINT
 Finish the writing before you put anything in a box. That way, you can create a box in which the
largest block of copy will comfortably fit, and then boxes of the same size for the other copy.
This will create the greatest amount of visual integrity.
GRADING CRITERIA
This project will be graded on consistency and communication.
 20 points possible for visual consistency (centering, butted arrowheads, spacing between
boxes, box size, appropriate use of rectangle/diamond symbols)
 20 points possible for consistent writing among text blocks
 10 points possible for communication of the idea as a whole
WRIT 280 – Technical Illustration Specification Sheet
Project 2: Isometric Drawing
POINTS: 150/1000
PREREQUISITE LECTURE AND TEST: Up and Running with Illustrator
INTRODUCTION
While flow charts are good for diagramming processes, they are not particularly good at conveying
the characteristics of an object. Engineering blueprints are much better at describing the size and
shape, and sometimes even the color and texture of an object being described (architectural blueprints
do the same thing, but use differing nomenclature and conventions. Engineering blueprints typically
show three views of an object, one for each of the three dimensions. By combining these three views
into a single drawing, called an isometric drawing, one can convey a good idea of what something is
supposed to look like after it is manufactured.
PROCESS
 The process for creating an isometric drawing requires attention to detail and precision in
selecting the points of transformation. A typical blueprint will look something like this:

Position the views like this, making sure the corners snap to their endpoints:


Select all of the views and scale them vertically at 86.66% (the cosine of 30).
Select each view and transform it around the anchor point that all of them have in common (for
the top, it is the bottom left, for the side, it is the top right, and for the front, it is the top left.
Perform the transformations below in the order listed. If you reverse the rotation and skew
operations, the panels may not join properly.
Top: shear = –30, rotate = 30
Side: shear = –30, rotate = –30
Front: shear = 30, rotate = 30
You should wind up with something looking like this:




After the initial transformation, drag the flattened shapes along the appropriate axis in order to
make the edges align.
 After all forms have been extruded, eliminate any hidden lines.
 Make any new surfaces that result into solid planes.
 Colorize the planes of the final product to clarify the form.
 You may use the blueprint supplied, find another, or, if you are truly ambitious, draw one
yourself. A completed drawing is shown on the supplied blueprint.
HINTS
(1) Do not put a stroke around the outside of the views; Illustrator will draw half of the stroke on the
inside of the object and half on the outside, distorting the final shape (2) Start the work in outline
mode instead of preview mode (3) make sure your snap tolerance is fairly liberal (Edit >
Preferences > Selection and Anchor Display); 3 to 5 pixels should work (4) change the constrain
angle in your
Edit > Preferences > General > Constrain Angle).
GRADING CRITERIA
This project will be graded on precision.
 100 points for an accurate form
 50 points if all of the anchor points meet properly and have not been fudged (I can generally tell
if they have been fudged and fudging will compromise later assignments).
 5 bonus points for using a different blueprint. Contact me before doing this.
 10 bonus points for using an (accurate) blueprint you’ve drawn yourself. Contact me before doing
this.
WRIT 280 – Technical Illustration Specification Sheet
Project 3: Cutaway Drawing
POINTS: 200/1000
PREREQUISITE LECTURE AND TEST: Typographic Principles
INTRODUCTION
Cutaway or cross-section drawings show the relationship of parts within an object. They are used instead
of an exploded diagram to indicate those relationships and are used when you don’t need to communicate
an assembly order (as would be the case in the drawing of an orange). Areas of an obscuring part(s) are
removed to reveal the nature of the parts beneath to more fully communicate the spatial relationships
between all of the parts. For this project, you may use either the supplied blueprint (based on, but much
more complicated than, the one provided for the previous project), use a different blueprint, or create one
of your own. If you choose one of the latter options, please contact me before beginning.
PROCESS
 Decide upon the shape of the cutaway, trying for a shape that will accurately show how all of the
parts are related to the others without compromising the integrity of any one part.
 Draw a shape that corresponds to the form on each of the views
 Create layers of each of the parts in each of the views, cutting and pasting each part into its own
appropriately-labeled layer.
 Where the cutaway shape intersects a part’s shape, copy the cutaway shape onto that part/view
layer.
 Use the cutaway shape to crop the affected part appropriately.
 As with the isometric drawing, arrange and scale the views, apply the shear and rotation
transformations separately to each of them, remove the hidden lines, and extrude the combination
view to accurately describe the assembled piece.
 Make any new surfaces that result into solid planes.
 Colorize the resultant planes to clarify the result.
HINTS
(1) Begin work in outline mode instead of preview mode (2) make sure your snap tolerance is fairly
liberal (Edit > Preferences > Selection and Anchor Display); 3 to 5 pixels should work (3) change
the constrain angle in your
Edit > Preferences > General > Constrain
Angle) (4) set your keyboard increment to a usable distance (¼” – ½”).
GRADING CRITERIA
 100 points for accurate forms
 50 points if all of the anchor points meet properly.
 50 points for choosing a shape that communicates the relationship between the parts while not
compromising the integrity of any of them.
 5 bonus points for using a different blueprint. Contact me before doing this.
 10 bonus points for using an (accurate) blueprint you’ve drawn yourself. Contact me before doing
this.
WRIT 280 – Technical Illustration Specification Sheet
Project 4: Exploded Drawing
POINTS: 200/1000
PREREQUISITE LECTURE AND TEST: none
INTRODUCTION
Just as an isometric drawing communicates information about how an object will appear after it is
manufactured, an exploded drawing will show the assembly order and/or the spatial relationship within an
object comprised of multiple parts. An exploded view will typically show the layers of an object
separated uniformly along the x and z axes. For this project, you may use either the supplied blueprint
(based on, but much more complicated than, the one provided for the previous project), use a different
blueprint, or create one of your own. If you choose one of the latter options, please contact me before
beginning.
PROCESS
 Begin the project as with the isometric drawing: arranging and scaling the views, applying shear and
rotation transformations separately to each of them, and extruding the combination view to accurately
describe the assembled piece.
 Do not remove hidden lines.

Separate each layer of the assembly by equal spaces and indicate the assembly direction with arrows
of equal sizes.
 Make any lines which were once hidden and are now showing into solid lines.
 Make any new surfaces that result into solid planes.
 Colorize the resultant planes to clarify the result.
HINTS
(1) Begin work in outline mode instead of preview mode (2) make sure your snap tolerance is fairly
liberal (Edit > Preferences > Selection and Anchor Display); 3 to 5 pixels should work (3) change
the constrain angle in your
Edit > Preferences > General > Constrain
Angle) (4) set your keyboard increment to a usable distance (¼” – ½”).
GRADING CRITERIA
 100 points for accurate forms
 50 points for equal distances and arrow sizes.
 50 points if all of the anchor points meet properly.
 5 bonus points for using a different blueprint. Contact me before doing this.
 10 bonus points for using an (accurate) blueprint you’ve drawn yourself. Contact me before doing
this.
WRIT 280 – Technical Illustration Specification Sheet
Project 5: Photo color correction
POINTS: 100/1000
PREREQUISITE LECTURE AND TEST: Up and Running with Photoshop for Photography
INTRODUCTION
Photographs and illustrations serve separate functions. Illustrations abstract and isolate central ideas from
an image, making those ideas easier to understand. Photographs typically integrate objects with
backgrounds, making those objects seem more real and more believable. Graphic artists are often asked to
support text with photographs instead of illustrations and this project’s process will correct the color
problems of about 90% of the photos you might encounter. You may use either the digital photograph
supplied or you may use your own. If you choose the second option, please contact me beforehand.
PROCESS
 Open the digital image in Photoshop
 Making sure that the Resample Image checkbox is unchecked, go to Image > Image size… and
set the height to the desired size. The number showing in the Resolution box should be 300 or larger.
If it is larger, check the Resample Image checkbox and enter 300 into the field. If it is smaller than
300, use another image. Once you have made these adjustments, click OK.
 Open the Layers palette and select the Add Adjustment Layer icon.

Pull down to Levels… You should see a window that looks like this:

Choose the lighter eyedropper on the left hand side of the levels window and click on the lightest part
of the picture.



Choose the darkest eyedropper on the left-hand side of the levels window and click on the darkest
part of the picture.
Check the result by hiding/showing the levels 1 layer (click on the eye icon). This will create the
optimum color range, also known as the dynamic range. If there is an objectionable color cast,
choose each of the red, green, and blue channels individually and adjust the end sliders that appear
beneath the color channel’s histogram.
Images tend to lose a little saturation through digitization. Once the color range is set, increase the
saturation slightly. Go back to the layers palette and pull down the Add Adjustment Layer icon once
again. Select the Vibrance… item and set both the Vibrance and the Saturation settings to +9.
 Save the file in a .psd format.
 Images also tend to lose a little clarity through digitization, so we will increase the clarity slightly.
First, flatten the image (Layer > Flatten Image). Then convert the image to the LAB color mode
(Image > Mode > Lab Color). Then select the Lightness channel and apply an Unsharp Mask filter
to it (Filter > Sharpen > Unsharp Mask…). Set the sliders on the Unsharp Mask filter to Amount:
100%, Radius: .3, and Threshold: 12.
 Select the Lab channel to see the effect and then convert the image back into an RGB color space
(Image > Mode > RGB). Save the file in a .jpeg format with your name on it and upload it to the
dropbox.
GRADING CRITERIA
 100 points for submitting the color-corrected file.