System is processing data
Please download to view
...

Picto Font & IB Designable par Dimitri Dupuis Latour

by cocoaheads-france

on

Report

Category:

Software

Download: 0

Comment: 0

4,635

views

Comments

Description

Download Picto Font & IB Designable par Dimitri Dupuis Latour

Transcript

  • Icon Fonts « Pimp your app, without bitmap » Vector Artwork PaintCode UIImageRenderingModeRetina HD @3x Dimitri Dupuis-Latour @dupuislatour Font Awesome IBDesignable
  • Better with icons Nom Prénom Reviews: 4,5 étoiles Ville: Paris 9ème Notifications Paiements Statistiques Réglages Aide / Tutoriel ProfilDiscussionRecherche
  • Better with icons Nom Prénom ! Paris 9ème Notifications Paiements Statistiques Réglages Aide / Tutoriel ProfilDiscussionRecherche " user $ % ? ' ( ⋆ ⋆ ⋆ ⋆ ⋆ 4,5 + user
  • * 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 • …
  • Solution
  • BYOIAF Bring your own icons & fonts with Style
  • Switch from Bitmap to Vector artwork Resolution for 2015:
  • 1. Resolution Hell 2. Weight 3. Flexibilty Problems with Bitmap
  • Problem #1 : Resolution hell Retina Retina HD Normal
  • Android: 2 more sizes ! iOS ✅ n/a ✅ ✅ n/a Android ✅ ✅ ✅ ✅ ✅ New New
  • 150/1491GBA7 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 [ne w] iP ad M ar ch 2 01 2 iP od to uc h Se pt em be r 2 00 7 iP ho ne 3G Ju ly 20 08 iP od to uc h (2n d ge n) Se pt em be r 2 00 8 iP ho ne 3G S Ju ne 2 00 9 iP od to uc h (3r d ge n) Se pt em be r 2 00 9 iP ad Ap ril 20 10 iP ad 2 M ar ch 2 01 1 iP ho ne 4S Oc to be r 2 01 1 iP ho ne 5 Se pt em be r 2 01 2 iP ho ne 5c Se pt em be r 2 01 3 iP ho ne 5s Se pt em be r 2 01 3 iP ad A ir Oc to be r 2 01 3 iP ad m ini 2 Oc to be r 2 01 3 iP ho ne 4 Ju ne 2 01 0 iP ad Oc to be r 2 01 2 iP ad m ini Oc to be r 2 01 2 iP od to uc h (5t h ge n) Se pt em be r 2 01 2 iP od to uc h (4t h g en ) S ep tem be r 2 01 0 iP ho ne Ju ne 2 00 7 AR M v6 AR M v7 AR M v7 s AR M 64 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 iP ho ne 6 Se pt em be r 2 01 4 1GB 8 M 4 2 A8 iP ho ne 6 Pl us Se pt em be r 2 01 4 2GB 8 M 4 2 A8X iP ad A ir 2 Oc to be r 2 01 4 1GB 8 M 4 2 A7 iP ad m ini 3 Oc to be r 2 01 4 iPhone5,1 iPhone5,2 iPad3,4iPad2,5 iPad2,6 iPod5,1iPad3,1 iPad3,2 iPod4,1iPhone3,1iPad1,1iPod3,1iPhone2,1iPod2,1iPhone1,2iPod1,1iPhone1,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.66.1.6 4.2.14.2.1 2.1.12.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.05.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 iOS_Support_Matrix_v3_1-October2014 copy.pdf 1 04/11/2014 13:00 1x1x 20%26% 3x 5%
  • • 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
  • Problem #2 : (App) Weight • Small App = Fast download • ‘Physical limit’ of 100 MB
  • , 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 , , ,
  • Solutions if you keep using bitmap
  • Workarounds if you keep using bitmap
  • Workaround Resolution Hell : Automator Script
  • Automator Script : Concept , 3x mic@3x.png , 2x mic@2x.png , 1x mic@1x.png
  • Automator Script : Creation
  • Automator Script : Usage
  • 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.
  • Warning: Pixel alignement Bad Good Hand tweaked
for @1x
  • Workaround Weight : Image Optim
  • Image Optim : Concept
  • 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
  • 2 More Workarounds: Xcode
  • #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
  • 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
  • #1 Template image rendering mode Allows image to be easily tinted
  • #2 Xcode 6 Vector Artwork Automatically generate rasterized versions at build-time
  • FontAwesome What else ?
  • FontAwesome : Set of 479 Icons
  • Made with FontAwesome© Nom Prénom ! Paris 9ème Notifications Paiements Statistiques Réglages Aide / Tutoriel ProfilDiscussionRecherche " user $ % ? ' ( ⋆ ⋆ ⋆ ⋆ ⋆ 4,5 + user , , , , , , 1x 2x 3x , , , , , , , , , ,
  • Use it everywhere • Your App • Your Website • A Keynote Presentation (Mac) - Great for mockups • A Keynote Presentation (iPhone) - Great for mockups
  • Use it everywhere • material design icon • http://google.github.io/material-design-icons/
  • Installation (Mac / PC)
  • 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
  • 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)
  • @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,5user
  • @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,5user
  • Example: Stacked Icons // No Photos please ! let icons = [ FAKFontAwesome.photoIconWithSize(30), FAKFontAwesome.banIconWithSize(30) ] let noPhotosPlease = UIImage(stackedIcons:icons, imageSize:CGSizeMake(30, 30))
  • 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. »
  • Google Material Design Font http://google.github.io/material-design-icons/
  • 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’
  • Create custom font: Glyphs.app
  • Create custom font: icomoon.io Import Custom Icons (Ex:Cocoa+Head+Paris) Choose stock icons Generate Font 1 2 3
  • Online resource: thenounproject.com
  • Be Creative !
Fly UP