Introduction to Multimedia

MMP100 – Spring 2015Eric Hagan

BMCC2/28/2015

Quiz Time!

Troubleshooting

• Check your tags! Do you have a start AND end tags? Does everything match?

• Check your syntax! Any mistakes?• Check your file names! Any spelling

errors, spaces, or weird characters?• Check your file paths and extensions! Are

your files there? Are they the right type?• Did you save the most recent changes?

Recap / Corrections

• External CSS:–<link href=“style.css” type=“text/css”

rel=“stylesheet”>

• .css endings (hint, file types are important)

• Box Properties• Uploading websites! (Download

filezilla, it is free)

Color

• RGB vs. CMYK• Red Green Blue = Pixels (LEDS)• Cyan Magneta Yellow Key (black) = Print

(inks)

• Analog vs. Digital(Lots of different ways to produce color in

the world)

Color Space

Picking your color type

• RGB– Combination of red, green, blue

• HEX– Character representation of numbers– 00 = 0, ff= 255: 0-9, A-F

• HSB (Hue Saturation Brightness)– Available in Photo editors, etc– Brightness is the amount of black in the

color (maximum brightness = no black in the color)

Picking your color scheme• Monochromatic – single color with

multiple different light / dark shades of the same color

• Complementary- Opposite sides on the color wheel: example (yellow/purple, blue/orange, red/green)

• Analogous- Picking colors adjacent on the color wheel (red-orange, orange, yellow-orange)

Resources for Color

• Colorschemedesigner.com

• Web search for “blank website color” for examples

• Web Color Code Charts

• Adobe has a website dedicated to this as well

Alpha Layer

• Alpha defines the opacity (how opaque or translucent) your color is.

• Opacity is given as a value between 0.0 and 1.0 (0 and 100%)

• Rgba (0, 0, 0, 0.5)

Hue Saturation Lightness

• Different than HSB• New to CSS3• Lightness refers to the amount of

white or black added to a color– 0% = white, 50% = normal, 100% =

black

• Hsla also available (alpha)

Bitmap graphics & Formats

• Saving images as different formats!– Bitmap vs. Vector

• Bitmap formats– jpg, bitmap, png, gif

• Vector formats (not supported on the web)– svg (scalable vector graphics), dxf, dwg,

etc

Bitmap

• Color information setting the exact RGB value of every spot on the screen.

• More pixels = higher resolution = more space

• Photoshop

Vector

• Based on mathematical formulas, and infinitely scalable

• Do not yet play well with the web

• Illustrator (though can be saved out as bitmap types)

Important things about saving images!

1.Save Image in the right format!

2. Save Image at the right size!

3. Measure Images in pixels!

Photoshop

• Image Manipulation / Compositing / Creation tool

• Powerful, de-facto standard, but not the only one

Photoshop Demo

• And in class practice

• Finding images, loading images, file formats, selection tools, layers, blending modes and layers, smudge, blur and blur types, dodge and burn, color levels,

Short intermission

Photoshop Continued

As with everything in this class, the only way to get better is to work at it and try things that you want to make

A word about copyright / image & internet usage

• Included in the handout but:

• Creators decide how their work is to be used, and keep mindful of the different options (Copyright protected, Fair use, Creative commons)

Quiet times on the Moor – Eric Hagan

• In class demonstrations galore• Tutorials, trying new things etc

Homework!

• One image file that you create…–Must contain at least 3 different pictures

(yours or give credit) or– Be something you make yourself

(drawing tools in photoshop)

• One Styled! website page that has the image file– Link to this page from an index page…

one you have already or a new one

Homework (reading!)

• Chapter 12

• Adobe “getting started with photoshop” on today’s post

• Intellectual Property handout (resources page)

Homework example:

• thiserichagan.com/about.html