 |
|
J Inkscapeで絵を描いてみる
もくじ
■ Inkscapeとは？
■ 関連サイト
□ とりあえず、なんか描いて塗ってみる
□ 別のSVGをインポートして位置を合わせる
□ 差分・分離・パスをカット・分割のちがい
□ パス統合・連結のちがい
□ パス分割で生成されるオブジェクト(外周パスと内周パス)
□ パス切り出しとクリッピングの違い
□ その他のTipsなど。
□ Inkscapeの図形スナップと変形
□ 解像度のお話
□ スクリプト(UWSC・AutoHotkey)
■ Inkscapeとは？
■ 関連サイト
□ とりあえず、なんか描いて塗ってみる
□ 別のSVGをインポートして位置を合わせる
□ 差分・分離・パスをカット・分割のちがい
□ パス統合・連結のちがい
□ パス分割で生成されるオブジェクト(外周パスと内周パス)
□ パス切り出しとクリッピングの違い
□ その他のTipsなど。
□ Inkscapeの図形スナップと変形
□ 解像度のお話
□ スクリプト(UWSC・AutoHotkey)
■ Inkscapeとは？
オープンソース(Linuxベース)のベクターグラフィックスエディタ。ブラウザで表示可能なベクタデータ(SVG形式)のファイルを作成、編集できます。
Windows(32bit)用にビルドされた物も公開されており、標準で日本語に対応しています。
このページはWindows版のInkscapeについて説明しています。
ラスタライズするときはGimp2を使うと便利です。Inkscape SVG形式のファイルを読み込み時に画像ピクセル数・パスのインポートの有無が指定でき、殆どのラスター形式で書き出すことが出来ます(ただしInkscapeのレイヤーは統合されます)。
Inkscapeのエクスポート→pngは透過属性が保持された32bit-pngで書き出されます。
書き出す範囲(ページ全体/選択範囲のみ/座標指定)や画像ピクセル数をダイアログで変更できますが、オブジェクトを複数選択していると、それらは統合されて出力されます。
Effectメニューからスクリプトで全オブジェクトを1枚ずつ書き出す[Group to PNGs]は、デフォルトの解像度(90dpi = Zoom率100%の表示サイズと同じ大きさ)でオブジェクトごとの範囲で切り出されてしまいますが、スクリプトファイルをテキストエディタで編集する事で用紙サイズ保持・画像解像度指定が可能になります(詳細はTips参照)。
そのほか、インストーラ版はエクスプローラ上でSVGファイルのシェルで[編集]を選択したときにもInkscapeが起動するため、これはシェルで[Inkscape]を選択したときと全く同じ挙動なので、フォルダオプションでどちらかを削除しても良いと思います。
開発版のアーカイヴ(zip or 7z)は任意のフォルダに解凍後そのまま実行できますが、これらのシェル拡張はありません(ファイルの関連付けも手動で行う必要があります)。
開発版は頻繁に更新されており、ほぼ毎日1日数回に渡りファイルが入れ替わっています。
開発中のソフトウェアのWin版という性質上、まだ不安定だったり、特にテキストツールで日本語フォントを使用する場合に不具合が残っていますが、開発版にはインストーラ版にないツールや新しいエフェクトが追加されている事もあります。
とは言えこのツールの機能がフリーで使える上、ポップアートや↑程度のイラストを描く分には結構安定しています(gtk+,glib,pangoのバージョンや、Gimpと重複するこれらのファイルの存在によって安定度が左右されるようです。Blur(ぼかし)が使いやすくなったVer.0.45は、僕の環境では0.44に比べてまだ不安定です。
なおラスター画像挿入やテキストツールを使用したファイルをpdfで出力する際には、ps形式で出力後にGSViewを通してConvert(拡張子は手動で付ける)すると良いそうです。
Windows(32bit)用にビルドされた物も公開されており、標準で日本語に対応しています。
ただしインストールパス・入出力ファイルのパス・ファイル名・レイヤー名およびWindowsのユーザーアカウントに日本語(2バイト文字)を使わない事
このページはWindows版のInkscapeについて説明しています。
| 入力形式 | svg svgz ggr ai.svg ani bmp gif ico cur jpeg jpe jpg pcx png pn(b,g,p)m ras tga targa tiff tif wbmp xbm xpm (Linuxはepsも可?) |
| 出力形式 | svg svgz ps eps pdf pov odg tex DXF zip png(エクスポート or Groups to PNGs) psd(要Gimp,gimp_psd.inx,gimp_psd.py) xcf(要Gimp,改良版gimp_xcf.inx,改良版gimp_xcf.py) |
ラスタライズするときはGimp2を使うと便利です。Inkscape SVG形式のファイルを読み込み時に画像ピクセル数・パスのインポートの有無が指定でき、殆どのラスター形式で書き出すことが出来ます(ただしInkscapeのレイヤーは統合されます)。
Inkscapeのエクスポート→pngは透過属性が保持された32bit-pngで書き出されます。
書き出す範囲(ページ全体/選択範囲のみ/座標指定)や画像ピクセル数をダイアログで変更できますが、オブジェクトを複数選択していると、それらは統合されて出力されます。
Effectメニューからスクリプトで全オブジェクトを1枚ずつ書き出す[Group to PNGs]は、デフォルトの解像度(90dpi = Zoom率100%の表示サイズと同じ大きさ)でオブジェクトごとの範囲で切り出されてしまいますが、スクリプトファイルをテキストエディタで編集する事で用紙サイズ保持・画像解像度指定が可能になります(詳細はTips参照)。
4Inkscapeインストーラ版
http://www.inkscape.org/(本家)またはhttp://sourceforge.net/
4Win32ビルド開発版(inkscape-YYMMddhhmm.zip or .7z)
http://inkscape.modevia.com/win32-snap/?M=D
そのほか、インストーラ版はエクスプローラ上でSVGファイルのシェルで[編集]を選択したときにもInkscapeが起動するため、これはシェルで[Inkscape]を選択したときと全く同じ挙動なので、フォルダオプションでどちらかを削除しても良いと思います。
開発版のアーカイヴ(zip or 7z)は任意のフォルダに解凍後そのまま実行できますが、これらのシェル拡張はありません(ファイルの関連付けも手動で行う必要があります)。
開発版は頻繁に更新されており、ほぼ毎日1日数回に渡りファイルが入れ替わっています。
開発中のソフトウェアのWin版という性質上、まだ不安定だったり、特にテキストツールで日本語フォントを使用する場合に不具合が残っていますが、開発版にはインストーラ版にないツールや新しいエフェクトが追加されている事もあります。
とは言えこのツールの機能がフリーで使える上、ポップアートや↑程度のイラストを描く分には結構安定しています(gtk+,glib,pangoのバージョンや、Gimpと重複するこれらのファイルの存在によって安定度が左右されるようです。Blur(ぼかし)が使いやすくなったVer.0.45は、僕の環境では0.44に比べてまだ不安定です。
なおラスター画像挿入やテキストツールを使用したファイルをpdfで出力する際には、ps形式で出力後にGSViewを通してConvert(拡張子は手動で付ける)すると良いそうです。
IEでSVGを開くには Adobe(R) SVG Viewer for Windowsが必要です。Firefoxは標準でSVGに対応していますが、オリジナルサイズを表示するのみでZoomやPanするためには別途拡張が必要です。(IE_Tabで*.svgのリンクをIEエンジンで開くように設定するのがオススメ)
なおAdobe(R) SVG Viewer for Windowsをインストールすると、svgファイルのアイコンはhtmlファイルのデフォルトアイコンが適用されます。
※Inkscapeで作成したSVGは、何も描画されていない背景部分は透明になっています(Gimpでsvgを開いてもキャンバス地は透明)。
たとえば<IFRAME>タグを利用してWebページ内にSVGを表示するとき、テーブル・セルなどの背景色に関わらずIEエンジンではsvgの透明部分をデフォルトで白として描画しますが、Firefoxでは透明部分が忠実に反映されるため、透けた部分がHTMLの背景色で描画されてしまう場合があります。
なおAdobe(R) SVG Viewer for Windowsをインストールすると、svgファイルのアイコンはhtmlファイルのデフォルトアイコンが適用されます。
※Inkscapeで作成したSVGは、何も描画されていない背景部分は透明になっています(Gimpでsvgを開いてもキャンバス地は透明)。
たとえば<IFRAME>タグを利用してWebページ内にSVGを表示するとき、テーブル・セルなどの背景色に関わらずIEエンジンではsvgの透明部分をデフォルトで白として描画しますが、Firefoxでは透明部分が忠実に反映されるため、透けた部分がHTMLの背景色で描画されてしまう場合があります。
■ 関連サイト
4Inkscape Wiki (必見。改良版g2PNGsやbmp2svgの作者さん)
http://wikiwiki.jp/inkscape/
4Inkscape - Wikibooks
http://ja.wikibooks.org/wiki/Inkscape
4Inkscape@JP (この方のページはすごい。開発チームの一人?)
http://inkscape.nyx.bne.jp/
4Adobe(R) SVG Viewer for Windows (SVG Viewer 3.03 Build94)
http://www.adobe.co.jp/svg/ (2008年1月でサポート終了)
4gtk+・glib・pango (最新のライブラリにInkscapeが対応していない場合が有ります)
http://www.gtk.org/
4GhostScript & GSView
http://auemath.aichi-edu.ac.jp/~khotta/ghost/#disk
4A Guide to Inkscape
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
4Python 2.4.1 日本語環境用インストーラ(Win32)
http://www.python.jp/Zope/download/pythonjpdist
4Python Effects
http://www.inkscape.org/cgi-bin/wiki.pl?GettingEffectsWorking/Windows
4XML package for Python
http://pyxml.sourceforge.net/
4PyXML-0.8.4.win32-py2.4.exe
http://sourceforge.net/project/showfiles.php?group_id=6473
4www.pandora.nu/tempo-depot/notes
http://www.pandora.nu/tempo-depot/notes/2005/08/27/index.html#d050827
4Perl Effects
http://www.inkscape.org/cgi-bin/wiki.pl?GettingEffectsWorking
4ActivePerl
http://www.activestate.com/Products/Download/Download.plex?id=ActivePerl
4xml-xql Download
http://www.cpan.org/authors/id/T/TJ/TJMATHER/XML-XQL-0.68.tar.gz
4The GIMP Homepage
http://www.gimp.org/
4GTK+ 2 for Windows The Gimp for Windows
http://gimp-win.sourceforge.net/stable.html
4GIMP2を使おう
http://www.geocities.jp/gimproject/gimp2.0.html 有志の方の手によるInkscape Wiki(http://wikiwiki.jp/inkscape/)やオフィシャルのチュートリアル(http://www.inkscape.org/doc/basic/tutorial-basic.jp.html)が既に充実していますが、ベクターグラフィックスエディタを使うのは全くの初めてという方には少し取っ掛かりにくいソフトかもしれません。
"描く"というより、"選んで(ノードを)動かす"または"選んで(色・太さを)設定する"のがメインになるので、特に彩色に関しては絵を描くという言葉のニュアンスからはおよそかけ離れた操作になります(タブレットやマウスよりキーボード操作の方が多いかも)。
こんなページ書いてますが、僕自身まだ始めたばかりの素人ですので、このページの内容は引用を除き全てが間違いの可能性があります。どうかご了承下さいm(__)m
http://wikiwiki.jp/inkscape/
4Inkscape - Wikibooks
http://ja.wikibooks.org/wiki/Inkscape
4Inkscape@JP (この方のページはすごい。開発チームの一人?)
http://inkscape.nyx.bne.jp/
4Adobe(R) SVG Viewer for Windows (SVG Viewer 3.03 Build94)
http://www.adobe.co.jp/svg/ (2008年1月でサポート終了)
4gtk+・glib・pango (最新のライブラリにInkscapeが対応していない場合が有ります)
http://www.gtk.org/
4GhostScript & GSView
http://auemath.aichi-edu.ac.jp/~khotta/ghost/#disk
4A Guide to Inkscape
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
4Python 2.4.1 日本語環境用インストーラ(Win32)
http://www.python.jp/Zope/download/pythonjpdist
4Python Effects
http://www.inkscape.org/cgi-bin/wiki.pl?GettingEffectsWorking/Windows
4XML package for Python
http://pyxml.sourceforge.net/
4PyXML-0.8.4.win32-py2.4.exe
http://sourceforge.net/project/showfiles.php?group_id=6473
4www.pandora.nu/tempo-depot/notes
http://www.pandora.nu/tempo-depot/notes/2005/08/27/index.html#d050827
4Perl Effects
http://www.inkscape.org/cgi-bin/wiki.pl?GettingEffectsWorking
4ActivePerl
http://www.activestate.com/Products/Download/Download.plex?id=ActivePerl
4xml-xql Download
http://www.cpan.org/authors/id/T/TJ/TJMATHER/XML-XQL-0.68.tar.gz
4The GIMP Homepage
http://www.gimp.org/
4GTK+ 2 for Windows The Gimp for Windows
http://gimp-win.sourceforge.net/stable.html
4GIMP2を使おう
http://www.geocities.jp/gimproject/gimp2.0.html 有志の方の手によるInkscape Wiki(http://wikiwiki.jp/inkscape/)やオフィシャルのチュートリアル(http://www.inkscape.org/doc/basic/tutorial-basic.jp.html)が既に充実していますが、ベクターグラフィックスエディタを使うのは全くの初めてという方には少し取っ掛かりにくいソフトかもしれません。
"描く"というより、"選んで(ノードを)動かす"または"選んで(色・太さを)設定する"のがメインになるので、特に彩色に関しては絵を描くという言葉のニュアンスからはおよそかけ離れた操作になります(タブレットやマウスよりキーボード操作の方が多いかも)。
こんなページ書いてますが、僕自身まだ始めたばかりの素人ですので、このページの内容は引用を除き全てが間違いの可能性があります。どうかご了承下さいm(__)m
 |
MENU△ PAGE TOP▲ |