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.
Upcoming SlideShare
FireworksユーザーのためのAdobe Experience Design
Next
Download to read offline and view in fullscreen.

23

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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日日曜日
  • dj_kazu

    Dec. 26, 2015
  • TakahisaMino

    Oct. 16, 2014
  • yokozunat

    Jul. 23, 2014
  • mikaseino

    Nov. 19, 2013
  • ChikakoMori

    Oct. 26, 2013
  • wigertazz1

    Oct. 8, 2013
  • keis1979

    Aug. 23, 2013
  • ohtsuki2843

    Aug. 18, 2013
  • k_a_n_a

    Jul. 2, 2013
  • waiz

    Jun. 26, 2013
  • fagiolorosso1

    Jun. 26, 2013
  • haruhikoseta

    Jun. 25, 2013
  • hidekism

    Jun. 25, 2013
  • sivacchi

    Jun. 24, 2013
  • kogorou

    Jun. 23, 2013
  • konitter

    Jun. 23, 2013
  • shuuheyhey

    Jun. 23, 2013
  • takeshi81

    Jun. 23, 2013
  • FlavorBright

    Jun. 23, 2013
  • munerin

    Jun. 23, 2013

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

Views

Total views

3,708

On Slideshare

0

From embeds

0

Number of embeds

48

Actions

Downloads

19

Shares

0

Comments

0

Likes

23

×