CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks
?
33 likes?21,937 views
デバイスの高精細化が進む中、Fireworks を使ったデザインワークフローはどうなるの？をご紹介
![@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]+)/
?
?nd で「@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](https://image.slidesharecdn.com/cssniteginza68matsuda-130401205850-phpapp01/85/CSS-Nite-in-Ginza-Vol-68-HiDPI-Fireworks-43-320.jpg)
![@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 = /slideshow/cssniteginza68-matsuda/18020790/imgHidpi[i].src;
src = src.replace(/.(png|jpg|gif)+$/i, '@2x.$1');
imgHidpi[i].src = src;
};
}
});](https://image.slidesharecdn.com/cssniteginza68matsuda-130401205850-phpapp01/85/CSS-Nite-in-Ginza-Vol-68-HiDPI-Fireworks-47-320.jpg)
![Fireworks的 脱ビットマップ
SVG を 対応デバイスでだけ使う
<script src=/slideshow/cssniteginza68-matsuda/18020790/"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>](https://image.slidesharecdn.com/cssniteginza68matsuda-130401205850-phpapp01/85/CSS-Nite-in-Ginza-Vol-68-HiDPI-Fireworks-60-320.jpg)
CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks
- 1. HiDPI 時代の Fireworks 松田直樹 Flickr : ebayink
- 2. 松田直樹 2月 発売
- 3. What’s HiDPI ? 代表的なものが、Apple製品の Retina Display (iPhone 326 ppi) (iPad 264 ppi) デバイスの高解像度化
- 7. は え、なんて？ Flickr : Tsahi Levent-Levi
- 9. device-pixel-ratio = 2 @1x Resolution (4dpx) @2x Resolution (16dpx)
- 10. device-pixel-ratio = 2 <img src=/slideshow/cssniteginza68-matsuda/18020790/"xxx.png" width="320">
- 13. 進み続ける、 デバイスの HiDPI 化 Flickr : Jeffrey
- 19. カンバスは、基本的に w 640px ビットマップはまずシンボル化 @2x の画像だけ書き出し @1x の画像は一括で半分にリサイズ CSS3, SVG, Web Fonts を活用
- 20. カンバスは 横幅 640px
- 21. カンバスは 横幅 640px 640px メリット ? 多くのスマホの ブラウザが、横幅 320px なため ? そのまま書き出せば、 Retina 対応可 ? コーダーが別の場合 でも、失敗することが ない
- 23. カンバスが カンバスは 横幅 640px だと... 320px 320px デメリット ? あとから @2x 画像が 作りにくい ? ビットマップを 拡大すると劣化する ? テキストのフォント サイズがおかしくなる ? ? 9スライスが崩れる 書き出した後で2倍に できない
- 24. カンバスは 横幅 640px 実機でのサイズ感が 分かりにくければ... 作ったカンプに、 共通ライブラリの 「iPhone → Hardware」を 重ねてみましょう 画面内が 640px になっています
- 27. カンバスは 横幅 640px 640px の大きいサイズで 作っておけば、 小さいサイズはどうとでもなる！
- 28. 2倍で作るコツ
- 29. 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/
- 30. 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/
- 31. 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/
- 32. 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/
- 33. 2倍で作るコツ Subtle Patterns Why ? _参考 Subtle Patterns http://subtlepatterns.com 高品質なテクスチャを @2x, @1x のセットで 配布している
- 34. 2倍で作るコツ In general, bitmaps are your enemy when designing iOS apps. Ivo Mynttinen ざっくりいえば、iOSアプリを デザインする上でビットマップは 君の敵、って感じ。
- 35. ビットマップはシンボル化
- 40. @2x と @1x の画像书き出し
- 41. @2x と @1x の画像书き出し まずは、FW から @2x の画像を書き出す バッチで一括で半分にリサイズして @1x を用意
- 42. @2x と @1x の画像书き出し 方法 その1 Automator ? ? 「@2x」の画像を複製 ? ファイル名から 「@2x」を削除する ? .app 化できるので便利 サイズ調整で 50% に リサイズ
- 43. @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]+)/ ? ?nd で「@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
- 44. @2x と @1x の画像书き出し 方法 その3 FW’s Batch ? ? ? ? 先の2案と同じことが可能 ? 生成した画像サイズが 軽め FWコマンド化できる Windows でも OK 先の2案より画質が 良さげ
- 46. @2x, @1x 画像の振り分け jQueryで「devicePixelRatio」を判別する device-Pixel-Ratio が「1.5」以上のデバイスでは、 img を「＊＊＊@2x.png」など ファイル名に @2x がついた方に差し替える sample-image@2x.png sample-image.png sample-image.png
- 47. @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 = /slideshow/cssniteginza68-matsuda/18020790/imgHidpi[i].src; src = src.replace(/.(png|jpg|gif)+$/i, '@2x.$1'); imgHidpi[i].src = src; }; } });
- 48. @2x, @1x 画像の振り分け _参考 Adaptation for Retina display Optimising for High Pixel Density Displays. http://egorkhmelev.github.com/retina/ http://menacingcloud.com/? c=highPixelDensityDisplays
- 49. @2x, @1x 画像の振り分け Media Query で背景画像を振り分ける .selector { background: url(/slideshow/cssniteginza68-matsuda/sample.png) no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5) { .selector { background-image: url(/slideshow/cssniteginza68-matsuda/sample@2x.png); background-size: cover; } }
- 50. @2x, @1x 画像の振り分け CSS4 の「-webkit-image-set()」で振り分ける .selector { background: ??-webkit-image-set ( ???url( sample.png ) 1x, ???url( sample@2x.png ) 2x ? } );
- 51. @2x, @1x 画像の振り分け Media Query のJS版 ?window.matchMedia」で振り分ける var mq = window.matchMedia( "only screen and ( -webkit-min-device-pixel-ratio: 1.5)" ); if(mq.matches) { ... }
- 52. @2x, @1x 画像の振り分け Cloud の画像振り分けサービスで解決 ReSRC.it Sencha.io Src http://www.resrc.it/ http://www.sencha.com/learn/how-touse-src-sencha-io/
- 53. @2x, @1x 画像の振り分け JSライブラリ「Conditionizr」で振り分ける 高精細デバイスにのみに適用させる JS, CSS, Class を振り分けられる <script> conditionizr({ retina : { scripts: true, styles: true, ??????????classes: true } Conditionizr }); </script> http://conditionizr.com <html class="retina">
- 54. @2x, @1x 画像の振り分け ただ、これからは@1x の画像は必要ないかも ? 今やモバイルデバイスのすべてがHiDPI ? PCのHiDPI化もこれから普及？ ? そもそも、RWDの普及でピクセルに依存 しないデザインが求められる 脱ビットマップ
- 59. Fireworks的 脱ビットマップ SVG + Web Fonts ? ベクター(SVG)は ピクセルに依存しない ? FWでは拡張機能を使って SVG出力できる ? Web Fonts 化すれば 色?サイズをCSSで容易に 変更可能 ? 軽い
- 60. Fireworks的 脱ビットマップ SVG を 対応デバイスでだけ使う <script src=/slideshow/cssniteginza68-matsuda/18020790/"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>
- 61. 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
- 62. 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
- 63. Fireworks的 脱ビットマップ Data URI Scheme への変換ツール Sublime Text 2 + Image2Base64 https://github.com/tm-minty/sublime-text-2-image2base64
- 64. Fireworks的 脱ビットマップ _余談 Fireworks の CSS スプライト 機能は、HiDPI時代では 使えない Retina対応（background-size を 半分に）してくれない SaSS + Compass などに 任せたほうがいい
- 65. まとめ カンバスは、基本的に 横幅 640px ビットマップはシンボル化 なるべくベクターによるパーツ作り そのグラフィック、ビットマップで あるべきか？を考える CSS3, SVG が出力できるのがFWの強み
- 66. 最后にひとこと
- 68. ありがとう ございました 松田直樹 Flickr : Stephen Geyer