Class:Digital Portfolio 2013/Week 4
Jump to navigation
Jump to search
Last Week
- Browser Develop Tools
- Divs & Spans -vs- classes & ID's
- CSS Normalized
- CSS Floats
- CSS Position
- CSS Offset
- CSS Sliding Gallery
This Week
- Image Renaming Tips
- Batch Image Production Tips
- Project Review
- CSS Web Fonts
- CSS Background Images
- Tips for styling HTML headers
Notes
Image Processing & Image Renaming Tricks
In class we discussed a few different solutions for streamlining a photographers batch processing needs.
I have updated the Handy Utilities reference page for you here.
- A Better Finder Rename (http://www.publicspace.net/ABetterFinderRename/)
- Insanely quick and useful way to rename files and folders.
- Trial download available from the website, also available in the Mac App Store here.
- Dr (Russell) Brown's Image Processor Pro (http://www.russellbrown.com/scripts.html)
- Fantastic image processing extension for Photoshop/Bridge
- Direct link to download right here.
CSS3 Web Fonts
We discussed pretty much everything you need to know about CSS web fonts.
Reading/refresher materials
Web Font Purchase (download options)
Web Font Services (subscription-based)
TypeKit is now owned by adobe and the $50 membership is a free part of your Creative Cloud Membership.
Some Design/Type Inspiration
- Hoefler & Frere-Jones
- House Industries
- Lost Type Super awesome, super cheap, might be able to convert to web fonts.
- Beautiful (Google) Web Type
CSS Background Images
- CSS background-image Property at w3schools.com
Video Notes
Section A
- Mailchimp Overview
- Review everybody's CSS Overflow Galleries, few fixes
- Batch Image Resize for Photoshop/Bridge
- Everything you need to know about CSS3 Web Fonts
Section B
- Quick tips on image renaming
- Further discussion on the CSS Overflow Gallery and Batch Image Resize for Photoshop/Bridge
- Review everybody's CSS Overflow Galleries, few fixes
- Everything you need to know about CSS3 Web Fonts
- CSS Background Images and header tricks
Files
- The choppingblock / html-css-demos files will always be posted here from github.com here
- The Section A files that we made in class: SvaMPS-DP_20130528_A.zip
- The Section B files that we made in class: SvaMPS-DP_20130521_B.zip
Assignment
Great work this week folks, your CSS Overflow Galleries were quite nice.
- Use your newfound Web Font and CSS Background Image skills to add a header to the gallery projects you built last week.
- You can use your logo (logotype or brand mark) in conjunction with some CSS3 Web Font typography to build a nice site header.
- Section A folks, you can watch this video: CSS Background Images and header tricks
- If you get into trouble, watch the videos and look at the files above.
- I expect your header to be unique and related to your branding exploration work.
