Understanding Image File Types

Essential Standard 1.00 (23%) – Understand desktop publishing (B2).

Indicator 1.02 (7%) – Investigate design principles and elements.

6412 Multimedia and Webpage DesignSummer 2010Unit A Page 1

Unpacked Content

A.Principles of Design

1. Alignment – relationship of elements in a pattern or grid.
2. Balance – determined by how elements are placed on a page.
3. Symmetrical – elements of the design are centered or evenly divided horizontally and vertically on a page.
4. Asymmetrical – off-center alignment created with an odd or mismatched number of elements.
5. Radial – elements radiate or swirl out from a center point.
6. Contrast – the use of big and small elements, black and white text, squares, and circles.
7. Adds emphasis to important information
8. Adds appeal
9. Proximity/Unity – placing elements near each other to demonstrate their relationship to each other.
10. Repetition/Consistency – repeating some aspect of the design throughout the entire layout.
11. Aids navigation
12. Improves readability
13. White Space – negative or empty space between text and/or graphics.
14. Gives a design breathing room.
15. Smoothes transition between elements.

B.Rule of Thirds - visually dividing the page into thirds vertically and/or horizontally and placing the most important elements within those thirds

1. Optical Center - the spot that the eye sees when it first encounters a page. It is slightly above and to the right of the mathematical center of the page.
2. Z-pattern –the visual path the eye follows when looking at a printed page.

C.Five Elements of Design

1. Lines – used to organize information, simulate movement, lead the eyes and enhance a design.
2. Shapes – used to enhance a publication and convey meaning.
3. Mass – used to define size, space, and create an impact.
4. Texture – used to convey a “visual” sense of feel.

1. Color – used to evoke emotion and action; adds or detracts attention.

1. Value – a subset of color; lightness or darkness of an object, regardless of color.

i.Increases or decreases contrast – the greater the difference between an object and its background, the greater the contrast.

ii.Creates movement – objects of the same value create a static design with all objects equal in visual importance. Introducing varying values gives the page a more dynamic appearance and creates a logical sequence among objects. Some stand out while others recede.

iii.Leads the eye – by creating a pattern of dark to light values, even when the objects are equal in shape and size, it leads the eye in the direction of dark to light.

1. Color Concepts

i.Color wheel – a chart used to show the relationship between colors. Can be used to pick colors that will look good together in desktop publishing.

ii.Complimentary colors – colors that look good together to create a more visually appealing publication.

iii.Creating Color

(a)On Monitors – colors are created by mixing varying degrees of red, green and blue light.

(i)Referred to as RGB (red, green, blue)

(ii)Expressed as hexadecimals

(b)On Printers - in the four-color printing process, color is created by layering cyan, magenta, yellow and black ink.

(i)Referred to as CMYK (cyan, magenta, yellow and black)

(ii)Expressed as percentages

(c)Color Matching – the process of matching the colors produced on the computer screen to the colors that can be printed on paper using ink to ensure the printed publication looks as much like the on-screen publication as possible.

iv.Color Terms

(a)Hue – a color

(b)Tint – a hue plus white

(c)Shade – a hue plus black

(d)Saturation - the amount of the hue used.

(e)Emotions evoked by colors

(i)Calming colors – cool colors (blue, green and violet)

(ii)Exciting colors – warm colors (red, orange and yellow)

(iii)Neutral colors - beige, ivory, taupe, black, gray, and white

Instructional Activities and Resources

• Facilitate discussion on Principles of Design to assess students’ memory from Computer Applications I.
• Inform students that the principles of design will be expanded in this objective with illustrations and in-depth explanations.
• Distribute the 1.02Principles of Design in Desktop Publishing and the 1.02Rule of Thirds, Optical Center, Z-Pattern and Grids Graphic Organizers to students for their use in taking notes while viewing and discussing the 1.02Principles of Design PowerPoint.
• Note: The Rule of Thirds, Visual Center, Grids are included in the Principles of Design PowerPoint, but are not part of the six principles. They were included here because they were only two slides, but they are separate concepts.

• 1.02 Principles of Design Graphic Organizer
• 1.02 Rule of Thirds, VisualCenter, Grids Graphic Organizer
• 1.02 Principles of Design PowerPoint

• Prior to the next activity, get a long sheet of bulletin board paper and affix it to a wall in the classroom. Students will use the paper to display a collection of design samples. In some activities the students will work independently and in others they will work as a team. A caption should be attached to each sample that describes the object and identifies the student or team.
• From this point forward, the bulletin board paper will be referred to as the Community Board.
• Gather a supply of magazines, newspapers, flyers, brochures, and any other publications.

• Scissors
• Glue
• Logos, brochures, business cards, letterhead, advertisements, flyers, magazines, newspapers and any other publications

• Divide students into teams of three or less.
• Instruct each team to find illustrations of each design principle and The Rule of Thirds, Optical Center and the Z-Pattern and display them on the Community Board.
• Invite each team to share their examples with the class.
• Discuss the illustrations and assist students in identifying design principles from a variety of media.
• Note: Keep the supply of publications handy throughout this objective.

• Scissors
• Glue
• Logos, brochures, business cards, letterhead, advertisements, flyers, magazines, newspapers and any other publications

• Students should remain in their assigned teams (from Activity 3).
• View the 1.02 Design Elements PowerPoint with students and discuss the design elements. Distribute the 1.02 Elements of Design activity and instruct students to use the supply of publications to complete the activity.
• Upon completion of the activity, highlight good examples of design elements from each.
• Note: Students will post work to the Community Board in this activity.

• Community Board
• Scissors
• Glue
• Logos, brochures, business cards, letterhead, advertisements, flyers, magazines, newspapers and any other publications
• 1.02 Design Elements PowerPoint
• 1.02 Elements of Design activity

• Note: Work through each step in this activity prior to assigning it to students.
• This activity requires students to visit several different links. Read the instructions and the lessons before delivering the assignment to the class. Determine a timeline for completion and interim progress checks.
• Distribute 1.02 In-Depth with Colorto students.
• Students will continue study of color online at
• Detailed instructions are listed on the activity sheet.

• 1.02 In Depth with Color activity

• Inform the students that they will demonstrate their knowledge of Principles of Design, Rule of Thirds, and Design Elements in a culmination project of their choice.
• Assign students to teams and review and facilitate the steps (listed below) that will lead to successful completion of the project within a timeframe allotted by the teacher.
• Note: Determine the amount of time that will be allotted to this project and, if needed, the length and depth of any documents.
• Each team must:
• Plan how they will document their work, such as in scrapbook format, through a video or PowerPoint, through a poster, or by other means.
• Plan how they will present their work to the class, such as through an oral presentation, a skit, a newsletter, or by other means.
• Develop an action plan which assigns responsibilities, quality measures, and deadlines to each team member.
• Develop a rubric that will accurately measure the quality and comprehensiveness of the project.
• Develop a means to assess student knowledge. Each team can develop a quiz, jeopardy or other type of competition, or a scavenger hunt, etc. to assess the knowledge of the other class members.

6412 Multimedia and Webpage DesignSummer 2010Unit A Page 1

Instructional Support Materials

6412 Multimedia and Webpage DesignSummer 2010Unit A Page 1

1.02Rule of Thirds, Optical Center, Z-Pattern and Grids

Directions: Visualize and add notes to describe the Rule of Thirds, OpticalCenter, Z-Pattern and Grids

6412 Multimedia and Webpage DesignSummer 2010Unit A Page 1

1.02Rule of Thirds, Optical Center, Z-Patternand Grids Key (Answers May Vary)

Directions: Visualize and add notes to describe the Rule of Thirds, Optical Center, Z-Pattern and Grids

6412 Multimedia and Webpage DesignSummer 2010Unit A Page 1

1.02Elements of Design

1. Group Assignment: Select one example of each line description below from magazines, periodicals, newspapers, brochures, flyers, and other publications.

• Horizontal
• Vertical
• Diagonal
• Curved or squiggly
• Patterned
• Textured

Cut and paste the examples on the Community Board and write a brief caption below each example describing how the line enhances the message of the publication.

• Do the lines organize?
• Do the lines make the reader look from left to right or top to bottom?
• What else do the lines do?

2.Group Assignment: Select one example of each shape from the list below from magazines, periodicals, newspapers, brochures, flyers, and other publications.

• Circle
• Triangle
• Asymmetrical
• Square

Cut and paste the examples on the Community Board and write a brief caption below each example describing how the shape enhances the message of the publication.

• Do the shapes organize?
• Do the shapes send a message?
• What else do the lines do?

3.Group Assignment: Select four examples of mass from the list below from magazines, periodicals, newspapers, brochures, flyers, and other publications.

• Mass that appears large because it is

• Mass that appears small because it is
• Mass that appears larger than it really is
• Mass that appears smaller than it really is

Cut and paste the examples on the Community Board and write a brief caption below each example describing how the mass affects the publication.

4.Group Assignment: Select four different examples of mass from magazines, periodicals, newspapers, brochures, flyers, and other publications.

• Background texture
• Texture applied to text
• Texture applied to shapes
• Synthetic texture, such as denim, leather, fur
• Environmental texture, such as grass, water, earth

Cut and paste the examples on the Community Board and write a brief caption below each example describing how the texture affects the publication.

5.Group Assignment: Select four examples of color from the list below from magazines, periodicals, newspapers, brochures, flyers, and other publications.

• Black and white colors
• Use of value
• Vibrant colors
• Washed out colors

Cut and paste the examples on the Community Board and write a brief caption below each example describing how the use of color and value affect the publication.

6412 Multimedia and Webpage DesignSummer 2010Unit A Page 1

1.02In-Depth with Color

Directions: For this activity, you will use the Internet to examine color in-depth. Go to answer the questions listed below.

1. Read the introduction to color.
   

1. Enter the link forLesson 1: Value
   

1. List and describe ways in which value is used in desktop publishing

1. Visit the link below on theTechnical Aspects of Color.
   

1. Click on the link for Color Wheels
   

1. Enter the link below forRGB Color & CMYK
   

1. Hexadecimals
2. Percentages

1. Visit the link below for CMYK Color to answer the following questions.
   

1. Hexadecimals
2. Percentages

1. Saturation
2. Shade
3. Tint
4. Hue

1. White
2. Black
3. Shade
4. Tint

1. White
2. Black
3. Shade
4. Tint

1. Harmonize
2. Contrast
3. Complement
4. Clash

1. Harmonize
2. Contrast
3. Complement
4. Clash

1.02In-Depth with Color Key

Directions: For this activity, you will use to Internet to examine color in depth. Go to the links listed, read the text and answer the questions below.

1. Read the introduction to color.
   

1. Enter the link forLesson 1: Value
   

1. List and describe ways in which value is used in desktop publishing

• Increase/Decrease Contrast - the greater the difference in value between an object and its background, the greater the contrast.
• Create Movement –darker elements stand out while lighter elements recede.
• Lead the Eye – The eye follows value from the dark color to the light color.

1. Visit the link below on theTechnical Aspects of Color.
   

1. Click on the link for Color Wheels
   

1. Enter the link below forRGB & CMYK
   

1. Hexadecimals
2. Percentages

1. Visit the link below to answer the following question.
   

1. Hexadecimals
2. Percentages (of each color)

1. Saturation
2. Shade
3. Tint
4. Hue

1. White
2. Black
3. Shade
4. Tint

1. White
2. Black
3. Shade
4. Tint

1. Harmonize
2. Contrast
3. Complement
4. Clash

1. Harmonize
2. Contrast
3. Complement
4. Clash

6412 Multimedia and Webpage DesignSummer 2010Unit A Page 1