ベクタ グラフィックス 入門 2007/11/14 ema

Agenda ベクタ画像とは？ - 理論編 - Bitmap vs Vector ベクタ画像とは？ - 理論編 - Bitmap vs Vector SVG : Scalable Vector Graphics ベジェ曲線 実際に絵を描く方法 - 実践編 - 図形の合成 トレース より情報を得るには？

ベクタ画像とは？

Bitmap vs Vector

ビットマップ (Bitmap) 画像 パソコン上で最もポピュラーな画像の方式 画素の集まりとして画像を表現 拡大縮小すると、補間処理が必要

ベクタ (Vector) 画像 画像を描く 手順 を記録したもの 原理上、拡大縮小しても綺麗 再編集しやすい ex. PostScript 100 200 moveto 300 200 lineto stroke (100,200) (300,200)

Bitmap vs Vector - Format BMP : Windows 標準 PNG : 最近の主流。べた塗り画像向き GIF : 特許問題が出るまで主流だった JPEG : 写真など向き 主な違い 圧縮方式（可逆、非可逆） 色数（256色までとか、フルカラー使える とか）

Bitmap vs Vector - Format SVG : 今日の後半で登場 AI : Adobe Illustrator の保存形式 WMF : Windows Meta File SWF : Flash Word や PowerPoint などの図形描画 表現能力自体が全く異なる

Bitmap vs Vector - Software MS Paint : 言わずとしれた Windows のあ れ Photoshop : Adobe の有名なやつ Painter : これも有名。水彩画風とか手 書き風 Vector Illustrator : Adobe の有名なやつ Inkscape : 後半の題材。Free Software

Bitmap vs Vector - 重さ 重さ = ファイルサイズや、描画コスト Bitmap 色数と、画像の大きさに依存 Vector 画像の複雑さに依存

S calable V ector G raphics

SVG とは？ W3C が勧告している画像形式 XML ベース（木構造のテキストファイル ） オープンな規格 ベクタグラフィックス Inkscape の標準形式

Inkscape とは？ Free で 多機能 な SVG 編集ソフト オープンソースで開発されている Linux 由来だけど Windows でも動く Illustrator とも渡り合える

基本はオブジェクトの配置 四角、丸、星、渦巻き、直線、等々 実際の Inkscape でご覧ください

ベジェ曲線

ベジェ曲線 ベクタグラフィックスでよく出てくる 避けては通れないもの 自由な曲線を引ける 点 と 接線 で 曲線 を指定する くせもの！ ベクタグラフィックスでよく出てくる 避けては通れないもの 自由な曲線を引ける 点 と 接線 で 曲線 を指定する くせもの！ ちなみに、ベジェさんが考案

アンカーポイント と ハンドル アンカーポイント 曲線が通る点のこと ハンドル 曲線の接線 曲線をどのように曲げるかを制御 長さ と 角度 でコントロールする 「ベジェ曲線で行こう！」より引用 http://cheebow.info/chemt/archives/2007/09/post_285.html

直線 クリック 「ベジェ曲線で行こう！」より引用 http://cheebow.info/chemt/archives/2007/09/post_285.html

曲線 クリック ＋ ドラッグ 「ベジェ曲線で行こう！」より引用 http://cheebow.info/chemt/archives/2007/09/post_285.html

折り返し クリック ＋ ドラッグ ＋ SHIFT 「ベジェ曲線で行こう！」より引用 http://cheebow.info/chemt/archives/2007/09/post_285.html

ベジェ曲線をひく様子 実際の Inkscape でご覧ください

後は、感覚で覚えてください 色々さわればわかります！ 練習あるのみ 数式については触れません

実際に 絵を描くには

1. 図形の合成 2. トレース 3. 実際の操作

幾何学的な図形を組み合わせる 四角、丸、星、渦巻き、直線の組み合わせ 目標画像

ブーリアン操作 図形自体を演算 = + ー +

素材を用意 パイ(?) の作り方

差分をとる

さらに調整して ここをつなげたい

統合する つながった！

線の太さを調整

1. 図形の合成 2. トレース 3. 実際の操作

ベジェ曲線でトレース 下絵を用意 下手ですみません

気合いが必要 トレースは気合い

はじめは大まかに はじめは大まかに 角度が大きく変わるところにポイントを置いていきます

微調整用の工夫 下絵を見やすくするために半透明にして適当な色を付けます

色も塗っておくとベター 気合いで進めていって

パーツで色を塗り分ける 全部トレース

完成 拡大して微調整を繰り返して、完成 力尽きましたｗ 下絵込みで１時間強 というかファイルを間違って上書き orz

1. 図形の合成 2. トレース 3. 実際の操作

基本的な部分だけデモします 図形 テキスト（特に日本語） 線と塗りつぶし グラデーションエディタ 整列ダイアログ エクスポート

使い方のコツ（我流） マウスホイールを活用する マウス位置を中心に拡大縮小：CTRL + 回 転 ドラッグでスクロール：中ボタンでド ラッグ 整列ツールを活用する 揃えたり、一定間隔に並べたり グラデーションを活用 なんとなく綺麗な感じに！

エクスポート Word や Writer は SVG を未サポート OpenOffice は Import 拡張あり エクスポート：ビットマップ形式で出力 Inkscape から PNG などに出力できる 解像度を高めに出力すると良い感じ

より情報を えるためには？

チュートリアルとか 公式：チュートリアル（一部、日本語化） http://www.inkscape.org/doc/index.php?lan g=ja 公式：新機能ビデオ http://ryanlerch.blip.tv/file/315537/ ニコニコ動画 http://www.nicovideo.jp/tag/Illustrator

Inkscape Perfect Guide 本も出てました 割とよかったので 興味のある方は 読んでみてください 表紙下部の画像の 作成過程が主な内容

SVG の素材など Open Clip Art Library フリーなライセンスのクリップアート集 SVG 形式。高品質の画像が結構ある。 http://openclipart.org/ inkscape's deviantART favourites Inkscape で作られた凄い画像群 http://inkscape.deviantart.com/favourites/

似たソフトの解説 Illustrator 関係の書籍や Web を参照

ご静聴 ありがとう ございました