The Introduction to Vector Graphics

2007/11/14 ema

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

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

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

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

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

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

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

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 クリック＋ドラッグ

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

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

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

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

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

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

差分をとる

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

統合するつながった！

線の太さを調整

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

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

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

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

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

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

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

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

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

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

チュートリアルとか
公式：チュートリアル（一部、日本語化）
http://www.inkscape.org/doc/index.php?lang=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 を参照

The Introduction to Vector Graphics

by emaame on Nov 15, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 5

Statistics

The Introduction to Vector Graphics — Presentation Transcript