Difference between revisions of "Class:Digital Portfolio 2015/Week 3"
Jump to navigation
Jump to search
(→The "size" of the web) |
(→Video Notes) |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 16: | Line 16: | ||
=== The "size" of the web === | === The "size" of the web === | ||
| + | |||
| + | ==== Image Sizes Today ==== | ||
| + | ; Small - 800px wide | ||
| + | ; Medium - 1200px - 1600px wide | ||
| + | ; Large - 1800px wide and up | ||
* [http://sebastien-gabriel.com/designers-guide-to-dpi/ Screen Designers Guide to DPI] | * [http://sebastien-gabriel.com/designers-guide-to-dpi/ Screen Designers Guide to DPI] | ||
| Line 25: | Line 30: | ||
* [http://en.wikipedia.org/wiki/Image_file_formats Image Format Reference] | * [http://en.wikipedia.org/wiki/Image_file_formats Image Format Reference] | ||
* I also showed the excellent tool [http://imageoptim.com Imageoptim] for further compressing your images | * I also showed the excellent tool [http://imageoptim.com Imageoptim] for further compressing your images | ||
| + | |||
| + | === 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] | ||
== Video Notes == | == Video Notes == | ||
=== Section A === | === Section A === | ||
| − | + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150527_MPS_DPB_01_SizeOfTheWeb.mp4 The Size of the Web] | |
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150527_MPS_DPB_02_ImageCompression.mp4 Image Compression & Save for Web] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150527_MPS_DPB_03_ImageOptimum.mp4 Quick ImageOptimum Overview] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150527_MPS_DPB_04_WebFonts.mp4 Web Fonts 101] | ||
=== Section B === | === Section B === | ||
| − | + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150601_MPS_DPA_01_SizeOfTheWe.mp4 The Size of the Web] | |
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150601_MPS_DPA_02_ImageCompression.mp4 Image Compression & Save for Web] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150601_MPS_DPA_03_BridgeAndMetadata.mp4 Using Bridge & Adding Metadata] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150601_MPS_DPA_04_WebFonts.mp4 Web Fonts 101] | ||
== Files == | == Files == | ||
Latest revision as of 22:24, 2 June 2015
Last Week
- Review Last Week
- Talk about the responsive web stuff that we did not look at last week
- The "size" of the internet
- Tools: Text Editors
- HTML / CSS Review
This Week
- Prepping Images for the Web
Open Questions
Notes
The "size" of the web
Image Sizes Today
- Small - 800px wide
- Medium - 1200px - 1600px wide
- Large - 1800px wide and up
Optimizing Images for The Web
We covered many aspects/techniques related to optimizing your images for the web.
- Image Format Reference
- I also showed the excellent tool Imageoptim for further compressing your images
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
