Elements of colortheory for web designers

1. Mater of Arts in Communication Design
WEB DESIGN
Color

2. "Color." Merriam-Webster.com. Merriam-Webster, n.d. Web.
8 Feb. 2014. <http://www.merriamwebster.com/dictionary/color>.
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
2

3. Color theory
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)
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
3

4. Major chemistry investment…
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
4

5. White and monochrome light
In optics, a prism is a
transparent optical
element with flat, polished
surfaces that refract light.
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
5

6. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
6

7. Speed of light…
Medium
Speed Km/s
299,792
Glass
Titolo lezione
300,000
Air
Hendrik Lorentz (right) with Albert Einstein.
Vacuum
200,000
WEB DESIGN NABA 2014 Roberto DADDA
7

8. Spectrum
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
8

9. Light sources spectrums
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
9

10. Color temperature
Wikipedia
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
10

11. Colored objects
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
11

12. Color mixing
• When we mix colors we see a new color!
• ADDITIVE is mixing lights
• SUBTRACTIVE is mixing color pigments
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
12

13. Aditive primary colors: red, green, blue
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
13

14. Subtractive primary colors: red, yellow,
blue
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
14

15. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
15

16. Colors wheel
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
16

17. 1708
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
1908
17

18. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
18

19. Pantone, Carlstadt NJ 1962
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
19

20. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
20

21. • 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

22. Describin
g a color
• Hue
• Saturation
• Lightness
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
22

23. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
23

24. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
24

25. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
25

26. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
26

27. B&W monitor
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
27

28. Color display RGB
1 pixel = 3 fosfori R,G,B,
illuminati con intensità
variabile
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
28

29. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
29

30. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
30

31. 256 Color Display (8 bit)
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
31

32. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
32

33. 24 bit true color
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
33

34. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
34

35. Old solved problem
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
35

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
36

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.
http://graphicssoft.about.com/od/graphicformats/f/summary.htm
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
37

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
38

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
39

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 DADDA
40

41. Roberto Dadda
www.dadda.it
roberto@dadda.it
+39 338 775 22 03
Twitter, facebook, linkedin: robertodadda
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
41