Visual Design Course Reader
Total Page:16
File Type:pdf, Size:1020Kb
Introduction Goal of this Assignment • learn the typographic rules • learn the craftsmanship of visual design Meetings • Review of the results of the previous task • Conversation • Introduction of the new task Tasks • Deliever them as PDF files (Adobe Acrobat) • Filename shall be: lastName_taskNumber.pdf • Send to [email protected] as attachment (max 2MB) or internet link • Deadline is Mondays 12.00h Resources • This document is available at: http://www.bartneck.de/work/education/visualDesign/lectureNotesVD01.pdf Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Graphical Objects Vector graphics are described mathematical circle { center 100,120; radius 50; } Bitmap graphics are described with data 0,0,5,10,25,255,255,25,5,0,0 0,10,36,127,255,127,36,10,0 0,0,5,10,25,255,255,25,5,0,0 0,10,36,127,255,127,36,10,0 0,0,5,10,25,255,255,25,5,0,0 0,10,36,127,255,127,36,10,0 0,0,5,10,25,255,255,25,5,0,0 0,10,36,127,255,127,36,10,0 0,0,5,10,25,255,255,25,5,0,0 0,10,36,127,255,127,36,10,0 Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Converting Bitmaps and Vector graphics Rasterizing (vector to bitmap) Tracing (bitmap to vector) circle { Original Bitmap center 100,120; radius 50; } Apply a grid Resulting vector Resulting bitmap Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Units and Concepts General 1 meter = 100 cm, 1 cm = 10 mm 1 foot = 12 inch, 1 inch = 25.4 mm, 1 foot = 304.8 mm Resolution • Resolution is a proportion measured in pixels per inch (ppi) for screens and dots per inch (dpi) for prints. • Resolution is NOT the number of pixels on the screen. • The historical screen resolution is 72 ppi. File Size • 8 bit = 1 byte, 1024 bytes = 1 kile byte (kB) • 1000 kilo bytes = 1 mega byte (MB), 1000 mega byte = 1 giga byte (GB) Typographic • 1 Cicero = 12 Didot Points, 1 Didot Point = 0.376065 mm, 1 meter = 2660 Didot Points (Europe) • 1 Pica = 12 Points, 1 Point = 0.3514598 mm, 1 inch = 72 points = 6 picas (American) Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Units and Concepts Print • Black&White printers only have one color: black • Color Printers have four colors: cyan, magenta, yellow, black • Offset Print is done with Grids that are measured in lines per inch (lpi) lpi Grid Usage 51 20 Newspaper, Silk Screen 71 28 Newspaper, Silk Screen 91 36 Newspaper 102 40 Newspaper, Direct Offset 122 48 Direct Offset, Fast Print 137 54 Offset B&W 152 60 Offset B&W, four color 178 70 Offset best quality Quality Books (150 lpi) Magazin (133 lpi) Newspaper (85 lpi) 1.0 150 dpi 133 dpi 85 dpi 1.4 210 dpi 186 dpi 119 dpi 1.5 225 dpi 200 dpi 128 dpi 2.0 300 dpi 266 dpi 170 dpi Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Sizes Paper Dimensions DIN A0 A2 2 1 A A4 3 A 1 Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Sizes Paper Dimensions DIN in mm A4 Class A Series B Series C Series 0 841 x 1189 1000 x 1414 917 x 1297 Letter 1 594 x 841 707 x 1000 648 x 917 2 420 x 594 500 x 707 458 x 648 3 297 x 420 353 x 500 324 x 458 4 210 x 297 250 x 353 229 x 324 5 148 x 210 176 x 250 162 x 229 6 105 x 148 125 x 176 114 x 162 7 74 x 105 88 x 125 81 x 114 8 52 x 74 62 x 88 57 x 81 Paper Dimensions US in inch • Letter 8.5 x 11 • Legal 8.5 x 14 • Tabloid 11 x 17 Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Sizes and Formats Paper Weight Weight Type < 150 g/m² Paper 160 - 200 g/m² Semi cardboard 210 - 700 g/m² Cardboard 300 - 2400 g/m² Machine cardboard or Pasteboard 400 - 2400 g/m² Pasteboard File Formats Bitmap: • compressed - lossy: JPEG, GIF, PNG - none lossy: TIFF with LZW, ZIP • uncompressed: TIFF, PICT, BMP, PSD Vector: • Portable Document Format (PDF) • Postscript (PS) • Encapsult Postscript (EPS) • Adobe Illustrator (AI) Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Software Photo Editing • Adobe Photoshop • GIMP Design: Illustrations, Posters, single page documents • Adobe Illustrator Layout: Reports, Books, Magazine, mutliple page documents • Adobe InDesign • Quark Express Screen Design Web publishing: • Graphics: Adobe Image Ready • Interaction: Adobe Flash • HTML: Dreamweaver CD ROM publishing: • Interaction: Adobe Director Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Task 01: Color Reproduction Reproduce a picture of yourself. The color picture should con- tain a fair amount of your face and also an appealing back- ground. Print it on three different printers, including the ID color laser printer. The reproductions shall have the same size and color as the original. The reproductions shall be as similar as possible to the original. Mount the original picture together with the reproduc- tions on an A4 cardboard and write your name on the back. Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Color spaces Color ranges • Humans perceive 10 million different colors • Monitors (CRT and TFT) display 16.7 million colors • Offset Printers reproduce 576.000 colors Color models • Additive mixing is the mixing of light (RGB, HSB, LAB) • Substractive mixing is the mixing of particles (CMYK, Pantone, HKS) Additive Substractive Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Relation of RGB to CMYK Red Magenta Yellow Blue Green Cyan Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Johannes Itten’s contrast theory The pure color (hue) contrast The contrast of saturation The contrast of light and dark The contrast of complements The contrast of warm and cool The contrast of quantity Simoultaneous contrast Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Color Management Color Managment Software is part of the Operating System • ColorSync for Mac • Microsoft Windows Control Panel Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Color Management What is 255 Blue? ICC Profiles • International Color Consortium (http://www.color.org/) • cross-platform device profile format • for new and untagged documents use Adobe RGB (1998) Calibration • Existing profiles for all devices • Software profiling for monitors (Adobe Gamma) • Hardware profiling for monitors, scanners and printers Files that support embedded color profiles • PSD, PDF, JPEG, TIFF, EPS, DCS, and PICT Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Color Management in Photoshop Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Color Printing Process Cyan Magenta Yellow Key (Black) Component Channel Halftone Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Color range comparision RGB Gammut Warning CMYK Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Color and Legibility Read this text out Read this text out loud. loud. Read this text out loud.Lor- per in ut utatetue dip et, vel utem vel dolore magna ad eum venibh elisim nonsequat iuscillum el iureet la autat Read this text out praestrud dolenibh ea faccum volortin henis nos dit augiat. loud. Duipsum nibh eum doluptat aliquamconse tin ulla feugiam dolore ver sit at. Ut lorem inisi tetum velenis alissit ute Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Anatomy of a Typeface Ascender Serifs Tail IpbGtQDescender Spur Terminal meanline Anxiety baseline Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Typeface Family Futura Light Futura Light Condensed Futura Light Oblique Futura Light Oblique Condensed Futura Regular Futura Regular Condensed Futura Oblique Futura Oblique Condensed Futura Heavy Futura Bold Condensed Futura Heavy Oblique Futura Bold Oblique Condensed Futura Bold Futura Black Condensed Futura Bold Oblique Futura Black Oblique Condensed Futura Black Futura Black Oblique Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Typeface Classes Antiqua History Sabon Times Stanley Morrison 1931 Palatino Bodoni Giambattista Bodoni 1739 Stone Serif Garamond Claude Garamond 1532 Baskerville John Baskerville 1754 Serif Univers Adrian Frutiger 1957 Courier Futura Paul Renner 1928 Rockwell Helvetica Max Miedinger 1957 San Serif Gill Erich Gill 1927 Futura Palatino Hermann Zapf 1950 Frutiger Walbaum Erich Walbaum 1810 Gill Caslon William Caslon 1816 Clarendon H.Eidenbenz 1951 Handwriting Shelly Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Typefaces and Fonts Bitmap Fonts Vector Fonts Bitmap Fonts PostScript Fonts TrueType Fonts OpenType Fonts Source • Fontshop (www.fontshop.de), about 140 Euro per font • Linotype (http://www.fontexplorer.com/FontStore/) • Monotype (http://www.monotype.com/)R Lecture Notes Visual Design Assignment, Version 1.3, May 2007, Copyright by Dr.Christoph Bartneck, http://www.bartneck.de Legibility - Typeface Size Lortin eugait, quis aliquatem dolore mod Flow text molore corperat ute commolo eriureet ut aliqui enit, verat et nissequisi.