Chapter 5 - Communicating and Visual Design with Colors PDF

Communicating and Visual Design with Color IMD316 | WEEK 5 MOHD AKMAL FAIZ OSMAN COURSE OUTLINE 1 2  ◦ The tools we use to describe color are different when the color is printed than from when...

Communicating and Visual Design with Color IMD316 | WEEK 5 MOHD AKMAL FAIZ OSMAN COURSE OUTLINE 1 2  ◦ The tools we use to describe color are different when the color is printed than from when it is projected. Understanding Colors ◦ Projected color is additive. ◦ Printed color is subtractive.  ◦ The additive reproduction process usually uses red, green and blue light to produce the other colors. ◦ No light (or color) is black. All light (all Additive colors) is white. Color  ◦ Subtractive color explains the theory of mixing paints, dyes, inks, and natural colorants to create colors Subtractiv which absorb some wavelengths of e Color light and reflect others.  ◦ Color models: ◦ Different ways of representing information about color 4.2 Colors ◦ Example: ◦ RGB ◦ HSB ◦ CMYK  ◦ Based on human perception of color, describe three fundamental properties of color: ◦ Hue HSB Model ◦ Saturation (or chroma) ◦ Brightness - relative lightness or darkness of color, also measured as % * There is no HSB mode for creating or editing images  ◦ Hue - color reflected from or transmitted through an object, measured on color wheel HSB Model  ◦ Saturation (or chroma) - strength or purity of color (% of grey in proportion to hue) HSB Model  ◦ Brightness - relative lightness or darkness of color, also measured as % 0% 50% 100% HSB Model Blac k white  ◦ Add red, green and blue to create colors, so it is an additive model. ◦ Assigns an intensity value to each pixel ranging from 0 (black) to 255 (white) ◦ A bright red color might have R 246, G 20, B 50 RGB Model  ◦ Based on light-absorbing quality of ink printed on paper ◦ As light is absorbed, part of the spectrum is absorbed and part is reflected back to eyes ◦ Associated with printing; called a subtractive model ◦ Four channels: Cyan (C ), magenta (M), yellow (Y) and CMYK black (K) Model  In theory, pure colors should produce black, but printing inks contain impurities, so this combination produces muddy brown  K is needed to produce pure black, hence CMYK is four-color process printing  ◦ Color Gamut ◦ Range of colors that a color system can display or print ◦ Different models have different gamut (RGB has the smallest gamut, approximately) 4.2 Color  ◦ Color Channel ◦ Photoshop shows information about color elements in different channels ◦ E.g., RGB has at least three channels; CMYK has at least four channels - at least, because Photoshop also permits “Alpha” channels for storing mask information ◦ A mask lets part of an image be transparent so that other layers show through 4.2 Color ◦ Text TEXT 15  ◦ Basic media for many multimedia systems. ◦ Texts in the form of words, sentences What is and paragraphs is used to communicate thoughts, ideas and TEXT? facts in nearly every aspect of our lives.  ◦ Multimedia products depends on text for many things: ◦ to explain how the application work. ◦ to guide the user in navigating through the application. ◦ deliver the information for which the application was designed. What is TEXT?  ◦ Minimize the texts in multimedia application ◦ Texts consists of two structures: ISSUES ◦ Linear with TEXT? ◦ Non-Linear  ◦ Linear ◦ A single way to progress through the text, starting at the beginning and reading to the end. What is TEXT?  ◦ Non-Linear ◦ Information is represented in a semantic network in which multiple related sections of the text are connected to each other ◦ A user may then browse through the sections of the text, jumping from one text section to another. Kancil Page What is TEXT? Belt Case Hungry Crocodile Page Monkey Page Case Page  ◦ Factors affecting legibility of text: ◦ Size. ◦ The size of the text ◦ Background and foreground color ◦ The color in which the text is written in / on. Why Text is ◦ Style Important ◦ Also known as typeface and font in MM? ◦ Leading ◦ refers to the amount of added space between lines of type. ◦ Originally, when type was set by hand for printing presses, printers placed slugs—strips of lead of various thicknesses— between lines of type to add space.  ◦ Factors affecting legibility of text: ◦ Background and foreground color (BG – Light colored, FG – Dark) ◦ Size. ◦ Style Why Text is ◦ Leading Important in MM?  ◦ Based on creating letters, numbers and special characters. ◦ Text elements can be categories into: ◦ Alphabet characters : A – Z Text ◦ Numbers : 0 – 9 Technology ◦ Special characters : Punctuation [. , ; ‘ …] , Sign or Symbols [* & ^ % $ £ ! /\ ~ # @.…] ◦ Also known Character Sets  ◦ May also include special icon or 3.2 Text drawing symbols, Technolog mathematical symbols, Greek Letter etc. y  ◦ The technology of font effects in bringing viewer’s attention to content: ◦ Case: UPPER and lower cased letter Font ◦ Bold, Italic, Underline, superscript or Effects subscript ◦ Embossed or Shadow ◦ Colours Strikethrough  The Story The Prison The Characters The Further Adventures Of Sang Kancil Kancil purposely let himself go to prison to save his cousin Pelanduk that has been Font wrongfully accused of murdering kura-kura using CO2. Kancil forged the buaya crossings event and stealing the precious rambutan across the river in order to be sentenced to a life in prison. Effects The prison, a high security facility jungle prison located on no mans land is impossible to break into and a place for high profile criminals. Now that he is in, it’s up to his Example cunning skills and technical know how to find his cousin and help him to escape and prove his innocence. 1 2 3 4 5  This example shows the Times New Roman font Ascender an upstroke on a character Capital Height x-Height Text Characteristic FD xhp Serif p -Height Point size Descender The down stroke below the baseline of a character  Kerning space between pairs of characters, usually as an overlap for improvement appearance Kerning of Text Av Unkerned Av Kerned  Leading spacing above and below a font or Line spacing Leading of Text Reading Line One Leading Reading Line Two  ◦ Two classes of fonts Types of ◦ Serif Fonts ◦ Sans Serif  ◦ Decorative strokes added to the end of a letter's ◦ Serifs improve readability by leading the eye along the line of type. ◦ Serifs are the best suited for body text. ◦ Serif faces are more difficult to read in small Serif Text scale (smaller than 8pt) and in very large sizes.  ◦ Sans serif faces doesn't have decorative strokes. ◦ A sans serif text has to be read letter by letter. ◦ Use sans serif faces for small (smaller than 8pt) San Serif and very large sizes. Text ◦ Used for footnotes and headlines  ◦ For computer displays, Sans Serif fonts considered better because of the sharper contrast. Serif vs Sans Serif Fonts Serif San Serif  Examples of San Serif fonts Times New Roman Century Gothic Types of Bookman Arial Comic Sans MS Fonts: Rockwell Light Impact Examples Courier New Tahoma Century Examples of Serif fonts  ◦ The text elements used in multimedia are: ◦ Menus for navigation Using Text ◦ Interactive buttons in ◦ Fields for reading Multimedia ◦ HTML documents ◦ Symbols and icons  Text applying guidelines: ◦ Be concise ◦ Use appropriate fonts ◦ Make it readable ◦ Consider type styles and colors Using Text ◦ Use restraint and be consistent in Multimedia Text in Hypermedia Hypertext  1. Communicating Data ◦ Customer names and address ◦ Pricing information of products How Text Can Be Used Effectively  2. Explaining concepts and ideas ◦ A company mission statement ◦ A comparison of medical procedures How Text Can Be Used Effectively  3. Clarifying other media ◦ Labels on button, icons and screens ◦ Captions and callouts for graphics How Text Can Be Used Effectively  ◦ Advantages: ◦ Is relatively inexpensive to produce ◦ Present abstract ideas effectively Advantages & ◦ Clarifies other media Disadvantages Using Text ◦ Provides confidentiality (password) ◦ Is easily changed or updated  ◦ Disadvantages: ◦ Is less memorable than other visual media ◦ Requires more attention from the Advantages & user than other media Disadvantages Using Text ◦ Can be cumbersome – not elegant in expression  ◦ Multimedia applications and presentations invariably rely to some extent on the use of text to convey their message to users. ◦ Text has many characteristics that the developer can modify to enhance the user expression. Summary ◦ size, weight, typeface, style, colour, kerning, tracking, etc. ◦ Just like any other media, it requires careful planning and creativity. The End of Chapter 5 [email protected] School of Information Science, College of Computing, Informatics and Mathematics Universiti Teknologi MARA (UiTM) 45