Project 2

Logos
Timing: 4 weeks

Project overview
Logos can evoke immediate associations with companies or specific products. Organizations and
corporations use logos to identify themselves and set up brands. A logo should be unique, functional, and
versatile. In this project, students view sample logos and discuss color theory and design principles used in
the logos. Students plan, create, and build a logo for use in other publications, such as business cards,
menus, or advertisements. Students learn about file formats, resolution, and image size and select
appropriate settings for a variety of final product scenarios.
Student product: Digital logos optimized for web, print, and video.
Note: Portions of the Logos project align to the Adobe Certified Associate, Visual Communication
objectives. Within the instruction steps and technical guides, the specific learning objectives for the exam
are referenced with the following format: 1.1

Project objectives
At the completion of the project, students will have developed the following skills:

Project management skills • Communicating and presenting design

• Planning and creating a logo decisions
• Managing and organizing graphics elements • Giving feedback on a project
and illustrations
Technical skills
Design skills Photoshop
• Understanding and employing design • Using guides and rulers
principles
• Understanding vector and bitmap graphics
• Understanding and employing color theory
• Using swatches
• Identifying the difference in color modes
• Painting
• Understanding color management
• Drawing lines
• Sketching
• Drawing and modifying shapes
• Creating and editing graphical elements and
• Creating vector masks
illustrations
• Using selection tools
• Designing for a specific audience and purpose
• Adding text to images
Research and communication skills • Outputting for web
• Investigating logos • Outputting for print
• Critiquing designs • Outputting for video
• Communicating purpose and goal Illustrator
• Understanding the Adobe Illustrator workspace

© 2012 Adobe Systems Incorporated Logos 1

 • Creating vector artwork • Painting
• Using Image Trace to convert photos to vector • Drawing and modifying shapes
artwork • Using gradients
• Drawing lines

Project materials
• Adobe Photoshop CS6 installed on all • Photoshop guide: How to use painting tools
machines • Photoshop guide: How to use drawing tools
• Adobe Illustrator CS6 installed on all machines • Illustrator guide: How to draw in Illustrator
• Presentation: Introduction to graphic design • Illustrator guide: How to create vector artwork
• Worksheet: Design principles • Guide: Bitmap and vector images
• Guide: How to understand color management • Photoshop guide: How to use selection tools
• Worksheet: Review and redesign of logos • Photoshop guide: How to add text to images
• Illustrator guide: Overview of Adobe Illustrator • Photoshop guide: How to generate different file
CS6 workspace formats
• Photoshop guide: How to create a new
document

Background preparation resources

• Technical and content information
• Key terms
• ISTE NETS*S Standard for Students
• Adobe Certified Associate, Visual Communication objectives

Project steps

Color theory and design

1. Tell students they will be creating a logo they can use as an identifying element for themselves, for a
fictional organization, or for a school group. Explain the goals of this project:
• Explore color theory and design principles
• Investigate selection, drawing, and painting tools in Photoshop and Illustrator
• Understand and incorporate image-optimization strategies and file formats
• Identify aspects of redesign and its importance in the design process

2. Show students examples of print-, web-, and video-based logos and discuss with students the types of
design principles used in these logos. Ask students to use the design principles worksheet to define
design principles. As you introduce each principle, allow students time to fill in their worksheets. At
the conclusion of the discussion, select a few students to share their documents and explain why the
logo they chose represents a particular design principle. Some principles to cover include:
• Emphasis/contrast (focal point)

2 Logos © 2012 Adobe Systems Incorporated

 • Proximity/groupings
• Balance
• Alignment
• Harmony/proportion
• White space
• Repetition
• Color
Presentation: Introduction to graphic design 2.2
Worksheet: Design principles 2.2
Note: You might want to gather logos in a presentation to lead students through this exercise.

3. Show students examples of print-, web-, and video-based logos and ask them to identify visual cues
and design principles that help the logos stick in their minds. Discuss how these logos are appropriate
for the organizations they represent. Discuss how the designs reach the organization's target audience
and meet the goals of the company or individual.1.1, 2.1

4. As students begin to think about their logos, explain that they will select the colors, layout, and
elements that will bring their logos to life. Some principles to cover include:2.2, 2.4
• Brightness: The quantity of light reaching the viewer's eye
• Contrast and the color wheel
• Using color in design
• The differences between RGB and CMYK
• Color management: Ensuring that viewers see the same color across different devices

5. To help students understand the importance of color management, explain why color variations occur
between devices.2.1 Describe solutions to help them create consistency across devices. Some things to
discuss include:
• Causes of color variation
• Monitor profiles
• Input device profiles
• Output device profiles
• Manage color by using color settings
• Soft-proof to prevent color variation from screen to print
• Manage color when printing
Photoshop guide: How to understand color management 2.4, 3.5

6. Instruct students to select the person, group, or organization they will create their logo for and
brainstorm a set of words and goals that best describe that person, group, or organization. Ask students
to determine design principles they can use to evoke descriptive words as they sketch concepts for this
logo on paper. Explain that they can incorporate any images from Project 1. Ask students to record
their initial goals in the review and redesign worksheet.
Worksheet: Review and redesign of logos 1.1, 1.3

© 2012 Adobe Systems Incorporated Logos 3

 Constructing the logo

7. Discuss possible canvas sizes for logos. Typical sizes are 79 x 51 pixels (very small), 150 x 25 pixels,
125 x 144 pixels, and 243 x 103 pixels. Students can use either Photoshop or Adobe Illustrator to
create their logo. Adobe Illustrator is commonly used to create vector artwork like that in logos. If you
choose to use Illustrator, introduce your students to the interface, terminology, and basic panels in
Illustrator. Introduce how to create a new document in Photoshop or Illustrator and explain the options
they can alter,2.1, 2.4, 2.6 including:
• Document size
• Resolution
• Color mode (CMYK, RGB, grayscale, and so on)
• Background color
Illustrator guide: Overview of the Adobe Illustrator CS6 workspace
Photoshop guide: How to create a new document 2.1
Note: If students are preparing to take the Visual Communication certification exam, they should use
Photoshop to create their logo in order to learn the applicable objectives for the certification exam.

8. Introduce how to use guides and rulers in Photoshop or Illustrator, including how to change the
measurement unit on rulers and how to change guide properties.4.2

9. Introduce painting, drawing, and image-editing tools in Photoshop, such as the Paint, Line, Shape, and
Eraser tools. In Illustrator, introduce the drawing and shape building tools and the Image Trace tool for
converting an image to vector artwork. Discuss the differences between vector and bitmap graphics.
Photoshop guide: How to use painting tools 4.6
Photoshop guide: How to use drawing tools 4.6
Illustrator guide: How to draw in Illustrator
Illustrator guide: How to create vector artwork
Guide: Bitmap and vector images 2.6
Note: If students are preparing to take the Visual Communication certification exam, introduce the
concept of color blending and using the Mixer Brush to define multiple colors on a single tip and mix
and blend them into the underlying colors on the canvas, or use a dry brush to blend the colors into
your photo to create a beautiful painting.4.6

10. Introduce using vector masks as a useful tool for hiding selected parts of an image.
Photoshop guide: How to use selection tools 3.2

11. Discuss how typography may or may not add to the visual impact of the logo. If students wish to add
text to their logos, demonstrate how to add text to images. Introduce text-effect tools such as Bevel and
Emboss.
Photoshop guide: How to add text to images 2.2, 2.3, 4.7

4 Logos © 2012 Adobe Systems Incorporated

12. Allow students time to build their logos.

Review and redesign

13. Through a class discussion, define review and redesign. Explore what redesign means for student work
and why it might be a useful step in the overall design process. Develop class definitions and discuss
possible steps or questions that will help in redesigning a product. Some possible categories for
review1.1 include:
• Meeting initial focus, purpose, and audience
• Changing focus, purpose, or audience
• Applying good design principles

14. Ask students to individually review their own logos against their initial goals and intended design
principles.
Worksheet: Review and redesign of logos 1.1, 1.3

15. After the review, allow students time to redesign their logos if needed.

Optimizing and finalizing images

16. Explain to students that they need to prepare multiple versions of their logos for use in color and in
black-and-white printed documents, as well as for use on the web and in videos.4.4 Discuss image
optimization and the importance of file formats. Discussion topics 2.1 might include:
• The difference between printed and on-screen images (inches versus pixels, size variation, scaling
versus resampling, and ink dots versus RGB values)
• File formats (such as GIF, JPEG, TIFF, EPS, and PDF)
• Image resolution (such as pixels versus inches; ppi and dpi for printing, pixels for the web, and line
screen frequency for commercial printing)
• Preserving image quality when manipulating images
• Broadcast standards for video (such as NTSC and HDTV) to help select the appropriate TV image
preset
• Avoiding thin lines (thinner than 2 pixels) because interlacing can create flicker when the image is
displayed in video
• Using the NTSC Colors filter when working with color for video use because saturated or bright
colors can cause bleeding when displayed in video
Note: In discussing file formats, it may be helpful to identify the best file formats for the web (JPG,
GIF, PNG), for photos (PSD, TIFF, JPG, PDF, DICOM, large document format), for commercial
printing (TIFF, EPS, PDF, PSD, DCS), for video (PSD, TGA, PICT), and for PowerPoint/Word
(PNG).
Photoshop guide: How to generate different file formats 2.1, 3.3, 5.1

17. Allow students time to prepare their logos for web, print, and video then save their settings as presets
3.4
for future use.

© 2012 Adobe Systems Incorporated Logos 5

 Presenting their work

18. Explain that each student will present three logos to the class 1.4 and include the following in their
presentation:
• Their design decisions in creating each logo and their rationale for preparing the images for each
medium (web, print, video), including the file type, size, and resolution for each version and
situation.
• Explanations of any changes they made during the review and redesign stage.
• What they learned in the project and what they want to learn next.

Extension activities
You can extend the project in the following ways:
• Design activity: Ask students to explore the color schemes posted on Kuler: http://kuler.adobe.com.
Ask students to, in small groups, select their favorite color scheme and articulate where they might use
such a color scheme and why it is useful for that purpose.
• Design challenge: Select a student logo that incorporates complex colors and effects. Have the
students in the class optimize this logo, trying to achieve a smaller file size than the creator's original
web version while maintaining the look and quality of the logo. Ask students to vote on the versions to
select the one with the best quality and the smallest file size.

Assessment
• Project rubric

Background preparation resources

• Review the student step-by-step guides referenced in this project.
• To view video tutorials aligned with the skills required to complete this project, visit the Visual Design
CS6 show on Adobe TV: http://tv.adobe.com/show/visual-design-cs6/
• For more teaching and learning resources on logos and other topics in this project, search for resources
from the community on the Adobe Education Exchange:
http://edexchange.adobe.com
• For an overview of the user interface and for more information on the technical aspects of Photoshop,
see Photoshop Help.
• For an overview of the user interface and for more information on the technical aspects of Illustrator,
see Illustrator Help.
• You might supplement this project with the following design book:
◦ Lawler, B. (2009). The Official Adobe Print Publishing Guide, Third Edition. Berkeley: Adobe
Press.

6 Logos © 2012 Adobe Systems Incorporated

Logos
• You might want to download and prepare sample logos from the following kinds of organizations:
◦ Nonprofit organizations
◦ Large businesses
◦ Small local businesses
◦ Sports teams
◦ Media organizations
◦ Web-based companies
• A short article on making logo designs: www.webdesignfromscratch.com/web-design/logos/
• Types of logos and their construction: www.grantasticdesigns.com/logos1.html

Graphic design
• Review the Introduction to graphic design presentation.
• An article on design principles: http://www.digital-web.com/articles/principles_of_design
• Before-and-after formats illustrating design principles:
http://desktoppub.about.com/od/designprinciples/l/aa_pod2.htm
• A short introduction to graphic design theory, explaining the aspects of design to consider when
composing a piece of fine art or producing a graphic layout:
http://www.usask.ca/education/coursework/skaalid/theory/cgdt/designtheory.htm
• A brief discussion of the main principles of design:
http://char.txa.cornell.edu/language/principl/principl.htm
• Definitions and examples of elements and principles of design: http://www.johnlovett.com/test.htm
• Definitions for graphic design principles: http://www.msu.edu/~glazered/tc801/graphic.html

Color theory
• An overview of color theory and the color wheel:
www.colormatters.com/colortheory.html
• A color theory tutorial: www.worqx.com/color/
• A site to spur discussion and terminology of color selection: http://kuler.adobe.com

Design process
• This article from design-lib.com design libraries discusses the design process:
http://www.design-lib.com/guidelines-to-graphic-design-process-gd.php

© 2012 Adobe Systems Incorporated Logos 7

 Key terms
• alignment • optimize
• balance • pixels
• bitmap • proximity/groupings
• brightness • redesign
• chroma • repetition
• CMYK • resolution
• color gamut • review
• color management • RGB
• color profiles • saturation
• color wheel • shade
• file format • tint
• harmony/proportion • tone
• hue • vector
• Image Trace • white space
• Logo

Curriculum and Area Standard for Students

1. Creativity and Innovation

Students demonstrate creative thinking, construct knowledge, and develop innovative products and
processes using technology. Students:
a. apply existing knowledge to generate new ideas, products, or processes.
b. create original works as a means of personal or group expression.
2. Communication and Collaboration
Students use digital media and environments to communicate and work collaboratively, including at a
distance, to support individual learning and contribute to the learning of others. Students:
b. communicate information and ideas effectively to multiple audiences using a variety of media and
formats.
3. Research and Information Retrieval
Students apply digital tools to gather, evaluate, and use information. Students:
c. evaluate and select information sources and digital tools based on the appropriateness to specific
tasks.
4. Critical Thinking and Problem Solving
Students use critical thinking skills to plan and conduct research, manage projects, solve problems and
make informed decisions using appropriate digital tools and resources. Students:
b. plan and manage activities to develop a solution or complete a project.

8 Logos © 2012 Adobe Systems Incorporated

5. Digital Citizenship
Students understand human, cultural, and societal issues related to technology and practice legal and
ethical behavior. Students:
c. demonstrate personal responsibility for lifelong learning..
6. Technology Operations and Concepts
Students demonstrate a sound understanding of technology concepts, systems, and operations.
Students:
a. understand and use technology systems.
b. select and use applications effectively and productively.

Visual Communication objectives

1.1 Identify the purpose, audience, and audience needs for preparing image(s).
1.3 Demonstrate knowledge of project management tasks and responsibilities.
1.4 Communicate with others (such as peers and clients) about design plans.
2.1 Demonstrate knowledge of image resolution, image size, and image file format for web, video, and
print.
2.2 Demonstrate knowledge of design principles, elements, and image composition.
2.3 Demonstrate knowledge of typography.
2.4 Demonstrate knowledge of color correction using Photoshop CS6.
2.5 Demonstrate knowledge of image-generating devices, their resulting image types, and how to access
resulting images in Photoshop.
2.6 Understanding key terminology of digital images.
3.2 Demonstrate knowledge of layers and masks.
3.3 Demonstrate knowledge of importing, exporting, organizing, and saving.
3.4 Demonstrate knowledge of producing and reusing images.
3.5 Demonstrate an understanding of and select the appropriate features and options required to implement
a color management workflow.
4.1 Demonstrate knowledge of working with selections.
4.2 Use Photoshop guides and rulers.
4.4 Adjust or correct the tonal range, color, or distortions of an image.
4.6 Demonstrate knowledge of drawing and painting.
4.7 Demonstrate knowledge of type.
5.1 Demonstrate knowledge of preparing images for web, print, and video.

© 2012 Adobe Systems Incorporated Logos 9

 Assessment

0 - Does not meet 3 - Meets expectations 5 - Exceeds expectations

expectations

Brainstorm Absent or incomplete. Identifies person, group, or Identifies person, group, or

organization for which to organization for which to
design logo. Provides design logo. Provides
descriptive words and descriptive words and
sketch of logo with a sketch of logo with clear
purpose and goal. purpose and goal.
Logo - Absent or incomplete. Logo communicates a Logo clearly and
content purpose and goal for effectively communicates
person, group, or a purpose and goal for
organization it is designed person, group, or
for. organization it is designed
for.
Logo for print Absent or incomplete. Creates logo in appropriate Creates logo with a clear
- color file format and size for purpose and goal. The logo
printing in color. Employs is in appropriate file format
appropriate color theory and size for print in color.
and design principles. Clearly and efficiently
employs appropriate color
theory and design
principles.
Logo for print Absent or incomplete. Creates logo in appropriate Creates logo with a clear
- black & file format and size for purpose and goal. The logo
white
printing in black & white. is in appropriate file format
Employs appropriate color and size for print in black
theory and design & white. Clearly and
principles. efficiently employs
appropriate color theory
and design principles.
Logo for web Absent or incomplete. Creates logo in appropriate Creates logo with a clear
file format and size for the purpose and goal. The logo
web. Employs appropriate is in appropriate file format
color theory and design and size for the web.
principles. Clearly and efficiently
employs appropriate color
theory and design
principles.
Logos for Absent or incomplete. Creates logo in appropriate Creates logo with a clear
video file format and size for purpose and goal. The logo
video. Employs is in appropriate file format
appropriate color theory and size for video. Clearly
and design principles. and efficiently employs
appropriate color theory
and design principles.

10 Logos © 2012 Adobe Systems Incorporated

 0 - Does not meet 3 - Meets expectations 5 - Exceeds expectations
expectations

Presentation Absent or incomplete. Presentation includes Presentation is clear and

rationale for the selected compelling. Rationale for
file format, size, and the selected file format,
resolution for each final size, and resolution for
product scenario. each final product scenario
Presentation explains how is succinct and logical.
the logos communicate a Presentation clearly
purpose and details explains how the logos
changes made in the communicate a purpose
review and redesign cycle. and details changes made
Presentation reflects on in the review and redesign
what they learned and what cycle. Presentation reflects
they would like to learn on what students learned
next. and identifies what they
want to learn next and
why.

© 2012 Adobe Systems Incorporated Logos 11