【Webデザイン入門】Inkscapeを触ってみる【第5回】

前回

前回の記事

前回は配色についてまとめた。今回からInkscapeを使った画像作成について紹介しようと思う。

1. はじめに

Webデザインではロゴを自分で作業することも多々あると思う。その場合、ベクター画像をIllustrator(通称イラレ)で作成するのがプロの世界では一般的だ。ベクター画像は画像を図形の集まりとして表現することで、拡大しても滑らかな曲線を描くことができる画像だ。

Illustratorは有料のため、今回は無料でも使えるInkscapeという類似のフリーソフトで作成する。Inkscapeを使用したエンブレム作成とロゴ作成の2回に分けて紹介する。

今回は第1回でトップページを作った「こころクリニック」のエンブレムを作ってみる。

2. 円の作成

Inkscapeを起動したら、円/弧ツールでエンブレムのベースとなる円を2つ作成する。

円の作成

3. テキストを円に沿わせる

次にテキストを作成し、内側の円に沿わせる。Shiftキーを押しながら、テキストと内側の円を選択し、「テキスト」>「テキストをパスに沿わせる」を選択する。すると、テキストが円に沿う。

円を2回クリックすると円を回転させるための矢印が出てくるので、円を回転させテキストの位置を調整する。

テキストを円に沿わせる1

続いて、下側にもテキストを付ける。同じくテキストを作成し、今度は外側の円に沿わせる。「H」キーを押すとテキストが内側に入るので、先ほど同様円を回転させテキスト位置を調整する。

テキストを円に沿わせる2

4. 円の中心に模様を作る

次に円の中心に模様を作成する。ペンツールを使って、内側の円の中に、半径くらいの直線を円の中心から引く。

円の中心に模様を作る1

そして、編集>クローン>タイルクローンを作成を選択し、シフトタブの列ごとに-100%、回転タブの列ごとに15度、行×列を1×30にして作成ボタンを押す。

円の中心に模様を作る2

直線が複製され、上記のような模様が出来る。

5. 長方形の作成

矩形ツールを使って長方形を作成し、円の上に乗せる。円と長方形を選択し、Ctrl+Shift+Aを押して整列ペインを出し、中心を垂直軸に合わせるボタンを押すと中心を揃えることができる。

長方形の作成

6. 完成

あとはテキストを作成し、長方形の上に重ねれば完成!

完成

7. まとめ

一般的なペイントツールと違い線を引くというよりは線を配置し、変形することで図形を描いていくので慣れが必要なツールだと感じた。

一方で、線を引くようなツールよりも曲線が美しく描けたり、パターンを複製したりするのが得意なツールなので、そういった理由からデザインの場で使われるのがこういったツールなのだなと感じた。

皆さんも十分にツールを遊び倒して、デザインの場面でゴリゴリ使えるようになってもらえたらと思う。

次回はいよいよInkscapeを使ったロゴ作成に取り組もうと思う。

参考サイト

テキストを円形に並べたエンブレムの作成 #008

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA