Download as PDF, PPTX
![@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](https://image.slidesharecdn.com/cssniteginza68matsuda-130401205850-phpapp01/75/CSS-Nite-in-Ginza-Vol-68-HiDPI-Fireworks-43-2048.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 = imgHidpi[i].src;
src = src.replace(/.(png|jpg|gif)+$/i, '@2x.$1');
imgHidpi[i].src = src;
};
}
});](https://image.slidesharecdn.com/cssniteginza68matsuda-130401205850-phpapp01/75/CSS-Nite-in-Ginza-Vol-68-HiDPI-Fireworks-47-2048.jpg)
![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>](https://image.slidesharecdn.com/cssniteginza68matsuda-130401205850-phpapp01/75/CSS-Nite-in-Ginza-Vol-68-HiDPI-Fireworks-60-2048.jpg)
Uploaded byNaoki Matsuda
CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks
デバイスの高精細化が進む中、Fireworks を使ったデザインワークフローはどうなるの？をご紹介
![[GREE Tech Talk #07] Unityカジュアルゲーム・ケーススタディ](https://cdn.slidesharecdn.com/ss_thumbnails/greetechtalk7-150325085326-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks
- 1.
- 2.
- 3. What’s HiDPI ? 代表的なものが、Apple製品の Retina Display (iPhone326 ppi) (iPad 264 ppi) デバイスの高解像度化
- 4.
- 5.
- 6.
- 7. は え、なんて？ Flickr : TsahiLevent-Levi
- 8.
- 9. device-pixel-ratio = 2 @1xResolution (4dpx) @2x Resolution (16dpx)
- 10. device-pixel-ratio = 2 <imgsrc="xxx.png" width="320">
- 11.
- 12.
- 13. 進み続ける、 デバイスの HiDPI 化 Flickr: Jeffrey
- 14.
- 15.
- 16.
- 17.
- 18.
- 19. カンバスは、基本的に w 640px ビットマップはまずシンボル化 @2xの画像だけ書き出し @1x の画像は一括で半分にリサイズ CSS3, SVG, Web Fonts を活用
- 20.
- 21. カンバスは 横幅 640px 640px メリット • 多くのスマホの ブラウザが、横幅 320pxなため • そのまま書き出せば、 Retina 対応可 • コーダーが別の場合 でも、失敗することが ない
- 22.
- 23. カンバスが カンバスは 横幅 640pxだと... 320px 320px デメリット • あとから @2x 画像が 作りにくい • ビットマップを 拡大すると劣化する • テキストのフォント サイズがおかしくなる • • 9スライスが崩れる 書き出した後で2倍に できない
- 24. カンバスは 横幅 640px 実機でのサイズ感が 分かりにくければ... 作ったカンプに、 共通ライブラリの 「iPhone→ Hardware」を 重ねてみましょう 画面内が 640px になっています
- 25.
- 27. カンバスは 横幅 640px 640pxの大きいサイズで 作っておけば、 小さいサイズはどうとでもなる！
- 28.
- 29. 2倍で作るコツ 高さ、幅、border 幅、 すべてを偶数値で作る Why ? 50%に縮小した際、エッジが ボケるため _参考 WorkflowOptimizationDesign Cutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
- 30. 2倍で作るコツ Photoshop ライブ エフェクトは使わない Why ? 拡大縮小した際、比例して リサイズされないため _参考 WorkflowOptimizationDesign Cutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
- 31. 2倍で作るコツ 角丸は、なるべく CSS3 で実装する Why ? 縮小した際、つぶれてしまう ことがあるため _参考 WorkflowOptimizationDesign 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 OptimizationDesignCutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
- 33.
- 34. 2倍で作るコツ In general, bitmapsare your enemy when designing iOS apps. Ivo Mynttinen ざっくりいえば、iOSアプリを デザインする上でビットマップは 君の敵、って感じ。
- 35.
- 36.
- 37.
- 38.
- 39.
- 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]+)/ • 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
- 44. @2x と @1xの画像書き出し 方法 その3 FW’s Batch • • • • 先の2案と同じことが可能 • 生成した画像サイズが 軽め FWコマンド化できる Windows でも OK 先の2案より画質が 良さげ
- 45.
- 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 = imgHidpi[i].src; src = src.replace(/.(png|jpg|gif)+$/i, '@2x.$1'); imgHidpi[i].src = src; }; } });
- 48. @2x, @1x 画像の振り分け _参考 Adaptationfor Retina display Optimising for High Pixel Density Displays. http://egorkhmelev.github.com/retina/ http://menacingcloud.com/? c=highPixelDensityDisplays
- 49. @2x, @1x 画像の振り分け MediaQuery で背景画像を振り分ける .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; } }
- 50. @2x, @1x 画像の振り分け CSS4の「-webkit-image-set()」で振り分ける .selector { background: -webkit-image-set ( url( sample.png ) 1x, url( sample@2x.png ) 2x } );
- 51. @2x, @1x 画像の振り分け MediaQuery の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の普及でピクセルに依存 しないデザインが求められる 脱ビットマップ
- 55.
- 56.
- 57.
- 58.
- 59. Fireworks的 脱ビットマップ SVG +Web Fonts • ベクター(SVG)は ピクセルに依存しない • FWでは拡張機能を使って SVG出力できる • Web Fonts 化すれば 色・サイズをCSSで容易に 変更可能 • 軽い
- 60. 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>
- 61. Fireworks的 脱ビットマップ Data URIScheme • 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 URIScheme への変換ツール 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 URIScheme への変換ツール Sublime Text 2 + Image2Base64 https://github.com/tm-minty/sublime-text-2-image2base64
- 64. Fireworks的 脱ビットマップ _余談 Fireworks のCSS スプライト 機能は、HiDPI時代では 使えない Retina対応（background-size を 半分に）してくれない SaSS + Compass などに 任せたほうがいい
- 65.
- 66.
- 67.
- 68.