WEB DESIGNMater of Arts in Communication Design
Color
WEB DESIGN NABA 2014 Roberto DADDA 2 Titolo lezione
"Color." Merriam-Webster.com. Merriam-Webster, n.d. Web. 8 Feb. 2014. <http://www.merriam-webster.com/dictionary/color>.
WEB DESIGN NABA 2014 Roberto DADDA
Color theory
Titolo lezione 3
Isaac Newton (Woolsthorpe-by-Colsterworth, 25 dicembre 1642 – Londra, 20 marzo 1727)
Johann Wolfgang von Goethe (28 August 1749 Frankfurt a. M.-22 März 1832 in Weimar)
WEB DESIGN NABA 2014 Roberto DADDA 4
Major chemistry investment…
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
White and monochrome light
Titolo lezione 5
In optics, a prism is a transparent optical element with flat, polished surfaces that refract light.
WEB DESIGN NABA 2014 Roberto DADDA 6 Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
Speed of light…
Titolo lezione 7
Medium Speed Km/s
Vacuum 300,000
Air 299,792
Glass 200,000
Hendrik Lorentz (right) w
ith Albert Einstein.
WEB DESIGN NABA 2014 Roberto DADDA 8
Spectrum
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA 9
Light sources spectrums
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA 10
Color temperature
Titolo lezione
Wikipedia
WEB DESIGN NABA 2014 Roberto DADDA 11
Colored objects
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
Color mixing• When we mix colors we see a new color!• ADDITIVE is mixing lights• SUBTRACTIVE is mixing color pigments
Titolo lezione 12
WEB DESIGN NABA 2014 Roberto DADDA 13
Aditive primary colors: red, green, blue
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA 14
Subtractive primary colors: red, yellow, blue
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA 15 Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
Colors wheel
Titolo lezione 16
WEB DESIGN NABA 2014 Roberto DADDA 17Titolo lezione
1708
1908
WEB DESIGN NABA 2014 Roberto DADDA 18 Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
Pantone, Carlstadt NJ 1962
Titolo lezione 19
WEB DESIGN NABA 2014 Roberto DADDA 20 Titolo lezione
•Complementary colors are pairs of colors which, when combined in the right proportions, produce white or black.
Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 21
WEB DESIGN NABA 2014 Roberto DADDA 22
Describing a color
• Hue• Saturation• Lightness
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA 23 Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDATitolo lezione 24
WEB DESIGN NABA 2014 Roberto DADDATitolo lezione 25
WEB DESIGN NABA 2014 Roberto DADDATitolo lezione 26
WEB DESIGN NABA 2014 Roberto DADDA
B&W monitor
Titolo lezione 27
WEB DESIGN NABA 2014 Roberto DADDA 28
Color display RGB
Titolo lezione
1 p ixe l = 3 fosfori R ,G ,B , illum inati con in tensità variab ile
WEB DESIGN NABA 2014 Roberto DADDATitolo lezione 29
WEB DESIGN NABA 2014 Roberto DADDATitolo lezione 30
WEB DESIGN NABA 2014 Roberto DADDATitolo lezione 31
256 Color Display (8 bit)
WEB DESIGN NABA 2014 Roberto DADDATitolo lezione 32
WEB DESIGN NABA 2014 Roberto DADDA 33
24 bit true color
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA 34 Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
Old solved problem
Titolo lezione 35
WEB DESIGN NABA 2014 Roberto DADDA 36
Image file format: raster aka bitmap
• In computer graphics, a raster graphics image, or bitmap, is a dot matrix data structure representing a generally rectangular grid of pixels, or points of color, viewable via a monitor, paper, or other display medium. Raster images are stored in image files with varying formats
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA 37
TIFF
• TIFF is good for any type of bitmap (pixel-based) images.
• TIFF produces large files, but there is no loss in quality. TIFF also preserves layers, alpha transparency, and other special features when saved from Photoshop.
• The type of extra information stored with TIFF files varies in different Photoshop versions, so consult Photoshop's help for more information.
Titolo lezione
http://graphicssoft.about.com/od/graphicformats/f/summary.htm
WEB DESIGN NABA 2014 Roberto DADDA 38
PNG
• Use PNG when you need smaller file sizes with no loss in quality.
• PNG files are usually smaller than TIFFs, in my experience.
• PNG also supports alpha transparency (soft edges) and was developed to be a Web graphics replacement for GIF.
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA 39
GIF
• Use GIF for simple Web graphics having limited colors.
• GIF files are always reduced to 256 unique colors or less and they make very small, fast-loading graphics for the Web.
• GIF is great for Web buttons, charts or diagrams, cartoon-like drawing, banners, and text headings.
• GIF is also used for small, compact Web animations. GIF should rarely be used for photos.
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA 40
Image file format: vector
• Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical expressions, to represent images in computer graphics.
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDATitolo lezione 41
Roberto Dadda
[email protected]+39 338 775 22 03Twitter, facebook, linkedin: robertodadda