graphics and desktop publishing multimedia and webpage design essential standard 1.00

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)


Typefaces and FontsTypefaces and Fonts


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

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)


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.


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.


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



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


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


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


Masthead

Balloon Deck


Varied Elements


Nameplate

Kicker

Varied Elements

Table of Contents


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.


Graphic Image DesignGraphic Image Design


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


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.


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


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.


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)


Open a photograph in paint.net. Edit the photograph by following the guidelines on the handout: “Paint.net Curriculum Connections.”


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

THANK [email protected]

[email protected]

graphics and desktop publishing multimedia and webpage design essential standard 1.00

Documents

web design

design principles

desktop publishing multimedia

graphic image design

test preparation slide

virtual reality design

flash drive folder

multimedia production