Colors

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?

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

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-255 (0,0,0) = black (255,255,255) = white

Images and Backgrounds

Images

Black and White Pictures

Pictures are stored as pixels Monochrome: BLACK or WHITE

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

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

Color Pictures

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

Formats & Fidelity

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

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

Tools Changing Fidelity Formats Cropping Tools Programs Web: Phixr

Images in HTML

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

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

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

Formatting and Sizing

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

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

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

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

Images as Background

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

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

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

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

Storing Images

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

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

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”>

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 http://www. …