Agenda
- Session 7 Review
- Wireframes
- Grids
- Final Exam
- Image Types
- BMP - Bitmap
- TIFF - Tiff
- EPS - EPS
- GIF - Gif - flat colors, crisp edges, capable of transparency and animation
- JPG - Jaypeg - photographs
- PNG - PNG / Ping - complex transparency, or partial transparency
- Image Comparison p371
- Transparency Comparison
- Digital Design Production
- Adobe Photoshop
- Adobe Fireworks
- The Bezier Pen Tool
- Backgrounds
- Navigation Study
- Sprites
- Practical Practice
Readings
- Chapter 18 & 19
- Opera Web Standards Curriculum
- None
Homework
Sexy Navigation
Create a navigation for a site that is attractive. Attractive means uses color effectively, uses background images where necessary. The nav should also be usable and accessible. You only need to have the navigation on the site, no other containers or elements required.
Portfolio Re-organize
Let’s do a mini spiff up of our portfolio’s. Reorganize your portfolio using the div structure we have discussed. Include a header, navigation, content, and footer section. You may do some minimal styling, font-size, color, some borders, etc. If you feel comfortable with Photoshop or Fireworks you may continue and begin using graphics.
Article: None
No article.
Resources
Grids
CSS Sprites
- A List Apart: CSS Sprites
- CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
- Trevor Davis: CSS Sprites
Color
- Kuler: Adobe Labs has released an incredibly useful and well designed color palette creator that beats the rest.
- Contrast checker: evalute contrast between type and background
- Color Scheme Generator 2: My favorite color scheme generation tool for its control and variety of system generation.
- Color Blender: A good, simple color utility, which exports to Illustrator and Photoshop
- Colour Lovers: Color palette generation in a social setting
- Color Palette Creator: Give it a base color, it will give you a color palette
- The Man in Blue: Technicolor: Palette shown in context of a CSS layout
- 4096Color Wheel: A different approach to a color wheel
- Colr.org: Generate color systems from a photo or randomly
- Color Mixers: A staple in color generation systems
Type
- Typetester: Compare web type in various faces, sizes, etc. One of my all time favorites
- Veer: Wonderful selection of fonts
- The Elements of Typographic Style Applied to the Web
- Usable Type
- Identifont: Utility for identifying a font
- Type Navigator: Visual font search system
- Font Explorer: Mac font book application
- Font Agent Pro: OS X font book
- Character Encoding Chart
Stock Photography
- Veer: Wonderful selection of stock photography
- iStock Photo
- Morgue File: Free!
- Stock Xchange
- Stock Vault
- iStock Pro
- Open Photo
- Getty Images
- Index Stock Imagery
- Absolute Vision
Icons
- Icon Buffet: Top notch icons for blogs, CMS, and more
- FamFamFam: A high qaulity, massive library of useful UI icons
- FamFamFam Silk icon Set
- Icons: A good selection of icons
- Sanscons: Selection of icons with standard background color
- Tango Project: Open source icon project. High quality
- Mini Icons: Tiny UI icons
- Feed Icons: Get the standardized icons for RSS feeds
- Icons for Microformats