1. Colors

2. Colors – Paint (Subtractive Color Model)
Primaries: magenta, yellow, and cyan
This color system is called subtractive because:
Each primary color absorbs (subtracts) a certain part of the color spectrum.
Every time a color is added, less light is reflected.
When you mix all three primaries together, the entire spectrum of color is absorbed, and we’re left with black.
Does anyone know the primary colors?

3. Colors - Lights (Additive Color System)
Primaries: Red, Blue, Green
Additive color systems start without light (black).
Light sources combine to make a color.
As colors are added, the resulting color is brighter.
The primary colors are different for computers

4. Colors (colorpicker.com)
We’ll be working with the additive color system Mix various amounts of red, green, and blue to create a color. Colors can be represented by rgb (red#, green#, blue#) Each color is indicated by a number from (0,0,0) = black (255,255,255) = white

5. Images and Backgrounds

6. Images

7. Black and White Pictures

8. Pictures are stored as pixels
Monochrome:
BLACK or WHITE

9. What is needed? Different levels of black and white Shades of gray
Percentage of black

10. ASCII Images (picascii.com)
Instead of pixels, use characters

11. Color Pictures

12. Color Pixels How do we represent colors? That’s also a color pixel!
RGB(red,green,blue)
That’s also a color pixel!

13. Formats & Fidelity

14. Many Formats jpeg or jpg, png, tif, gif, …
Different encodings, different sizes but they all will work
Actually different ways to COMPRESS them
Why compression?
1000 red pixels in a row…
That’s why they are different sizes
But you MUST use the correct extension name and capitalization

15. How much fidelity?
Big difference in size is how many pixels were used (dpi)
you WILL run out of space
Don’t use more than you need!
Common dpi: 96, 300, Dimensions in pixels (700, 2000, 4000, …)
Little pictures don’t need that much detail
Don’t always need HD!
Tools to change the fidelity
Use any program
Can do it on the web

16. Tools
Changing
Fidelity
Formats
Cropping
Tools
Programs
Web: Phixr

17. Images in HTML

18. Images on the Web Pictures Page backgrounds
Element backgrounds (list items!)
Link displays (arrows)
List markers
Borders

19. Images in HTML Remember that HTML is just text
Need to point to pictures
Use the img tag
<img src=“where” alt=“what”>
alt:
screen reader
REQUIRED for this class and to validate

20. Picture Sources Your own Publicly available
Reduce fidelity!
Publicly available
Flickr and the Creative Commons
Google and labeled for reuse
IMPORTANT TO ASSURE NO COPYRIGHT INFRINGEMENT

21. Formatting and Sizing

22. Formatting img All the box-related characteristics in CSS
Add class in HTML

23. Resizing and Cropping Resize and crop before you put it in the folder
Why?
Size on page
Size of file
More control

24. Sizing Pictures in CSS
HTML permits you to put size on an img, but NOT in this class.
ALWAYS do it in css.
Only size ONE dimension. Deductions for using both: funny house effect
Why not always resize picture to wanted size?
May want to reuse image multiple times
Simpler to make multiple pictures consistent in CSS

25. Adding a caption
<figure> <img …> <figcaption>caption</figcaption> </figure>

26. Images as Background

27. Overall page design Default: window size
Advantage: grows and shrinks easily
Disadvantage: harder to design
Making body fixed width
Advantage: easier to control
Disadvantage: scroll bars and unused space
Using fixed width section in default body
Combines advantage of fixed width without scroll bar
Allows complex backgrounds

28. Background Image Body background Need to assure readability
Simple images (see resources)
For busier images: use overlay
Use div or section or …
Opacity (0 to 1) to let it show through
Background-image: url(“file name”);
Background-size
Background-repeat

29. Opacity (on div) 1 is fully opaque : can’t see through
0 is fully transparent:
background disappears
Biggest issue:
Everything inside inherits the opacity
Figures problematic

30. Gradients Any place that you have a background Lots of different types
Google it!
Not supported consistently on browsers

31. Storing Images

32. Where are pictures stored?
Can be any where on the web
src has full url
<img src=“ us/sittersonsmall.jpg” alt=“Sitterson”>
Problems
Pictures change or disappear
You’re poaching on their resources
NOT PERMITTED FOR THIS CLASS

33. Preferable: IN THE FOLDER
If you only have one or two, just another file
src just needs the file name
<img src=“sittersonsmall.jpg” alt=“Sitterson”>
REMEMBER: case matters
If you have a lot, keep them in their own folder
src needs the path
<img src=“images/sittersonsmall.jpg” alt=“Sitterson”>
Either is specific to this website

34. Same image on ALL your websites
Examples
Company logo
Your picture
Put it in the top level
e.g., onyen for this class
(same place as your course page)
Reference as
<img src=“../sittersonsmall.jpg” alt=“Sitterson”>

35. References Summary (src or href)
In my folder
file.ext
In a subfolder
subfolder/file.ext
In a higher folder
../file.ext
On the web …