Introduction to Multimedia MMP100 – Spring 2015 Eric Hagan BMCC 2/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 Analog vs. Digital 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