思いっきり季節を先取りして、オープンソースのグラフィックツールで年賀状素材を作ってしまおうというこの企画。今回は番外編として、ドローツールInkscapeを活用して、角丸四角形のアクリル風ボタンを作成してみた。

Inkscape(インクスケープ)は、オープンソースのドローツールである。ドローツールとは、図形や線分を修正したり描きなおしたりしても、劣化しないという特長を持つ。同様のツールとしては、PowerPointの図形描画機能やIllustratorがある。Inkscapeは、SVGフォーマットという、標準規格をデフォルトフォーマットとしている。このファイル形式で作成したイラストであれば、ほかのツールとやり取りが簡単にできる。現在、Windows版のほかに、Mac OS X版とLinux版が配布されている。

誰でも自由に無償で利用できるオープンソースドローツールInkscape

Inkscape入手とインストール

Inkscapeは、次の「Inkscape.org」(http://www.inkscape.org/)のWebサイトからダウンロードできる。一部のページが英語のままだが、それほどややこしくないので、気にせず進もう。

Inkscape.org http://www.inkscape.org/

(クリックで拡大します)

Inkscapeを入手するには、このWebサイトの左メニューから「ダウンロード」を選択する。ダウンロードページ(現在のところ英語になっている)が表示されたら、「Windows ? .exe installer」をクリック。これで、ダウンロードがスタートする。

Inkscape.orgからWindows版をダウンロードする

(クリックで拡大します)

インストールするには、ダウンロードしたファイルをダブルクリックすれば良い。あとは、ウィザードの指示に従っていくだけ。インストーラの画面には、日本語で表示されるので、ここは心配しなくても良いだろう。

インストールスタート

(クリックで拡大します)

※今回は、Inkscaep バージョン0.46を対象にしている

角丸四角形を描く

では、実際にボタンを描いていこう。今回描くアクア風ボタンは、Mac OS XのGUI:Aquaで多用されているものだ。このデザインを再現するには、丸みをおびた形状にグラデーションを組み合わせる。

通称アクア風ボタン。角丸四角形で作成する

まずは、土台になる角丸四角形を描く。これは、左側のツールボックスにある「四角形」ツールで描く。四角形を描くには、「四角形」ツールをクリックしたあと、中央の空きスペースでドラッグする。「CTRL」キーを押しながらドラッグすると、正方形になる。

角丸四角形を描く

(クリックで拡大します)

コーナーの丸さを調整するには、右上に表示された2つの丸ハンドルをドラッグする。

描いた図形の色を変えるには、上部ツールバーの「Color」ボタンをクリック。

(クリックで拡大します)

グラデーションで描く

Inkscapeでグラデーションを描くには、グラデーションを設定したい図形を、あらかじめ選択状態にしておく。四角形を選んだ直後なら、選択状態になっているはずだ。選択されていなければ、ツールボックスの「選択」ツールを使って、クリックしておこう。

選択した図形にグラデーションを設定するには、ツールボックスの「グラデーション」ツールを使う。このツールを選択したあと、図形をドラッグすると、その方向に合わせてグラデーションが表示される。表示されるグラデーション用のハンドルを操作して、位置を調整してもいい。

グラデーションを設定する

(クリックで拡大します)

グラデーションの色を設定する

続いて、グラデーションの色を細かく設定してみよう。

グラデーションとは、ある色から別の色に微妙に変化していく表示手法だ。設定するためには、最低2つの色を設定する。Inkscapeでは、デフォルトで特定の1色と透明色の2つが設定されている。

まずは、1つ目の色を変えてみよう。現在は黄色が設定されている。変更するには、「グラデーション」ツールを選択している状態で、上部ツールバーの「編集」ボタンをクリックする。これで「グラデーションエディタ」が表示される。

ひとつ目の色(ここではstop4397)を選択したら、その下のホイールで色を選ぶ。円形で色を選んでから、内側の三角スペースで濃淡を指定すると簡単にできる。

グラデーションエディタで、1つ目の色を調整する

(クリックで拡大します)

もうひとつの透明色(stop4399)は、色と合わせて透明度を変更する。透明度は、ホイール下の領域で行う。デフォルトで透明色になっているため、まずこの透明度を変更してから、色合いを選択して結果を確認しよう。

グラデーションエディタで、2色目の透明度を調整する

(クリックで拡大します)

アクア風ボタンを分解する

さて、ここまでの操作ができれば、アクア風ボタンのほとんどのパーツを作成できる。このボタンは次の4つのパーツを重ねてできている。ここでは、下から順番に説明していこう。

ドロップシャドウ：ボタンの下に落ちる影を表す。灰色で塗りつぶし、ぼかし(Blur)=3.6に設定する。ぼかしは、カラーパレットの下部で設定できる。

(クリックで拡大します)

土台：ドロップシャドウと同じサイズの角丸四角形。濃紺から青色に放射グラデーションで変化する。グラデーションの種類は、「グラデーション」ツールのツールバーか、カラーパレットで設定する。グラデーションの中心は、四角形の下部にする。これで、下から照らされた光を表現する。

(クリックで拡大します)

内側四角形：土台を少し小さくした角丸四角形。青色から水色に放射グラデーションで変化する。グラデーションの中心は、四角形の中央にする。不透明度(Opacity)=52.5%にする。この値は、土台と重ねた状態で調整していく。これが、ボタン中央の発光を表現する。さらに、輪郭色に水色を設定する

(クリックで拡大します)

上部の照り返し：内側四角形と同サイズの角丸四角形を元にして、図のような形状を作る。白黒の線形グラデーションを設定し、不透明度(Opacity)=46.3%にする。これで、ボタン上部からの光の照り返しを表現する。この形状の作り方は、次項で説明する。

(クリックで拡大します)

各パーツを作っていくときには、土台からスタートして、それをコピペしていくと簡単だ。このとき、カラーパレットでグラデーション設定を「コピー」してから、色合いを調整していく。グラデーション設定をコピーしないと、元図形のグラデーションまで変化してしまう。

自由図形を作る

では、上部の照り返しのような図形は、どのようにして作るのだろうか。これは、複数の図形を組み合わせて作成していく。基本になるのは、内側四角形である。上部照り返しは、内側四角形の上部と同じ形状になっているからだ。

まず、内側四角形を複製する。これには、内側四角形を選択し、ツールバーの「コピー」ボタンと「貼り付け」ボタンをクリックする

1.内側四角形を複製する

(クリックで拡大します)

続いて、下半分を削除する。Inkscapeでは、複数の図形を重ねて合成したり、重なった部分を削除する機能がある。これを利用して、内側四角形に長方形を組み合わせて、下半分を削除する。
そのために、まず長方形を描く。内側四角形の削除した部分の上に長方形を重ねて、両方を選択する。それから「パス」-「差分」を実行する。これで、内側四角形の下半分を削除できた。

2.内側四角形の下半分を削除する

(クリックで拡大します)

続いて、波型のカーブをひとつ追加する。これは、先ほど作成した図形に楕円を合成する。
楕円を描いて、重ねたら、「パス」-「統合」を実行する。これでカーブをひとつ追加した。

3.カーブをひとつ追加する

(クリックで拡大します)

続いて、もうひとつカーブを追加する。これは楕円の差分で作る。楕円を描いて、重ねたら、「パス」-「差分」を実行する。

4.もうひとつカーブを追加する

(クリックで拡大します)

これで、上部照り返しのおおざっぱな形状ができあがった。あとは、ツールボックスの「ノード編集」ボタン(Edit path by node)を使って、形状を整えていく。余分なノードがあれば、可能な限り削除すると、形状を整えやすくなる。これを、白黒の線形グラデーションで塗りつぶす。

5.形状を整えたら、白黒の線形グラデーションで塗りつぶす

(クリックで拡大します)

仕上げ

これに文字や画像を組み合わせれば、Aqua風角丸ボタンの完成である。

すべてを重ねたあと、ドロップシャドウだけを少し下にずらしておくと、ボタンが浮き出したような効果が生まれる。

文字や画像は、上部照り返しのすぐ下におく。少し透明にしたほうが雰囲気が出るだろう。画像は、「ファイル」-「インポート」で読み込む。

完成した画像をビットマップ画像に変換するには、「ファイル」-「ビットマップにエクスポート」を選択する。

アクア風ボタンの完成

ダウンロード

今回作成したサンプルファイルを「Open Clipart Library」で公開している。ここは、誰でも自由に利用できるドロー形式クリップアートの配布サイトである。この素材のひとつとして、このボタンをダウンロードできる。ファイル形式は、SVGフォーマットである。これらのクリップアートは、Inkscapeで自由に加工できる。

フリーのベクターイメージ配布サイト「Open Clipart Library」

• ボタン1(牛なし)
• ボタン2(牛あり)

ダウンロードするには、右の「Download」ボタンを右クリック＞「名前を付けて保存」とする。なお、ボタン2(牛あり)は、ブラウザ上でプレビュー表示すると牛が表示されない場合がある。ダウンロードしてInkscapeなどに読み込めば、きちんと表示される。

Openclipart libraryで、次のようなSVGファイルも公開している。合わせて利用して欲しい。

＊＊ 2008-08-29:OpenClipartは、回復しました。

＊＊ 2008-08-25:OpenClipartのトラブルのために、現在ダウンロードができなくなっています。こちらの場所からダウンロードできるようにしましたので、ご利用ください。 ＊＊

作ってタノシク、もらってユカイ

筆まめonline タノユカ年賀状コンテスト 開催中 年賀状のためのタノシク・ユカイなデザインを募集している「タノユカ年賀状コンテスト」。素敵なプレゼントも当たります。夏休みを使って、あなたの才能を爆発させてみませんか。 ■応募期間：2008年7月1日（火）～8月31日（日）詳しくは、タノユカ年賀状コンテスト 応募ページをご覧ください。