Upload
naoki-matsuda
View
14.078
Download
3
Embed Size (px)
DESCRIPTION
デバイスの高精細化が進む中、Fireworks を使ったデザインワークフローはどうなるの?をご紹介
Citation preview
HiDPI 時代のFireworks
松田直樹
Flickr : ebayink
2月発売
松田直樹
デバイスの高解像度化
Retina Display代表的なものが、Apple製品の
(iPhone 326 ppi)(iPad 264 ppi)
What’sHiDPI ?
HiDPI=高ピクセル密度=
高 device-pixel-ratio
device-pixel-ratio ?
device-pixel-ratio
HTMLコンテンツの1pxを
実際のデバイス上で
何倍のpxで
描画するかを示す数値
え、なんて?は
Flickr : Tsahi Levent-Levi
device-pixel-ratio = 2
device-pixel-ratio = 2
@1x Resolution
(4dpx)@2x Resolution
(16dpx)
<img src="xxx.png" width="320">
device-pixel-ratio = 2
iPhone 4~ Android
2 1.5が多い
device-pixel-ratio
326 ppi 250 ppi
3device-pixel-ratio
INFOBARA02
Xperia ZHTC Jbutterfly 440 ppi
進み続ける、デバイスの HiDPI 化
Flickr : Jeffrey
WORKFLOWforHIDPI
iOSアプリデザインのRetina対応ワークフローが話題にもなりました
http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
バシャログ - Retina対応用にページを分けるFireworksコマンド
http://creative-tweet.net/blog/2012/12/retina-image-exporter.html
画像をRetina対応で書き出しするFireworksの拡張機能作ったよ。
http://creative-tweet.net/blog/2012/12/retina-image-exporter.html
株式会社まぼろしまつだなおきさん の場合
カンバスは、基本的に w 640px
ビットマップはまずシンボル化
@2x の画像だけ書き出し
@1x の画像は一括で半分にリサイズ
CSS3, SVG, Web Fonts を活用
カンバスは 横幅 640px
カンバスは 横幅 640px
640px
• 多くのスマホのブラウザが、横幅 320px なため
• そのまま書き出せば、Retina 対応可
• コーダーが別の場合でも、失敗することがない
メリット
640px
• すべてのパーツ、テキストのサイズを2倍に計算する必要がある
• 実機の実寸との差異があり、サイズ感がつかみにくい
デメリット
カンバスは 横幅 640px
カンバスは 横幅 640px
• あとから @2x 画像が作りにくい
• ビットマップを拡大すると劣化する
• テキストのフォントサイズがおかしくなる
• 9スライスが崩れる• 書き出した後で2倍にできない
320pxデメリット
カンバスが 横幅 320px だと...
カンバスは 横幅 640px
実機でのサイズ感が分かりにくければ...
作ったカンプに、共通ライブラリの「iPhone → Hardware」を重ねてみましょう
画面内が 640px になっています
カンバスは 横幅 640px
それでもまだ、実機でのサイズ感が分かりにくければ...
LiveViewhttps://itunes.apple.com/jp/app/liveview/id301069270?mt=8
カンバスは 横幅 640px
640px の大きいサイズで作っておけば、小さいサイズはどうとでもなる!
2倍で作るコツ
2倍で作るコツ
_参考Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworkshttp://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
高さ、幅、border 幅、すべてを偶数値で作る
50%に縮小した際、エッジがボケるため
Why ?
2倍で作るコツ
_参考Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworkshttp://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
Photoshop ライブエフェクトは使わない
拡大縮小した際、比例してリサイズされないため
Why ?
2倍で作るコツ
_参考Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworkshttp://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
角丸は、なるべくCSS3 で実装する
縮小した際、つぶれてしまうことがあるため
Why ?
2倍で作るコツ
標準のテクスチャは使わない
テクスチャは2倍サイズがなく、リサイズもできないため
_参考Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworkshttp://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
Why ?
2倍で作るコツ
SubtlePatterns高品質なテクスチャを@2x, @1x のセットで配布している
Why ?
_参考Subtle Patternshttp://subtlepatterns.com
2倍で作るコツ
In general, bitmaps are your enemy when designing iOS apps.
Ivo Mynttinen
ざっくりいえば、iOSアプリをデザインする上でビットマップは君の敵、って感じ。
ビットマップはシンボル化
カンバスは 横幅 640px
グラフィックシンボル
非破壊編集
ビットマップはシンボル化しておく
カンバスは 横幅 640px
グラフィックシンボル
非破壊編集• シンボル化した画像は拡大縮小を繰り返しても劣化しない
• 回転やゆがみを加えても、元画像の状態はそのまま
• 画像は大きめ(640px以上)で用意し、シンボル化してから大きさを調整
ビットマップを拡大・縮小・回転
シンボルを拡大・縮小・回転
劣化
保持
ビットマップはシンボル化しておく
ビットマップはシンボル化しておく
シンボルの注意点シンボルの中では
乗算・スクリーンなどのレイヤースタイルは使えない
シンボルの中のスライスの書き出しがバグる
(CS5以下の場合)
ビットマップはシンボル化しておく
シンボル化しておけば、320px から拡大して使うなどどうとでもなる!
@2x と @1x の画像書き出し
@2x と @1x の画像書き出し
まずは、FW から @2x の画像を書き出すバッチで一括で半分にリサイズして @1x を用意
@2x と @1x の画像書き出し
方法 その1
Automator
• 「@2x」の画像を複製• サイズ調整で 50% にリサイズ
• ファイル名から「@2x」を削除する
• .app 化できるので便利
@2x と @1x の画像書き出し
_参考
iphone用の画像@2x.pngから通常のを生成
http://d.hatena.ne.jp/doorside/20110727/1311782239
Shell Script
• find で「@2x」の画像を探す
• sips コマンドで横幅を取得
• sips コマンドで 50%にリサイズ
• watch できたり便利
#!/bin/sh
#dir=$1
find $dir -name "*@2x.*" | while read file;
cd $(dirname $0) && pwd
do
width=`sips --getProperty pixelWidth
$file | sed -E "s/.*pixelWidth: ([0-9]+)/
\1/g" | tail -1`
width=`expr $width / 2`
newFile=`echo $file | sed 's/@2x//'`
sips --resampleWidth $width $(basename
"$file") --out $(basename "$newFile")
done
方法 その2
@2x と @1x の画像書き出し
• 先の2案と同じことが可能• FWコマンド化できる• Windows でも OK• 先の2案より画質が良さげ
• 生成した画像サイズが軽め
FW’s Batch
方法 その3
@2x, @1x 画像の振り分けは?
sample-image.png
@2x, @1x 画像の振り分け
jQueryで「devicePixelRatio」を判別する
device-Pixel-Ratio が「1.5」以上のデバイスでは、
img を「***@2x.png」など
ファイル名に @2x がついた方に差し替える
sample-image.png
@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;
};
}
});
@2x, @1x 画像の振り分け
_参考Adaptation for Retina displayhttp://egorkhmelev.github.com/retina/
Optimising for High Pixel Density Displays.http://menacingcloud.com/?c=highPixelDensityDisplays
@2x, @1x 画像の振り分け
Media Query で背景画像を振り分ける
.selector { background: url(../sample.png) no-repeat;}
@media (-webkit-min-device-pixel-ratio: 1.5) { .selector { background-image: url(../[email protected]); background-size: cover; }}
@2x, @1x 画像の振り分け
CSS4 の「-webkit-image-set()」で振り分ける
.selector {
background:
-webkit-image-set (
url( sample.png ) 1x,
url( [email protected] ) 2x
);
}
@2x, @1x 画像の振り分け
Media Query のJS版「window.matchMedia」で振り分ける
var mq = window.matchMedia( "only screen and ( -webkit-min-device-pixel-ratio: 1.5)" );
if(mq.matches) { ...}
@2x, @1x 画像の振り分け
Cloud の画像振り分けサービスで解決
ReSRC.ithttp://www.resrc.it/
Sencha.io Srchttp://www.sencha.com/learn/how-to-use-src-sencha-io/
@2x, @1x 画像の振り分け
JSライブラリ「Conditionizr」で振り分ける
高精細デバイスにのみに適用させるJS, CSS, Class を振り分けられる
<html class="retina">
<script> conditionizr({ retina : { scripts: true, styles: true, classes: true }
});</script>Conditionizr
http://conditionizr.com
@2x, @1x 画像の振り分け
ただ、これからは@1x の画像は必要ないかも
•今やモバイルデバイスのすべてがHiDPI• PCのHiDPI化もこれから普及?•そもそも、RWDの普及でピクセルに依存しないデザインが求められる
脱ビットマップ
WORKFLOWforHIDPI
NO MOREBITMAP
HiDPI対応の高解像度な画像は重い
デバイスの画面サイズが更に多様化
ビットマップ画像の課題
ピクセルパーフェクトな
ビットマップに頼れない時代
img画像は写真や図版にのみ使うようにして、
アイコンなどの共通コンポーネントは
脱ビットマップを目指す
Fireworks的 脱ビットマップ
というより、脱img要素
Fireworks的 脱ビットマップ
SVG + Web Fonts
• ベクター(SVG)はピクセルに依存しない
• FWでは拡張機能を使ってSVG出力できる
• Web Fonts 化すれば色・サイズをCSSで容易に変更可能
• 軽い
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>
Fireworks的 脱ビットマップ
Data URI Scheme
• Base64 形式で、HTMLやCSSに直接記述
• gzip が有効になる (軽い)• 内実、ビットマップですが...• 変換拡張機能が出る噂も
data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAAUA
AAABQCAYAAABoMayFAAAABHNCSVQICAgIfAhki
AAAAAlwSFlzAAALEgAACxIB0t1+/
AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXd
vcmtzIENTNui8sowAAAJ/
cHJWV3ic7ZffkZswEMZlEclaiSJSgm/
ck5+vHXeSpxSQcQXXRBrIhOxKAvNH4nwzhof4Y
1hYBPJvdz+B5F9/f/5W7+q9k+3W3Xi/
drdLd712Vz6eu8ulu/BRdedzd1ad4sdgsP/
O9t7ABx988MEHH3zwwQcffPDBBx988MEHH3zwd
+MTb34nK/P3ovsKP9BeVuR72m0v8kOKrs22pV/
iD+FF28L3Q1NZ/z7CQNv49+tK/jQS6Wn+TPx6/
mEbvb+u/0ZVGF2v69+SVnbTKnyif/xAZ9/
tr3+aIKxcm4am46IJPlVoyMg8Xf/EN
+LHKijZpYGDTDsxn3yw6ZKfaxsT24jP1vBBywU
dpN27rL9q9EP65/zF5w7a8i3FMihqyHNDE2/
I7zjNQaRKhGMMNnItaS7bIRwobVaTa4whicuHV
f3v8qs+dTLCN5TKIWnJVB
Fireworks的 脱ビットマップ
Data URI Scheme への変換ツール
Data URI Converterhttp://www.macupdate.com/app/mac/46143/data-uri-converter
duri.me a super simple dataURI tool
http://duri.me
Fireworks的 脱ビットマップ
Data URI Scheme への変換ツール
Sublime Text 2 + Image2Base64https://github.com/tm-minty/sublime-text-2-image2base64
Fireworks的 脱ビットマップ
_余談
Fireworks の CSS スプライト機能は、HiDPI時代では使えない
Retina対応(background-size を 半分に)してくれない
SaSS + Compass などに任せたほうがいい
まとめ
カンバスは、基本的に 横幅 640px
ビットマップはシンボル化
なるべくベクターによるパーツ作り
そのグラフィック、ビットマップであるべきか?を考える
CSS3, SVG が出力できるのがFWの強み
最後にひとこと
Fireworks関係ないネタが多くて
すいませんでした
ありがとうございました
松田直樹
Flickr : Stephen Geyer