Difference between revisions of "Class:Digital Portfolio 2013/Week 4"
Jump to navigation
Jump to search
(Created page with "== Last Week == * Browser Develop Tools * Divs & Spans -vs- classes & ID's * CSS Normalized * CSS Floats * CSS Position * CSS Offset * CSS Sliding Gallery == This Week == *...") |
(→Files) |
||
| (14 intermediate revisions by the same user not shown) | |||
| Line 18: | Line 18: | ||
* Tips for styling HTML headers | * 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 [[Desktop:Handy Utilities|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 [https://itunes.apple.com/us/app/better-rename-9/id414209656?mt=12 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 [http://www.russellbrown.com/images/tips_downloads/Services_Installer_2.3.1.zip right here]. | ||
| − | + | === CSS3 Web Fonts === | |
| − | |||
| − | == | + | We discussed pretty much everything you need to know about CSS web fonts. |
| + | |||
| + | '''Reading/refresher materials''' | ||
| + | * [http://alistapart.com/article/fonts-at-the-crossing Web Fonts at the Crossing] | ||
| + | * [http://www.html5rocks.com/en/tutorials/webfonts/quick/ Quick guide to webfonts via @font-face] | ||
| + | |||
| + | ==== Web Font Purchase (download options) ==== | ||
| + | |||
| + | * [http://www.google.com/fonts/ Google Fonts] | ||
| + | * [http://www.fontsquirrel.com fontsquirrel.com] | ||
| + | |||
| + | ==== Web Font Services (subscription-based) ==== | ||
| + | |||
| + | * [http://typekit.com typekit] | ||
| + | * [http://www.fonts.com fonts.com] | ||
| + | |||
| + | TypeKit is now owned by adobe and the $50 membership is a free part of your [https://creative.adobe.com Creative Cloud Membership]. | ||
| + | |||
| + | ==== Some Design/Type Inspiration ==== | ||
| + | |||
| + | * [http://www.typography.com Hoefler & Frere-Jones] | ||
| + | * [http://www.houseind.com/fonts/ House Industries] | ||
| + | * [http://losttype.com/browse/ Lost Type] Super awesome, super cheap, might be able to convert to web fonts. | ||
| + | * [http://hellohappy.org/beautiful-web-type/ Beautiful (Google) Web Type] | ||
| + | |||
| + | === CSS Background Images === | ||
| − | + | * [http://www.w3schools.com/cssref/pr_background-image.asp CSS background-image Property] at w3schools.com | |
| − | |||
== Video Notes == | == Video Notes == | ||
| + | |||
| + | === Section A === | ||
| + | |||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130528_MPS-DP-A_MailchimpOverview.mp4 Mailchimp Overview] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130528_MPS-DP-A_ProjectReview01.mp4 Review everybody's CSS Overflow Galleries, few fixes] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130528_MPS-DP-A_BatchImageProcessingOverview.mp4 Batch Image Resize for Photoshop/Bridge] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130528_MPS-DP-A_CSS3WebfontsOverview.mp4 Everything you need to know about CSS3 Web Fonts] | ||
| + | |||
| + | === Section B === | ||
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130521_MPS-DP-B_QuickImageRenaming.mp4 Quick tips on image renaming] | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130521_MPS-DP-B_QuickImageRenaming.mp4 Quick tips on image renaming] | ||
| Line 39: | Line 80: | ||
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130521_MPS-DP-B_ProjectReview01.mp4 Review everybody's CSS Overflow Galleries, few fixes] | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130521_MPS-DP-B_ProjectReview01.mp4 Review everybody's CSS Overflow Galleries, few fixes] | ||
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130521_MPS-DP-B_CSSWebFonts.mp4 Everything you need to know about CSS3 Web Fonts] | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130521_MPS-DP-B_CSSWebFonts.mp4 Everything you need to know about CSS3 Web Fonts] | ||
| − | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130521_MPS-DP-B_CSSBackgroundImageHeaders.mp4 CSS | + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130521_MPS-DP-B_CSSBackgroundImageHeaders.mp4 CSS Background Images and header tricks] |
| − | |||
| − | |||
| − | |||
| − | |||
== Files == | == Files == | ||
| − | + | * The choppingblock / html-css-demos files will always be posted here [https://github.com/choppingblock/html-css-demos/archive/master.zip from github.com here] | |
| − | : | + | * [[media:SvaMPS-DP_20130528_A.zip|The Section A files that we made in class: SvaMPS-DP_20130528_A.zip]] |
| + | * [[media:SvaMPS-DP_20130521_B.zip|The Section B files that we made in class: SvaMPS-DP_20130521_B.zip]] | ||
== Assignment == | == 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: [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130521_MPS-DP-B_CSSBackgroundImageHeaders.mp4 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. | ||
Latest revision as of 20:09, 31 May 2013
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.
