Ps / Ai / Fw / Sketch ガチンコバトル勉強会 in 岡山 勉強会資料

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

2. 今日のアジェンダ
•FireworksでのRetina対応どうやるの？
•Retina対応、モバイルデザイン作成時に
便利な拡張機能
•そもそも@1xの画像は必要なのか？
•まとめ
ガチンコバトル勉強会in岡山
13年6月23日日曜日

3. Fireworksでの
Retina対応どうやるの？
ガチンコバトル勉強会in岡山
13年6月23日日曜日

4. Webグラフィックス作成に適した
Fireworks
ガチンコバトル勉強会in岡山
•管理はベクトルだが、プレビューや
書き出しはビットマップ
•エフェクト設定がライブで変更可能
•シンボル、マスターページ、レイヤー共有
などオブジェクトを使いまわす仕組みや
管理の利便性が優秀
13年6月23日日曜日

5. Webグラフィックス作成に適した
Fireworks
ガチンコバトル勉強会in岡山
•書き出し時の画像の圧縮が他ツールよりも
比較的優秀
•エッジにアンチエイリアスのかからない
オブジェクトを作成できる
•作図したオブジェクトをCSSに変換できる
13年6月23日日曜日

6. Webグラフィックス作成に適した
Fireworks
ガチンコバトル勉強会in岡山
•作業ファイルがPNGなため、作業中でも
ブラウザでプレビュー可能
→ただしページ機能を使っている場合はNG
•ページ、ステートなど1ファイルで管理可能
•スライスの設定が柔軟
•拡張機能による利便性の向上
13年6月23日日曜日

7. なのに開発停止…orz
ガチンコバトル勉強会in岡山
13年6月23日日曜日

8. ガチンコバトル勉強会in岡山
Retinaには非対応だけど…
•非対応の意味 → 効率的に管理、書き出し
が出来ないだけ
Sketch
1スライスで@2xの
画像も同時に書き出
しできる
13年6月23日日曜日

9. ガチンコバトル勉強会in岡山
Retinaには非対応だけど…
Briefs
端末別に画面遷移をシミュ
レートできたり、1つ画面
で@1xと@2xを同時に管理
できたりする
13年6月23日日曜日

10. •アウトプットはビットマップだけど、内部
ではパスでオブジェクトを管理している
※ビットマップで取り込んだものは
もちろんビットマップだよ。
Fireworksは基本スケーラブル
@1x @2x
ガチンコバトル勉強会in岡山
•オブジェクトの拡大縮小は基本無問題
13年6月23日日曜日

11. 悩ましい仕様とバグが…
•オブジェクトのシンボル化で適用して
いるブレンド効果が欠落
オブジェクトに乗算後、シンボル化
ブレンド効果が
なくなる！
オブジェクト シンボル化
可能なら変換後に。最悪ビットマップ化
ガチンコバトル勉強会in岡山
13年6月23日日曜日

12. 悩ましい仕様とバグが…
•オブジェクトの拡大縮小時に
Photoshopライブエフェクトの属性
が拡大縮小しない
オリジナルドロップシャドウ ライブエフェクトのドロップシャドウ
オリジナルエフェクトで回避
ガチンコバトル勉強会in岡山
13年6月23日日曜日

13. 悩ましい仕様とバグが…
•パターン、テクスチャーも拡大縮小
しない
多用しない、割り切るw
ガチンコバトル勉強会in岡山
13年6月23日日曜日

14. 2つのデザインアプローチ
•原寸でデザイン、あとで@2xに
利点
注意点
直感的に作成できる
ビットマップは2倍のものをシンボル化
して配置
ガチンコバトル勉強会in岡山
13年6月23日日曜日

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

16. Retina対応、モバイルデザイン
作成時に便利な拡張機能
ガチンコバトル勉強会in岡山
13年6月23日日曜日

17. ガチンコバトル勉強会in岡山
@1xで作成用
•Retina Image Exporter
@1xのスライスから同時に@2x画像を書き出し
Photoshopライブエフェクトの拡大にも対応
@1x → @2x
http://creative-tweet.net/tools/
retina_image_exporter/detail.html
13年6月23日日曜日

18. ガチンコバトル勉強会in岡山
その2 @2xで作成
•Retina対応用にページを分ける
@2xオブジェクトを含んだページから@1xの
ページを複製
@2x → @1x
http://c-brains.jp/blog/wsg/12/06/12-193119.php
13年6月23日日曜日

19. ガチンコバトル勉強会in岡山
その3 両方で使える
•PsLE Scaler
オブジェクトの拡大縮小に対応
Photoshopライブエフェクトだけのスケール
にも対応
@1x → @2x @2x → @1x
http://creative-tweet.net/tools/psle_scaler/
detail.html
13年6月23日日曜日

20. ガチンコバトル勉強会in岡山
その4 その他
•CSS professioalzr
CSSプロパティーパネルから生成されるコード
を最適化
http://mattstow.com/css-professionalzr.html
13年6月23日日曜日

21. ガチンコバトル勉強会in岡山
その4 その他
•Fluid Width Calculator
選択オブジェクトの横幅とカンバスまたは別オ
ブジェクトの幅との比率を%で算出する
CSSのwidthのコードも生成する
http://mattstow.com/#FluidWidthCalc-03
13年6月23日日曜日

22. ガチンコバトル勉強会in岡山
その4 その他
•Generate Web Assets
スライスを設定しなくてもレイヤ
ーごとにわかれたオブジェクトを
書きだしてくれる
レイヤー名に.png, .gif, .jpgがある
ときだけ書きだされる
http://johndunning.com/fireworks/
about/GenerateWebAssets
13年6月23日日曜日

23. まだ@1x画像は必要？
ガチンコバトル勉強会in岡山
13年6月23日日曜日

24. ガチンコバトル勉強会in岡山
@1xは必要なのか？
西畑さん
「いらないです」
13年6月23日日曜日

25. ガチンコバトル勉強会in岡山
@1xは必要なのか？
•iPhone4以降、devicePixelRatio=2
•Androidも1のものは少ない
Android端末のdevicePixelRatio
http://blog.webcreativepark.net/2011/01/
25-173502.html
Webサイト作成なら、アクセス次第で
切り捨ててもよいのではないか？
13年6月23日日曜日

26. まとめ
ガチンコバトル勉強会in岡山
13年6月23日日曜日

27. ガチンコバトル勉強会in岡山
まとめ
•Fireworksオブジェクトは基本パス
なので、もともとスケーラブル
•ビットマップはなるべくシンボルで
管理
•Photoshopライブエフェクトは
スケールしない、要注意
13年6月23日日曜日

28. ガチンコバトル勉強会in岡山
まとめ
•標準でないRetina対応も、拡張機能
で効率が可能
•案件によっては@1xは捨ててもいい
のでは？
13年6月23日日曜日

29. ありがとうございました
@akira_maru
MaruyamaAkira
13年6月23日日曜日