CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks
-
Upload
naoki-matsuda -
Category
Design
-
view
14.078 -
download
3
description
Transcript of CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks
![Page 1: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/1.jpg)
HiDPI 時代のFireworks
松田直樹
Flickr : ebayink
![Page 2: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/2.jpg)
2月発売
松田直樹
![Page 3: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/3.jpg)
デバイスの高解像度化
Retina Display代表的なものが、Apple製品の
(iPhone 326 ppi)(iPad 264 ppi)
What’sHiDPI ?
![Page 4: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/4.jpg)
HiDPI=高ピクセル密度=
高 device-pixel-ratio
![Page 5: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/5.jpg)
device-pixel-ratio ?
![Page 6: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/6.jpg)
device-pixel-ratio
HTMLコンテンツの1pxを
実際のデバイス上で
何倍のpxで
描画するかを示す数値
![Page 7: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/7.jpg)
え、なんて?は
Flickr : Tsahi Levent-Levi
![Page 8: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/8.jpg)
device-pixel-ratio = 2
![Page 9: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/9.jpg)
device-pixel-ratio = 2
@1x Resolution
(4dpx)@2x Resolution
(16dpx)
![Page 10: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/10.jpg)
<img src="xxx.png" width="320">
device-pixel-ratio = 2
![Page 11: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/11.jpg)
iPhone 4~ Android
2 1.5が多い
device-pixel-ratio
326 ppi 250 ppi
![Page 12: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/12.jpg)
3device-pixel-ratio
INFOBARA02
Xperia ZHTC Jbutterfly 440 ppi
![Page 13: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/13.jpg)
進み続ける、デバイスの HiDPI 化
Flickr : Jeffrey
![Page 14: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/14.jpg)
WORKFLOWforHIDPI
![Page 15: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/15.jpg)
iOSアプリデザインのRetina対応ワークフローが話題にもなりました
http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
![Page 16: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/16.jpg)
バシャログ - Retina対応用にページを分けるFireworksコマンド
http://creative-tweet.net/blog/2012/12/retina-image-exporter.html
![Page 17: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/17.jpg)
画像をRetina対応で書き出しするFireworksの拡張機能作ったよ。
http://creative-tweet.net/blog/2012/12/retina-image-exporter.html
![Page 18: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/18.jpg)
株式会社まぼろしまつだなおきさん の場合
![Page 19: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/19.jpg)
カンバスは、基本的に w 640px
ビットマップはまずシンボル化
@2x の画像だけ書き出し
@1x の画像は一括で半分にリサイズ
CSS3, SVG, Web Fonts を活用
![Page 20: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/20.jpg)
カンバスは 横幅 640px
![Page 21: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/21.jpg)
カンバスは 横幅 640px
640px
• 多くのスマホのブラウザが、横幅 320px なため
• そのまま書き出せば、Retina 対応可
• コーダーが別の場合でも、失敗することがない
メリット
![Page 22: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/22.jpg)
640px
• すべてのパーツ、テキストのサイズを2倍に計算する必要がある
• 実機の実寸との差異があり、サイズ感がつかみにくい
デメリット
カンバスは 横幅 640px
![Page 23: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/23.jpg)
カンバスは 横幅 640px
• あとから @2x 画像が作りにくい
• ビットマップを拡大すると劣化する
• テキストのフォントサイズがおかしくなる
• 9スライスが崩れる• 書き出した後で2倍にできない
320pxデメリット
カンバスが 横幅 320px だと...
![Page 24: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/24.jpg)
カンバスは 横幅 640px
実機でのサイズ感が分かりにくければ...
作ったカンプに、共通ライブラリの「iPhone → Hardware」を重ねてみましょう
画面内が 640px になっています
![Page 25: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/25.jpg)
カンバスは 横幅 640px
それでもまだ、実機でのサイズ感が分かりにくければ...
LiveViewhttps://itunes.apple.com/jp/app/liveview/id301069270?mt=8
![Page 26: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/26.jpg)
![Page 27: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/27.jpg)
カンバスは 横幅 640px
640px の大きいサイズで作っておけば、小さいサイズはどうとでもなる!
![Page 28: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/28.jpg)
2倍で作るコツ
![Page 29: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/29.jpg)
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 ?
![Page 30: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/30.jpg)
2倍で作るコツ
_参考Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworkshttp://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
Photoshop ライブエフェクトは使わない
拡大縮小した際、比例してリサイズされないため
Why ?
![Page 31: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/31.jpg)
2倍で作るコツ
_参考Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworkshttp://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
角丸は、なるべくCSS3 で実装する
縮小した際、つぶれてしまうことがあるため
Why ?
![Page 32: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/32.jpg)
2倍で作るコツ
標準のテクスチャは使わない
テクスチャは2倍サイズがなく、リサイズもできないため
_参考Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworkshttp://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
Why ?
![Page 33: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/33.jpg)
2倍で作るコツ
SubtlePatterns高品質なテクスチャを@2x, @1x のセットで配布している
Why ?
_参考Subtle Patternshttp://subtlepatterns.com
![Page 34: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/34.jpg)
2倍で作るコツ
In general, bitmaps are your enemy when designing iOS apps.
Ivo Mynttinen
ざっくりいえば、iOSアプリをデザインする上でビットマップは君の敵、って感じ。
![Page 35: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/35.jpg)
ビットマップはシンボル化
![Page 36: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/36.jpg)
カンバスは 横幅 640px
グラフィックシンボル
非破壊編集
ビットマップはシンボル化しておく
![Page 37: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/37.jpg)
カンバスは 横幅 640px
グラフィックシンボル
非破壊編集• シンボル化した画像は拡大縮小を繰り返しても劣化しない
• 回転やゆがみを加えても、元画像の状態はそのまま
• 画像は大きめ(640px以上)で用意し、シンボル化してから大きさを調整
ビットマップを拡大・縮小・回転
シンボルを拡大・縮小・回転
劣化
保持
ビットマップはシンボル化しておく
![Page 38: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/38.jpg)
ビットマップはシンボル化しておく
シンボルの注意点シンボルの中では
乗算・スクリーンなどのレイヤースタイルは使えない
シンボルの中のスライスの書き出しがバグる
(CS5以下の場合)
![Page 39: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/39.jpg)
ビットマップはシンボル化しておく
シンボル化しておけば、320px から拡大して使うなどどうとでもなる!
![Page 40: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/40.jpg)
@2x と @1x の画像書き出し
![Page 41: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/41.jpg)
@2x と @1x の画像書き出し
まずは、FW から @2x の画像を書き出すバッチで一括で半分にリサイズして @1x を用意
![Page 42: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/42.jpg)
@2x と @1x の画像書き出し
方法 その1
Automator
• 「@2x」の画像を複製• サイズ調整で 50% にリサイズ
• ファイル名から「@2x」を削除する
• .app 化できるので便利
![Page 43: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/43.jpg)
@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
![Page 44: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/44.jpg)
@2x と @1x の画像書き出し
• 先の2案と同じことが可能• FWコマンド化できる• Windows でも OK• 先の2案より画質が良さげ
• 生成した画像サイズが軽め
FW’s Batch
方法 その3
![Page 45: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/45.jpg)
@2x, @1x 画像の振り分けは?
![Page 46: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/46.jpg)
sample-image.png
@2x, @1x 画像の振り分け
jQueryで「devicePixelRatio」を判別する
device-Pixel-Ratio が「1.5」以上のデバイスでは、
img を「***@2x.png」など
ファイル名に @2x がついた方に差し替える
sample-image.png
![Page 47: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/47.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;
};
}
});
![Page 48: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/48.jpg)
@2x, @1x 画像の振り分け
_参考Adaptation for Retina displayhttp://egorkhmelev.github.com/retina/
Optimising for High Pixel Density Displays.http://menacingcloud.com/?c=highPixelDensityDisplays
![Page 49: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/49.jpg)
@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; }}
![Page 50: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/50.jpg)
@2x, @1x 画像の振り分け
CSS4 の「-webkit-image-set()」で振り分ける
.selector {
background:
-webkit-image-set (
url( sample.png ) 1x,
url( [email protected] ) 2x
);
}
![Page 51: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/51.jpg)
@2x, @1x 画像の振り分け
Media Query のJS版「window.matchMedia」で振り分ける
var mq = window.matchMedia( "only screen and ( -webkit-min-device-pixel-ratio: 1.5)" );
if(mq.matches) { ...}
![Page 52: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/52.jpg)
@2x, @1x 画像の振り分け
Cloud の画像振り分けサービスで解決
ReSRC.ithttp://www.resrc.it/
Sencha.io Srchttp://www.sencha.com/learn/how-to-use-src-sencha-io/
![Page 53: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/53.jpg)
@2x, @1x 画像の振り分け
JSライブラリ「Conditionizr」で振り分ける
高精細デバイスにのみに適用させるJS, CSS, Class を振り分けられる
<html class="retina">
<script> conditionizr({ retina : { scripts: true, styles: true, classes: true }
});</script>Conditionizr
http://conditionizr.com
![Page 54: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/54.jpg)
@2x, @1x 画像の振り分け
ただ、これからは@1x の画像は必要ないかも
•今やモバイルデバイスのすべてがHiDPI• PCのHiDPI化もこれから普及?•そもそも、RWDの普及でピクセルに依存しないデザインが求められる
脱ビットマップ
![Page 55: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/55.jpg)
WORKFLOWforHIDPI
NO MOREBITMAP
![Page 56: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/56.jpg)
HiDPI対応の高解像度な画像は重い
デバイスの画面サイズが更に多様化
ビットマップ画像の課題
![Page 57: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/57.jpg)
ピクセルパーフェクトな
ビットマップに頼れない時代
img画像は写真や図版にのみ使うようにして、
アイコンなどの共通コンポーネントは
脱ビットマップを目指す
![Page 58: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/58.jpg)
Fireworks的 脱ビットマップ
というより、脱img要素
![Page 59: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/59.jpg)
Fireworks的 脱ビットマップ
SVG + Web Fonts
• ベクター(SVG)はピクセルに依存しない
• FWでは拡張機能を使ってSVG出力できる
• Web Fonts 化すれば色・サイズをCSSで容易に変更可能
• 軽い
![Page 60: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/60.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>
![Page 61: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/61.jpg)
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
![Page 62: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/62.jpg)
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
![Page 63: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/63.jpg)
Fireworks的 脱ビットマップ
Data URI Scheme への変換ツール
Sublime Text 2 + Image2Base64https://github.com/tm-minty/sublime-text-2-image2base64
![Page 64: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/64.jpg)
Fireworks的 脱ビットマップ
_余談
Fireworks の CSS スプライト機能は、HiDPI時代では使えない
Retina対応(background-size を 半分に)してくれない
SaSS + Compass などに任せたほうがいい
![Page 65: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/65.jpg)
まとめ
カンバスは、基本的に 横幅 640px
ビットマップはシンボル化
なるべくベクターによるパーツ作り
そのグラフィック、ビットマップであるべきか?を考える
CSS3, SVG が出力できるのがFWの強み
![Page 66: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/66.jpg)
最後にひとこと
![Page 67: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/67.jpg)
Fireworks関係ないネタが多くて
すいませんでした
![Page 68: CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks](https://reader036.fdocuments.net/reader036/viewer/2022081401/559941731a28ab27778b4719/html5/thumbnails/68.jpg)
ありがとうございました
松田直樹
Flickr : Stephen Geyer