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

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. 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
  2. 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
  3. Advantages • Workflow becomes much faster • Uses the most

    suitable format in any platform • Creates the best size for any device • Checking design is instantly
  4. Formats for Web (Picture Quality) BPG (HEVC) > H.264 I-Frame

    > WebP > JPEG 2000 > JPEG XR > JPEG http://xooyoozoo.github.io/yolo-octo-bugfixes/
  5. 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
  6. Distributing • Amazon CloudFront / Akamai / Others • HTTP/SPDY/HTTP

    2.0 support • As middleware • As Mac App, As Local Server
  7. CSS Output Info • Layer Mask • Clipping Mask •

    Layer Mask • Gradients • Layer Comp • Adjustment Layer • Linked & Smart Objects • Alpha Channel Mask
  8. 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; }