Icon Fonts - CocoaHeads Paris

Learn how to embed all your the icons and pngs of your app in a custom icon font (à la FontAwesome), so that you can adapt to any resolution (Retina 1x, 2x, 3x), change size and color on the fly, and convert your icons to AttributedText or UIImage. Say stop to bitmap, and hello to vector artwork !

Talk given at CocoaHeads Paris, Jan 2015 (http://cocoaheads.fr/2015/01/slides-de-janvier-2015-paris/)

Transcript

1. Icon Fonts « Pimp your app, without bitmap » Vector Artwork PaintCode UIImageRenderingMode Retina HD @3x Dimitri Dupuis-Latour @dupuislatour Font Awesome IBDesignable
2. Better with icons Nom Prénom Reviews: 4,5 étoiles Ville: Paris 9ème Notifications Paiements Statistiques Réglages Aide / Tutoriel Profil Discussion Recherche
3. Better with icons Nom Prénom Paris 9ème Notifications Paiements Statistiques Réglages Aide / Tutoriel Profil Discussion Recherche ? ⋆ ⋆ ⋆ ⋆ ⋆ 4,5
4. * Icons not included • Sometimes you don’t have a dedicated designer (yet) • Sometimes design isn’t ready • Sometimes design isn’t approved by the client • Maybe it’s just a prototype / early demo • Maybe it’s just an internal app / backoffice • …
5. Solution
6. BYOIAF Bring your own icons & fonts with Style
7. Switch from Bitmap to Vector artwork Resolution for 2015:
8. 1. Resolution Hell 2. Weight 3. Flexibilty Problems with Bitmap
9. Problem #1 : Resolution hell Retina Retina HD Normal
10. Android: 2 more sizes ! iOS ✅ n/a ✅ ✅ n/a Android ✅ ✅ ✅ ✅ ✅ New New
11. 150/149 1GB A7 M 4 128MB 6 M 4 1 128MB 6 M 4 1 128MB 6 M 4 1 128MB 6 M 4 1 256MB 7 M 4 2 256MB 7 M 4 2 256MB 7 M 4 2 A4 512MB 7 M 4 2 A4 256MB 7 M 4 2 A4 512MB 7 M 4 2 A5 512MB 7 M 4 2 A5 1GB 7 M 4 2 A5X 512MB 7 M 4 2 A5 512MB 7 M 4 2 A5 1GB 7 M 4 2 A6 1GB 7 M 4 2 A6X 1GB 7 M 4 2 A6 1GB 8 M 4 2 A7 1GB 8 M 4 2 A7 1GB 8 M 4 2 A7 [new] iPad March 2012 iPod touch September 2007 iPhone 3G July 2008 iPod touch (2nd gen) September 2008 iPhone 3GS June 2009 iPod touch (3rd gen) September 2009 iPad April 2010 iPad 2 March 2011 iPhone 4S October 2011 iPhone 5 September 2012 iPhone 5c September 2013 iPhone 5s September 2013 iPad Air October 2013 iPad mini 2 October 2013 iPhone 4 June 2010 iPad October 2012 iPad mini October 2012 iPod touch (5th gen) September 2012 iPod touch (4th gen) September 2010 iPhone June 2007 ARMv6 ARMv7 ARMv7s ARM64 Key Device Compatibility Do not support Full support Earliest release Latest release Chip generation / Device memory Geek Bench rating Single Core/Multi Core * Geekbench v2 scores only Accelerometer Bluetooth LE GPS (Cellular iPad only) Microphone Still Camera Retina Display ARM Version Camera Flash Gyroscope OpenGL ES Version Telephony Lightning Port M7/M8 Coprocessor Front Facing Camera Location Services Peer-to-Peer Video Camera TouchID Auto-Focus Camera Game Kit Magnetometer SMS Wifi Apple Pay  iOS Support Matrix Autumn 2014 Edition - v3.1.2 http://iossupportmatrix.com @isupportmatrix English iPhone OS 1.0 iPhone SDK 2.0 iPhone SDK 3.0 iPhone SDK 4.0 iOS 5 iOS 6 iOS 7 Model ID iOS 8 1GB 8 M 4 2 A8 iPhone 6 September 2014 1GB 8 M 4 2 A8 iPhone 6 Plus September 2014 2GB 8 M 4 2 A8X iPad Air 2 October 2014 1GB 8 M 4 2 A7 iPad mini 3 October 2014 iPhone5,1 iPhone5,2 iPad3,4 iPad2,5 iPad2,6 iPod5,1 iPad3,1 iPad3,2 iPod4,1 iPhone3,1 iPad1,1 iPod3,1 iPhone2,1 iPod2,1 iPhone1,2 iPod1,1 iPhone1,1 iPhone4,1 iPhone5,3 iPhone5,4 iPhone6,1 iPhone6,2 iPad4,1 iPad4,2 iPad4,4 iPad4,5 iPad2,1 iPad2,4 iPhone7,2 iPhone7,1 iPad5,3 iPad5,4 iPad4,7 iPad4,8 iPad4,9 136* 135* 136* 188* 150/149 278* 454* 209/209 7.1.2 206/206 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 262/495 215/406 260/493 215/410 260/491 712/1278 773/1408 698/1249 1363/2456 1304/2528 1418/2568 8.1 1610/2880 8.1 1596/2854 8.1 1794/4441 8.1 1418/2568 7.0 7.0 7.0 7.0 4.2.1 6.1.6 6.1.6 4.2.1 4.2.1 2.1.1 2.0 1.0 1.1 3.1.3 3.1.3 3.0 5.1.1 4.3.5 6.0 4.3.5 5.0 5.1.1 3.1.1 6.0 4.0 4.2.6 4.2.1 6.0 6.0 iPad SDK 3.2 5.1 (GSM) (CDMA)     C M Y CM MY CY CMY K 1x 1x 20% 26% 3x 5%
12. • You have to «handle » : • 2 resolutions (2x, 3x) for iPhone-only, ios7+ apps, • 2 resolutions (1x, 2x) for iPad-only apps, • 3 resolutions (1x, 2x, 3x) for Universal or iOS 6-compatible apps • ≃ 4/5 resolutions for cross-platform apps (iOS + Android) • «handle » : generate, manage in xcassets / rename correctly @2x~ipad or ~ipad@2x ?? Problem #1 : Resolution hell
13. Problem #2 : (App) Weight • Small App = Fast download • ‘Physical limit’ of 100 MB
14. Record Recording… recorded: Today, 7:00pm Enregistrement #1 recorded: Today, 7:00pm Enregistrement #1 2x 3x 1x 1x 2x 3x Problem #3 : (lack of) Flexibility
15. Solutions if you keep using bitmap
16. Workarounds if you keep using bitmap
17. Workaround Resolution Hell : Automator Script
18. Automator Script : Concept 3x mic@3x.png 2x mic@2x.png 1x mic@1x.png
19. Automator Script : Creation
20. Automator Script : Usage
21. Automator script : Summary • Input: @3x pngs. Output: @2x and @1x pngs • Always downscale, don’t upscale • Input images should be a multiple of 3 • Not perfect solution: could generate fuzzy images. Artwork should be aligned on the pixel grid. Ideally each resolution should be tweaked by hand by the designer.
22. Warning: Pixel alignement Bad Good Hand tweaked
 for @1x
23. Workaround Weight : Image Optim
24. Image Optim : Concept
25. Image Optim : Summary • Compress assets with ImageOptim • It tries several algorithms and keeps the best • It also removes useless EXIF data • Tip: You should automate compression of your assets
 (add a ‘compress’ build phase in your Xcode project) • Observed savings: ≃ 20 / 30%* * Results may vary
26. 2 More Workarounds: Xcode
27. #1 Template image rendering mode @availability(iOS, introduced=7.0) enum UIImageRenderingMode : Int { case Automatic // Use the default rendering mode for the context where the image is used case AlwaysOriginal // Always draw the original image, without treating it as a template case AlwaysTemplate // Always draw the image as a template image, ignoring its color information } Allows image to be easily tinted
28. let image = UIImage(named:"foo")! let template = image.imageWithRenderingMode(.AlwaysTemplate) button.setImage(template, forState:.Normal) imageView.image = template imageView.tintColor = UIColor.redColor(), blueColor(), … 1 2 3 1 2 3 #1 Template image rendering mode Allows image to be easily tinted
29. #1 Template image rendering mode Allows image to be easily tinted
30. #2 Xcode 6 Vector Artwork Automatically generate rasterized versions at build-time
31. FontAwesome What else ?
32. FontAwesome : Set of 479 Icons
33. Made with FontAwesome© Nom Prénom Paris 9ème Notifications Paiements Statistiques Réglages Aide / Tutoriel Profil Discussion Recherche ? ⋆ ⋆ ⋆ ⋆ ⋆ 4,5 1x 2x 3x
34. Use it everywhere • Your App • Your Website • A Keynote Presentation (Mac) - Great for mockups • A Keynote Presentation (iPhone) - Great for mockups
35. Use it everywhere • material design icon • http://google.github.io/material-design-icons/
36. Installation (Mac / PC)
37. Installation (iPhone) • Use .mobileconfig to distribute font • Mecanism to force remote configuration of corporate devices (passcode policies, email config, custom corporate fonts) • Create with Apple Configurator (free on MAS) • .mobileconfig embeds the font (111 Ko overall) • Mail to yourself or host on a https website (similar to adhoc distribution) • Works on iOS as well as OS X
38. FontAwesomeKit • iOS library to ease FontAwesome Integration • pod ‘FontAwesomeKit’ • Create / Modify / Stack icons from code • Generates UIImage or NSAttributedString • 1594 icons, 380Ko (FA only: 479 icons / 86 Ko)
39. @IBOutlet private weak var locationLabel: UILabel! // … let icon = FAKFontAwesome.locationArrowIconWithSize(30) locationLabel.attributedText = icon.attributedString() Example: Attributed Text Nom Prénom Paris 9ème ⋆ ⋆ ⋆ ⋆ ⋆ 4,5
40. @IBOutlet private weak var userPicture: UIImageView! // … let icon = FAKFontAwesome.userIconWithSize(30) icon.addAttribute(NSForegroundColorAttributeName, value:UIColor.lightGrayColor()) userPicture.image = icon.imageWithSize(CGSize(width: 44, height: 44)) userPicture.layer.borderColor = UIColor.darkGrayColor().CGColor userPicture.layer.borderWidth = 1 userPicture.layer.cornerRadius = 22 Example: User Picture Placeholder Nom Prénom Paris 9ème ⋆ ⋆ ⋆ ⋆ ⋆ 4,5
41. Example: Stacked Icons // No Photos please ! let icons = [ FAKFontAwesome.photoIconWithSize(30), FAKFontAwesome.banIconWithSize(30) ] let noPhotosPlease = UIImage(stackedIcons:icons, imageSize:CGSizeMake(30, 30))
42. Android equivalent : Iconify Converts FontAwesome Icons into text or image « If, like me, you're tired of copying 5 images (ldpi, mdpi, hdpi, xhdpi, xxhdpi) for each icon you want to use in your app, for each color you want to use them with, and bang your head on the wall when you suddently need to change their color or size, then I think Iconify can help you. »
43. Google Material Design Font http://google.github.io/material-design-icons/
44. Create your own custom font • Useful if you have custom icons & logos • No need to embed FontAwesome (but you can if you want) • You need to create your font. Good tool: « Glyphs » • Use FontAwesomeKit infrastructure with your own font • pod ‘FontAwesomeKit/Core’
45. Create custom font: Glyphs.app
46. Create custom font: icomoon.io Import Custom Icons (Ex:Cocoa+Head+Paris) Choose stock icons Generate Font 1 2 3
47. Online resource: thenounproject.com
48. Be Creative !