© 2000 – All Rights Reserved – Page 1 Graphic Type & Layers Graphic Type & Layers

© 2000 – All Rights Reserved – Page 2 Print Measurement Print Measurement Points –used to measure vertical dimension of type –e.g. 24 pt. Times New Roman –72 points = 1 inch –actual size of letter is slightly less Picas –used to measure page layout –e.g. 18 pica column width –6 picas = 1 inch –Therefore: 1 pica = 12 points 24p0 24p3 24p6 24p9 24p0 24p3 24p6 24p9

© 2000 – All Rights Reserved – Page 3 Web Measurement Web Measurement Points –used to measure vertical dimension of type –e.g. 24 pt. Times New Roman –72 points = 1 inch –actual size of letter is slightly less Pixels –used to measure type height and web page layout –e.g. “50 pixel type” or “468 x 60 pixel banner” –72 pixels = 1 inch if using standard resolution –Therefore: 1 point = 1 pixel (roughly)

© 2000 – All Rights Reserved – Page 4 Type Families Type Families Serif is often used for body text Sans-serif is often used for headings Never, ever use script or gothic in all caps! H H H H

© 2000 – All Rights Reserved – Page 5 Case Case U&LC - Upper & Lower Case –Sentence case “The quick brown fox jumped over the lazy dog.” –Title Case “The Quick Brown Fox jumped over the Lazy Dog.” lower case – –e.e. cummings UPPER CASE –“DON’T SCREAM AT ME!” S MALL C APS

© 2000 – All Rights Reserved – Page 6 Justification Justification Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.

© 2000 – All Rights Reserved – Page 7 Typing Class Habits to Unlearn (if using proportional type) Don’t use two spaces after a period or colon Don’t use extra “carriage returns” Don’t use the spacebar to align text Don’t use double hyphens Never underline text Rarely use ALL CAPS Always use real quotes and apostrophes Don’t use justified text in a narrow column

© 2000 – All Rights Reserved – Page 8 Type Weight & Width (Style) Type Weight & Width (Style)

© 2000 – All Rights Reserved – Page 9 Type Posture: Italic v. Oblique Type Posture: Italic v. Oblique Times New Roman is a great font. Arial is similar to Helvetica.

© 2000 – All Rights Reserved – Page 10 Type Orientation Type Orientation Plain Jane Horizontal

© 2000 – All Rights Reserved – Page 11 Character Entities Character Entities Based on the ISO Latin-1 character set – NewHTML/iso_table.htmlhttp:// NewHTML/iso_table.html Also called “Special Characters” –Accent, umlaut, cedilla, circumflex –Copyright and trademark symbols –Currency, math symbols, and fractions To get “Résumé” –In Photoshop: RAlt+0233sumAlt+0233 –In HTML: Résumé –Or named: Résumé

© 2000 – All Rights Reserved – Page 12 Web Type Types Web Type Types Body Type –Pick “Web-Safe” Fonts –Times, Times New Roman, Arial, Helvetica, Courier, Verdana Display Type Graphic Type

© 2000 – All Rights Reserved – Page 13 Controlling White Space Controlling White Space Leading Tracking Kerning Use HTML tables as a low-tech way to control horizontal margins Use style sheets or layers for more control of placement

© 2000 – All Rights Reserved – Page 14 Vector - Raster Conversion Vector - Raster Conversion Useful for importing logos or type-on-a-curve into Photoshop Save CorelDRAW or Illustrator art as EPS In Photoshop –File > Open –Select the file and click OK In Rasterize Generic EPS Format dialog box –select Constrain Proportions –select Anti-aliased –leave resolution at 72 ppi –determine one dimension…width or height

© 2000 – All Rights Reserved – Page 15 LayersLayers

© 2000 – All Rights Reserved – Page 16 Layers in Photoshop... Layers in Photoshop... simulate vellum or acetate overlays separate elements so they can be edited are created automatically with the Text tool can be duplicated, deleted, and merged can be linked are sometimes “flattened” or “merged” by Photoshop functions New in Photoshop 6.0: –Layer sets –Layer styles and new layer effects –Layer identification and locking controls

© 2000 – All Rights Reserved – Page 17 Follow-Along Demo Graphic Type & Layers Setting type and moving type Editing type The Layers Palette Anti-aliasing type Leading adjustment Kerning type Tracking type

© 2000 – All Rights Reserved – Page 18 Adobe Lesson 3: Layer Basics Do entire lesson beginning on page 61

© 2000 – All Rights Reserved – Page 19 Graphic Type & Layers Graphic Type & Layers