SVGエディタInkscapeを使いこなすための15のチュートリアル

ビッグスクリーンで動作するブラウザ、ノートPCで動作するブラウザ、ネットブックで動作するブラウザ、iPad、iPhone 4、iPhone 3GS、そのほかのスマートフォンやタブレットタイプのデバイスなど、Webコンテンツにアクセスするデバイスと条件は多様化し続けている。こうしたすべての環境に対して適切なデザインを実現するのは簡単なことではない。

特に問題となるもののひとつがビットマップ画像。iPhone 4のレティナディスプレイのように高い密度を実現したスクリーンで美しい表示を実現するには、ビットマップ画像は問題が多い。はじめから大きなサイズのビットマップ画像を用意すれば美しさは確保できるが、帯域の無駄が発生する。ここでの解決策のひとつはSVGを採用することにある。SVGであればどの解像度のディスプレイでも同じようにレンダリングされる。

オープンソースソフトウェアで提供されているSVGエディタとしてはInkscapeが代表的なもののひとつだ。Inkscapeを使ってアイコンやグラフィックを描画するための15のチュートリアルが15 Fantastic Inkscape Tutorials for Creating Awesome Vector Art - TechSourceに掲載されている。これまでPhotoshopやGIMPなどのグラフィックマニピュレーションタイプのアプリケーションを扱ってきた場合、ベクタデータを制作するInkscapeは勝手が違うため、戸惑うかもしれない。15 Fantastic Inkscape Tutorials for Creating Awesome Vector Artに掲載されているチュートリアルはInkscapeの基本的な機能を網羅しており、最初の学習に役立つ。紹介されている15のチュートリアルは次のとおり。

1. Creating Pac-Man Baddies
2. Draw A Realistic Vector Guitar
3. Inkscape-tastic icons
4. Illustrating Chinese Dragon
5. Illustrating Rainbow with Clone tool
6. Create a Snail
7. Sticker with Folded Edge Tutorial
8. F10 Gears: Drawing the Gears
9. Creating a Coffee Cup
10. Illustrate A Peacock
11. Creating Postage Stamps
12. Create a Vector Compass
13. Text and Simple Styling
14. How to Create Valentine's Day Hearts Artwork
15. Creating Rubber Stamp

特に次の3つのチュートリアルは一通り作業しておきたい。簡単でありながらもInkscapeで操作するうえで欠かせない処理が一通り使われており、これを習得するだけでアイコンなど幅広いデザインが可能になる。

• Creating Pac-Man Baddies
• Inkscape-tastic icons
• Sticker with Folded Edge Tutorial

一通り作業して、次のチュートリアルがつまずくことなく作業できるようになっていれば、だいぶ慣れてきたといえる。

• How to Create Valentine's Day Hearts Artwork

Inkscapeにおける操作の基本はオブジェクトの作成、複製、ずらし、グラデーション、透過、ぼかし、ストロークとフィルの使い分け、パス操作など。ツヤのある表現や影など基本的なエフェクトは複製したものを多少ズラしてぼやかしと透過など。オブジェクトの切り貼り(結合、差分、交差、排他、分割、パスカット)などは慣れるまで手間取る。しかし一度慣れてしまえばあとは細かいテクニックを積み重ねてスキルアップしていけばよく、最初の取り掛かりとしてこの15のチュートリアルは参考になる。