$30 off During Our Annual Pro Sale. View Details »

CAOS 2015 Summer: Introducing Hayabusa

CAOS 2015 Summer: Introducing Hayabusa

Gunther Brunner

July 08, 2015
Tweet

More Decks by Gunther Brunner

Other Decks in Programming

Transcript

  1. 2015 SUMMER
    #caos2015

    View Slide

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

    View Slide

  3. Data Binding
    Fastest Design Flow
    ImageHayabusa

    View Slide

  4. Designer Developer

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  8. Advantages

    View Slide

  9. Advantages Working becomes easier

    View Slide

  10. View Slide

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

    View Slide

  12. Input files
    /images/image.psd

    View Slide

  13. Output REST API

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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/

    View Slide

  21. GPU Texture Formats
    ASTC
    ETC
    PVRTC
    PVRTC.GZ
    DXT5
    DDS
    CRN
    CRN.GZ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  26. JPEG - PSD Layer Export
    /images/image.jpg?layer=Name

    View Slide

  27. Distributing
    • Amazon CloudFront / Akamai / Others
    • HTTP/SPDY/HTTP 2.0 support
    • As middleware
    • As Mac App, As Local Server

    View Slide

  28. As Local Server
    /assets/image.w480.x2.png
    • Unity’s asset bundle
    • iOS / Android static assets

    View Slide

  29. File generation time
    • Convert with the 1st request
    • After the 1st request, cache it

    View Slide

  30. CSS Output Info
    • Layer Mask
    • Clipping Mask
    • Layer Mask
    • Gradients
    • Layer Comp
    • Adjustment Layer
    • Linked & Smart Objects
    • Alpha Channel Mask

    View Slide

  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;
    }

    View Slide

  32. http://hayabusa.io
    ImageHayabusa

    View Slide