graphics and desktop publishing multimedia and webpage design essential standard 1.00
TRANSCRIPT
Graphics and Desktop Publishing
Multimedia and Webpage DesignEssential Standard 1.00
WELCOME!WELCOME!
Sign in. Plug in to the power strip. Connect to the wireless network.
Connect to hsiaGo to the Internet. Accept the user agreement and Access the WebCheck to see if Windows has requested a
location and choose “Public Network.” Follow the directions for the next slide.
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: http://fontstruct.fontshop.com/. Create an account. Record your login information on this slide.
1. RBT Review2. Task Analysis3. Typefaces and Fonts4. Design Principles and
Elements
Topics for Multimedia and Webpage Design (formerly Computer Applications II)
Topics for Multimedia and Webpage Design (formerly Computer Applications II)
5. Desktop Publishing6. Graphic Image Design7. Test Preparation
Graphics and Desktop Publishing
Workshop Goals: De-Mystify the Content
Provide Basic Understanding
Point to Teaching & Tech Tools
Offer Strategies for Helping Students
Professional Learning Community
Open an Internet browser and go to http://www.explornet.org/teachers/. 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.
Teacher Central Page
Go to http://www.explornet.org/teachers/. Click on the link MAWD LINKS.
Links used in this workshopare compiled online with other useful links at our Teacher Central website!
On Your Flash 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.
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.
6414.11 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.
Adapted CTE Course Blueprint
A Graphics and 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 50%
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. 25%
4.01 Examine webpage development and design. (6%)4.02 Develop webpages using various layouts and technologies. (19%)
Levels of Thinking and DoingLevels of Thinking and DoingBloom’s Taxonomy Bloom’s Taxonomy RevisedRevised
→ → Clear VerbsClear Verbs
Creating 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,
Remembering
The learner is able to recall, restate and remember learned information. Recognizing Listing Describing Identifying Retrieving Naming Locating Finding
Can you recall information?
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?
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.
Essential Standards 1.00 and 2.01
1. Typefaces and Fonts1. Typefaces and Fonts
2. Design Principles and Elements2. Design Principles and Elements
3. Desktop Publishing3. Desktop Publishing
4. Graphic Image Design4. Graphic Image Design
Chinese Proverb
“I hear and I forget.
I see and I remember.
I do and I understand.”
1.01 Investigate Typefaces and Fonts
Clear learning goal: The learner will be able to explain the use of typefaces and fonts.
Clear learning goal: The learner will be able to explain the use of typefaces and fonts.
Essential Standard 1.01
Typefaces and FontsTypefaces and Fonts
Based on formal assessments, 46% of students mastered this standard.
Fair Use Guidelines
Focus on copyright and fair use guidelines.
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.
TypographyMultimedia & Webpage Design
1.01 Investigate typefaces and fonts.
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
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
• 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.
Typefaces, Fonts, and Font Families
• A 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
1234567890
!@#$%^&*()_+-=?,.:”’;• Click here for more examples of typefaces.
Typeface Categories
• Typefaces can be divided into four main categories.– Serif– Sans Serif– Script– Decorative/Ornamental
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
Serif Typefaces
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
Serif vs Sans Serif Typefaces
Sans SerifThe ends of each character do not have attributes (serifs)
Decorative/OrnamentalTypefaces
• Designed 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.
Script Typefaces
• Appear 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
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
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
Font Style
• The font style refers to the slant, weight and special effects applied to the text.
• Examples:
– Bold
– Italic– Underline– ShadowShadow– Outline– Small Caps
Font Families
• A font family is the different sizes, weights and variations of a typeface.
• Examples: Arial
Arial BlackArial NarrowArial Rounded MT
Bold
Design your own font.
1. Watch the video tutorial.
2. Login to FontStruct.
3. Create the letters in your name.
4. Use the snipping tool to save an image of ONE of your letters.
5. How could you use this idea with your students?
Activity 2
1. Form a group of 3.2. Assign one person to each font website:
1. http://www.fontstruct.com (View the video tutorial, first.)
2. http://www.cooltext.com3. http://www.interactimage.com
3. Create an account, if required.4. Review the assigned website.5. Discuss the value/connection of your website
to the curriculum with your group.6. Record your group vote for each website as
a “Yes” (use it) or a “No” (don’t use it)
Essential Standard 1.01
Typefaces and FontsTypefaces and Fonts
Based on formal assessments, 46% of students mastered this standard.
Typeface Spacing
• Monospace
• Proportional
• Leading
• Kerning
• Tracking
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
Proportional Typefaces
• Proportional– The 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
Proportional vs. Monospace
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.
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.
Leading
Look in the nook to find
the book that you
borrowed to read.
Leading (vertical spacing between lines of text)
Leading (vertical spacing between lines of text)
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.
Kerning
• Horizontal spacing between pairs of letters
• Used 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 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
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
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.
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.
Kerning, Leading, Tracking
LOOK 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.
Glossary Sites
• www.typenow.net/glossary.htm
• www.adobe.com/type/topics/glossary.html
• www.typophile.com/wiki/Terminology
Useful Sites
• www.identifont.com
• www.typeculture.com
• www.typographi.com
• www.typophile.com
• http://www.dubbocoll-m.schools.nsw.edu.au/Training/DTP/DTPtypeface.htm
• http://www.x24d.com/blog/?p=34
1.02 Investigate Design Principles/Elements
Clear learning goal: The learner will be able to explain design principles and elements.
Clear learning goal: The learner will be able to explain design principles and elements.
1.02 Investigate design principles and elements.
Principles of Design
The Six Principles of DesignAlignmentBalanceContrastProximity/UnityRepetition/ConsistencyWhite space
AlignmentAlignment 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 http://desktoppub.about.com/od/designprinciples/l/aa_pod2.htm
Symmetrical BalanceElements of the design are centered or
evenly divided both vertically and horizontally
View examples at: http://www.alifetimeofcolor.com/main.taf?p=3,1,1,8
Asymmetrical Balance
Off-center alignment created with an odd or mismatched number of elements.
Radial BalanceWith radial designs the elements
radiate from or swirl around in a circular or spiral path.
ContrastThe use of big and small elements,
black and white text, squares and circlesAdds emphasis to important informationAdds appeal
View an example at http://www.alifetimeofcolor.com/main.taf?p=3,1,1,9
Proximity/UnityGrouping 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 athttp://desktoppub.about.com/od/designprinciples/l/aa_pod2.htm
Repetition/ConsistencyRepeat some aspect of the design
throughout the entire layout. Aids navigationImproves 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 http://desktoppub.about.com/od/designprinciples/l/aa_pod2.htm
White SpaceNegative or space empty of any colorGives a design breathing roomSmoothes transition between elementsView an example at
http://desktoppub.about.com/od/designprinciples/l/aa_pod2.htm
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 http://desktoppub.about.com/od/designprinciples/l/aa_pod2.htm
1 2 3
Rule of Thirds
Grids
Optical Center andZ-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 patterneye follows when scanning a page.Place important
elements along theZ-pattern.
1 2 3
Optical Center
Z-Pattern
Elements of Design
1.02 Investigate Design Principles and Elements
Lines as Design Elements Lines 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.
Lines Can Organize Information
Apple Grapes Oranges
Red Delicious White Navel
Fuji Red Hamlin
Lines Can Create Movement
Lines Can Connect
Speaker
Fence
X’s
PostHat
Leaves
Box
Lines Can Separate
A line is being used toseparate the columns oftext in the example.
Link to about.com for an additional example of lines used to 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 IPSUMLorem 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.
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.
Lines Can Provide Texture• Lines can be used to create texture.
• Link to about.com for more examples of lines for texture.
Lines Can Convey a Mood or Emotion
Lines Can Define Shapes
Lines Can Provide Emphasis
Magazine Article Title
Magazine Article Title
Newspaper Title
Lines Can Provide a Frame
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
Mass as a Design Element Mass 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.
Texture as a Design Element Texture 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.
Link to about.com for more about paper textures.
Link to about.com for more about visual textures.
Color as a Design Element Color 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.
Color as a Design Element
Color 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
Color Concepts
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.
Creating Color on Monitors Computer 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.
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 255 150 0 FF9600 (hexadecimal)
Hexadecimal Number Chart
The 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). 240 + 15 = 255.
Creating Color on Printers Printers 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.
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.
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.
Newsletter Analysis
Open the newsletter analysis activity in the handouts folder on the flash drive.Work in a group to complete the activity.
Open the newsletter analysis activity in the handouts folder on the flash drive.Work in a group to complete the activity.
1.03 Demonstrate Desktop Publishing
Clear learning goal: The learner will be able to demonstrate proficiency with desktop publishing.
Clear learning goal: The learner will be able to demonstrate proficiency with desktop publishing.
Desktop PublishingDesktop Publishing
Essential Standard 1.03
Based on formal assessments, 60% of students mastered this standard.
Document Design
1.03 Demonstrate desktop publishing.
An Example of a Master Page
Master pages are good places to create headersand footers, insert page numbers, place a logo or graphic that appears onall pages.
Master page icon
In this example, a footer is being created that will display on every page.
Purpose of a Master Page
Maintains 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.
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.
Format Considerations Selection 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
Layout of a Desktop Publishing Document
1.03 Demonstrate desktop publishing.
Margin Guides
Margin Guides
Margin guides are lines that indicate the space between the edge of the page and the document contents
Column Guides• Column
guides control the flow of text within columns and keep text out of the gutter (space between columns)
Sample newsletter template from Microsoft
Column Guides
Gutters
Ruler Guides• Ruler guides
are used to align objects consistently
Horizontal and Vertical Ruler Guides
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
Template• A standard pre-formatted layout which
may contain a color scheme, font scheme, pictures, and preset margins.
Page Size• Publications can vary in size • Different purposes require different
paper sizes:− Business card− Brochure− Poster− Invitation
DTP Design Features
1.03 Demonstrate desktop publishing.
Special Features of Publications
• Art• Balloon• Bleed• Caption• Dropped Cap • Running
Headlines/Footers
• Jumpline • Pull Quote• Rules• Sidebar • Text Box• Watermark• End mark• Reverse text
Art • Illustrations and photographs used
to convey meaning and add appeal
Balloon• A circle or bubble enclosing copy in
an illustration• Often used in cartoons
???
Bleed
• A print effect in which a color, object or image appears to run off the edge of a page.
Caption• Brief descriptive text accompanying an
image or chart.• Can be in the form of a textbox or balloon.
Dropped Cap
• An enlarged character at the beginning of a paragraph
• Drops below the line of text• Grabs the reader’s attention
Running Headlines/Footers• Running text at the top and/or bottom of a
document.
• Also called headers.
• Used for organization, page numbers, date, author, running title, etc.
Jumpline
• Line which tells readers which page to refer to for the continuation of an article.
Continued on B3
Pull Quote
• Quotation taken directly from the body of the article.
• Used to draw attention.
• Often made larger than body text.
• 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
Rules• Horizontal or vertical lines that can be applied
to paragraphs, text boxes, and objects in a publication.
Sidebar
• Square box filled with information related to the main story or to a completely separate article.
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
Watermark• A semitransparent image in the background of
printed material
Endmark• A symbol that indicates the end of an article or
news item
• Symbols vary
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!
Analyze DTP Elements…
Ads
Analyze DTP Elements…
Masthead
Balloon Deck
Analyze DTP Elements…
Varied Elements
Analyze DTP Elements…
Nameplate
Kicker
Varied Elements
Table of Contents
Analyze DTP Elements…
Drop Cap
Fonts
Kerning
Reverse Text
Watermark
2.01 Investigate Graphic Image Design
Clear learning goal: The learner will be able to edit graphic images for a variety of purposes.
Clear learning goal: The learner will be able to edit graphic images for a variety of purposes.
Essential Standard 2.01
Graphic Image DesignGraphic Image Design
Based on formal assessments, 53% of students mastered this standard.
Graphic Formats
2.01 Investigate graphic image design.
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.
0
10
20
30
40
50
60
70
80
90
1st Qtr 2nd Qtr 3rd Qtr 4th Qtr
East
West
North
Chart PhotographButtons
Factors that Affect Graphic Format
• Color depth• Compression
• Portability
• Transparency
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
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
After Compression
Notice that there is no difference, no data has been lost.
Lossless Compression
Before Compression
Original . . . . . . Final compression
Lossy Compression• Notice that each time the image is saved, the
quality is degraded.• In the third image, the image is very pixelated.
Portability
How easily you can open, modify, and view the files on computers using different operating systems, software and browsers.
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.”
Factors to Consider When Choosing a Graphic File Format
• Which 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?
Raster Graphics2.01 Investigate graphic image design.
Raster Graphics
• Also called bitmap graphics • Consist of grids of tiny dots
called pixels • Have a fixed resolution and
cannot be resized without altering image quality
• Edited in paint programs Bitmap enlargement
Notice the pixels
Image source: http://graphicssoft.about.com/od/aboutgraphics/a/bitmapvector.htm
Common Raster Formats
• GIF• JPEG• BMP• PNG• TIFF
Compare/Contrast Raster Formats
Distribute 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.
Distribute 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.
Topic 1: Topic 2:Title::
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
JPEG – Joint Photographic Experts Group
X Animation – No X Transparency – No • Lossy compression• Colors – 16.7 M (24-bit)• High quality but larger file
size than a GIF
• Commonly Used For:• Desktop publishing
photographs• Photographs and natural
artwork• Scanned photographs• Emailing photographs• Digital camera photographs
BMP - Bitmap
X Animation – No X Transparency – No • Uncompressed• 256 colors• Large file size - not well
suited for transfer across the Internet or for print publications
• Commonly Used For:• Editing raster graphics• Creating icons and
wallpaper• On-screen display
Icons
PNG – Portable Network Graphics
X Animation – 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 http://graphicssoft.about.com/od/freedownloads/l/blfreepng07.htm
TIFF – Tagged Image File FormatX Animation – No X 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
Vector Graphics
2.01 Investigate graphic image design.
Node
Handle
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)
Vector Graphics
Examples
More examples http://qvectors.com/
Original Image
Resized Image Shapes that
make up the image.
Uses of Vector Graphics Graphics 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
Advantages of Vectors
Resolution Independent Regardless 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.
Disadvantages of Vectors
Lower color quality than raster images. They do not support as many colors.
Not good for photographic images. Click to see an example.
Popular Vector Graphic Software
Xara Xtreme Adobe Illustrator CorelDraw DXF - AutoCAD Inkscape – open source software similar
to Adobe Illustrator.
AI – 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.
Common Vector File Formats
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
More Vector Formats
SVG – Scalable Vector Graphics
Standard format created by W3C
Versatile, all-purpose vector format
CDR – Corel Draw
DXF – AutoCAD
WMF – Windows Metafile
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.
Show the “Raven Egg” video. Compare to the content required in teaching vector
images. Students can create vectors in Vector Editor at
aviary.com.
2.01 Investigate graphic image design.
Image Resolution
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.
The quality of an image is dependent upon two factors:
1. Resolution2. Aspect Ratio
Aspect Ratio
Resolution
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.
Image Output Methods• Images can be viewed in two ways
− On 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.
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.
Aspect Ratio
Aspect Ratio – relationship of an object’s width to its height
Aspect Ratio
Resolution
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?
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 smallerFile size will remain the
sameAn image must be edited
to reduce file size.
Image Effects
2.01 Investigate graphic image design.
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
Cropping
• Cutting out part of an image• Original image retains same file size• Cut image can be saved as new object
Filters
• Used to apply special effects to an image that would be too difficult to create manually.
• Examples of use:– A weaving pattern– Liquefying
Filter ExamplesOriginal
Special lighting
Warped effect
Patchwork
Gradient
• Filling an object/image with a smooth transition from one color to another.
• Examples– Dark blue, gradually becoming white – Red fading to orange.
Layers
• Compiling multiple pictures or objects together into one image– Layers can be turned on or off– Elements can be colored, layered,
and resized individually
Layers on . . . Layers off
Patterns and Textures
• Patterns – raster graphics used to fill an object or selection
• Textures – used to create filters and backgrounds
Rotating
• Pivoting an object around its center point
Transparency
• Removing the background color of a raster image to make it “see-through”
• Allows image to blend in with its background
Explore Graphic Editing
Use 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.
Use 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.
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.”
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.”
Skills for Paint
HueShadeTintSaturationValueAspect RatioCloningCropping
FiltersGradientLayersPatternsTexturesRotating
× Transparency