2. Watch at home the following video from DIYWebmastery (7-1/2 min):
Image Formats: Understanding images
Class preparation
1. Watch at home the following video by Jake Wright (12 mins):
2. Watch at home the following video from DIYWebmastery (7-1/2 min):
Image Formats: Understanding images
3. Learn about the RGB color format; play with the color selector at w3Schools.com
We will also go over the basics of images and color formats.
Class work
Topics for today
- General purpose editors: Notepad (Win), TextEdit (Mac), Sublime (Win/mac/linux)
- How to specify colors: color codes, RGB, HSL, hexadecimal
- Image depth: 8-bits, 24-bits
- Transparency: the alpha channel, RGBA, HSLA
- Image formats for webpages: GIF, JPG, PNG
- Adding styles: the style tag vs. the style sheet
- CSS (Cascade Style Sheets)
Workfiles
Download in class: classpak2.zip
We start from were we left off last week, adding the style:
- webpage 3: We silhouette the containers so we can see them, for debugging purposes. Then, we get started rescaling the images:
An error has occurred. Please try again later.
- webpage 4: taking care of the body and the container.
An error has occurred. Please try again later.
- webpage 5: taking care of the header.
An error has occurred. Please try again later.
- webpage 6: taking care of the content.
An error has occurred. Please try again later.
- webpage 7: taking care of the main picture and text.
An error has occurred. Please try again later.
- webpage 8: taking care of the footer
An error has occurred. Please try again later.
Resources
- online GIF/JPG/PNG compressor: PunyPNG
- online JPG compressor: tinyJPG
- online PNG compressor: tinyPNG
- offline PNG compressor for mac: image Alpha
- image to transparent PNG for mac: preview
- image to transparent PNG for windows: paint.net
- online HTML color picker: HTML color codes
- online hexadecimal color picker: colorpicker.com
- free images: Pixel bay
- CSS properties