Mater of Arts in Communication Design

WEB DESIGN
Color
"Color." Merriam-Webster.com. Merriam-Webster, n.d. Web.
8 Feb. 2014. <http://www.merriamwebster.com/dictionary/color>.
Ti...
Color theory

Isaac Newton (Woolsthorpe-by-Colsterworth,
25 dicembre 1642 – Londra, 20 marzo 1727)

Johann Wolfgang von Go...
Major chemistry investment…

Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

4
White and monochrome light
In optics, a prism is a
transparent optical
element with flat, polished
surfaces that refract l...
Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

6
Speed of light…
Medium

Speed Km/s
299,792

Glass

Titolo lezione

300,000

Air

Hendrik Lorentz (right) with Albert Einst...
Spectrum

Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

8
Light sources spectrums

Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

9
Color temperature

Wikipedia
Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

10
Colored objects

Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

11
Color mixing
• When we mix colors we see a new color!
• ADDITIVE is mixing lights
• SUBTRACTIVE is mixing color pigments

...
Aditive primary colors: red, green, blue

Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

13
Subtractive primary colors: red, yellow,
blue

Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

14
Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

15
Colors wheel

Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

16
1708

Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

1908

17
Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

18
Pantone, Carlstadt NJ 1962

Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

19
Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

20
• Complementary
colors are pairs of
colors which, when
combined in the right
proportions, produce
white or black.

Titolo ...
Describin
g a color
• Hue
• Saturation
• Lightness

Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

22
Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

23
Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

24
Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

25
Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

26
B&W monitor

Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

27
Color display RGB
1 pixel = 3 fosfori R,G,B,
illuminati con intensità
variabile

Titolo lezione

WEB DESIGN NABA 2014 Robe...
Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

29
Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

30
256 Color Display (8 bit)

Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

31
Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

32
24 bit true color

Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

33
Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

34
Old solved problem

Titolo lezione

WEB DESIGN NABA 2014 Roberto DADDA

35
Image file format: raster aka bitmap
• In computer graphics, a
raster graphics image, or
bitmap, is a dot matrix data
stru...
TIFF
• TIFF is good for any type of bitmap (pixel-based)
images.
• TIFF produces large files, but there is no loss in
qual...
PNG
• Use PNG when you need smaller file sizes with
no loss in quality.
• PNG files are usually smaller than TIFFs, in my
...
GIF
• Use GIF for simple Web graphics having limited
colors.
• GIF files are always reduced to 256 unique colors
or less a...
Image file format: vector
• Vector graphics is the use of
geometrical primitives such
as points, lines, curves, and
shapes...
Roberto Dadda
www.dadda.it
roberto@dadda.it
+39 338 775 22 03
Twitter, facebook, linkedin: robertodadda

Titolo lezione

W...
Upcoming SlideShare
Loading in …5
×

Color

430 views

Published on

Elements of colortheory for web designers

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
430
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Color

  1. 1. Mater of Arts in Communication Design WEB DESIGN Color
  2. 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. 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. 4. Major chemistry investment… Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 4
  5. 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. 6. Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 6
  7. 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. 8. Spectrum Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 8
  9. 9. Light sources spectrums Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 9
  10. 10. Color temperature Wikipedia Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 10
  11. 11. Colored objects Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 11
  12. 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. 13. Aditive primary colors: red, green, blue Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 13
  14. 14. Subtractive primary colors: red, yellow, blue Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 14
  15. 15. Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 15
  16. 16. Colors wheel Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 16
  17. 17. 1708 Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 1908 17
  18. 18. Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 18
  19. 19. Pantone, Carlstadt NJ 1962 Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 19
  20. 20. Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 20
  21. 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. 22. Describin g a color • Hue • Saturation • Lightness Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 22
  23. 23. Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 23
  24. 24. Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 24
  25. 25. Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 25
  26. 26. Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 26
  27. 27. B&W monitor Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 27
  28. 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. 29. Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 29
  30. 30. Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 30
  31. 31. 256 Color Display (8 bit) Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 31
  32. 32. Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 32
  33. 33. 24 bit true color Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 33
  34. 34. Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 34
  35. 35. Old solved problem Titolo lezione WEB DESIGN NABA 2014 Roberto DADDA 35
  36. 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. 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. 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. 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. 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. 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

×