creative yearbook design - english montreal school … yearbook design-4-course overview creative...

Creative Yearbook Design

-1-

Creative Yearbook DesignEnglish, Desktop Publishing

Susan O'ConnorCoral Reef High School

Miami, Florida

Award Winning Coral Reef Yearbook, Double Page Spread


-2-

Contents

1. Teacher Statement

2. Course Overview

• Course description and Goals• State and Technology Standards• Adobe software list• Research Resources• Bibliography

3. Lesson Plan Table

4. Detailed Lesson Plans and Handouts

5. Tutorials Susan O’ConnorDiscussing a Design Decision with the Editorial Team


-3-

Teacher’s StatementSusan O'Connor

Coral Reef High SchoolCreative Yearbook Design

The objective for designing creative aspects of a Yearbookis to bring as much creativity to the process as possibleand to hopefully complete an award winning publication.Creativity can begin to take over after students have anunderstanding of the basics of design, have mastered thesoftware and workflow. At that point in the project they willhave a grasp of the rules and are ready to exploreexceptions to the traditional rules and to break these rulesto produce original, visually pleasing layouts within aquality product.

The key to working on creative elements of a yearbook isto work within the theme of the publication. Each year ourteams choose a new theme and face the challenge ofworking creatively but within the framework and messageof this theme. The following lessons reflect the creativedesign projects from several yearbook teams as well asideas available through various on-line sources.

All of the creative work done by the yearbook teams isaccomplished using photography and original art incombination with Adobe Systems software. We havefound that these tools offer unlimited choices and amazingresults and that our main challenge is to limit our choicesto remain within our theme.

Susan O’Connor with Hand Painted Student IllustrationTo be reworked using Adobe® Illustrator™ and Photoshop™


-4-

Course OverviewCreative Yearbook Design

Introduction:

Goals for creative yearbook design are to demonstrate originalapproaches to page design and illustration that convey a clearmessage of the theme that represents the book. All creative work mustalso conform to the ethical and legal issues involved in publishingcreative images. This workbook will offer methods for approachingcreative illustration and design that were developed by 2 yearbookteams.

Design Goals:The concepts that guide these creative explorations are:Use of White spaceUse of TypographyStorytelling through Text LayoutStorytelling through PhotographyStorytelling through Digital Photo IllustrationTraditional and Computer Illustration

State Standards:

Florida Sunshine State Standards for English and Art

www.firn.edu/doe/menu/sss.htm

Technology Standards, English Language Arts NETS

ELA 12-Indicators 2,7; ELA 4-Indicator 5; ELA 4,11,12-Indicator 8

Adobe Software:Adobe® InDesign™Photoshop™Illustrator™

Research Resources:The major yearbook companies all offer downloadable handouts. Herff Jones offers links totechnical training in desktop publishing software used for yearbook production. Go to:http://www.yearbooks.biz/nav1024.cfm?cat=5&subcat=27&subsub=12,http://www.adobe.com/products/indesign/conversion.html#pagemakerYearbook Design Ideas:http://www.sisf.minoh.osaka.jp/MM/gallery%20links.htmhttp://www.herffjones.com/yearbooks/design_showcase/ds_frameset.htmhttp://www.walsworthyearbooks.com/theyearbook/resource/design/index.html

Yearbook Evaluation, http://www.pnpa.com/pspa/evaluations/yearbook.pdf

Designing With Type, http://www.designingwithtype.com/home.html

Design your name with Typehttp://www.artlex.com/graphic.design/assignments/type.name.html

Photoshop Tips, Burt Monroyhttp://www.graphic-design.com/Photoshop/monroy/

Bibliography:Visual Quickstart Guides, Peachpit Press

Commercial Photoshop with Bert Monroy, by Bert Monroy , New Riders

Design Basics: Ideas and Inspiration for Working With Layout, Type, and Color inGraphic Design, Joyce Rutter Kaye (editor), F & W Publications, ISBN 1564969037

Type Graphics: Synthesis of Type and Image in Graphic Design,Margaret Richardson, Matthew Carter, ISBN: 156496714X

Illustrator WOW book, Sharon Stuer, Peachpit Press, ISBN 0-201-88664-2

Digital Creativity, Bruce Wands, Wiley& Sons, ISBN 0-471-39057-7

Secrets of Award-Winning Digital Artists: Creative Techniques and Insights for Photoshop,

Painter and More, Daryl Wise, Jeremy Sutton, Peter Max, Wiley & Sons


-5-

Lesson Plan Table

Lesson Lesson Summary URL’s or References Tutorials

1. Creative Exercises

Beginning Creative Skill Sets in Adobe InDesign

www.adobe.com/education/training/main.html

Tutorial 1. InDesign Exercises

2. In Design features and Layout tips http://www.adobe.com/products/indesign/conversion.html#pagemaker,

3. Introduction to Type Styles Handout 1, Introduction to TypeStyles

Tutorial 3. Type Exercises

4. Selecting Type for Mood and Message Handout 2, Type as a DesignElement

Tutorial 3. Type Exercises

5. Type as a Graphic Element,

Type as Illustration.

Upper and Lower Case online:http://www.itcfonts.com/ulc/default.asp?nCo=AFMTType Graphics, Richardson andCarterIllustrator WOW book, SharonStuer

Tutorial 4. Illustrator

Type as a Graphic Element.

Tutorial 5. Illustrator

Creating Illustrations with Type.

6. Exercises in Color and Type Design Basics, Joyce Rutter Kaye Tutorial 6. Color and Type inPhotoshop and Illustrator

7. Connecting Theme to Graphics, Thematic Graphics and Illustrations Tutorial 7. Creating ThematicGraphics in Photoshop

8. Working with Images in Photoshop

Commercial Photoshop with Bert Monroy, by Bert Monroy, New Riders

Burt Monroy, Photoshop Tips,

http://www.graphic-design.com/Photoshop/monroy/

Tutorial 8. Photoshop IllustrationTechniques


-6-

Detailed Lesson Plans

1. Creative Exercises with InDesign

Beginning Creative Skill Sets in InDesign

InDesign offers many options for typetreatments and for working with illustrationsand photos. The exercises in Tutorial 1 willintroduce you to basic InDesign typetreatments and simple methods for enhancingillustrations placed into a layout.

(See Tutorial 1)

2. Type ExercisesThe Herff Jones web-site is packed with greattips on developing award winning yearbooksincluding links to tutorials for working withlayout software and converting from onesoftware package like Adobe Pagmaker, toanother software package, such as Adobe®InDesign™ as well as introductions to allsoftware used to produce the yearbookexercises in this workbook.

http://www.yearbooks.biz/nav1024.cfm?cat=5&subcat=27&subsub=12

http://www.adobe.com/products/illustrator/main.html

Review The Animated Introduction toIllustrator


-7-

Detailed Lesson Plans (continued)

3. Introduction to Type Styles

Type Assignment

Select magazines from the library. Comparethe fonts used for titles, the content andintended audience for each.

Examples:National Geographic MagazineTitle: Serif FontContent: Scholarly and Investigative,Archeology, Nature, World EventsAudience: Adults or students.

Real SimpleTitle: Sans Serif FontContent: Modern decorating ideasAudience: Young professionals, home owners.

Rolling Stone MagazineTitle: Script FontContent: Entertainment: Rock and Roll andPopular Music and Music SceneAudience: Youth, music amateurs andprofessionals.For a more thorough investigation of designingwith type visit the URL’s and recommendedbooks listed in the research resources andbibliography section of the Introduction page.

(See Handout 1 and Tutorial 3)

4. Type as a Graphic Element

Studying commercial magazines to researchways in which type can be used as acomponent of illustration is an excellent way tobegin experimenting with type.

Using type as a graphic or as the basis for anillustration in a layout takes advantage of themessage conveyed by a particular type face.When developing type graphics select fontsthat support your theme. Then determineconventions that will standardize the use ofthese elements from one section of the bookto the next.

(See Handout 2 and Tutorials 4 and 5)

5. Exercises in Color

The option of using color in a yearbook can bean exciting challenge, however when used toexcess color, can detract from a design tomake even an exceptional layout appearcommonplace. Color must not be used todazzle. Jazzing up a page with color canobscure the total message. Because it is partof the visual language, color must be useddeliberately to enlighten, add value andconvey the intended message.

When using color in type, four distinct colorsper page are the maximum the average viewercan associate with a theme. Two colors plusblack are remembered and understood best.

Two helpful ideas to guide you in applyingcolor throughout a Yearbook are:

1. Sharpen the delivery of the message bycolor coding elements for impact to carryspecific portions of a message from section tosection. Apply these same color treatmentsconsistently throughout the book. Forinstance, Same color for Headlines or samecolor for Titles used throughout the book.

2. Decide what you want the viewer tounderstand about the Theme or about eachsection and select color to make this messageobvious.

(See Tutorial 6)


-8-

HANDOUT 1Introduction to Type Styles

Type is generally grouped into three categories.These are Serif, Sans Serif and Script or Fancy Fonts.

There are also Cross Over fonts that combine the attributes of all three.

SerifSerif Fonts or Type have serifs, or little feet, at the end of the stroke. Examples:

P, T, L, S, PPalatino

This type design convention began with the carved Roman alphabet. When carving in stone, it is necessary to make a larger cut at thebeginning of a stroke to prevent chipping. As type and fonts have been designed over the centuries, this convention has been retainedand is reflected in what are called Serif fonts, also referred to as a Roman face. When laying out many lines of body copy, serif fonts areeasier to read because the serif leads the eye from word to word. This may also be partly due to the fact that most students in theWestern Hemisphere learn to read by using textbooks printed with a roman or serif typeface. When used in headlines or as designelements, Serif fonts also send a message of formality, convention and tradition.

Sans SerifSans Serif Fonts or Type do not have a serif. Examples:

P, T, L, S, G Arial

These fonts evolved when type was first being carved out of wood to accommodate the first printing presses. Creating carved letterswas easier if forms were simple and unadorned. When laying out many lines of body copy, sans serif fonts are more difficult to readbecause there is no serif to lead the eye from word to word. When used as headlines or as design elements, Sans Serif fonts project theimpression of a less formal, modern, or direct message.

HANDOUT 1


-9-

Introduction to Type Styles, page 2Script or Fancy FontsScript Fonts or Type evolved from the hand lettered manuscripts created by scribes in medieval times in Monastery scriptoriums. Example:

P, T, L, S, G English Vivace

These letter forms were originally hand drawn so they could be created with many flourishes and adornments. Script or Fancy Fonts aredifficult to read and should NOT be used in body copy. Fancy fonts project a message of elegance, entertainment, luxury and high style.

Selecting a Type FaceEach typeface has its own personality. Each typeface evokes a different feeling, or speaks in a different tone of voice. When selecting a type faceyou must consider both Character and Legibility. It is also important to develop a feeling for the weight of a type face and also for how thistranslates to the weight of lines of body copy to insure readability.

Character:Frederic W. Goudy, one of America’s most prolific type designers, offers the following definition of type Character. “Character in type has to dowith the impression made by the individual forms, their proportions, and the intangible something in them that makes the letters of each word hangtogether to from an agreeable whole; each letter with a quality of completeness, and not made up of bits taken here and there.” Typefaces youselect for headings, subheads, captions and body copy effect the way readers experience the ideas you want to express. Even when using typeas a design element, these considerations must be kept in mind. It is important that you understand and appreciate the uniqueness of each faceand choose type that is appropriate for your message.

Legibility:Legibility is related to the speed with which each letter or letter combination, (word), can be recognized. This is independent of readability.

Readability.How type is arranged on a page or the spacing between columns and other aspects of layout that make reading effortless.

Weight:The thickness or thinness of a stroke within a letter and the degree of darkness from black to gray that is projected by a page or column of text.


-10-

HANDOUT 1Introduction to Type Styles, page 3

A Few Guiding Rules for Choosing Type

1. Do not use two serif, two sans serif or two script fonts in combination.

2. When selecting fonts, you may use up to three different fonts on a page but for headlines, subheads and body copy it is usually safer to use only one Serif and one Sans Serif Font, in combination.

3. Use Script or Fancy Fonts for Design elements, Titles and Headlines only. Do not use Fancy fonts for body copy within the page.

4. Select Serif, Sans Serif or Script fonts in keeping with the intended message of the theme.

5. Serif Fonts are often considered more traditional and are possibly more appropriate to suggest a formal or serious message.

6. San Serif Fonts are more modern and can be more flexible in conveying many messages depending on the weight and style of the font.

7. Script fonts are fanciful and typically would generally convey a more festive mood suggesting elegance, entertainment and creativity.

8. Experiment with various fonts from serif and sans serif families to understand the weight and message of one font when compared to another.


-11-

HANDOUT 2

Type as a Graphic Element

Concept:During the 1940’s and 1950’s the idea of Concept became central to design. Concept refers to layouts in which design elements, such asillustrations or use of type used to create visual ideas, are the dominant elements. This is in contrast to layouts that are carried predominantly bythe use of copy. Some examples of this approach used in advertising or magazines rely exclusively on illustration and lack the catchy headline,often associated with modern layouts. Such design relies heavily on repeated images or graphics to carry the message across the entire adcampaign. When developing creative graphics for a yearbook, the design team should not hesitate to use typography as basis for the Theme,which is the equivalent of the Concept.

Type is a natural choice when developing visuals to carry concept. Easily identified Magazine Titles such as Time, Life and Look, have relied onestablishing the title to automatically signal content. An excellent example of type to carry concept is the magazine, U&lc, Upper and Lower Case,which is a magazine showcasing modern type design. It is clear from the use of UPPER and lower case type in the title that the magazine is abouttype.

The online version of this magazine offers many tips for using type for both print and web design: (http://www.itcfonts.com/ulc/default.asp?nCo=AFMT). “U&lc Online is ITC’s international journal of graphic design and digital media. U&lc Online needs no subscription; it’s part of the ITC web site, itcfonts.com. To read U&lc Online, just bookmark this page and check it out every month.

Type can be used to carry concept in headlines as well as spreads and feature pages. Imaginative use of type combined with unexpectedplacement of headlines can incorporate an occasional departure from the norm to add interest, signal the beginning of a new topic or convey aspecific concept or theme.


-12-

Handout 2, Page 2

Type can also be developed as illustrations to add character to a page. Magazine layouts and old 78rpm album covers are great places to look forinspiration when you are considering how to incorporate type as a graphic element of your design. The examples that follow will offer a few ideasfrom these sources. Tutorial 3 will introduce you to explorations with type.

The ruler graphic displaying the mark for 12 inches was the graphic of a ruler that ran along the edge of this old 78 rpm record jacket. This use oftype as it would appear on any common ruler served as both a title and as a graphic signifying the 12 inch size of a 78 rpm record.

The Metallic Type treatment, diagonal placement of the title and display of the subtitle in a metallic rear view mirror convey the concepts of speed,fast machines and the subject of Scoot Quarterly magazine which is about scooters. The most important things to keep in mind whenexperimenting with typography are first to clearly define the concept you wish to explore and then to select type based on the innate personality ofthe type face, making sure that this personality fits the concept for which you are designing. (Used with permission from Scoot Magazine)


-13-

Handout 2, Page 3

Type used as both a title and a graphic carries the concept of this record album. In this case original letter forms were created to illustrate thefeeling of fire. Using Adobe Illustrator, it is possible to modify and deform existing letter-forms to produce graphic elements. The new letter-formscan then be used as single letter graphics to illustrate the theme of the book, assembled as a series of titles, as a lead in to each section, or as acomponent of a collage or other illustration treatment. See Tutorial 5 for instructions on altering letterforms.


-14-

Detailed Lesson Plans (continued)6. Thematic Theme to Graphics andIllustrations

This sample tutorial conveys the theme of“Everything in Flux”, used for the Coral ReefHigh School award winning 2002-2003yearbook.

This illustration treatment was developed bystudent, Michael O’Connor.

(See Tutorial 7)

7. Photo Illustration

Pictures are like fast shots to the brain. Theycommunicate more effectively than wordsbecause they bypass conscious thought andattack the emotions.

When using photos to illustrate a layout, it isnot necessary to always preserve the originalnature of the image. There are times whensimply cropping a photo will create a muchclearer message. By applying additionalchanges to enhance contrast or modify color toa traditional photo a completely new and moreeffective illustration can result.

The Photo exercises in tutorial 7 will get youstarted on exploring the possibilities ofPhotoshop Image Adjustments and Filters.

(See Tutorial 8)

8. Scanned Illustrations and Photoshop

Photoshop tools used to alter scanned originalart are another excellent way to prepareillustrations or graphics that are both originaland carry the yearbook theme effectively fromone section to the next.

Tutorial 8 will offer ideas for applying a seriesof filters and other image adjustments to handpainted or drawn illustrations to create acohesive series.

(See Tutorial 8)


-15-

TUTORIALSCreative Graphics and Illustrations

Adobe InDesign

Tutorial 1: Placing Text on a Path Around a Circular Path 1. Choose the ellipse frame tool, 4th tool on the Left.

2. Hold down the shift key and draw the ellipse.

3. Choose the path type tool, under the type tool 2nd on the Right.

4. Click on the frame and type and the type will wrap around the frame.


-16-

Tutorial 1.Creating a Elliptical frame for an image:1. Choose the ellipse frame tool, 4th on the Left.

2. Hold down the shift key and draw the ellipse.

Placing an Image into an Elliptical Frame:1. Select the Elliptical frame.

2. Choose File_Place to place photo in the frame.

3. Browse for the photo you wish to place.

4. Choose the direct selection tool, top tool on the Right, to frame thephoto within the circle


-17-

Tutorial 1.Creating a Drop Shadow Around the Illustration

1. Choose the Direct selection tool, Top tool on the Right, and select thephoto

2. From the object menu choose drop shadow


-18-

Tutorial 2.http://www.adobe.com/products/illustrator/main.html

Adobe® Illustrator® CS software is an essential tool for anyone whoneeds to express ideas visually in print, on the Web, and in any othermedium. With powerful new 3D features, advanced typographicalcontrols, smooth Adobe Portable Document Format (PDF) integration,enhanced printing options, and faster performance, this powerful upgradefrom Illustrator 10 helps you explore your creative vision and efficientlypublish your artwork anywhere.

Go to the URL above to review an introduction to the latest Illustratorfeatures.


-19-

Type as a Graphic ElementBy

Patricia JohnsonCurriculum Exchange Contributor

If you are not familiar with Adobe Illustrator, a thorough introduction canbe obtained free if charge from the online training available on theAdobe Education website at:http://www.adobe.com/education/training/main.html

Tutorial 3. Working with TypeThe first exercises in these tutorials will use the Horizontal pageorientation because this will allow you to do comparisons on screenacross several examples.

Because the Yearbook is typically a Vertical orientation, it will also beimportant to test some exercises in the Vertical format and compare aseries of different placements of type and Type Graphics on verticalpages.

Tutorials 3 and 4 in this series will help you develop an appreciation forthe vast differences between type families and begin to developsensitivity for the appropriate selection of specific type fonts to carry aspecific message or concept.

Tutorial 5 will offer ideas for experimenting with color to add a newelement to this survey of type options.

Tutorial 6 will offer some suggestions for using type as graphics andillustrations.

.

Step 1.Open Adobe Illustrator and go to File, New to open a new page. Selectthe Landscape Orientation icon on the Right to set up a horizontal page.


-20-

Step 2.Choose the Type Tool. Pull Down the Type Menu and Choose Size>48.Pull Down the Type Menu to choose a Font. Start this exercise byselecting Arial, Regular. Click on the page and type the word Headline.Go back to the Font menu, select Arial Black and type Headline again.

Step 3.Continue selecting fonts and styles and typing the word Headline. Whenyou have the entire page filled, compare the fonts and note the distinctvariations in weight, mood and message between fonts that are evenfrom the same font families.


-21-

Step 4.Choose the Type tool and highlight a serif font. Select Edit, copy. Movethe cursor to the top of the page and select Edit, paste. Copy and pasteall the sans serif fonts to group them into the top half of the page.

Notice that the sans serif fonts vary greatly from family to family. Noticethat the sans serif fonts convey a different personality from the seriffonts. If you use a comma between words, note that even the commasymbol conveys a different personality from font to font. To comparepunctuation marks more clearly highlight the mark and select a largertype size.

Step 5.Open a new Horizontal page. Type or Copy and paste the wordheadline from a serif fonts. Type the font family name. Next to the wordHeadline.Do this for 10 Serif fonts.Next to each family, write a description of the personality of that font.

Step 6.Open a new horizontal page.Type the word “Headline” in ALL CAPS using a sans serif font.Go to the next line and type the word “subhead” beneath eachHEADLINE using the same font but in lower case.Fill the lower section of the page with gibberish in lower case.Type the font family name at the bottom of the page.

Step 8.Repeat this exercise 6 times with different serif and sans serif fonts andSAVE each page and label with the font family name.

Step 9.Print each sample and pin them up on a bulleting board. Note thedifference between upper and lower case for each font family in termsof readability and weight. Also note that some font families have nolower case. For of each font family compare:WeightPersonalityLine SpacingDiscuss the best use for each example in the context of a publication.


-22-

Tutorial 4. Type as a Graphic Element in a LayoutThis exercise will help you develop an appreciation for the uniqueaspects and message of different fonts when a single letter is used as agraphic element.

Step 1.Open a new Horizontal page. Pull down the View menu and selectShow Rulers. From the Side Ruler, pull out guides and divide the pageinto thirds.

Step 2.Using the Rule of Thumb for Negative or White Space of:2/3 negative or white space to 1/3 image area Type one letter fromany font family in the Left section of the page.

Step 3.Use the Selection tool (Arrow on the upper Left side of the toolbox) toreposition letterform. Use the scale tool, 6th from the top on the Rightside of the toolbox, to scale the letterform until it fills only 1/3 of the leftside of the page. Note that the letter can overlap into the middle sectionas long as it does not fill the entire left vertical section and still adhere tothe 1/3 rule.

Note that the letter can Fall outside the page boundary if this isnecessary to position it within the 1/3 rule.

Save this page using the name of the font family and the number one.

Step 4.Open a new Horizontal document. Select a different font family and typethe same letter. Reposition the letter to conform to the 1/3 rule on thisnew page. Note how the new font with different conformations willrequire changing the position from that of the first letter form.

Save the file using the title of the font family and the number 2. Create 6versions of this exercise using different fonts.

Step 5.Print each of the 6versions. Pin them up on a bulletin board anddiscuss:

- Differences in positioning required with each font family.- Differences in overlaps required by each font to make it

conform to the 1/3 image area rule.- Differences in Personality and message created by each font.- Differences in weight and sense of style created by each font.

Using a markup pencil (a light blue colored pencil will work) write oneach print out one word that best describes the mood, weight andmessage of each example.


-23-

Tutorial 5. Creating an Illustration Based on Type

Step 1. Choosing Type to illustrate a themeIn Adobe Illustrator, open a Vertical page.

Decide on a theme or mood, such as, Tranquility, Noise, Action, Fun orSeriousness.

Select the largest font size and choose any font from the Type menu.Position the Type tool cursor in the center of the page and type oneletter. Select and change the font till you find a letter form that fits yourmood or theme..Step 2. Reconfiguring a LetterformPull down the Type Menu and select Create Outline.A Bezier curve with control points will appear on the outside of theletterform. Select the Scale tool- 6th down on the Right side of thetoolbox and click on the letterform. Hold down the Shift key Click anddrag to scale the font proportionally to fill the center of the page. (Theshift key is used to make sure the scaling does not change the ratio of height to width.)

Step 3.Use the Right Selection Arrow at the top of the toolbox to click and dragon the control points and adjust curves with Bezier handles to reshapethe basic letter form.Use the Pen tool to add points where needed by clicking on the Beziercurve outline.

Step 4.By using a single font family, create a series of illustrations derived fromletters from the same font family. Try to retain the basic curves andproportions of the letter form. In the example to the Right a hammerhead shark shape was derived from the basic letter S from theCharlesworth Bold font without changing the fundamental curve of theletterform.


-24-

Step 5. Layering Letter Forms to Create an IllustrationCreate an illustration using the title of each section of just the first letterof the word for each section. Use a range of fonts for each illustrationand layer the fonts to create different compositions. Work with grayscale or a range of color treatments for each letterform selected.

Step 6.In Adobe Illustrator, use the scale tool to resize each letterform. Use theRotate tool to the left of the scale tool to change angles. Create colorvariations in the Color or Swatches Palette.

Step 7.In Photoshop, use the Layers, opacity slider to change the transparencyof a letter form. Use the Edit, Transform tools to scale or rotateletterforms.

The illustration above uses a lively arrangement of letter forms to createa heading illustration for the Sports section.

Detail from Verbum Magazine Cover IllustrationUsing Letterforms for Illustration


-25-

Tutorial 6. Type and ColorBecause it is part of the visual language, color must be used in a wellplanned manner to add value and convey a clear message. When usingcolor in type, four distinct type colors per page is the maximum theaverage viewer will recognize as a part of a design scheme. Two colorsplus black are most easily understood and interpreted.

Step 1.

In Adobe Illustrator, create a vertical document. Select the Type tool, atype family and the larges point size.

Create two lines of type with the word HEADLINE in all-caps on the topline and the word subhead in lower case on the second line. Addsample body copy below the subhead.

Copy and Paste this set 4 times. Highlight each new set and change thetype face for each HEADLINE, subhead, body copy combination.

Step 2.

Experiment with a range of color changes by highlighting the line of typeand choosing a color from the swatches palette. Using the same color,lighten the subhead by modifying the saturation settings in the colormenu.

In the color palette menu apply invert or complement to experiment witheffect of opposite colors.

Try using bright colors for HEADLINES combined with black forsubheads.

Try Black HEADLINES and adjacent colors or an increasingly de-saturated single color for sequential subheads.

Step 3.Print all samples and compare the effect of the color studies.

After experimenting with all the steps in this exercise, select a themeand work on combinations that support or illustrate this theme.

Choose the best type and color combination to carry the message ofyour yearbook theme from section to section.


-26-

Tutorial 7.Thematic Graphics and Illustrations, ConnectingTheme to Graphics

Using Images to Reinforce Thematic ConceptEverything In Flux

by

Michael O’Connor

Getting Started:To support the yearbook theme, Everything in Flux, we designed aseries of images that would reinforce the concept of motion.

Image Selection:First, we selected an appropriate image, and imported the image intoPhotoshop. Using various tools and filters, the image was manipulated.Those images follow.

File Management:File management required that each set of images be saved into aseparate folder with the Section name. As the image was changed,each alteration was saved under a new file name to preserve thatalteration for use in the final illustration.


-27-

Step 1. Magic Wand Tool and Select Menu

- Using the Magic Wand we selected gray areas on the image.

- Holding down the Shift Key we also selected light blue areas.

- Using the Select>Similar option, all the parts that were gray, and lightblue were selected

Step 2. Edit, Fill Menu

- After selecting a purple color from the Swatches Palette, we pulleddown the Edit menu and select Fill, Foreground color to turn all theselected areas of the image purple.

- Save this image under a new name to preserve this change for futureuse.

Step 3. In Filters Menu:

Using the wind filter, we set the option to stagger.- Then, we rotated it 90 degrees and did it again.- Then, we rotated it back to normal.

Save this image under a new name to preserve this stage as a separateimage for future use.


-28-

Step 4. Filters Menu, Liquify Menu, Spiral Option

- In the Brush Pallet select a large brush size.

- Using the larger brush size and increased pressure, applied fromvarious angles by the spiral option in the liquefy menu, this alterationwas created.

- This change was saved as a new file name.

Step 5. Edit Menu, Copy and Paste Layers Window, Change Opacity

- Copy and paste the original image, shifting it over a few pixels aftereach paste.

- In the Layers Menu, decrease the opacity after each paste to createthe effect below.

- Flatten the image in the Layers Menu and save this set of imagesunder a new file name.


-29-

Step 6. Filter Menu, Artistic Menu, Palate knife effect.


-30-


-31-

Step 7. Filter Menu, Liquify, Spiral.

This effect was done, again, by using the spiral tool in the liquefy menu,but, this time, a smaller brush was used around the edges.


-32-

This is the series of images, pasted into a dummy layout for one of the introductory sections of the yearbook.


-33-

This is the final page layout.


-34-

Tutorial 8. Photoshop Illustration Techniques

Step 1.Create a series of original illustrations or photos. Working withPhotoshop, make alterations to the original images to create a series ofrelated images by applying the same changes to each image. Be sureto keep a record of each change or use the history palette to track thesechanges. Use the same series of changes on each image to create afinished set of illustrations.

Step 2.In Photoshop, pull down the Image menu and select Adjustments,Brightness and Contrast to alter the focal point of the image.

Step 3.Select the Filter Menu and choose from the Sketch or Stylize menus.Experiment with filters to find an interesting way to alter the originalphotos or illustrations to make them more abstract.

Step 4.Select a color photo and use the Photoshop Image, Mode functions tochange it to Black and White.

Step 5.Apply the Image, Adjustments, Brightness and Contrast function toincrease the highlights by moving the highlights slider to the right. Notethat the details of the original image will drop out leaving only the mostintense areas in focus. This technique can be used to create a series ofdramatic black and white images that capture pose and mood. Usedifferent images altered using Brightness and Contrast to illustrateconsecutive sections of a yearbook. Or, alter the same imageprogressively to illustrate a given section of the book with variations onthe same image.


-35-

Step 6.Use the Filters Menu to change the texture and mood of a black andwhite photo.

Old Photo

This photo was altered using By removing detail with Using the Filters,Sketch, Water paper function.

Altered in Photoshop

Any photo attain a painterly effect create a new technique or bring intofocus expression, pose or mood and create a more dramatic or artisticillustration than the original photo.


-36-

Hand drawn illustration of a watch

This illustration was scanned and altered in Photoshop. The digitallyaltered versions have crisper edges and offer a vast range of detail,depth, color and grayscale options. The changes made to this singleillustration can be tracked in the history palette of Photoshop andapplied to an entire series of illustrations to create a set of like images.

Illustration altered using the Photoshop FiltersStylize, Emboss selections.

The same embossed watch illustrationchanged to Grayscale in the Image, Mode menu.


-37-

InDesign placement:When using an illustration across a double page spread, note that the gutter will cut off the image. Place the same imageon both pages of the spread and reposition the Left and Right sides of the image to compensate for the gutter. (Seeillustration below.)

creative yearbook design - english montreal school … yearbook design-4-course overview creative...

Documents