Generating Multiple Dimension Icon Sprites for Retina Display

⚡️ talk for ID Ruby March 2016 Meetup

Transcript

1. (FOFSBUJOH.VMUJQMF
   %JNFOTJPO*DPO4QSJUFT
   GPS3FUJOB%JTQMBZ
   ⚡UBML!*%3VCZ.FFUVQ
   

   View Slide

2. w (JUIVC!pSFXBMLFS
   w 5XJUUFS!EJEL
   w 8PSL!$PPLQBE(MPCBM
   "
   

   View Slide

3. familiar?
   

   View Slide

4. &WFSZCPEZVTF$444QSJUFT
   

   View Slide

5. 8IBUCSPXTFSEJEZPVVTF
   JOZPVSNPCJMFQIPOF
   

   View Slide

6. 8IBUCSPXTFSEJEZPVS
   VTFSVTFJOUIFJSNPCJMF
   QIPOF
   

   View Slide

7. View Slide

8. View Slide

9. 6$#SPXTFS0QFSB.JOJ
   TUJMMPDDVQJFTdPG
   $PPLQBE*OEPOFTJBVTFST
   

   View Slide

10. 1BJOQPJOUT
    wMJNJUFE+4FYFDVUJPOT
    wNPTU$44OPU
    TVQQPSUFE
    ‣ UIBUJODMVEFTXFCGPOU,TPXF
    TUVDLXJUIDTTTQSJUFT
    

    View Slide

11. TQSJUFGBDUPSZ
    wIUUQTHJUIVCDPNKBLFTHPSEPO
    TQSJUFGBDUPSZ
    wHFOFSBUFTDTTTQSJUFTGSPNJDPO
    pMFT
    

    View Slide

12. (SPVQJDPOTJOUPGPMEFS
    CBTFEPOTJ[F
    BQQBTTFUTTQSJUFT
    ᵓᴷᴷMBSHF
    ᴹᵓᴷᴷSFDJQFQOH
    ᴹᵓᴷᴷSFQPSUQOH
    ᴹᵋᴷᴷTFUUJOHQOH
    ᵓᴷᴷNFEJVN
    ᴹᵓᴷᴷTFBSDIQOH
    ᴹᵓᴷᴷTIBSFQOH
    ᴹᵋᴷᴷUSBTIQOH
    ᵋᴷᴷTNBMM
    ᵓᴷᴷQSJOUQOH
    ᵓᴷᴷSFDJQFQOH
    ᵋᴷᴷUJNFSQOH
    wBWPJEMPBEJOHJO
    BTTFUQJQFMJOFT
    GBTUFSBTTFUT
    DPNQJMFUBTL
    

    View Slide

13. 0VUQVUJDPOJOJNBHFTGPMEFS
    BQQBTTFUTJNBHFTTQSJUFT
    ᵓᴷᴷMBSHFQOH
    ᵓᴷᴷNFEJVNQOH
    ᵋᴷᴷTNBMMQOH
    

    View Slide

14. 4BTTQBSUJBMTPVUQVU
    BQQBTTFUTTUZMFTIFFUT
    TQSJUFT
    ᵓᴷᴷ@TQSJUFMBSHFTDTT
    ᵓᴷᴷ@TQSJUFNFEJVNTDTT
    ᵋᴷᴷ@TQSJUFTNBMMTDTT
    

    View Slide

15. View Slide

16. HFUTQSJUFTXJEUI
    EJWJEFCZ
    SFUJOB
    

    View Slide

17. 8FHPUMVDLZ
    
    IUUQDBOJVTFDPNTFBSDICBDLHSPVOETJ[F
    

    View Slide

18. View Slide

19. View Slide

20. 5IFUBTL
    $ bundle exec rake assets:resprite
    wHFUBMMJDPOTJ[FT
    wTFUVQTQSJUFGBDUPSZDPOpHVSBUJPOT
    wFYFDVUF4QSJUF'BDUPSZSVO
    wEPTPNFUXFBLJOHGPSSFUJOBSVMFT
    

    View Slide

21. %FNP
    DPEFBWBJMBCMFJOIUUQTHJUIVCDPN
    pSFXBMLFSSVCZ@NFFUVQ@NBSDI@
    

    View Slide

22. $PODMVTJPOT
    w$444QSJUFTTUJMMVTFEFWFSZXIFSF
    wMFU`TIPQFNPSFCSPXTFSTFOBCMFT
    XFCGPOUTPXFEPO`UIBWFUPVTFJU
    BOZNPSF
    
    

    View Slide