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

CAOS 2015 Summer: Introducing Hayabusa

CAOS 2015 Summer: Introducing Hayabusa

62a74a5cefb3f6f50cdcb5ed863fd73b?s=128

Gunther Brunner

July 08, 2015
Tweet

Transcript

  1. 2015 SUMMER #caos2015

  2. Günther Brunner @gunta85 Hayabusa 2015 SUMMER #caos2015 Morino Kohei @kohei_april20

  3. Data Binding Fastest Design Flow ImageHayabusa

  4. Designer Developer

  5. Current Workflow New Workflow PSD AI Designer Developer Export PNG?

    JPG? Frontend ImageAlpha? ImageOptim? Grunt? WebP? SpriteSheet? SVN image320.jpg PSD AI Hayabusa /image.jpg?w=320 or
  6. Current Workflow New Workflow PSD AI Export PNG? JPG? Frontend

    ImageAlpha? ImageOptim? Grunt? WebP? SpriteSheet? SVN image320.jpg PSD AI Hayabusa /image.jpg?w=320 or 10 min 10 ~ 30 min 1 hour ~ 1 day Designer Developer
  7. Advantages • Workflow becomes much faster • Uses the most

    suitable format in any platform • Creates the best size for any device • Checking design is instantly
  8. Advantages

  9. Advantages Working becomes easier

  10. None
  11. Input files PSD, AI, PNG /images/image.psd

  12. Input files /images/image.psd

  13. Output REST API

  14. JPEG - Resize Width /images/image.jpg?w=480

  15. PNG32 - Retina / ImageOptim /images/image.w480.x2.png

  16. PNG 7 bit - ImageAlpha /images/image.png?colors=128 PSD

  17. JPEG - Black & white /images/image.jpg?grayscale=true PSD

  18. PNG - Blur /images/image.png?blur=10

  19. WebP - Android / iOS Native /images/image.webp PSD WEBP

  20. Formats for Web (Picture Quality) BPG (HEVC) > H.264 I-Frame

    > WebP > JPEG 2000 > JPEG XR > JPEG http://xooyoozoo.github.io/yolo-octo-bugfixes/
  21. GPU Texture Formats ASTC ETC PVRTC PVRTC.GZ DXT5 DDS CRN

    CRN.GZ
  22. ETC - Android / WebGL /images/image.etc

  23. PVRTC - Unity / Cocos2D / iOS /images/image.pvr?format=rgba4444

  24. PVR GZIP - iOS Native /images/image.pvr.gz

  25. Sprite Sheet / Atlas Auto Generation { images: [ image1:

    "image1.png", image2: "image2.psd", image3: "image3.jpg", image4: "image4.png", image5: "image5.png?w=200", ], max: { w: 2048, h: 2048 } } Input /images/sprite.json Output /images/sprite.sheet.jpg /images/sprite.sheet.json PSD
  26. JPEG - PSD Layer Export /images/image.jpg?layer=Name

  27. Distributing • Amazon CloudFront / Akamai / Others • HTTP/SPDY/HTTP

    2.0 support • As middleware • As Mac App, As Local Server
  28. As Local Server /assets/image.w480.x2.png • Unity’s asset bundle • iOS

    / Android static assets
  29. File generation time • Convert with the 1st request •

    After the 1st request, cache it
  30. CSS Output Info • Layer Mask • Clipping Mask •

    Layer Mask • Gradients • Layer Comp • Adjustment Layer • Linked & Smart Objects • Alpha Channel Mask
  31. CSS Output /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; }
  32. http://hayabusa.io ImageHayabusa