Tweet
Tweet

Slide 1

Slide 1 text

2015 SUMMER #caos2015

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Data Binding Fastest Design Flow ImageHayabusa

Slide 4

Slide 4 text

Designer Developer

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Advantages • Workflow becomes much faster • Uses the most suitable format in any platform • Creates the best size for any device • Checking design is instantly

Slide 8

Slide 8 text

Advantages

Slide 9

Slide 9 text

Advantages Working becomes easier

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Input files /images/image.psd

Slide 13

Slide 13 text

Output REST API

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Formats for Web (Picture Quality) BPG (HEVC) > H.264 I-Frame > WebP > JPEG 2000 > JPEG XR > JPEG http://xooyoozoo.github.io/yolo-octo-bugfixes/

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

ETC - Android / WebGL /images/image.etc

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

http://hayabusa.io ImageHayabusa