Download presentation
Presentation is loading. Please wait.
Published byHeather Tyler Modified over 9 years ago
3
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.
4
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.
5
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 name an rgb (dec, dec, dec) value hexadecimal (# hx hx hx) value.
6
For RGB, each color is indicated by a number from 0-255 (0,0,0) = black (255,255,255) = white For Hexadecimal (hex), each color is indicated by 6 values from 0 – F #000000 = black #FFFFFF = white
7
Each two letters/numbers represent red, green, or blue in that order. Examples: #FF0000 = red #00FF00 = green #0000FF = blue #0F6480 #ADFAA5 #E01B4C
8
How do computers store information? Bits 1 and 0 Binary numbers are too hard to use Group them together in groups of 4 That’s hexademical!
9
Sometimes you will see colors as #123 This is the same as #112233 Why? Still a pretty broad range of colors http://www.december.com/html/spec/color3hex1.html
10
A list of color names colorpicker.com
11
Eyedropper for Chrome Eyedropper for Chrome Colorzilla for Firefox Colorzilla for Firefox Colorpic Colorpic
12
Paletton Paletton Adobe Adobe
15
Pictures are stored as pixels Monochrome: BLACK or WHITE
16
Different levels of black and white › Shades of gray › Percentage of black
17
Instead of pixels, use characters
18
ONLINE http://picascii.com/ DOWNLOAD http://photoediting.dphotojournal.com/ascii- art-generator-3242/
20
Red Green and Blue Each has a value from 0 to 255 Sound familiar?
22
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
23
Big difference in size is how many pixels were used (dpi) › Isis 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: phixrphixr
25
Remember that HTML is just text Need to point to pictures Use the img tag alt: › screen reader › REQUIRED for this class and to validate
26
Pictures Backgrounds Link displays List markers
27
Can be any where on the web › src has full url Problems › Pictures change or disappear › You’re poaching on their resources NOT PERMITTED FOR THIS CLASS
28
If you only have one or two, just another file › src just needs the file name › › REMEMBER: case matters If you have a lot, keep them in their own folder › src needs the path › Either is specific to this website
29
Examples › Company logo › Your picture Put it in the top level › e.g., comp101 for this class › (same place as your course page) Reference as ›
30
In my folder file.ext In a subfolder subfolder/file.ext In a higher folder../file.ext On the web http://www. …
31
Your own Publicly available › Flickr and the Creative Commons Flickr › Google and labeled for reuse Google IMPORTANT TO ASSURE NO COPYRIGHT INFRINGEMENT
33
All the box-related characteristics in CSS Add class in HTML
34
Resize and crop before you put it in the folder Why? › Size on page › Size of file › More control
35
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 use image multiple times › Simpler to make multiple pictures consistent in CSS
36
caption
38
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
39
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 Background-size Background-repeat
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.