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
今Cinderが熱い! #cinder
Next
Download to read offline and view in fullscreen.

Share

The Introduction to Vector Graphics

Download to read offline

The introduction to Vector Graphics in Japanese.

The Introduction to Vector Graphics

  1. 1. 2007/11/14 ema
  2. 2. Agenda <ul><li>ベクタ画像とは? - 理論編 - </li></ul><ul><ul><li>Bitmap vs Vector </li></ul></ul><ul><ul><li>SVG : Scalable Vector Graphics </li></ul></ul><ul><ul><li>ベジェ曲線 </li></ul></ul><ul><li>実際に絵を描く方法 - 実践編 - </li></ul><ul><ul><li>図形の合成 </li></ul></ul><ul><ul><li>トレース </li></ul></ul><ul><li>より情報を得るには? </li></ul>
  3. 5. ビットマップ (Bitmap) 画像 <ul><li>パソコン上で最もポピュラーな画像の方式 </li></ul><ul><li>画素の集まりとして画像を表現 </li></ul><ul><li>拡大縮小すると、補間処理が必要 </li></ul>
  4. 6. ベクタ (Vector) 画像 <ul><li>画像を描く 手順 を記録したもの </li></ul><ul><li>原理上、拡大縮小しても綺麗 </li></ul><ul><li>再編集しやすい </li></ul><ul><li>ex. PostScript </li></ul><ul><ul><li>100 200 moveto </li></ul></ul><ul><ul><li>300 200 lineto </li></ul></ul><ul><ul><li>stroke </li></ul></ul>(100,200) (300,200)
  5. 7. Bitmap vs Vector - Format <ul><li>Bitmap </li></ul><ul><ul><li>BMP : Windows 標準 </li></ul></ul><ul><ul><li>PNG : 最近の主流。べた塗り画像向き </li></ul></ul><ul><ul><li>GIF : 特許問題が出るまで主流だった </li></ul></ul><ul><ul><li>JPEG : 写真など向き </li></ul></ul><ul><li>主な違い </li></ul><ul><ul><li>圧縮方式(可逆、非可逆) </li></ul></ul><ul><ul><li>色数(256色までとか、フルカラー使えるとか) </li></ul></ul>
  6. 8. Bitmap vs Vector - Format <ul><li>Vector </li></ul><ul><ul><li>SVG : 今日の後半で登場 </li></ul></ul><ul><ul><li>AI : Adobe Illustrator の保存形式 </li></ul></ul><ul><ul><li>WMF : Windows Meta File </li></ul></ul><ul><ul><li>SWF : Flash </li></ul></ul><ul><ul><li>Word や PowerPoint などの図形描画 </li></ul></ul><ul><li>表現能力自体が全く異なる </li></ul>
  7. 9. Bitmap vs Vector - Software <ul><li>Bitmap </li></ul><ul><ul><li>MS Paint : 言わずとしれた Windows のあれ </li></ul></ul><ul><ul><li>Photoshop : Adobe の有名なやつ </li></ul></ul><ul><ul><li>Painter : これも有名。水彩画風とか手書き風 </li></ul></ul><ul><li>Vector </li></ul><ul><ul><li>Illustrator : Adobe の有名なやつ </li></ul></ul><ul><ul><li>Inkscape : 後半の題材。Free Software </li></ul></ul>
  8. 10. Bitmap vs Vector - 重さ <ul><li>重さ = ファイルサイズや、描画コスト </li></ul><ul><li>Bitmap </li></ul><ul><ul><li>色数と、画像の大きさに依存 </li></ul></ul><ul><li>Vector </li></ul><ul><ul><li>画像の複雑さに依存 </li></ul></ul>
  9. 12. SVG とは? <ul><li>W3C が勧告している画像形式 </li></ul><ul><ul><li>XML ベース(木構造のテキストファイル) </li></ul></ul><ul><ul><li>オープンな規格 </li></ul></ul><ul><li>ベクタグラフィックス </li></ul><ul><li>Inkscape の標準形式 </li></ul>
  10. 13. Inkscape とは? <ul><li>Free で 多機能 な SVG 編集ソフト </li></ul><ul><li>オープンソースで開発されている </li></ul><ul><li>Linux 由来だけど Windows でも動く </li></ul><ul><li>Illustrator とも渡り合える </li></ul>
  11. 14. 基本はオブジェクトの配置 <ul><li>四角、丸、星、渦巻き、直線、等々 </li></ul><ul><li>実際の Inkscape でご覧ください </li></ul>
  12. 16. ベジェ曲線 <ul><li>ベクタグラフィックスでよく出てくる 避けては通れないもの </li></ul><ul><li>自由な曲線を引ける </li></ul><ul><li>点 と 接線 で 曲線 を指定する </li></ul><ul><li>くせもの! </li></ul><ul><li>ちなみに、ベジェさんが考案 </li></ul>
  13. 17. アンカーポイント と ハンドル 「ベジェ曲線で行こう!」より引用 http://cheebow.info/chemt/archives/2007/09/post_285.html <ul><li>アンカーポイント </li></ul><ul><ul><li>曲線が通る点のこと </li></ul></ul><ul><li>ハンドル </li></ul><ul><ul><li>曲線の接線 </li></ul></ul><ul><ul><li>曲線をどのように曲げるかを制御 </li></ul></ul><ul><ul><li>長さ と 角度 でコントロールする </li></ul></ul>
  14. 18. 直線 「ベジェ曲線で行こう!」より引用 http://cheebow.info/chemt/archives/2007/09/post_285.html クリック
  15. 19. 曲線 「ベジェ曲線で行こう!」より引用 http://cheebow.info/chemt/archives/2007/09/post_285.html クリック + ドラッグ
  16. 20. 折り返し 「ベジェ曲線で行こう!」より引用 http://cheebow.info/chemt/archives/2007/09/post_285.html クリック + ドラッグ + SHIFT
  17. 21. ベジェ曲線をひく様子 <ul><li>実際の Inkscape でご覧ください </li></ul>
  18. 22. 後は、感覚で覚えてください <ul><li>色々さわればわかります! </li></ul><ul><li>練習あるのみ </li></ul><ul><li>数式については触れません </li></ul>
  19. 25. 幾何学的な図形を組み合わせる <ul><li>四角、丸、星、渦巻き、直線の組み合わせ </li></ul><ul><li>目標画像 </li></ul>
  20. 26. ブーリアン操作 <ul><li>図形自体を演算 </li></ul>ー + + =
  21. 27. 素材を用意 パイ (?) の作り方
  22. 28. 差分をとる
  23. 29. さらに調整して ここをつなげたい
  24. 30. 統合する つながった!
  25. 31. 線の太さを調整
  26. 33. ベジェ曲線でトレース 下絵を用意 下手ですみません
  27. 34. 気合いが必要 トレースは気合い
  28. 35. はじめは大まかに はじめは大まかに 角度が大きく変わるところにポイントを置いていきます
  29. 36. 微調整用の工夫 下絵を見やすくするために半透明にして適当な色を付けます
  30. 37. 色も塗っておくとベター 気合いで進めていって
  31. 38. パーツで色を塗り分ける 全部トレース
  32. 39. 完成 拡大して微調整を繰り返して、完成 力尽きましたw 下絵込みで1時間強 というかファイルを間違って上書き orz
  33. 41. 基本的な部分だけデモします <ul><li>図形 </li></ul><ul><li>テキスト(特に日本語) </li></ul><ul><li>線と塗りつぶし </li></ul><ul><li>グラデーションエディタ </li></ul><ul><li>整列ダイアログ </li></ul><ul><li>エクスポート </li></ul>
  34. 42. 使い方のコツ(我流) <ul><li>マウスホイールを活用する </li></ul><ul><ul><li>マウス位置を中心に拡大縮小:CTRL + 回転 </li></ul></ul><ul><ul><li>ドラッグでスクロール:中ボタンでドラッグ </li></ul></ul><ul><li>整列ツールを活用する </li></ul><ul><ul><li>揃えたり、一定間隔に並べたり </li></ul></ul><ul><li>グラデーションを活用 </li></ul><ul><ul><li>なんとなく綺麗な感じに! </li></ul></ul>
  35. 43. エクスポート <ul><li>Word や Writer は SVG を未サポート </li></ul><ul><ul><li>OpenOffice は Import 拡張あり </li></ul></ul><ul><li>エクスポート:ビットマップ形式で出力 </li></ul><ul><ul><li>Inkscape から PNG などに出力できる </li></ul></ul><ul><ul><li>解像度を高めに出力すると良い感じ </li></ul></ul>
  36. 45. チュートリアルとか <ul><li>公式:チュートリアル(一部、日本語化) </li></ul><ul><ul><li>http://www.inkscape.org/doc/index.php?lang=ja </li></ul></ul><ul><li>公式:新機能ビデオ </li></ul><ul><ul><li>http://ryanlerch.blip.tv/file/315537/ </li></ul></ul><ul><li>ニコニコ動画 </li></ul><ul><ul><li>http://www.nicovideo.jp/tag/Illustrator </li></ul></ul>
  37. 46. Inkscape Perfect Guide <ul><li>本も出てました </li></ul><ul><li>割とよかったので 興味のある方は 読んでみてください </li></ul><ul><li>表紙下部の画像の 作成過程が主な内容 </li></ul>
  38. 47. SVG の素材など <ul><li>Open Clip Art Library </li></ul><ul><ul><li>フリーなライセンスのクリップアート集 </li></ul></ul><ul><ul><li>SVG 形式。高品質の画像が結構ある。 </li></ul></ul><ul><ul><li>http://openclipart.org/ </li></ul></ul><ul><li>inkscape's deviantART favourites </li></ul><ul><ul><li>Inkscape で作られた凄い画像群 </li></ul></ul><ul><ul><li>http://inkscape.deviantart.com/favourites/ </li></ul></ul>
  39. 48. 似たソフトの解説 <ul><li>Illustrator 関係の書籍や Web を参照 </li></ul>
  • yyamasak

    May. 2, 2012
  • note103

    Mar. 17, 2009

The introduction to Vector Graphics in Japanese.

Views

Total views

3,800

On Slideshare

0

From embeds

0

Number of embeds

31

Actions

Downloads

30

Shares

0

Comments

0

Likes

2

×