1. Introduction to Multimedia
MMP100 – Spring 2015
Eric Hagan
BMCC
2/28/2015

2. Quiz Time!

3. 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?

4. 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)

5. 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)

6. Color Space

7. 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)

8. 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)

9. 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

10. 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)

11. 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)

12. 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

13. Bitmap
Color information setting the exact RGB value of every spot on the screen.
More pixels = higher resolution = more space
Photoshop

14. 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)

15. Important things about saving images!
1.Save Image in the right format! 2. Save Image at the right size! 3. Measure Images in pixels!

16. Photoshop Image Manipulation / Compositing / Creation tool
Powerful, de-facto standard, but not the only one

17. 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,

18. Short intermission

19. 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

20. 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)

22. Quiet times on the Moor – Eric Hagan

23. In class demonstrations galore
Tutorials, trying new things etc

24. 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

25. Homework (reading!) Chapter 12
Adobe “getting started with photoshop” on today’s post
Intellectual Property handout (resources page)

26. Homework example:
thiserichagan.com/about.html