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

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

Gunther Brunner
February 18, 2015

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

Gunther Brunner

February 18, 2015
Tweet

More Decks by Gunther Brunner

Other Decks in Design

Transcript

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

    View Slide

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

    View Slide

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

    ຖ౓σβΠφʔʹґཔ͠ͳ͍ͱ͍͚ͳ͍ɻ
    • ͦΕʹैͬͯσβΠφʔ΋PSDΛ։͖ɺཔ·ΕͨαΠ
    ζͰ੾Γग़͞ͳ͍ͱ͍͚ͳ͍ɻ

    View Slide

  4. σβΠφʔ ΤϯδχΞ

    View Slide

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

    View Slide

  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೔

    View Slide

  7. ϝϦοτ
    • ੍࡞ͷϑϩʔ͕ܶతʹૣ͘ͳΔ
    • ͋ΒΏΔϓϥοτϗʔϜʹ࠷దͳܗࣜ
    • ͋ΒΏΔσόΠεʹ࠷దͳαΠζ
    • σβΠϯͷ֬ೝ͕͙͢ʹग़དྷΔ
    Ϩεϙϯε޲্
    ίετμ΢ϯ
    εϐʔυΞοϓ
    ଈ࣌λϒϨοτରԠ

    View Slide

  8. ϝϦοτ

    View Slide

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

    View Slide

  10. ղܾ

    View Slide

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

    View Slide

  12. γϯϓϧUI

    View Slide

  13. ग़ྗ REST API

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. BPG (HEVC) > H.264 I-Frame >
    WebP > JPEG 2000 > JPEG XR > JPEG
    http://xooyoozoo.github.io/yolo-octo-bugfixes/
    ը࣭
    Web༻

    View Slide

  18. ASTCɺETCɺPVRTCɺPVRTC.GZɺDXT5ɺ
    DDSɺCRNɺCRN.GZ
    GPUςΫενϟ༻

    View Slide

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

    View Slide

  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

    View Slide

  21. JPEG - PSDϨΠϠʔॻ͖ग़͠
    /images/image.jpg?layer=ϨΠϠʔ໊

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. http://hayabusa.io
    ImageHayabusa
    @gunta85

    View Slide