この記事は次のような方々におすすめ
- アフィニティデザイナー(Affinity Designer)を使ってみたいイラスト初心者
- Webサイトやアプリに使えるちょっとしたイラストや背景パターンを自分で描いてみたいが、初心者・未経験で何から始めていいかわからない方
アフィニティデザイナー(Affinity Designer)とは
アフィニティデザイナー(Affinity Designer)とはデザインソフトの一つです。似たようなソフトウェアにイラストレーターがあります。相違点はいくつかありますが、決定的な違いは買い切りであることではないでしょうか。 一度支払えば、その先のサブスク料は発生しません。無料のソフトに使いづらさや機能不足を感じているけれど、イラレに予算を割くのはちょっと躊躇っているという方に是非とも試していただきたい選択肢です。
この記事作成時点(2021年8月)では7000円でした。ちなみに四半期ぐらいの間隔でセール価格をやっています。
ベクターイラストの基礎
ベクターイラストとは
ベクターイラストとはベクターで描いたイラストのことです。
ベクター画像とは
線を用いて図形を描画・管理した画像。ベクトル画像、ベクターグラフィックスとも呼ぶ。点の集まりで描画するビットマップ画像とは異なり、図形の拡大や縮小などを行っても、画像が劣化しない。https://kotobank.jp/word/ベクター画像-8626
この「拡大縮小しても画像が劣化しない」特徴が、スマホやタブレットとの相性の良さから普及に伴い浸透し、今やWebサイトやアプリのアイコンや図解、挿絵などに頻繁に用いられています。
ベクターイラストの表現方法 IBM Design Languageを使ってみよう
先程示したように ベクターイラストの表現方法には立体・平面など様々です。
初心者としてベクターイラストを描く際はどんな表現を使うべきかは迷いどころの一つです。書籍のお手本や、ネットで見つけた画像やチュートリアル動画などを参考に実践するものの、「一度体系的に学んでおくべきなのでは」という必要性を感じていらっしゃる方もいるかと思います。
そんな方にお勧めしたいのはIBM Design LanguageというIBMによるデザインの論理的な作り方の体系です。その中のIllustrationが参考になるのではないかと思います。 ここにはイラストの表現方法として次の３スタイルがまとめられています。
1. Lineスタイル
2. Flatスタイル
3.Isometricスタイル
このシリーズではイラスト初心者がアフィニティデザイナー(Affinity Designer)を用いて、 IBM Design Language - Illustrationの３つの表現方法でベクターイラストを描いてみることで、 デザインツールの扱いに慣れていくと同時に、ベクターイラストの初心者に役立つ体系的な知識をお届けしていきます。
第一回目となる今回は1.Lineスタイルを扱います。
Lineスタイルでベクターイラストを描く
Lineスタイルとはその名の通り線で表現します。 イラストで次のようなメッセージを伝えるべき場面で効果的です。
sense of precision, honesty and authority
正確さ、誠実さ、権威
アフィニティデザイナーでやってみよう
ここから先はイラストデザインツールアフィニティデザイナーを用いて、Lineスタイルでイラストを描いていきます。まずはイラストを描くための準備として設定を行います。
準備その１ 「グリッド」
Lineスタイルでは4pxのグリッドを用いて描いていきます。 グリッドおよび軸マネージャーを開き、以下の通りに設定します。
- モード:基本
- 間隔：4px
※この時「プリセットを作成」で設定を保存しておくと、使い回せて便利です。
また、グリッド上で要素を正確かつ規則的に配置するためにスナップを有効にしましょう。
「スナップを有効にする」にチェックを入れてください。
準備その２ 「ストローク設定」
Lineスタイルは基本的に「線」で描きます。 デフォルトでは境界線の太さが０になっている場合があります。暫定的に以下の通りに設定します。
- 幅：6px
この設定で描いてみましょう。ショートカットキー「m」で長方形ツールを選択し、四角形を描きます。
次に線を引いてみましょう。
ショートカットキー「p」でペンツールを選択し、一本線と折線を引いてみましょう。
以上で準備は完了です。
まずは描いてみよう
四角形などの図形を駆使してシンプルに、PC・タブレット・スマホのイラストを描いてみましょう。
この時、「アートボードツール」で一つずつアートボードを使い作業すると便利です。
四角形と円形の２種類でこのように描きました。
表現のルールを押さえよう
ここからは、Lineスタイルで描くにあたっての表現のルールを紹介します。 必ずしもこのルール通り通りに描かなくても大丈夫ですが、ルールの制約の中で描くことで手早く簡潔にイラストをデザインすることができるでしょう。
1.線の太さ
線の太さは次の段階の中から選びます。 ※一つのイラストで異なる太さを使うことも可能です。その際はメリハリをつけましょう。
- 1px
- 1.5px
- 2px
- 4px
- 6px
例
線の太さを変えるだけでもイラストの伝える印象が変化します。 以下の例では線の太さを上から6px、4px、2pxで描いてみました。 太い線からはポップで親しみやすい印象、細い線からはフォーマルで知的な印象が表現できます。
2.角度
線や図形に角度をつける際は15の倍数から選びましょう。
- 15°
- 30°
- 45°
- 60°
- 75°
- 90°
なぜならば、角度を15の倍数縛りで設定すると次の効果が得られるからです。
これらの標準的な角度を使用すると、イラストの一貫性を保つのに役立ちます。 www.ibm.com
3.ベーシックシェイプ
ベーシックシェイプとは、丸・三角・四角のようなシンプルな幾何学図形のことです。 イラストのベースにはこれを使うと良いでしょう。 また、イラストの中で曲線、角丸を表現するときなども原則この図形を使います。 どうしても表現しきれない場合はベジェ曲線を使います。
Lineスタイルの手法を実践してみよう
これまで説明してきた手法を使い、試しにこのような目薬のイラストを描いてみます。
1. 水滴
ベーシックシェイプの丸と三角を組み合わせます。
2.目薬の本体
ベーシックシェイプの四角形を組み合わせます。
ここでは表現のルール「角度」に沿って図形を15度回転させるのがポイントです。
3. 組み合わせる
1と2を一つに組み合わせます。
ここまででも目薬っぽくなりましたが、もう一工夫してみましょう。
4. ベーシックシェイプで表現しづらい部分を描く
ベーシックシェイプで表現しづらい部分はベジェ曲線を使います。
ここでは揺らぐ液体の表現をベジェ曲線で描きました。
完成
ここまでの手順通りに進めると完成です。
プラスα
余力のある方はもう一工夫してみましょう。
ここでは表現のルール「線の太さ」に沿って、本体部分の線を太くしました。
線の太さによって力強さと繊細さのニュアンスが表現できたかと思います。
次回予告
次回はこのような「Flatスタイル」のベクターイラストの描き方を紹介していきます。
参考書