Upgrade to Pro — share decks privately, control downloads, hide ads and more …

画像変換Night「ImageHayabusa」デザイン作業効率化

62a74a5cefb3f6f50cdcb5ed863fd73b?s=47 Gunther Brunner
February 18, 2015

 画像変換Night「ImageHayabusa」デザイン作業効率化

62a74a5cefb3f6f50cdcb5ed863fd73b?s=128

Gunther Brunner

February 18, 2015
Tweet

Transcript

  1. σβΠϯ࡞ۀޮ཰Խ ImageHayabusa

  2. @gunta85 Günther Brunner άϯλɾϒϧϯφʔ CyberAgent Creative Engineer

  3. ໰୊ • σβΠφʔ 㱻 ϑϩϯτΤϯυɺωΠςΟϒΤϯδχΞ ͷؒʹେ͖͍ͳλΠϜϩε͕ൃੜ͢Δɻ • ϑϩϯτΤϯυʹඞཁͳૉࡐͷαΠζɺ੾Γग़͠Λ
 ຖ౓σβΠφʔʹґཔ͠ͳ͍ͱ͍͚ͳ͍ɻ •

    ͦΕʹैͬͯσβΠφʔ΋PSDΛ։͖ɺཔ·ΕͨαΠ ζͰ੾Γग़͞ͳ͍ͱ͍͚ͳ͍ɻ
  4. σβΠφʔ ΤϯδχΞ

  5. ݱঢ়ͷϫʔΫϑϩʔ ͜Ε͔Β PSD AI σβΠφʔ ΤϯδχΞ ੾Γग़͠ PNG? JPG? ϑϩϯτ࡞ۀ

    ImageAlpha? ImageOptim? Grunt? WebP? SpriteSheet? SVN image320.jpg PSD AI ͸΍Ϳ͞ /image.jpg?w=320 or
  6. ݱঢ়ͷϫʔΫϑϩʔ ͜Ε͔Β PSD AI σβΠφʔ ΤϯδχΞ ੾Γग़͠ PNG? JPG? ϑϩϯτ࡞ۀ

    ImageAlpha? ImageOptim? Grunt? WebP? SpriteSheet? SVN image320.jpg PSD AI ͸΍Ϳ͞ /image.jpg?w=320 or 30ඵ 10෼ʙ30෼ 1࣌ؒʙ1೔
  7. ϝϦοτ • ੍࡞ͷϑϩʔ͕ܶతʹૣ͘ͳΔ • ͋ΒΏΔϓϥοτϗʔϜʹ࠷దͳܗࣜ • ͋ΒΏΔσόΠεʹ࠷దͳαΠζ • σβΠϯͷ֬ೝ͕͙͢ʹग़དྷΔ Ϩεϙϯε޲্

    ίετμ΢ϯ εϐʔυΞοϓ ଈ࣌λϒϨοτରԠ
  8. ϝϦοτ

  9. ϝϦοτ ࡞ۀָ͕ʹͳΔ

  10. ղܾ

  11. ೖྗϑΝΠϧ PSD, AI, PNG /images/image.psd

  12. γϯϓϧUI

  13. ग़ྗ REST API

  14. JPEG - ෯ϦαΠζ /images/image.jpg?w=480 PNG32 - Retina/ImageOptim /images/image.w480.x2.png

  15. PNG 7 bit - ImageAlpha /images/image.png?colors=128 JPEG - നࠇ /images/image.jpg?grayscale=true

    PSD PSD
  16. PNG - ΅͔͠ /images/image.png?blur=10 WebP - Android/iOS Native༻ /images/image.webp PSD

    PSD WEBP
  17. BPG (HEVC) > H.264 I-Frame > WebP > JPEG 2000

    > JPEG XR > JPEG http://xooyoozoo.github.io/yolo-octo-bugfixes/ ը࣭ Web༻
  18. ASTCɺETCɺPVRTCɺPVRTC.GZɺDXT5ɺ DDSɺCRNɺCRN.GZ GPUςΫενϟ༻

  19. ETC - Android/WebGL༻ /images/image.etc PVRTC - Unity/iOS༻ /images/image.pvr?format=rgba4444 PVR GZIP

    - iOS Native༻ /images/image.pvr.gz
  20. ೖྗ /images/sprite.json { images: [ image1: "image1.png", image2: "image2.psd", image3:

    "image3.jpg", image4: "image4.png", image5: "image5.png?w=200", ], max: { w: 2048, h: 2048 } } ग़ྗ /images/sprite.sheet.jpg /images/sprite.sheet.json ࣗಈੜ੒εϓϥΠτγʔτ PSD
  21. JPEG - PSDϨΠϠʔॻ͖ग़͠ /images/image.jpg?layer=ϨΠϠʔ໊

  22. ഑৴ܗࣜ • Amazon CloudFrontɺCloudFlare CDN഑৴ • HTTP/SPDY/HTTP 2.0ରԠͷΫϥ΢υαʔϏε • ϛουϧ΢ΣΞͰ΋ߏஙՄೳʢϓϩδΣΫτ಺ʣ

    • MacΞϓϦɺϩʔΧϧαʔόʔͰ΋ಈ͘
  23. ϩʔΧϧͰ΋ಈ͘ • UnityͷΞηοτόϯυϧ • iOS/AndroidͷstaticΞηοτ /assets/image.w480.x2.png

  24. ϑΝΠϧͷੜ੒࣌ • Ұճ໨APIΛୟ͍ͨΒɺม׵͢Δ • ͦΕҎ߱ɺΩϟογϡ͢Δ

  25. CSSग़ྗ৘ใ •ϨΠϠʔϚεΫ •ΫϦοϐϯάϚεΫ •ϨΠϠʔϚεΫ •άϥσʔγϣϯ •ϨΠϠʔΧϯϓ •ௐ੔ϨΠϠʔ •ϦϯΫˍຒΊࠐΈεϚʔτΦϒδΣΫτ •ΞϧϑΝνϟϯωϧϚεΫ

  26. CSSग़ྗ /images/image.css?layer=name .name { font-family: "Source Sans Pro"; color: rgba(69,

    69, 69, 0.7); font-size: 36px; font-weight: 700; line-height: 36px; width: 253px; height: 69px; }
  27. http://hayabusa.io ImageHayabusa @gunta85