• Like
  • Save
仕事で使える、アイコン作画のコツとSVG変換のススメ
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

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

  • 8,270 views
Published

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

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

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

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,270
On SlideShare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
0
Comments
0
Likes
42

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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