FireworksでのRetina対応を考えてみた

Fireworksでの
Retina対応を
考えてみた
Akira Maruyama 2013.6.22
ガチンコバトル勉強会in岡山
13年6月23日日曜日

今日のアジェンダ
•FireworksでのRetina対応どうやるの？
•Retina対応、モバイルデザイン作成時に
便利な拡張機能
•そもそも@1xの画像は必要なのか？
•まとめ

Fireworksでの
Retina対応どうやるの？

Webグラフィックス作成に適した
Fireworks
•管理はベクトルだが、プレビューや
書き出しはビットマップ
•エフェクト設定がライブで変更可能
•シンボル、マスターページ、レイヤー共有
などオブジェクトを使いまわす仕組みや
管理の利便性が優秀

Fireworks
•書き出し時の画像の圧縮が他ツールよりも
比較的優秀
•エッジにアンチエイリアスのかからない
オブジェクトを作成できる
•作図したオブジェクトをCSSに変換できる

Fireworks
•作業ファイルがPNGなため、作業中でも
ブラウザでプレビュー可能
→ただしページ機能を使っている場合はNG
•ページ、ステートなど1ファイルで管理可能
•スライスの設定が柔軟
•拡張機能による利便性の向上

なのに開発停止…orz

Retinaには非対応だけど…
•非対応の意味 → 効率的に管理、書き出し
が出来ないだけ
Sketch
1スライスで@2xの
画像も同時に書き出
しできる

Retinaには非対応だけど…
Briefs
端末別に画面遷移をシミュ
レートできたり、1つ画面
で@1xと@2xを同時に管理
できたりする

•アウトプットはビットマップだけど、内部
ではパスでオブジェクトを管理している
※ビットマップで取り込んだものは
もちろんビットマップだよ。
Fireworksは基本スケーラブル
@1x @2x
•オブジェクトの拡大縮小は基本無問題

悩ましい仕様とバグが…
•オブジェクトのシンボル化で適用して
いるブレンド効果が欠落
オブジェクトに乗算後、シンボル化
ブレンド効果が
なくなる！
オブジェクトシンボル化
可能なら変換後に。最悪ビットマップ化

•オブジェクトの拡大縮小時に
Photoshopライブエフェクトの属性
が拡大縮小しない
オリジナルドロップシャドウライブエフェクトのドロップシャドウ
オリジナルエフェクトで回避

•パターン、テクスチャーも拡大縮小
しない
多用しない、割り切るw

2つのデザインアプローチ
•原寸でデザイン、あとで@2xに
利点
注意点
直感的に作成できる
ビットマップは2倍のものをシンボル化
して配置

2つのデザインアプローチ
•@2xでデザイン、あとで@1xに
利点
注意点
モバイル端末の主流に合わせたデザイン
横幅640pxで作成すれば、そのままRetina
対応に
オブジェクトのサイズは偶数値で
→@1x縮小時に整数にならないとにじむ

Retina対応、モバイルデザイン
作成時に便利な拡張機能

@1xで作成用
•Retina Image Exporter
@1xのスライスから同時に@2x画像を書き出し
Photoshopライブエフェクトの拡大にも対応
@1x → @2x
http://creative-tweet.net/tools/
retina_image_exporter/detail.html

その2 @2xで作成
•Retina対応用にページを分ける
@2xオブジェクトを含んだページから@1xの
ページを複製
@2x → @1x
http://c-brains.jp/blog/wsg/12/06/12-193119.php

その3 両方で使える
•PsLE Scaler
オブジェクトの拡大縮小に対応
Photoshopライブエフェクトだけのスケール
にも対応
@1x → @2x @2x → @1x
http://creative-tweet.net/tools/psle_scaler/
detail.html

その4 その他
•CSS professioalzr
CSSプロパティーパネルから生成されるコード
を最適化
http://mattstow.com/css-professionalzr.html

その4 その他
•Fluid Width Calculator
選択オブジェクトの横幅とカンバスまたは別オ
ブジェクトの幅との比率を%で算出する
CSSのwidthのコードも生成する
http://mattstow.com/#FluidWidthCalc-03

その4 その他
•Generate Web Assets
スライスを設定しなくてもレイヤ
ーごとにわかれたオブジェクトを
書きだしてくれる
レイヤー名に.png, .gif, .jpgがある
ときだけ書きだされる
http://johndunning.com/fireworks/
about/GenerateWebAssets

まだ@1x画像は必要？

@1xは必要なのか？
西畑さん
「いらないです」

@1xは必要なのか？
•iPhone4以降、devicePixelRatio=2
•Androidも1のものは少ない
Android端末のdevicePixelRatio
http://blog.webcreativepark.net/2011/01/
25-173502.html
Webサイト作成なら、アクセス次第で
切り捨ててもよいのではないか？

まとめ

まとめ
•Fireworksオブジェクトは基本パス
なので、もともとスケーラブル
•ビットマップはなるべくシンボルで
管理
•Photoshopライブエフェクトは
スケールしない、要注意

まとめ
•標準でないRetina対応も、拡張機能
で効率が可能
•案件によっては@1xは捨ててもいい
のでは？

ありがとうございました
@akira_maru
MaruyamaAkira

FireworksでのRetina対応を考えてみた

More Related Content

More from Akira Maruyama

FireworksでのRetina対応を考えてみた