こんにちは、ブブです!
皆さん、イラレ持ってます?僕はCS5を持ってました。でもCCになって買い切りでなくなり、毎月支払うのはキビシーってなってました。そんな中、イラレの代わりになり得る無料ソフトを見つけたので紹介します!
その名も「Gravit Designer」です!!
CS5のイラレならば手足のように使えますが、実際に使ってみると、
「コイツ、使えるな」と言葉が漏れました。
こいつを使って当ブログのキャラクターイラストを描いたので、その作成過程と合わせて紹介しますー
Gravit Designerとは?
「Gravit Designer」はベクタ形式の画像を作成・編集できるソフトです。マーケティング資料、Web サイト、アイコン、UI デザイン、プレゼンテーション、ソーシャル メディア用のグラフィックスなどが作成できます。
無料版(Gravit Designer)と有料版(Gravit Designer PRO)があります。
オンラインもしくはダウンロードして使用できます。
いずれの場合も使用する方は「Gravit Designer」のサイトへ行きましょう。
Gravit Designerをインストールする。
僕はインストールしましたので、インストールされる方はご覧ください。
先ほどのリンクから「Gravit Designer」のサイトへ行きます。
新しいソフトを使うときってワクワクしますよねー!

オンラインで使用する場合は、右上の「Start Now」のボタンをクリックすると使用できます。
インストールする場合は、macOS App、Windows、Linux、Chrome OSから自分のPCに合うものを選択してダウンロードしましょう。

いずれかを選択してクリックするとポップアップウィンドウが出てくるので、アカウントを作成します。

インストールして開くと、まずこの画面になります。「新規デザイン」が選択された状態で、数値を入れてキャンパスサイズを設定できます。ちなみにキャンパスサイズは後から変更可能です。無限の場合は空欄でOKです。単位もpx、in、mm、cmなど色々選べます。

ちなみに「新規デザイン」の下には「テンプレートから新規作成」というのもありますので、少し紹介します。一見少ないように見えますが、その内の1つをクリックすると更に色々なテンプレートが出てきます。

試しに「A4」の中から、可愛い赤ちゃんのやつを選択してみます。

こんな感じで開きます。写真や飾り、テキストなど全てがそれぞれのオブジェクトとして出てくるので、これを少しいじればオリジナルのポスター的なものがいい感じで簡単に作れちゃいます。

Gravit Designerでイラストを描いていく!
いよいよイラストを描いていきましょう!
今回は「新規作成」で、キャンパスサイズの数値は指定せずに無限で始めます。
キャンパスサイズは開いた後も、「幅」と「高さ」に数値を入れることでいつでも変更できます。また、「不透明度」を0%にすると透明になるので、背景を透過することもできます。

スケッチ写真に撮って、下絵として挿入します。上のバーの「画像を配置」の横の▼をクリックして、「画像を挿入」からできます。

挿入されました。横向きになっていたので、「右に回転」で90度回転させます。

ちなみに画像もそうですし、何かオブジェクトを作成すると自動的にレイヤーが増えます。

「新しいレイヤーの作成」はこちらです。

レイヤーを追加して、名前を変更したい場合はダブルクリックすると変更できます。今回はまず体から作成していくので、「体」レイヤーを作成しました。

体は曲線なので上のバーの「ペンツール」を選択して、曲線を描いていきます。これが思った通りに描くことが結構難しいっす。でも安心してください。
後から調整できるので、ここはとりあえずで大丈夫です!
なんならだいぶ形がおかしくても大丈夫です!

とりあえずの曲線を描いたら、調整します。上のバーの「ポインターツール」横の▼をクリックして、「部分選択」を選択します。そして調整したいオブジェクトをクリックして、曲線状の点をクリックすると曲線の曲がり具合が調整できるのです。また、点には画面右の「結合」にあるように4種類あります。左から「直線」「対称」「非接続」「非対称」なのですが、こいつらの選び方でも全然違います。この辺をいじりながら調整しましょう。

オブジェクトの色の変更と、下絵が見えないので透過させます。オブジェクトを選択した状態で画面右の「塗りつぶし」「境界線」でそれぞれ色と透明度を変更できます。

次は髪を作成していきます。先ほどと同じように「ペンツール」で作成していきます。

1つ描いたら、今回はコピーして同じものをもう1つ用意します。
そしてそいつを同じ位置に持ってきます。「整列」は右の上に揃っています。

なぜ2つ用意したかというと、今描いているのは髪なので、根元の境界線は見せたくないけど、それ以外は境界線が欲しいからです。1つのオブジェクトだと、たとえ最後の点と点を繋いでいないとしても、「塗りつぶし」を表示すると、繋がれているものとして「境界線」も表示されます。
そこで、1つは「塗りつぶし」を表示して「境界線」を非表示、
1つは「塗りつぶし」を非表示にして「境界線」を表示にし、2つを重ねることで、根元は体と一体に見せられて、髪としての境界線を表示できます。

髪が1つできました。こいつは体と同じ色にしたいです。そんな時は髪のオブジェクトを選択した状態で右の色を選ぶところにある、「スポイトマーク」をクリックします。

そして同じ色にしたい部分をクリックすると、同じ色になります。

同じ色になりました。ちなみに「塗りつぶし」もしくは「境界線」の表示・非表示は、目のマークになっている「可視性」アイコンをクリックすることでオンオフできます。

これで髪と体のつなぎ目をなくすことができました。

こんなことを繰り返して徐々に形になってきました。ちなみに上のバーの「図形」から「直線」「長方形」「楕円形」「多角形」「三角形」「星形」など決まった形を描くことができます。

「楕円形」で目を描きました。

色やら線の太さなどを調整してこんな感じです。髪にグラデーションをかけました。
グラデーションの方法は、オブジェクトの「塗りつぶし」の色を選ぶウィンドウを出し、上の方の「色の塗りつぶし」となっているところを「線形グラデーション」にします。線形以外も色々あります。

そんなこんなで、最終形がこれです!

Gravit Designerを使ってみた感想。
控え目に言ってメチャクチャ使いやすかったです!
インターフェースも分かりやすいし、こういうのをやっているとレイヤーが増えがちですが、それの整理がしやすい!
ただイラレの代わりになるかと言えば、少し機能は足りません。
例えばフォントのインストールは有料版にしないとできません。一応日本語は無料でもあります。
また、ブラシが無かったり、イラレに比べて図形の加工に手間がかかる部分もあります。
とはいえ!これは無料ですから!その上でこれだけできることはすごいと思います!
今後も使用していくので新しい機能を見つけたら紹介します!
良ければ使ってみてください!