1 Graphics and Desktop PublishingMultimedia and Webpage Design Essential Standard 1.00

2 WELCOME! Sign in. Plug in to the power strip.Connect to the wireless network. Connect to hsia Go to the Internet. Accept the user agreement and Access the Web Check to see if Windows has requested a location and choose “Public Network.” Follow the directions for the next slide.

3 Preparation On your flash drive, in the Day One: 200 Resources: Free Software: Flash Drive folder, find the installation file: paint.net. Install the programs on your computer. Go to the website: Create an account. Record your login information on this slide. 3

4 Topics for Multimedia and Webpage Design (formerly Computer Applications II)RBT Review Task Analysis Typefaces and Fonts Design Principles and Elements Desktop Publishing Graphic Image Design Test Preparation

5 Graphics and Desktop PublishingWorkshop Goals: De-Mystify the Content Provide Basic Understanding Point to Teaching & Tech Tools Offer Strategies for Helping Students

6 Professional Learning CommunityOpen an Internet browser and go to Click on the link EXPLORNET MOODLE. If you have joined this site before, use your firstname.lastname and the password you chose. If this is your first time here, login using your firstname.lastname . Your password is changeme. Change your password and make a note of it, so that you can login in the future. Click on Multimedia and Web Design 1 – Fonts, Graphics, Desktop Publishing or MaWD 1. Give teachers time to login. Explain the purpose of the website. Review the links on the website: Guide teachers to join the LearnNC Moodle. Click on teacher central links and explain its use. Mention other links, explaining that we will look at those during training. Point out participants area with blogs and information.

7 Teacher Central Page Links used in this workshop are compiled online with other useful links at our Teacher Central website! Give teachers time to login. Explain the purpose of the website. Review the links on the website: Click on teacher central links and explain its use. Click on parking lot wiki Mention other links, explaining that we will look at those during training. Point out participants area with blogs and information. Mention the powerpoint explaining Moodle in ExplorNet PowerPoints folder on drive. Go to Click on the link MAWD LINKS.

8 On Your Flash Drive Give teachers time to login. Explain the purpose of the website. Review the links on the website: Click on teacher central links and explain its use. Click on parking lot wiki Mention other links, explaining that we will look at those during training. Point out participants area with blogs and information. Mention the powerpoint explaining Moodle in ExplorNet PowerPoints folder on drive. Create a new folder on your flash drive and name it with your first name and last name. This will help you to identify your drive if you misplace it. Use caution in sharing flash drives.

9 Introduction (cont.) “The sequence of the indicators should not be changed. “The course weight of the essential standard and corresponding indicators should not be changed.

10 Adapted CTE Course Blueprint

11 Graphics and Desktop Publishing BY01.00 Understand desktop publishing.50% BY01.00 Understand desktop publishing. 23% 1.01 Investigate typefaces and fonts. (4%) 1.02 Investigate design principles and elements. (7%) 1.03 Demonstrate desktop publishing. (12%) BY02.00 Understand graphic image design, computer animation, and virtual reality. 27% 2.01 Investigate graphic image design. (11%) 2.02 Develop computer animations. (10%) 2.03 Explore virtual reality design and use. (6%) B Multimedia and Webpage Design BY03.00 Understand multimedia production. 25% 3.01 Explore multimedia systems and elements. (7%) 3.02 Develop multimedia presentations. (18%) BY04.00 Understand webpage design. 4.01 Examine webpage development and design. (6%) 4.02 Develop webpages using various layouts and technologies. (19%)

12

13 Levels of Thinking and Doing Bloom’s Taxonomy Revised → Clear VerbsCreating Designing, constructing, planning, producing, inventing, Evaluating Checking, critiquing, judging, experimenting, detecting, monitoring Analyzing Comparing, organizing, deconstruction, outlining, integrating Applying Implementing, using, solving, performing Understanding Interpreting, summarizing, classifying, comparing, explaining, defining Remembering Recognizing, listing, describing, retrieving, locating, labeling,

14 Remembering The learner is able to recall, restate and remember learned information. Recognizing Listing Describing Identifying Retrieving Naming Locating Finding   Can you recall information?

15 Understanding The learner grasps the meaning of information by interpreting and translating what has been learned. Interpreting Exemplifying Summarizing Inferring Paraphrasing Classifying Comparing Explaining   Can you explain ideas or concepts?

16 Task Analysis A task analysis is a sequenced list of steps toward a clear learning goal. Begin with a clear learning goal: “TSWBAT apply knowledge of graphic image design to add images to desktop publishing projects.” List essential sub-learnings. Sequence the essential sub-learnings.

17 Essential Standards 1.00 and 2.011. Typefaces and Fonts 2. Design Principles and Elements 3. Desktop Publishing 4. Graphic Image Design

18 “I hear and I forget. I see and I remember. I do and I understand.”Chinese Proverb “I hear and I forget. I see and I remember. I do and I understand.”

19 1.01 Investigate Typefaces and FontsClear learning goal: The learner will be able to explain the use of typefaces and fonts.

20 Essential Standard 1.01 Typefaces and Fonts Based on formal assessments, 46% of students mastered this standard.

21 Fair Use Guidelines Focus on copyright and fair use guidelines.TC link: 21

22 The Target Audience Publications are created to convey a message to the intended audience, called the target audience. The target audience will determine the: language used. typefaces used. colors used. graphics used. Typography refers to the style and arrangement or appearance of text. 2.01 Investigate typefaces and fonts.

23 Multimedia & Webpage Design 1.01 Investigate typefaces and fonts.Typography Multimedia & Webpage Design 1.01 Investigate typefaces and fonts.

24 Desktop Publishing Involves using a desktop computer and publishing software to create documents for publication. Some examples of Desktop publications include: Flyers Newsletters Magazine and Newspaper Articles Advertisements Proposals Brochures Business Correspondence Letterhead Business cards Envelopes

25 The Target Audience Publications are created to convey a message to the intended audience, called the target audience. The target audience will determine the: Language used. Typefaces used. Colors used. Graphics used.

26 Typography Many publications will contain a large amount of text to deliver the message. It is important to understand a few basic guidelines for working with text and typography. Typography refers to the design of the characters and the way they are presented on the page.

27 Typefaces, Fonts, and Font FamiliesA typeface is the basic design of a character. Each typeface has a design for each letter of the alphabet, numbers, punctuation symbols and may contain other symbols. Example: Arial ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Click here for more examples of typefaces. URL:

28 Typeface Categories Typefaces can be divided into four main categories. Serif Sans Serif Script Decorative/Ornamental

29 Serif Typefaces Have attributes or strokes at the tips of the letters called serifs. Examples:  Bodoni  Courier  Goudy  Times New Roman Used for body text in printed publications.  Business correspondence  Book text Magazine article text  Newspaper text Newsletter text Recommended sizes for body text are 10 to 12 points. k Teachers: You may want to explain that serifs make it easier for the reader’s eye to recognize the difference between letters more quickly. Thus, serif typefaces are better suited for body text of printed material. However, sans serif fonts are easier to read on monitors so webpages will use sans serif typefaces for body text.

30 Serif Typefaces

31 Sans Serif Typefaces There are no attributes (serifs) at the tips of the letters. Examples: Arial  Gill Sans Berlin Sans  Verdana Used for very large or very small text and for digital display. Webpages  On-screen display Headings  Tables Captions  Headlines k

32 Serif vs Sans Serif TypefacesThe ends of each character do not have attributes (serifs)

33 Decorative/Ornamental TypefacesDesigned strictly to catch the eye Should be used sparingly. Can be hard to read. Examples Chiller  Broadway Webdings  engravers MT Used for decoration. Headlines on flyers or advertisements. Webdings can be used for symbols in logos.

34 Script Typefaces French ScriptAppear to have been written by hand with a calligraphy pen or brush Should never be used to key in all caps. Example French Script Uses Formal Invitations Place cards Poetry Announcements

35 Fonts It’s easier to understand fonts if you begin with the original definition of a font. Before desktop publishing, people called ‘typesetters’ set the type by hand using moveable type. Each character was a separate block of metal. The letters were “set” on the layout to form the text. Each typeface had a complete set of metal characters for each size, weight, etc. Click here for an image on Wikipedia URL for the link: Just for fun: You can have your students try to read what it says and figure out the meaning.

36 Fonts Continued Each different size or weight required a completely separate set of metal characters. Each metal set of characters was kept in its own drawer and was called a type font. So a font is the specific size, weight and style applied to a typeface. Examples: Arial, bold, 12 point Arial, italic, 14 point Arial, 10 point

37 Font Style The font style refers to the slant, weight and special effects applied to the text. Examples: Bold Italic Underline Shadow Outline Small Caps

38 Font Families A font family is the different sizes, weights and variations of a typeface. Examples: Arial Arial Black Arial Narrow Arial Rounded MT Bold

39 Design your own font. Watch the video tutorial. Login to FontStruct.Create the letters in your name. Use the snipping tool to save an image of ONE of your letters. How could you use this idea with your students? Students might be assigned to create their name in each of the four font types.

40 Activity 2 Form a group of 3. Assign one person to each font website:(View the video tutorial, first.) Create an account, if required. Review the assigned website. Discuss the value/connection of your website to the curriculum with your group. Record your group vote for each website as a “Yes” (use it) or a “No” (don’t use it) 40

41 Essential Standard 1.01 Typefaces and Fonts Based on formal assessments, 46% of students mastered this standard.

42 Typeface Spacing Monospace Proportional Leading Kerning Tracking

43 Monospaced Typefaces Each letter takes up the same amount of space regardless of the letter size. Advantages Easier to see thin punctuation marks. Similar characters look more different. If limited to a certain number of characters per line, each line will look alike. Used often in computer programming and biology Courier is monospaced

44 Proportional TypefacesThe amount of space each character takes up is adjusted to the width of that character. Therefore, an i is not as wide as an m and receives less space. Advantages Does not take up as much space as monospaced typefaces. Easier to read. Used in most documents and publications. Times New Roman is proportional

45 Proportional vs. Monospace

46 Leading The vertical spacing between lines of text.Pronounced “led-ding.” In most software programs, it is referred to as line spacing. In Desktop Publishing, it is still referred to as leading because typesetters used long pieces of lead between the moveable type to create blank lines between the text. Teacher note: A good website to investigate for more information for yourself or for your students:

47 Leading Continued If there were no space between the lines of text, the letters would touch the lines above and below them and would be extremely difficult to read. Used to: Slightly increase or decrease the length of a column of text so that it is even with an adjacent column. To make a block of text fit in a space that is larger or smaller than the text block.

48 Leading Look in the nook to find the book that you borrowed to read.Leading (vertical spacing between lines of text)

49 Leading Leading (which rhymes with "sledding") is similar to kerning and scaling except that it applies to line spacing instead of character spacing. When you're reading something, the spaces between the line you're reading and the lines above and below that line are supposed to guide your eyes from one line to the next. If that space isn't considered carefully, it's hard to keep track of where you are. That's where leading comes in. You can adjust leading one sentence at a time, but it's more common to adjust an entire paragraph so that it's uniform.

50 Kerning Horizontal spacing between pairs of lettersUsed to add or subtract space between pairs of letters to create a more visually appealing and readable text. BOOK – before kerning. – after kerning the O’s. Kerning is most often used with text which has been enlarged since this tends to create too much space between individual letters.

51 Kerning in Publisher To change the spacing between two specific text characters, you need to adjust kerning (kerning: The adjustment of the spacing between two characters to create the appearance of even spacing, fit text to a given space, and adjust line breaks.). Select the two characters you want to change. On the Format menu, click Character Spacing. Under Kerning, click Expand or Condense to adjust spacing, and then enter an amount between 0 points and 600 points in the By this amount box. Change the point size at which automatic kerning begins

52 Tracking Horizontal spacing between all of characters in a large block of text. Makes a block of text seem more open or more dense. Examples

53 Tracking Continued Makes a block of text more open and airy or more dense. Used to expand or contract a block of text for the purpose of aligning two columns.

54 Tracking in Publisher To change the spacing between all text characters, you need to adjust tracking. Tracking is available only if you are working on a print publication. Select the paragraphs you want to change. On the Format menu, click Character Spacing. Under Tracking, do one of the following: To adjust tracking automatically, click one of the preset spacing options. To adjust tracking manually, click Custom, and then enter a percentage between 0.1% and 600% in the By this amount box.

55 Kerning, Leading, TrackingLOOK in the nook to find the book that you borrowed to read. Kerning (horizontal spacing between pairs of letters) Leading (vertical spacing between lines of text) Tracking (horizontal spacing between all characters in a large block of text.

56 Glossary Sites www.typenow.net/glossary.htm

57 Useful Sites www.identifont.com www.typeculture.com www.typographi.com

58 1.02 Investigate Design Principles/ElementsClear learning goal: The learner will be able to explain design principles and elements.

59 1.02 Investigate design principles and elements.Principles of Design 1.02 Investigate design principles and elements.

60 The Six Principles of DesignAlignment Balance Contrast Proximity/Unity Repetition/Consistency White space

61 Alignment Alignment of elements in a pattern or grid.Visual relationship between all of the elements in a layout, even if the elements are far apart. View an example at

62 Symmetrical Balance Elements of the design are centered or evenly divided both vertically and horizontally View examples at:

63 Asymmetrical Balance Off-center alignment created with an odd or mismatched number of elements.

64 Radial Balance With radial designs the elements radiate from or swirl around in a circular or spiral path.

65 Contrast The use of big and small elements, black and white text, squares and circles Adds emphasis to important information Adds appeal View an example at

66 Proximity/Unity Grouping elements to demonstrate their relationship to each other. Makes it easier for the reader to understand the relationships between elements. Examples Captions placed with the pictures they describe. Images placed near the text they are depicting. View an example at

67 Repetition/ConsistencyRepeat some aspect of the design throughout the entire layout. Aids navigation Improves readability Examples Keying all side headings in the same typeface and color. Using the same formatting for all bulleted lists throughout the publication. View an example at Teacher Note: Tell students to remember that their main purpose is to get their message across to their audience when designing desktop publications. Using repetition makes it easy for the reader to know what to expect and understand how the information is arranged in the publication.

68 White Space Negative or space empty of any colorGives a design breathing room Smoothes transition between elements View an example at Teacher Note: White space also includes the spacing between words, characters, lines, margins, etc. Emphasize the importance of white space to make a publication easy to read. More white space is needed for publications that are designed to be read at a distance such as flyers and posters.

69 Rule of Thirds and GridsRule of Thirds – Using imaginary grids to visually divide the page into thirds vertically and/or horizontally and placing most important elements within those thirds. View an example at 1 2 3 Rule of Thirds Grids Teacher Note: These concepts are used frequently in advertisements, especially magazine advertisements. Also, the Rule of Thirds is not really a rule. It is really just a suggestion. Desktop publishing publications are often divided into thirds because it is a common design that is very pleasing to the eye. It has been used so often that it has been given the name, Rule of Thirds.

70 Optical Center and Z-PatternOptical Center – the spot the eye first sees when it encounters a page. It is slightly above and to the right of the actual center of the page. Place the most important design element here. Z-Pattern – the pattern eye follows when scanning a page. Place important elements along the Z-pattern. Teacher Note: Look through magazines to find advertisements that illustrate the Rule of Thirds, Optical Center and Z-pattern and use these to illustrate these concepts to your students. 1 2 3 Z Optical Center Z-Pattern

71 Elements of Design 1.02 Investigate Design Principles and Elements

72 Lines as Design ElementsLines are a powerful but simple method of enhancing a publication. (link to about.com for line examples) Lines can be of any size, shape, texture or pattern and may be placed in any direction. Curves, dot leaders and arrows are considered lines! Lines can be used to: Organize information such as tables or catalogs. Simulate movement. Connect pieces of information or graphics. Separate one part of the layout from another. Provide texture. Convey mood or emotion. Define shapes (outline). Provide emphasis. Provide a frame around a box or image. About.com line examples link url =

73 Lines Can Organize InformationApple Grapes Oranges Red Delicious White Navel Fuji Red Hamlin

74 Lines Can Create Movement

75 Lines Can Connect Leaves Speaker X’s Post Hat Box FenceTeacher Note: Lines are being used to connect the terms to the parts of the graphic being described by the text.

76 Lines Can Separate Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea deserunt mollit anim id est laborum. LOREM IPSUM Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem Lorem ipsum t occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. A line is being used to separate the columns of text in the example. Link to about.com for an additional example of lines used to separate. About.com lines to separate link url =

77 Lines Can Provide TextureLines can be used to create texture. Link to about.com for more examples of lines for texture. Text with Texture About.com lines as texture link url =

78 Lines Can Convey a Mood or Emotion

79 Lines Can Define Shapes

80 Lines Can Provide EmphasisMagazine Article Title Magazine Article Title Teacher Note: The dark blue background behind the second example is considered a line since it is a solid color. Newspaper Title

81 Lines Can Provide a Frame

82 Shapes as Design Elements:Shapes are often used in logos but can be used in many different ways. Shapes can be: Geometric shapes – triangles, squares, circles. Natural shapes – leaves, flower petals. Abstract shapes – a blend of geometric and natural shapes. Used to: Highlight Information Organize or Separate Information Make the Design More Interesting

83 Mass as a Design ElementMass refers to the size, space and “heaviness” of an object. Every object, or element, has mass whether it is a line, shape, text or graphics. Darker colors are visually heavier than lighter colors. Mass Mass Mass

84 Texture as a Design ElementTexture is an effect applied to a background or as the fill for an object. It can be drawn or be an actual image. Texture can refer to visual texture (how it looks) and the physical texture of the paper. Different paper textures will make colors look different. About.com paper texture link url = About.com visual texture link url = Link to about.com for more about paper textures. Link to about.com for more about visual textures.

85 Color as a Design ElementColor can be used to: Evoke Emotion Set a tone or mood for the publication. Color Themes (Link to about.com for color meanings) Cool Colors - colors with blue in them. Considered calming. Warm Colors – colors with red in them. Considered exciting. Neutral Colors – beige, ivory, black, gray and white Add or Detract Attention - make design elements more or less noticeable. Create Movement - make some elements stand out while others appear to recede. Lead the Eye - lead the reader’s eye to certain elements in the design.

86 Color as a Design ElementColor is one of the most important elements of design. It evokes emotion and action and can attract or detract attention. It is hard to get accurate color when creating publications on the computer because different devices create color in different ways. The two main devices we will look at are: Printers Monitors Click on the link to a website about color. This interactive website allows students to explore information about color and its symbolism. Students can view animations describing the colors. They can also draw illustrations with color and take a quiz about color symbolism.

87 Color Concepts

88 Complimentary colors - colors that look good when used together.Color palette - a chart used to choose colors. It can be used to pick colors that will look good together in desktop publishing publications. Complimentary colors - colors that look good when used together. About.com link url =

89 Creating Color on MonitorsComputer monitors and televisions show color as light. The colors are a mixture of red, green and blue light, referred to as RGB color. The amount of red, green, and blue are shown in different amounts in different “spots” on the monitor to produce an image. Link to RGB example on Wikipedia. Look at color palette and then experiment with the different combinations of red, green and blue. Wikipedia RGB link url =

90 Color on Monitors RGB – red, green, blue Each color is assigned a number between 0 and 255 to show how much of that color to add. As each color is added, the mixed color becomes lighter. When all three are set to 255, the mixed color is white. RGB colors are expressed as hexadecimal numbers when used on web pages. Both numbers below are the same RGB color FF9600 (hexadecimal)

91 Hexadecimal Number ChartThe hexadecimal number: 255 is equivalent to FF. “F” represents the number “15.” “Tens” place in base 16 equals 15 x 16 (240). “F” represents “ones” place which, in base 16, equals 1 x 15 (15) = 255.

92 Creating Color on PrintersPrinters cannot print with light, they must use ink or toner. Printers and printing presses use a color method called CMYK. It stands for Cyan, Magenta, Yellow and Black They are based on percentages. If each is set to 100%, the color is black. As each percentage for each color is subtracted, the color changes. If all colors are subtracted, or set to 0%, the color is white. Link to Wikipedia for CMYK color. Wikipedia link url =

93 Color Matching Since color is displayed differently on monitors than it is printed with printers, color matching must be used. This is the process of matching the printed ink color as closely as possible to the color displayed on the monitor. The goal is to make the printed publication as close to the one on the monitor as possible.

94 Color Terms Hue – a color. Shade – a hue + black.CMYK and RGB colors can be made darker by adding black. The original color is not changed, it just becomes darker. Tint – a hue + white. CMYK and RGB colors can be made lighter by adding white. The original color is not changed, it just becomes lighter. Saturation – the amount of the hue used. Teacher Note: Example of saturation here: Another excellent example (and also good information) can be found here: This site has very good pictures to show the relation of the terms to each other.

95 Web Links http://desktoppub.about.com/od/elements/l/aa_color.htm Change to Publishing3,4,5,7,9 for others

96 Newsletter Analysis Open the newsletter analysis activity in the handouts folder on the flash drive. Work in a group to complete the activity.

97 1.03 Demonstrate Desktop PublishingClear learning goal: The learner will be able to demonstrate proficiency with desktop publishing.

98 Essential Standard 1.03 Desktop Publishing Based on formal assessments, 60% of students mastered this standard.

99 1.03 Demonstrate desktop publishing.Document Design 1.03 Demonstrate desktop publishing.

100 An Example of a Master PageMaster pages are good places to create headers and footers, insert page numbers, place a logo or graphic that appears on all pages. Master page icon In this example, a footer is being created that will display on every page.

101 Purpose of a Master PageMaintains layout consistency Includes items common to every page Most desktop publishing programs allow a left and a right master page for facing page layouts. Some desktop publishing programs allow the definition of several master pages that can be applied to specific pages in the document.

102 Prototype A prototype, or mockup, is an example of how the final document should appear. Created using software or paper and pencil. Also called a “dummy” page.

103 Format ConsiderationsSelection of the document sizes and layouts that will be used in a project Layouts and documents may include one or more layouts for the following publications: Poster Letterhead Flyer Business card Newsletter Program Invitation Tri-fold or double-fold brochure

104 Layout of a Desktop Publishing Document1.03 Demonstrate desktop publishing.

105 Margin Guides Margin guides are lines that indicate the space between the edge of the page and the document contents Margin Guides

106 Column Guides Column Guides Gutters Column guides control the flow of text within columns and keep text out of the gutter (space between columns) Sample newsletter template from Microsoft

107 Ruler Guides Ruler guides are used to align objects consistentlyHorizontal and Vertical Ruler Guides Ruler guides are used to align objects consistently

108 Grids Grids are guidelines used to ensure consistent placement of logos, graphics, and other objects throughout multiple documents, such as a print media kit Grids

109 Template A standard pre-formatted layout which may contain a color scheme, font scheme, pictures, and preset margins.

110 Page Size Publications can vary in sizeDifferent purposes require different paper sizes: Business card Brochure Poster Invitation

111 1.03 Demonstrate desktop publishing.DTP Design Features 1.03 Demonstrate desktop publishing.

112 Special Features of PublicationsArt Balloon Bleed Caption Dropped Cap Running Headlines/Footers Jumpline Pull Quote Rules Sidebar Text Box Watermark End mark Reverse text

113 Art Illustrations and photographs used to convey meaning and add appeal

114 Balloon A circle or bubble enclosing copy in an illustrationOften used in cartoons ???

115 Bleed A print effect in which a color, object or image appears to run off the edge of a page.

116 Caption Brief descriptive text accompanying an image or chart.Can be in the form of a textbox or balloon.

117 Dropped Cap An enlarged character at the beginning of a paragraphDrops below the line of text Grabs the reader’s attention

118 Running Headlines/FootersRunning text at the top and/or bottom of a document. Also called headers. Used for organization, page numbers, date, author, running title, etc.

119 Jumpline Line which tells readers which page to refer to for the continuation of an article. Continued on B3

120 Pull Quote Placement Between columns with word wrap Alone in a column surrounded by white space Right justified in the last column Beneath the headline as a deck Quotation taken directly from the body of the article. Used to draw attention. Often made larger than body text.

121 Rules Horizontal or vertical lines that can be applied to paragraphs, text boxes, and objects in a publication.

122 Sidebar Square box filled with information related to the main story or to a completely separate article.

123 Text Box Container for text that can be placed and formatted independently of other text. Have borders that display when selected. Many have sizing handles that appear around the border to resize the box if needed. Some have a rotation handle that can be used to rotate the box

124 Watermark A semitransparent image in the background of printed material

125 Endmark A symbol that indicates the end of an article or news itemSymbols vary 

126 Reverse Text Text that is the opposite to what the reader is accustomed. Light text on a dark background. Often used in headlines to draw attention. Use sparingly!

127 Analyze DTP Elements… Ads 127

128 Analyze DTP Elements… Masthead Balloon Deck 128

129 Analyze DTP Elements… Varied Elements 129

130 Analyze DTP Elements… Nameplate Kicker Varied ElementsTable of Contents 130

131 Analyze DTP Elements… Kerning Fonts Drop Cap Reverse Text Watermark131

132 Activity 4 Share the “Diagram of a Page” parts as an example for students. Students can use the handout for reference while they locate examples from newspapers and magazines. Then they can: Cut and paste examples onto construction paper and label them. Post examples of each part on poster board around the room. BUT be sure to discuss their findings with the students. Analyze the typefaces, effectiveness, etc.

133 2.01 Investigate Graphic Image DesignClear learning goal: The learner will be able to edit graphic images for a variety of purposes.

134 Essential Standard 2.01 Graphic Image Design Based on formal assessments, 53% of students mastered this standard. Voice Thread tutorial:

135 2.01 Investigate graphic image design.Graphic Formats

136 Graphics Graphics - anything on the page that is not actual text, from simple line drawings to fully active images found on the World Wide Web. There are many different graphic file formats. The format you choose depends on several factors. Chart Buttons Photograph

137 Factors that Affect Graphic FormatColor depth Compression Portability Transparency

138 Color Depth The number of colors per pixel that can be contained in an image. Most graphics editing programs will allow you to set the color depth for your image. Different graphic formats contain different numbers of colors per pixel. Examples: 1-bit Color 2 Colors Per Pixel 8-bit Color 256 Colors Per Pixel 16-bit Color 65.5 Thousand Colors Per Pixel 24-bit Color 16.7 Million Colors Per Pixel Teachers: Color Depth here refers to the number of colors that can be contained in the image. It is not referring to the number of colors which can be displayed on a computer monitor. Just for Fun (supplemental, not required): If you would like to integrate math into your curriculum, you could have students calculate the number of colors which can be displayed in an image based on the bits of color. To calculate this, raise 2 to the power of the color resolution. (Because each bit can contain 2 pieces of data: 1 or 0). So 8-bit color = 2^8 = 256 color possibilities per pixel. 1-bit color = 21 = 2 colors 8-bit color = 28 – 256 colors 16-bit color – 216 = 65.5 thousand colors

139 Compression Compression refers to how an image is saved in order to reduce the file size. The greater the compression, the lower the quality Two types: Lossless Reduces the file size without losing any pixel data Quality is not compromised Lossy Alters and/or eliminates some data The more the image is reduced, the more the quality is degraded Teacher Note: Lossy compression deletes some of the data that it deems unnecessary since the human eye is not very sensitive to changes in color over small distances.

140 Lossless Compression Before Compression After CompressionNotice that there is no difference, no data has been lost. Teacher Note: Lossless compression looks for recurring patterns and replaces each occurrence with an abbreviation. If there isn’t a lot of redundant information, then the file size may not be decreased very much. Lossless compression is used when it is important for the compressed image to look exactly like the original image.

141 Lossy Compression Notice that each time the image is saved, the quality is degraded. In the third image, the image is very pixelated. Teacher Note: In lossy compression, the more times you save the image, the more data that is eliminated and the more the quality of the image is degraded. So every time you save a JPG file, the quality is degraded more. To prevent this, make all of the editing changes in the editing software program’s native format or in a bitmap format before saving the final image as a JPG or other compressed format which uses lossy compression. Original Final compression

142 Portability How easily you can open, modify, and view the files on computers using different operating systems, software and browsers.

143 Transparency Allows the background color of an image to be “eliminated” or made transparent so that the background behind the image can be seen. It makes part of the image invisible, or “see-through.” Teacher Note: To illustrate this concept, hold up a photograph on a piece of paper and hold a piece of colored paper behind it. You cannot see the color through the image. Next, hold up a transparency with a piece of colored paper behind it. The background color does change.

144 Factors to Consider When Choosing a Graphic File FormatWhich file format is best for a particular application? How important is the quality of the image when transferred, copied, or displayed? How important is the speed at which the image transfers or loads? How important is file size? Teacher Note: The answers to these questions will help determine which graphic file type should be used.

145 2.01 Investigate graphic image design.Raster Graphics 2.01 Investigate graphic image design.

146 Raster Graphics Also called bitmap graphicsConsist of grids of tiny dots called pixels Have a fixed resolution and cannot be resized without altering image quality Edited in paint programs Teacher Note: Enlarging raster graphics causes them to become pixelated (you can see the individual blocks of colors that make up the image). Notice the pixels Bitmap enlargement Image source:

147 Common Raster Formats GIF JPEG BMP PNG TIFF 1,5,9,14,19,25Student desk number GIF JPEG BMP PNG TIFF 1,5,9,14,19,25 2, 6,10,15,20 3,7,11,16,21 3,7,12,17,23 4,8,13,18,24

148 Compare/Contrast Raster FormatsDistribute lesson assignments on the handout. Assign students to use the Internet to research their raster format. They will become class experts on their format. Group students who researched the same information and have them work as a group to describe their assigned image format. Next, match pairs of students using the lesson assignments. Have them create a mental model of a comparison/contrast of the two formats. Provide students with art materials so that they can create a display to post on the classroom wall, OR allow them to create an electronic display. These can be used as a reference when making decisions about the type of format that best fits a situation. Explain to students that they should ask an “expert” when they are uncertain of the format to use in a particular situation.

149 Title:: Topic 1: Topic 2:

150 GIF – Graphics Interchange FormatAnimation – Standard format for animation on the Internet. Transparency – yes Lossless compression Colors = 256 (8-bit) Most common format for: Text Clip art, animations, icons, logos Simple diagrams, line drawings Graphics with large blocks of a single color Graphics with transparent areas Images displayed on computer screens and on websites. Animated Gif

151 JPEG – Joint Photographic Experts GroupCommonly Used For: Desktop publishing photographs Photographs and natural artwork Scanned photographs ing photographs Digital camera photographs Animation – No Transparency – No Lossy compression Colors – 16.7 M (24-bit) High quality but larger file size than a GIF Teacher Note: This format is best for images containing many colors or shades of color. Most digital cameras save the images made with the camera as JPEG files on their memory cards.

152 BMP - Bitmap Commonly Used For: Animation – No Transparency – NoEditing raster graphics Creating icons and wallpaper On-screen display Animation – No Transparency – No Uncompressed 256 colors Large file size - not well suited for transfer across the Internet or for print publications Teacher Note: When editing images, all the changes would be made to the BMP file. When the user is satisfied with the final image, they would then save the BMP as a different file format depending on their intended use of the image. (For example, if it will be used on a website, the images would be saved as a compressed file format such as GIF or JPEG.) By on-screen display, this means displayed on the monitor but is referring to images that are on the desktop computer, not from Internet websites. Icons

153 PNG – Portable Network GraphicsAnimation – no Transparency – yes Lossless compression 256 colors Not suited for photographs Commonly Used For: Replacing GIF and TIFF images Online viewing of images See examples at Teacher Note: Browser software or image editing program may require the user to download a plug-in before recognizing or opening the file.

154 TIFF – Tagged Image File FormatAnimation – No Transparency – No Available in compressed and un-compressed formats Compressed is advised Colors – 16 M (24-bit) Commonly Used For: Storage container for faxes and other digital images To store raw bitmap data by some programs and devices such as scanners High resolution printing Desktop Publishing images Teacher Note: TIFF images have very high quality which is ideal for faxes or printed images, such as those used in desktop publishing. However, this results in a large file size so it is not recommended for images that will be viewed over the Internet.

155 2.01 Investigate graphic image design.Vector Graphics 2.01 Investigate graphic image design.

156 Vector Graphics Vector graphics are created from mathematical formulas used to define lines, shapes and curves. Edited in draw programs Shapes can be edited by moving points called nodes (drawing points) Node Handle

157 Examples More examples Original Image Resized ImageShapes that make up the image. Teacher Note: This is a vector graphic (WMF) from the clipart files in Microsoft PowerPoint. Notice that the image does not become pixelated when it is resized, it retains the original quality. To break the image down into its individual parts: Click on the image. On the Draw toolbar, click on Ungroup. Click Yes in the Dialog box. Click Draw, Ungroup again. Now the individual shapes can be moved and manipulated. For a fun activity, allow students to experiment with ungrouping an image and re-coloring it. Be sure they Regroup it before trying to move it, though. If they don’t regroup, they will only move pieces of the image instead of the entire image. More examples

158 Uses of Vector GraphicsGraphics that will be scaled (or resized) Architectural drawings and CAD programs Flow charts Logos that will be scaled (resized) Cartoons and clip art Graphics on websites Because they have very small file sizes. This allows them to load quickly. Fonts and specialized text effects

159 Advantages of Vectors Resolution Independent Small File SizesRegardless of how much the image is enlarged or reduced, the image definition and quality remain the same. Small File Sizes Easily transferred over the Internet.

160 Disadvantages of VectorsLower color quality than raster images. They do not support as many colors. Not good for photographic images. Click to see an example. Teacher Note: Emphasize to the students the much better quality of the raster graphic because it is made up of pixels which can show much more detail than lines. Hyperlink opens this URL:

161 Popular Vector Graphic SoftwareXara Xtreme Adobe Illustrator CorelDraw DXF - AutoCAD Inkscape – open source software similar to Adobe Illustrator.

162 Common Vector File FormatsAI – Adobe Illustrator Industry standard used by developers of vector graphics. Used to create, save, and archive original artwork. EPS – Encapsulated Postscript Meta Graphic Graphics developers generally save a copy of the AI file in EPS format because it can be opened by computers running different operating systems. Preferred format for vendors/clients who use the graphics in publications due to its portability.

163 Meta Graphics Can contain vector and raster data.Shapes in vector graphics can be filled with textures and patterns that are raster graphics. Useful when layering text on top of raster graphics. Examples WMF – Windows Metafile EPS – Encapsulated Postscript Teacher Note: For more information, visit this link:

164 More Vector Formats SVG – Scalable Vector GraphicsStandard format created by W3C Versatile, all-purpose vector format CDR – Corel Draw DXF – AutoCAD WMF – Windows Metafile

165 Activity 7 Show the “Raven Egg” video.Compare to the content required in teaching vector images. Students can create vectors in Vector Editor at aviary.com. Discuss using real world examples of file references; for example, a vector image might be called “river.ai.” Insert clipart, click + to show all file types. In 2010 “Hints for finding images.” In “Paint” look at Save as: to see options.

166 2.01 Investigate graphic image design.Image Resolution 2.01 Investigate graphic image design.

167 Types of Images Clip Art – premade graphics that are available online and in many software packages; may be vector or raster. Photographs – raster images that contain millions of colors. Art Work – computer created drawings or paintings; may be raster or vector. Which type of image is appropriate? Select images that reflect the purpose and theme of the document. Use images to convey meaning and communicate, not to decorate. Teacher Note: The purpose of any business document is to convey a message. Students should make sure any images they use help them to convey their message. If the images do not make the message easier to understand, then they are confusing the message and should not be used.

168 The quality of an image is dependent upon two factors:Resolution Aspect Ratio Aspect Ratio Resolution

169 Image Resolution Resolution is the amount of detail (or data) stored for an image. The higher the resolution, the higher the level of detail in the image. Resolution is measured in PPI, or pixels per inch (the number of pixels contained in one inch). The higher the PPI, the more data that is stored and the better the quality. The higher the PPI, the larger the file size. Image editing software can be used to change the resolution of an image.

170 Image Output Methods Images can be viewed in two ways MonitorsOn a screen or monitor By printing it on paper Monitors The display resolution on monitors is also measured in PPI. Monitors are low resolution devices, most display 72 PPI. Printers Printers create output by placing ink or toner on paper. The resolution at which printers can print is measured in Dots Per Inch (DPI). Printers are high resolution devices in order to print images clearly without pixelation or blurriness. Teacher Note: Graphics displayed on a computer monitor can be set to 72 PPI because most monitors will only display 72 PPI. However, you need higher resolutions for printing images. 150 PPI is sufficient for desktop printing; 300 PPI for high quality printing. However, the larger the PPI, the larger the file size will become.

171 Match The Image Quality To The Delivery Method.Images that will be displayed on a monitor do not need a high resolution. Using a low resolution means smaller file sizes. Images with small file sizes load quicker. Images that will be printed need a higher resolution. Images with 150 PPI are sufficient for printing on most personal desktop printers. Images with 300 PPI are better for printing on more sophisticated printers and will produce higher-quality photographs.

172 Aspect Ratio Aspect Ratio – relationship of an object’s width to its height Aspect Ratio Resolution

173 What’s the answer? An image that is 1”x 1” has a resolution of 100 PPIWhat is the effect on the resolution of enlarging the image to 2”x 2”? What happens to the image quality? How will this image look when printed? Suppose an image has a resolution of 100 pixels per square inch and is 1 inch square. If you resize the image so that it is two inches square, it becomes 50 pixels per inch which reduces the resolution by half and also reduces the image quality. The same number of pixels is still in the image but the display area is larger. Therefore, you will see pixelation because each pixel in the image must cover a larger space on the screen.

174 Resizing a Raster ImageA small image that is enlarged is easily distorted. Pixels are not added, just enlarged It is better to start with a large image and make it smaller File size will remain the same An image must be edited to reduce file size. You will notice that by stretching an image to make it larger, it gets fuzzy and distorted. This is because the computer just makes a really small square (pixel) of data larger or wider to cover more space on the computer screen. The end result is a distorted image. For this reason, it is easier to start with a large image and make it smaller than to try to make a small image larger than its original size. Remember: Compare the two images. If you were to compare the properties of both images, (by right clicking and scrolling down to properties on each image) you would see that it is the same image, but more importantly they have the same file size, although one is a lot bigger than the other.

175 2.01 Investigate graphic image design.Image Effects 2.01 Investigate graphic image design.

176 Cloning Copying part of an image and using it to replace unwanted parts of the image. Examples of use: Remove blemishes on a model’s skin Brush up text on a scanned image

177 Cropping Cutting out part of an imageOriginal image retains same file size Cut image can be saved as new object

178 Filters Used to apply special effects to an image that would be too difficult to create manually. Examples of use: A weaving pattern Liquefying

179 Original Special lighting Warped effect Patchwork Filter Examples

180 Gradient Filling an object/image with a smooth transition from one color to another. Examples Dark blue, gradually becoming white Red fading to orange.

181 Layers Compiling multiple pictures or objects together into one imageLayers can be turned on or off Elements can be colored, layered, and resized individually

182 Layers on Layers off

183 Patterns and Textures Patterns – raster graphics used to fill an object or selection Textures – used to create filters and backgrounds

184 Rotating Pivoting an object around its center point

185 Transparency Removing the background color of a raster image to make it “see-through” Allows image to blend in with its background

186 Explore Graphic EditingUse paint.net to try these different techniques for creating and editing images. Open the document with the font you saved today. Copy and paste the image into paint.net. Add a layer and use drawing tools to trace the font. Delete the background image and edit the tracing. Save in an appropriate format.

187 Explore Graphic Editing (continued)Use paint.net to try these different techniques for creating and editing images. Open a photograph in paint.net. Edit the photograph by following the guidelines on the handout: “Paint.net Curriculum Connections.”

188 × Transparency Skills for Paint Hue Filters Shade Gradient Tint LayersSaturation Value Aspect Ratio Cloning Cropping Filters Gradient Layers Patterns Textures Rotating × Transparency

189 [email protected] [email protected]THANK YOU!