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

9,201 views
9,064 views

Published on

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

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

Published in: Education
0 Comments
43 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,201
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
43
Embeds 0
No embeds

No notes for slide

仕事で使える、アイコン作画のコツと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/

×