目次
実際にこのサイトで使っている「フリー素材置き場」のアイコンが、どのように作られたのか。
今回は、その制作過程をラフから完成まで大公開します。
……と言っても、今回は制作途中の動画やスクリーンショットを撮りながら作ったものではありません。もともと制作過程を記事にする予定がなかったため、残っているのは各段階のファイルと、その時点で出力した画像が中心です。
いつものような初心者向けのチュートリアルではなく、中級者以上を対象に、制作時に考えていたことや判断したポイントを中心に紹介していきます。
過去の記事で紹介したテクニックを使えば作れる部分については、今回は細かな操作方法を省略しています。また、今回初めて紹介するツールや機能についても、基本的な使い方を説明するというより、「今回はこう使いました」という程度にサラッと紹介しています。
その代わり、「なぜこのモチーフを選んだのか」、「なぜこの方法で作ったのか」、「途中で何をボツにして何を追加したのか」といった、完成したアイコンだけを見ても分からない部分もできるだけ載せました。
ラフスケッチや採用しなかったパーツ、制作途中のデータなども含めて、完成までの試行錯誤をご覧ください。
操作手順だけではなく、一見複雑に見えるアイコンをどのように分解して考え、Inkscapeの機能を使ってできるだけ楽に形にしていったのかという部分も参考になればと思います。
アイコンのイメージをラフに描く
まずは「フリー素材置き場」という名前から連想できるものを考えながら、全体の構図をラフに起こします。
この時、表現しようと思ったのは
- おみやげ
- カラフルな配色
- 何かを作る動作
この3つのイメージです。
「フリー素材置き場」という名前と、お客様におみやげを持って帰ってもらうイメージから、箱に何かを詰めることにしました。
箱の中には素材の象徴として星を詰めました。星のアイコンには「お気に入り」や「おすすめ」の意味合いを持つことがあるので、そのモチーフでもあります。開いた箱の中から星が現れることで、素材を探すワクワク感も表現しました。
カラフルな配色は、7色の虹として背景にしました。素材の選択肢が色々あることもイメージしています。
そして「何かを作る」というイメージには、画材を取り入れました。素材を探す人だけでなく、その素材を使って何かを作る人にもつながるモチーフです。
こんな感じで、「箱＝おみやげ・素材を探す楽しさ」、「虹＝素材の色や選択肢」、「画材＝ものづくり・クリエイターの象徴」という役割を考えながら、ラフの方向性を決めていきました。
メインとなる構図を整理
ラフで決めたモチーフをもとに、段ボール箱・星・虹を実際のパーツとして作り、大まかな構図を整理していきます。
段ボール箱は、［3Dボックスツール］を使ってアタリを作成しました。
軸を［X軸：220°］、［Y軸：270°］、［Z軸：340°］に固定することで、箱の角度やパースを揃えています。
3Dボックスツールは以前等角投影図を作成する時に使用しましたが、軸の角度を調整することで違う角度の図を作成する時にも使えます。
最初から角度は○○°と決めているわけではなく、ラフに合わせて適当に調節しています。
星は［星形ツール］を使い、角を少し丸めた形にしました。直線的な星よりも全体の柔らかい雰囲気に馴染むように丸っこい形にしています。
虹は、虹1色分の色と幅を設定したストロークのみの円を作り、それを［複製］して同心円状に配置しました。各色のストローク同士が隣接して虹に見えるように、円の大きさを調整したあと、一番内側の円の複製と外側まで覆い隠す大きさの円弧を作成し、二つの図形を統合して虹の切り取り範囲を作成します。
虹の円の数だけ切り取り範囲を複製して、一つずつ［パスをカット］で不要な部分を削除し、虹の形のストロークとして切り出しました。
この段階では細かな部分よりも、それぞれのモチーフの形を整え、全体の配置やバランスを確認することを重視しています。
モチーフを追加する
構図が固まったところで、箱の中や周囲に雲・ペンキ缶・刷毛・絵筆・鉛筆などのモチーフを追加していきました。
雲は、まず円を作成してコピーペーストし、それぞれの位置と大きさを調整して雲の形に組み合わせて［統合］しました。複数の円から作ることで、ペンツールで直接描くよりも、安定したきれいな曲線を作れます。
ペンキ缶は、円と長方形を組み合わせ、［シェイプビルダーツール］で前面と背面の形を作成します。
取っ手の部分は［鉛筆ツール］でフリーハンドに描き、Ctrl+Lを連打してパスを［簡略化］して扱いやすいパスにしました。
握り手の部分は取っ手のパスを複製してストロークを太くし、短くカットして、［ストロークをパスに変換］しています。
刷毛・絵筆・鉛筆は、それぞれページ外でまっすぐな向きで作ってから［グループ化］します。複製したものを箱の中に配置し、重なり順・縮尺・傾きを調整して組み合わせました。
このように、パーツごとに作りやすい方法を選びながら、箱の中にさまざまな素材が詰まっているような構成にしていきました。
図形を組み合わせてパーツを作成する方法については以前の記事でもご紹介しています。
小物を整えて情報量を調整
ここまでで、ラフで予定していたパーツに加え、制作途中で思いついた小物も一通り描き終わりました。
ここからは、それぞれのモチーフが全体のデフォルメ具合や表現方法に合っているかを見ながら整理していきます。
まず、背景の虹を描く道具として考えていた刷毛をボツにしました。幅の広い刷毛とペンキでは虹を描く演出に無理があったからです。
それに、今回の簡略化した絵柄では刷毛らしさを出すための毛束や毛先のしなりといった要素も表現しにくいです。かといって刷毛を刷毛らしく描き込むと、ほかのパーツのデフォルメ具合と合わなくなってしまいます。
そんな理由から、刷毛の代わりに、虹の最終ラインには絵の具の付いた絵筆を配置し、絵筆で虹を描いたような演出に変更しました。
もう一つの候補として、パレットナイフに絵の具を付けて虹を描く案も思いつきましたが、刷毛や絵筆と比べて道具としてマイナーで、イラストにした時に何をしているのか分かりにくいため、こちらは採用しませんでした。
もともと箱の中には刷毛と鉛筆と絵筆の3本を配置していたため、刷毛をボツにして絵筆を箱の外に出すと、鉛筆1本だけになって箱の中が少し寂しく見えます。箱に立て掛けるパーツは2本あったほうがバランスも良さそうです。絵筆や鉛筆と役割が被らず、デフォルメしても見分けがつきやすいGペンを追加しました。
「鉛筆＝下絵」、「Gペン＝ペン入れ」、「絵筆＝彩色」という、イラストを制作する工程を道具で表現できるのでこの3本の相性は良さそうです。
虹本体もこの段階で少し手を加えました。各色のストロークにパスエフェクトの「パワーストローク」を適用し、終点をゼロ幅にすることで、線の先に自然な「抜き」が入るようにしました。その後、虹のストロークをパスに変換し、入り抜きの形状をそのままフィルとして扱えるようにしています。
パワーストロークについては以前の記事でもご紹介しています。
さらに虹の各色をグループ化し、パスエフェクトの［透視図変形］を使って、中央に向かって虹の描き終わりが小さくなるように全体を変形しました。単純な拡大・縮小ではなく、虹全体の形をまとめて透視図変形することで、背景の構図に合わせて奥行きを出しています。変形したい形が決まったら、［オブジェクトをパスへ］でパスエフェクトを通常のパスに変換しておきます。
パスエフェクトの透視図変形については以前の記事でもご紹介しています。
さらに、ペンキ缶は筆洗いバケツに置き換え、右下には虹の各色の絵の具が付いたパレットを追加しました。
この段階では単純にパーツを増やすのではなく、モチーフとしての分かりやすさ、絵柄との相性や全体のバランスを見ながら、不要なものを削って必要なものを追加していきました。
再編集しやすい形を保持しながら作業する
虹はできるだけ後から編集しやすいように、パスをカットする前の同心円の状態とカット後のストロークの状態を別グループとして残しています。曲線の幅や形や長さ、終端の抜きなどを後から調整できるようにするためです。最初から完成形のパスを作ってしまうのではなく、編集しやすいデータを残しつつ、必要な工程だけ加工用のデータを作るようにしています。
Inkscapeのパスエフェクト（非破壊編集）は便利だがたまにバグる
実は、パスエフェクトのパワーストロークを適用した状態の虹をグループ化してさらにパスエフェクトの透視図変形を適用すると、Inkscapeの挙動が安定しませんでした。そこで、編集用の元データを残したまま虹を複製し、複製側だけストロークをパスへ変換してから透視図変形を行っています。
このように、Inkscapeではパスエフェクトを複数掛け合わせると思い通りに動作しない場合があります。また、パスエフェクトで変化させたパスの形状は、完成形のデータでは［パスに戻す］か［オブジェクトをパスへ］で通常のパスに変換した方が安全です。
左右のバランスをとる
パーツを追加して全体の構図を見直してみると、左下に少し空きがあり、左右のバランスが悪く見えます。このスペースに何かを追加することにしました。
素材置き場のアイコンということもあり、画像を表すアイコンとしてよく見かける「太陽と山」の風景をモチーフに採用しました。画像アイコンを配置することで、画材や配色だけでなくイラスト素材なども含めた「素材置き場」というイメージを補強しています。
また、背景が虹と雲、箱の中身が星というように気象や自然現象をモチーフとして使っていたため、ここに太陽を加えることでモチーフ同士にもつながりが生まれます。
左下の空きを埋めると左右のバランスが整い、重心が下に来たことで安定感のある三角構図になりました。
全体の色や濃さを調整
ここまでは、明るく元気な色を使って全体を構成していましたが、サイト全体の雰囲気に合わせて、色の主張を少し抑える方向に調整しました。
それぞれのパーツを淡い色に変更しながら、色同士のバランスを見て全体を整えます。ただ、全体を同じように淡くしてしまうと、パーツ同士の明暗差が小さくなり、立体感や前後関係が分かりにくくなります。影になる面は少し暗めの色を残すことで、淡い配色の中でも明暗がはっきり区別できるようにしました。
鮮やかさを抑えつつも、虹や小物のカラフルさは失わないように、サイトの雰囲気とアイコンとしての視認性のバランスを意識して調整しています。
線なしにしてみる
この段階では、線ありで表現するか、線なしで表現するか悩んでいたため、線を使わないバージョンも作って比較してみました。
この場合、単一の図形で成立しているモチーフについてはストロークを「なし」にするだけでいいです。ただし、すべてのパーツのストロークを「なし」にしてしまうと、それまでストロークの幅を含めて位置や大きさを合わせていた部分がずれることがあります。
鉛筆・Gペン・絵筆などの複数のパーツで構成していたモチーフについては、ストロークの色をフィルと同じ色に変更し、ストロークをパスに変換します。その後、フィルの形と統合することで、もともとの線の太さも含めて一つの塗りの形として扱えるようにしました。
線をなくしてもパーツの形や大きさを崩さず、線あり・線なしの2パターンを比較できる状態にできました。
境目に影をつける
線ありと線なしのバージョンを比較した結果、線なしのほうがサイト全体の雰囲気に合っていたため、こちらを採用することにしました。
ただ、淡い色でまとめたことで、パーツ同士の境界が分かりにくくなっています。そこで、輪郭線を付けるのではなく、パーツの境界部分にだけ影を入れることにしました。
フィルターのドロップシャドウでは、狙った位置や方向に影を作るのが難しかったため、パーツを複製して影用のパーツを別に作成します。複製したパーツの色を黒に近い色へ変更し、少し位置をずらしてから重なり順を変更します。［レイヤーとオブジェクト］ダイアログから［不透明度：30％］、ブレンドモードを［乗算］にして、パーツの境界から少しだけ影が見えるようにしました。
このとき、位置調整のしやすさを考えて、背面にある元パーツではなく複製したパーツの色を変更してから移動後に重なり順を入れ替える方法を使っています。操作に慣れている場合は、背面パーツの色を影色に変更して、Altキーを押しながら背面パーツを選択して移動する方法でも構いません。
影は立体感を強調するためではなく、あくまでパーツの境界を分かりやすくするために入れています。明暗をきっちり描き込んでしまうと、今回目指しているシンプルなアイコンらしさが薄れてしまうため、影を境界部分に限定しました。
最終的には、色紙を切って貼り合わせたような、少しハンドメイド感のある平面的な表現に仕上げています。淡い配色と線なしの形を活かしながら、最低限の影でパーツ同士を見分けられるようにすることで、サイトの雰囲気にも馴染むアイコンになりました。
きれいな曲線は、円の一部を利用すると作りやすい
曲線をペンツールで直接描くと、場所によって曲がり方が変わってしまい、きれいに整えるのが意外と難しいものです。
そこで便利なのが「円」です。円はどこを切り取っても同じように曲がっているため、必要な部分だけを切り取れば、安定したきれいな曲線を作ることができます。
今回の虹も、まず円を重ねて必要な部分を切り取り、きれいな円弧を作りました。その後、パスエフェクトの透視図変形を使って、中央に向かって奥行きが付くように全体を変形しています。
変形すれば当然、元の円弧とは曲がり方が変わります。それでも最初にきれいな曲線をベースとして作っていたので、そこから形を変えても整った曲線を作りやすくなります。
「曲線を描く」のではなく、「きれいに曲がっている形を借りてきて、必要な形に加工する」
これは私がベクター系ソフトでイラストを作る時に意識してよく使っている秘密の裏ワザです。
ここまで読んでくれたので、特別にご紹介しました。円を書く時以外にも積極的に円ツールを使ってみてくださいね。
制作データは「やり直せる状態」で残しておく
今回の制作では、完成したパーツだけでなく、編集途中のデータや採用しなかったパーツもすべて残しています。
Layer 1には実際にアイコンで使用したパーツ、Layer 2にはページ外に後から編集しやすいように整理した編集用データやボツにしたパーツ、Layer 3にはページ内に非表示状態で破壊編集する前のパーツを配置しています。
例えばストロークをパスに変換したり、パスを統合したりすると、後から元の状態に戻すのが難しくなります（破壊編集）。そこで、加工前のデータを残したまま複製したものを加工するようにしています。
今回の虹も、編集しやすいストロークの状態を残したまま、複製したものをパスに変換して透視図変形を行いました。
こうしておけば、「やっぱり元の形に戻したい」、「別の形で作り直したい」となった時にも、最初から作り直す必要がありません。
ただし、制作過程のデータやパスエフェクトを利用したパーツが多くなるとInkscapeの挙動が不安定になる時があるので、適当なタイミングで別名で保存してファイルを分けて、制作過程と完成形のデータは別にしておきましょう。今回の例だと完成形ではLayer 2とLayer 3を削除し、Layer 1のみを残しています。
制作を終えて
一見複雑に見えるアイコンでも、実はパーツごとに分けて考えるとそんなに難しくないです。
ペンタブはあれば便利ですが、使わなければイラストが作れないわけではありません。今回も、雲や虹、さまざまな小物を既存の図形を組み合わせながらほぼマウス操作だけでアイコンを作ることができました。
「絵を描くのが苦手だからアイコンは作れない」と考えず、まずは作りたい形を小さなパーツに分解してみるところから始めてみてください。
私は、同じ形を作れるのであれば、できるだけ楽に作れる方法を探すのが好きです。ペンツールで一つひとつ描く前に、「この形なら円を使えるのでは？」、「ストロークで作ったほうが簡単では？」と考えてみます。
ソフトウェアの機能を使って、手作業を減らすことも時短テクニックです。
この記事が、オリジナルのアイコンを作ってみるきっかけになれば嬉しいです。ぜひ自分だけのアイコン作りに挑戦してみてください。
コメント