Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5
The range of "visible colors" is a small area within the electromagnetic
spectrum, between 760 nm (red) and 400 nm (violet) wavelength (shorter wavelength
= higher frequency).
Below red there is the "infrared" area, which we cannot see but can
perceive as warmth, and beyond violet there is the "ultraviolet" area
(for example: UV sun radiation).
Our color vision works in a kind of RGB (red, green, blue) mode, as we have
specialized photoreceptors (the red, green and blue "cones") that
have maximum sensibility in proximity of the wavelength of these three primary
colors (trichromatic vision). We also have receptors that only detect brightness
and contrast (the rod-shaped receptors) and that are mostly used for night vision.
Some animals have additional receptors for orange and violet (for example turtles)
with an extended visual range; many have "trichromatic vision" like
we do (including some monkeys, reptiles, fishes, etc.).
But most mammals (including cats and dogs) have just "dichromatic vision":
they can only distinguish between long (yellowish) and short (bluish) wavelength.
So, while it is not entirely true that "cats and dogs see in black &
white", it is true that they do not perceive colors like we do.
It seems that once all early evolved mammals must have had full trichromatic
color vision, as it was already present in much older animal species. In our
case it further evolved, while for most other mammals it degraded (cats, dogs,
etc.) or was totally lost (rodents, hoofed).
The reason why "violet" for us looks "reddish", is that
the red cone receptors are both sensible to long (red) and partly to very short
wavelengths (violet).
Statistically, about 8% men and less than 1% women have reduced or missing color
distinction between reds and greens: they perceive colors in a reduced trichromatic
or almost dichromatic way. For this reason, as every 12th man is partially "color
blind" it is very important to never use green/red/orange combinations
for text foreground/background, logos etc. as this looks from hardly to completely
unreadable to them.
For additional information please check: http://www.perret-optic.ch/optometrie/Vision_des_couleurs/vis-couleur_gb.htm
The most important color models in for screen and print publishing are based
on the additive (RGB) and the subtractive
(CMYK) principles. Check again the link above for an example of additive
and subtractive color mixing.
Not all visible colors can be displayed on screen, and not all screen colors
can be printed on paper (see "gamut" under).
RGB (Red, Green, Blue) is the main color model used for web
publishing - anything displayed on a computer screen follows this model, including
websites.
Screen RGB does not really allow all possible colors visible to the eye to be
displayed, as the screen brightness and color saturation are extremely limited
compared to the colors you can see in a brightly lit sunny day.
A "true color" RGB graphic uses 8-bit per color channel (256 possible
values, between 0 and 255),
the overall resolution is 24-bit with a max. theoretical amount of 256 x 256
x 256 = 16 777 216 colors.
When you save a graphical file you can also have the option of 32-bit RGB color,
where the extra 8-bits are not for a fourth primary color but for the "alpha
channel" (= transparency).
CMYK (Cyan, Magenta, Yellow, Black) is used for paper print
publishing, however only when using professional with 4-color offset printers.
When using standard bubble-jet computer printers you should normally use RGB
files, as the color conversion from RGB to 4 or 6 print pigments is performed
by the printer drivers.
CMYK has a smaller "gamut" compared to the RGB model, which means
that not all colors that you can see on a RGB screen can be also printed in
CMYK.
The gamut is the area of color supported by a specific color
model. Colors outside this area are "out of gamut" and in the case
of CMYK are "non-printable colors".
Typical examples: 100% green, or 100% blue: these color can only be printed
using special, additional color pigments (for example "Pantone" colors).
A CMYK graphic has 8-bit resolution per color channel, the overall resolution
is 32-bit. This is not to be confused with a 32-bit RGB file with Alpha channel.
HSL (Hue, Saturation, Luminance) is a model with basically
the same color gamut than RGB, only here colors are defined by "Hue"
(the color temperature, from red to violet), "Saturation" (the color
"purity", with 0 equal to a gray scale
and 240 equal a pure color) and "Luminance"
(the overall "brightness", with 0 being
black and 240 white).
When you choose a color using the System color selector (accessible from both
Dreamweaver and Fireworks) you can visualize both RGB and HSL values at the
same time.
Colors values in HTML are coded as three "hexadecimal" (0
1 2 3 4 5 6 7 8 9 A B C D E F) values for Red, Green and Blue. Each hexadecimal
value goes from a minimum of 00 (= decimal 0) to
a maximum of FF (= decimal 255). You always have
to use a # symbol before the color value, like in
<body bgcolor="#333333"> (= dark
grey).
These are the six primary colors:
Graphic files are sometimes saved using 8-bit (max. 256) "paletted"
or "indexed" colors in order to compress the file size. For example
GIF files have a maximum of 256 single colors and the palette is always saved
together with the file itself.
Also Windows and MacOS have their own 256 color palettes. Back in the time when
the screen color resolution was limited to 256 colors it was necessary to take
into account that only colors within those tables could be displayed correctly.
As there where also small differences between the Windows and the Mac models,
the real number of colors that could be "safely" used on both systems
was 216. These were also the colors that browsers on both platforms could display
properly, therefore called"Web Safe Colors".
Tip: it is quite easy to define "web safe" colors: all combinations
of 00, 33, 66,
99, CC and FF
values is "safe. Besides, Dreamweaver and Fireworks offer a "web safe"
color palette to choose from when defining colors.
Today it would be an unnecessary design limitation to create web pages using
only "web safe" colors, as most modern computers have "true color"
(= 24-bit RGB) resolution; however it is good to know that on older systems
with 8-bit (256) and even with the more recent 16-bit (65536) color modes, using
colors outside the web safe palette might lead to undesired results.
When exporting a graphic file in GIF format (Fireworks: menu "Datei >
Exportvorschau" - [Strg+Shift+X] ), it is recommended to use the dithering
option ("Rastern") to minimize color banding and artifacts.
When designing a website or a logo, it is recommended not to use too
many colors at once or the result might look non-homogeneous, or "unruhig",
or "cheap".
A good way to start is to choose just 1 or 2 main colors (a primary one, and
another one for contrast that might be complementary), from which the others
are derived as small variations of Hue, Saturation and Luminance (shadings).
The usage of more 100% saturated primary colors (red, yellow, green, cyan, blue
and magenta) is not recommended - unless of course we are making a website for
Edeka, Billa, Aldi ...
Disclaimer: this is an aesthetic comment, it has nothing to do with how popular
a page can be! Some very well known websites such as http://www.ebay.com
and http://www.google.com
do use combinations of primary colors. In the case of eBay, the idea
is indeed to look like a cheap supermarket :-)
Depending on the kind of website and the content, as well as the typology of the standard "visitors" of the page, different color combinations might be used. Beside the "psychological" effect of a color, also the readability of text (contrast between foreground and background) and other important parameters must be considered (for example, in a corporate website, whether the colors match the overall CI - Corporate Identity).
Sometimes combinations of complementary colors can lead to good results, but
avoid using complementary colors for text foreground and background. Complementary
colors lay opposite in the color circle, or have 180° hue difference - a
complementary color is so to say the "negative" (inverted) of the
starting color.
Example: the combination bright blue "#0099FF"
(= sensation of calmness, concentration) as primary color (+ ev. some shading
variations) together with bright orange "#FF9900"
(= draws attention) as contrast (for example for the hyperlinks) is used by
many commercial websites, and the two colors are complementary.
Exercise 5.1: Fireworks - define and change colors of objects and background
Exercise 5.2: Fireworks - finding out the complementary color and creating shadings of a given color.
Exercise 5.3: Fireworks - add color fountains and textures, make objects transparent
Exercise 5.4: Fireworks - add and modify live effects (shadows, 3D effects, etc.)
Exercise 6.1: Dreamweaver - setting the document main color scheme
Exercise 6.2: Dreamweaver - adding graphic files as background
When preparing pictures and graphics for web publishing it is important to follow these steps carefully:
1. Set the correct resolution in pixel:
2. Choose the right file format:
3. Set the proper amount of compression:
4. Subdivide graphics in slices:
5. Choose an appropriate file name that describes the content and cannot be confused with other files; it should also meet the requirements described in Lesson 1 "File Naming Policy".
Exercise 5.5: Fireworks - Using slices and Exporting graphic files + HTML
Exercise 5.6: Fireworks - Importing, scaling and exporting pictures
Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5
© 2003-2004 Michele Gaggia - all rights reserved