Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

3,318 views

Published on

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

Published in: Design

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

  1. 1. FireworksでのRetina対応を考えてみたAkira Maruyama 2013.6.22ガチンコバトル勉強会in岡山13年6月23日日曜日
  2. 2. 今日のアジェンダ•FireworksでのRetina対応どうやるの?•Retina対応、モバイルデザイン作成時に便利な拡張機能•そもそも@1xの画像は必要なのか?•まとめガチンコバトル勉強会in岡山13年6月23日日曜日
  3. 3. FireworksでのRetina対応どうやるの?ガチンコバトル勉強会in岡山13年6月23日日曜日
  4. 4. Webグラフィックス作成に適したFireworksガチンコバトル勉強会in岡山•管理はベクトルだが、プレビューや書き出しはビットマップ•エフェクト設定がライブで変更可能•シンボル、マスターページ、レイヤー共有などオブジェクトを使いまわす仕組みや管理の利便性が優秀13年6月23日日曜日
  5. 5. Webグラフィックス作成に適したFireworksガチンコバトル勉強会in岡山•書き出し時の画像の圧縮が他ツールよりも比較的優秀•エッジにアンチエイリアスのかからないオブジェクトを作成できる•作図したオブジェクトをCSSに変換できる13年6月23日日曜日
  6. 6. Webグラフィックス作成に適したFireworksガチンコバトル勉強会in岡山•作業ファイルがPNGなため、作業中でもブラウザでプレビュー可能→ただしページ機能を使っている場合はNG•ページ、ステートなど1ファイルで管理可能•スライスの設定が柔軟•拡張機能による利便性の向上13年6月23日日曜日
  7. 7. なのに開発停止…orzガチンコバトル勉強会in岡山13年6月23日日曜日
  8. 8. ガチンコバトル勉強会in岡山Retinaには非対応だけど…•非対応の意味 → 効率的に管理、書き出しが出来ないだけSketch1スライスで@2xの画像も同時に書き出しできる13年6月23日日曜日
  9. 9. ガチンコバトル勉強会in岡山Retinaには非対応だけど…Briefs端末別に画面遷移をシミュレートできたり、1つ画面で@1xと@2xを同時に管理できたりする13年6月23日日曜日
  10. 10. •アウトプットはビットマップだけど、内部ではパスでオブジェクトを管理している※ビットマップで取り込んだものはもちろんビットマップだよ。Fireworksは基本スケーラブル@1x @2xガチンコバトル勉強会in岡山•オブジェクトの拡大縮小は基本無問題13年6月23日日曜日
  11. 11. 悩ましい仕様とバグが…•オブジェクトのシンボル化で適用しているブレンド効果が欠落オブジェクトに乗算後、シンボル化ブレンド効果がなくなる!オブジェクト シンボル化可能なら変換後に。最悪ビットマップ化ガチンコバトル勉強会in岡山13年6月23日日曜日
  12. 12. 悩ましい仕様とバグが…•オブジェクトの拡大縮小時にPhotoshopライブエフェクトの属性が拡大縮小しないオリジナルドロップシャドウ ライブエフェクトのドロップシャドウオリジナルエフェクトで回避ガチンコバトル勉強会in岡山13年6月23日日曜日
  13. 13. 悩ましい仕様とバグが…•パターン、テクスチャーも拡大縮小しない多用しない、割り切るwガチンコバトル勉強会in岡山13年6月23日日曜日
  14. 14. 2つのデザインアプローチ•原寸でデザイン、あとで@2xに利点注意点直感的に作成できるビットマップは2倍のものをシンボル化して配置ガチンコバトル勉強会in岡山13年6月23日日曜日
  15. 15. 2つのデザインアプローチ•@2xでデザイン、あとで@1xに利点注意点モバイル端末の主流に合わせたデザイン横幅640pxで作成すれば、そのままRetina対応にオブジェクトのサイズは偶数値で→@1x縮小時に整数にならないとにじむガチンコバトル勉強会in岡山13年6月23日日曜日
  16. 16. Retina対応、モバイルデザイン作成時に便利な拡張機能ガチンコバトル勉強会in岡山13年6月23日日曜日
  17. 17. ガチンコバトル勉強会in岡山@1xで作成用•Retina Image Exporter@1xのスライスから同時に@2x画像を書き出しPhotoshopライブエフェクトの拡大にも対応@1x → @2xhttp://creative-tweet.net/tools/retina_image_exporter/detail.html13年6月23日日曜日
  18. 18. ガチンコバトル勉強会in岡山その2 @2xで作成•Retina対応用にページを分ける@2xオブジェクトを含んだページから@1xのページを複製@2x → @1xhttp://c-brains.jp/blog/wsg/12/06/12-193119.php13年6月23日日曜日
  19. 19. ガチンコバトル勉強会in岡山その3 両方で使える•PsLE Scalerオブジェクトの拡大縮小に対応Photoshopライブエフェクトだけのスケールにも対応@1x → @2x @2x → @1xhttp://creative-tweet.net/tools/psle_scaler/detail.html13年6月23日日曜日
  20. 20. ガチンコバトル勉強会in岡山その4 その他•CSS professioalzrCSSプロパティーパネルから生成されるコードを最適化http://mattstow.com/css-professionalzr.html13年6月23日日曜日
  21. 21. ガチンコバトル勉強会in岡山その4 その他•Fluid Width Calculator選択オブジェクトの横幅とカンバスまたは別オブジェクトの幅との比率を%で算出するCSSのwidthのコードも生成するhttp://mattstow.com/#FluidWidthCalc-0313年6月23日日曜日
  22. 22. ガチンコバトル勉強会in岡山その4 その他•Generate Web Assetsスライスを設定しなくてもレイヤーごとにわかれたオブジェクトを書きだしてくれるレイヤー名に.png, .gif, .jpgがあるときだけ書きだされるhttp://johndunning.com/fireworks/about/GenerateWebAssets13年6月23日日曜日
  23. 23. まだ@1x画像は必要?ガチンコバトル勉強会in岡山13年6月23日日曜日
  24. 24. ガチンコバトル勉強会in岡山@1xは必要なのか?西畑さん「いらないです」13年6月23日日曜日
  25. 25. ガチンコバトル勉強会in岡山@1xは必要なのか?•iPhone4以降、devicePixelRatio=2•Androidも1のものは少ないAndroid端末のdevicePixelRatiohttp://blog.webcreativepark.net/2011/01/25-173502.htmlWebサイト作成なら、アクセス次第で切り捨ててもよいのではないか?13年6月23日日曜日
  26. 26. まとめガチンコバトル勉強会in岡山13年6月23日日曜日
  27. 27. ガチンコバトル勉強会in岡山まとめ•Fireworksオブジェクトは基本パスなので、もともとスケーラブル•ビットマップはなるべくシンボルで管理•Photoshopライブエフェクトはスケールしない、要注意13年6月23日日曜日
  28. 28. ガチンコバトル勉強会in岡山まとめ•標準でないRetina対応も、拡張機能で効率が可能•案件によっては@1xは捨ててもいいのでは?13年6月23日日曜日
  29. 29. ありがとうございました@akira_maruMaruyamaAkira13年6月23日日曜日

×