CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks

15,624 views

Published on

デバイスの高精細化が進む中、Fireworks を使ったデザインワークフローはどうなるの?をご紹介

Published in: Design

CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks

  1. 1. HiDPI 時代の Fireworks 松田直樹 Flickr : ebayink
  2. 2. 松田直樹 2月 発売
  3. 3. What’s HiDPI ? 代表的なものが、Apple製品の Retina Display (iPhone 326 ppi) (iPad 264 ppi) デバイスの高解像度化
  4. 4. HiDPI = = 高ピクセル密度 高 device-pixel-ratio
  5. 5. device-pixel-ratio ?
  6. 6. device-pixel-ratio HTMLコンテンツの1pxを 実際のデバイス上で 何倍のpxで 描画するかを示す数値
  7. 7. は え、なんて? Flickr : Tsahi Levent-Levi
  8. 8. device-pixel-ratio = 2
  9. 9. device-pixel-ratio = 2 @1x Resolution (4dpx) @2x Resolution (16dpx)
  10. 10. device-pixel-ratio = 2 <img src="xxx.png" width="320">
  11. 11. device-pixel-ratio iPhone 4∼ 2 Android 1.5 が多い 326 ppi 250 ppi
  12. 12. device-pixel-ratio 3 HTC J butterfly Xperia Z INFOBAR A02 440 ppi
  13. 13. 進み続ける、 デバイスの HiDPI 化 Flickr : Jeffrey
  14. 14. WORKFLOW for HIDPI
  15. 15. iOSアプリデザインのRetina対応 ワークフローが話題にもなりました http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
  16. 16. バシャログ - Retina対応用にページを 分けるFireworksコマンド http://creative-tweet.net/blog/2012/12/retina-image-exporter.html
  17. 17. 画像をRetina対応で書き出しする Fireworksの拡張機能作ったよ。 http://creative-tweet.net/blog/2012/12/retina-image-exporter.html
  18. 18. 株式会社まぼろし まつだなおきさん の場合
  19. 19. カンバスは、基本的に w 640px ビットマップはまずシンボル化 @2x の画像だけ書き出し @1x の画像は一括で半分にリサイズ CSS3, SVG, Web Fonts を活用
  20. 20. カンバスは 横幅 640px
  21. 21. カンバスは 横幅 640px 640px メリット • 多くのスマホの ブラウザが、横幅 320px なため • そのまま書き出せば、 Retina 対応可 • コーダーが別の場合 でも、失敗することが ない
  22. 22. カンバスは 横幅 640px 640px デメリット • すべてのパーツ、 テキストのサイズを 2倍に計算する必要が ある • 実機の実寸との差異が あり、サイズ感が つかみにくい
  23. 23. カンバスが カンバスは 横幅 640px だと... 320px 320px デメリット • あとから @2x 画像が 作りにくい • ビットマップを 拡大すると劣化する • テキストのフォント サイズがおかしくなる • • 9スライスが崩れる 書き出した後で2倍に できない
  24. 24. カンバスは 横幅 640px 実機でのサイズ感が 分かりにくければ... 作ったカンプに、 共通ライブラリの 「iPhone → Hardware」を 重ねてみましょう 画面内が 640px になっています
  25. 25. カンバスは 横幅 640px それでもまだ、 実機でのサイズ感が 分かりにくければ... LiveView https://itunes.apple.com/jp/app/liveview/id301069270?mt=8
  26. 26. カンバスは 横幅 640px 640px の大きいサイズで 作っておけば、 小さいサイズはどうとでもなる!
  27. 27. 2倍で作るコツ
  28. 28. 2倍で作るコツ 高さ、幅、border 幅、 すべてを偶数値で作る Why ? 50%に縮小した際、エッジが ボケるため _参考 Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
  29. 29. 2倍で作るコツ Photoshop ライブ エフェクトは使わない Why ? 拡大縮小した際、比例して リサイズされないため _参考 Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
  30. 30. 2倍で作るコツ 角丸は、なるべく CSS3 で実装する Why ? 縮小した際、つぶれてしまう ことがあるため _参考 Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
  31. 31. 2倍で作るコツ 標準のテクスチャは 使わない Why ? テクスチャは2倍サイズがなく、 リサイズもできないため _参考 Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
  32. 32. 2倍で作るコツ Subtle Patterns Why ? _参考 Subtle Patterns http://subtlepatterns.com 高品質なテクスチャを @2x, @1x のセットで 配布している
  33. 33. 2倍で作るコツ In general, bitmaps are your enemy when designing iOS apps. Ivo Mynttinen ざっくりいえば、iOSアプリを デザインする上でビットマップは 君の敵、って感じ。
  34. 34. ビットマップはシンボル化
  35. 35. ビットマップはシンボル化しておく カンバスは 横幅 640px グラフィック シンボル 非破壊編集
  36. 36. ビットマップはシンボル化しておく カンバスは 横幅 640px グラフィックシンボル ビットマップを 拡大・縮小・回転 非破壊編集 保持 回転やゆがみを 加えても、元画像の状態 はそのまま • シンボルを 拡大・縮小・回転 シンボル化した画像は 拡大縮小を繰り返しても 劣化しない • 劣化 • 画像は大きめ(640px以 上)で用意し、 シンボル化してから 大きさを調整
  37. 37. ビットマップはシンボル化しておく シンボルの注意点 シンボルの中では 乗算・スクリーンなどの レイヤースタイルは使えない シンボルの中の スライスの書き出しがバグる (CS5以下の場合)
  38. 38. ビットマップはシンボル化しておく シンボル化しておけば、 320px から拡大して使うなど どうとでもなる!
  39. 39. @2x と @1x の画像書き出し
  40. 40. @2x と @1x の画像書き出し まずは、FW から @2x の画像を書き出す バッチで一括で半分にリサイズして @1x を用意
  41. 41. @2x と @1x の画像書き出し 方法 その1 Automator • • 「@2x」の画像を複製 • ファイル名から 「@2x」を削除する • .app 化できるので便利 サイズ調整で 50% に リサイズ
  42. 42. @2x と @1x の画像書き出し #!/bin/sh 方法 その2 #dir=$1 Shell Script find $dir -name "*@2x.*" | while read file; cd $(dirname $0) && pwd do width=`sips --getProperty pixelWidth $file | sed -E "s/.*pixelWidth: ([0-9]+)/ • find で「@2x」の 画像を探す • sips コマンドで横幅を 取得 • sips コマンドで 50%に リサイズ • watch できたり便利 1/g" | tail -1` width=`expr $width / 2` newFile=`echo $file | sed 's/@2x//'` sips --resampleWidth $width $(basename "$file") --out $(basename "$newFile") done _参考 iphone用の画像@2x.pngから通常のを生成 http://d.hatena.ne.jp/doorside/20110727/1311782239
  43. 43. @2x と @1x の画像書き出し 方法 その3 FW’s Batch • • • • 先の2案と同じことが可能 • 生成した画像サイズが 軽め FWコマンド化できる Windows でも OK 先の2案より画質が 良さげ
  44. 44. @2x, @1x 画像の振り分けは?
  45. 45. @2x, @1x 画像の振り分け jQueryで「devicePixelRatio」を判別する device-Pixel-Ratio が「1.5」以上のデバイスでは、 img を「***@2x.png」など ファイル名に @2x がついた方に差し替える sample-image@2x.png sample-image.png sample-image.png
  46. 46. @2x, @1x 画像の振り分け jQueryで「devicePixelRatio」を判別する $(function(){ if( 'devicePixelRatio' in window && window.devicePixelRatio > 1 ){ var imgHidpi = $( 'img.hidpi' ).get(); var imgHidpiLength = imgHidpi.length; for (var i=0,l=imgHidpiLength; i<l; i++) { var src = imgHidpi[i].src; src = src.replace(/.(png|jpg|gif)+$/i, '@2x.$1'); imgHidpi[i].src = src; }; } });
  47. 47. @2x, @1x 画像の振り分け _参考 Adaptation for Retina display Optimising for High Pixel Density Displays. http://egorkhmelev.github.com/retina/ http://menacingcloud.com/? c=highPixelDensityDisplays
  48. 48. @2x, @1x 画像の振り分け Media Query で背景画像を振り分ける .selector { background: url(../sample.png) no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5) { .selector { background-image: url(../sample@2x.png); background-size: cover; } }
  49. 49. @2x, @1x 画像の振り分け CSS4 の「-webkit-image-set()」で振り分ける .selector { background:   -webkit-image-set (    url( sample.png ) 1x,    url( sample@2x.png ) 2x   } );
  50. 50. @2x, @1x 画像の振り分け Media Query のJS版 「window.matchMedia」で振り分ける var mq = window.matchMedia( "only screen and ( -webkit-min-device-pixel-ratio: 1.5)" ); if(mq.matches) { ... }
  51. 51. @2x, @1x 画像の振り分け Cloud の画像振り分けサービスで解決 ReSRC.it Sencha.io Src http://www.resrc.it/ http://www.sencha.com/learn/how-touse-src-sencha-io/
  52. 52. @2x, @1x 画像の振り分け JSライブラリ「Conditionizr」で振り分ける 高精細デバイスにのみに適用させる JS, CSS, Class を振り分けられる <script> conditionizr({ retina : { scripts: true, styles: true,           classes: true } Conditionizr }); </script> http://conditionizr.com <html class="retina">
  53. 53. @2x, @1x 画像の振り分け ただ、これからは@1x の画像は必要ないかも • 今やモバイルデバイスのすべてがHiDPI • PCのHiDPI化もこれから普及? • そもそも、RWDの普及でピクセルに依存 しないデザインが求められる 脱ビットマップ
  54. 54. WORKFLOW NO MORE for BITMAP HIDPI
  55. 55. ビットマップ画像の課題 HiDPI対応の デバイスの 高解像度な 画面サイズが 画像は重い 更に多様化
  56. 56. ピクセルパーフェクトな ビットマップに頼れない時代 img画像は写真や図版にのみ使うようにして、 アイコンなどの共通コンポーネントは 脱ビットマップを目指す
  57. 57. Fireworks的 脱ビットマップ というより、脱img要素
  58. 58. Fireworks的 脱ビットマップ SVG + Web Fonts • ベクター(SVG)は ピクセルに依存しない • FWでは拡張機能を使って SVG出力できる • Web Fonts 化すれば 色・サイズをCSSで容易に 変更可能 • 軽い
  59. 59. Fireworks的 脱ビットマップ SVG を 対応デバイスでだけ使う <script src="jquery.js"></script> <script src="modernizr.js"></script> <script> if(!Modernizr.svg) { $('img[src*="svg"]').attr('src', function() { return $(this).attr('src').replace('.svg', '.png'); }); } </script>
  60. 60. Fireworks的 脱ビットマップ Data URI Scheme • Base64 形式で、 HTMLやCSSに直接記述 • gzip が有効になる (軽い) • 内実、ビットマップですが... • 変換拡張機能が出る噂も data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgA AAABQCAYAAABoMayFAAAABHNCSVQICAgIf AAAAAlwSFlzAAALEgAACxIB0t1+/ AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRml vcmtzIENTNui8sowAAAJ/ cHJWV3ic7ZffkZswEMZlEclaiSJSgm/ ck5+vHXeSpxSQcQXXRBrIhOxKAvNH4nwzh 1hYBPJvdz+B5F9/f/5W7+q9k+3W3Xi/ drdLd712Vz6eu8ulu/BRdedzd1ad4sdgsP O9t7ABx988MEHH3zwwQcffPDBBx988MEHH +MTb34nK/P3ovsKP9BeVuR72m0v8kOKrs2 iD+FF28L3Q1NZ/z7CQNv49+tK/jQS6Wn+T
  61. 61. Fireworks的 脱ビットマップ Data URI Scheme への変換ツール Data URI Converter duri.me a super simple dataURI tool http://www.macupdate.com/app/mac/ 46143/data-uri-converter http://duri.me
  62. 62. Fireworks的 脱ビットマップ Data URI Scheme への変換ツール Sublime Text 2 + Image2Base64 https://github.com/tm-minty/sublime-text-2-image2base64
  63. 63. Fireworks的 脱ビットマップ _余談 Fireworks の CSS スプライト 機能は、HiDPI時代では 使えない Retina対応(background-size を 半分に)してくれない SaSS + Compass などに 任せたほうがいい
  64. 64. まとめ カンバスは、基本的に 横幅 640px ビットマップはシンボル化 なるべくベクターによるパーツ作り そのグラフィック、ビットマップで あるべきか?を考える CSS3, SVG が出力できるのがFWの強み
  65. 65. 最後にひとこと
  66. 66. Fireworks関係ないネタが多くて すいませんでした
  67. 67. ありがとう ございました 松田直樹 Flickr : Stephen Geyer

×