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.

仕事で使える、アイコン作画のコツとSVG変換のススメ

9,909 views

Published on

CSS Nite in Ginza, Vol.68「HiDPI時代のFireworks」で実施したセッションのスライド動画です。

【セミナーフォローアップ】
http://r360studio.com/fireworks/cssnite-ginza68.html

Published in: Education
  • Be the first to comment

仕事で使える、アイコン作画のコツとSVG変換のススメ

  1. 1. 鷹野さん をアイ ン コ 化!
  2. 2. Fireworks
  3. 3. さて、アイコンをどう使おう? ここからは、 森和恵が 担当します。
  4. 4. 松田さんのお話にもあったように脱ビットマップ…ですよねPNG GIF
  5. 5. そこで、SVG?
  6. 6. もうひとつ便利にアイコンをフォントに変える
  7. 7. SVG→フォントに変換すると…
  8. 8. フォント(文字)だからCSSで装飾が自由自在• カラーもシャドウもOK• 拡大/縮小OK
  9. 9. オリジナルのフォントはWebフォントとして指定
  10. 10. Webフォントを準備する@font-face { オリジナルフォント名を定義 font-family: takanofont; src: url(takanofont.eot); src: local(‘takanofont), url(takanofont. woff) format(woff);}
  11. 11. Webフォントを指定する.icon{ CSSルールにオリジナルフォントを指定 font-family:takanofont; color:red; text-shadow:3px 3px black;}
  12. 12. CSSスタイルを指定する<td>t</td> “t”にCSSルールを指定<td class="icon">t</td>
  13. 13. ソースコードの詳細は、後日配布のsample.htmlを参照※:before 疑似要素を使った方法も補足
  14. 14. オリジナルのフォントファイルを作る woff eot
  15. 15. fw.png → SVG → フォント woff eot
  16. 16. FireworkはSVG出力ができない
  17. 17. Aaron Beall Fireworks機能拡張 Export Export.mxp http://fireworks.abeall.com/extensions/commands/Export/
  18. 18. コマンド→書き出し→Export SVG
  19. 19. SVG→フォント変換のデータ準備 固有名をつけて ページに分ける ※SVGファイル名を指定
  20. 20. SVG→フォント変換を 失敗しないコツ パスの単純化 カンバスがフォント領域 余白が必要
  21. 21. SVG→フォント変換を 失敗しないコツストロークを塗りに変換パスの合体 …などでベタ塗り黒に
  22. 22. SVG→フォントを IcoMoon(for ブラウザ)で http://icomoon.io/app/
  23. 23. ①Import IconsでSVGファイルを指定 ②Selectで出力対象を選択
  24. 24. Editで編集も
  25. 25. ③Font→を選択
  26. 26. ④各フォントを呼び出すキャラクター (英数字・記号)を指定
  27. 27. ⑤Preferencesを選択し、フォント名(ファイル名)を選ぶ
  28. 28. ⑦zipファイルより抜き出す woff eot⑥Downloadを選択
  29. 29. まとめ• アイコンをフォント化すれば、 文字なので、CSS装飾が自由自在• Fireworks拡張機能Export でSVGへ• SVG→WebフォントはIcoMoon で変換• 複雑な形のフォント化は不得意
  30. 30. 参考URL• Fireworks で戦国武将の家紋を作って SVG な Web Font に変換してみる 歴史雑談録 松田直樹さん ※SVG→フォントをFont Custom(for mac)で• Fireworksを使ってオリジナルのWebアイコンを作成、 実装しよう! | フロントエンドとかPCとかスマホとか ※SVG→フォントをIcoMoon(for ブラウザ)で• アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 | Developers.IO ※ SVG→フォントをTTEdit(for windows)で SVG変換にはillustratorを使用
  31. 31. https://www.facebook.com/FireworksBook/

×