iPadでロゴ制作。テキストのパス化とSVG書き出し。『Affinity Designer』

iPadでロゴ制作。テキストのパス化とSVG書き出し。『Affinity Designer』

このブログ「imDRESSions」のロゴをiPadを使って制作しました。

僕は、べクター形式とラスター形式の両方でデザインができる『Affinity Designer』を選びました。

今回はimDRESSionsのロゴができるまでの流れに合わせて使い方を紹介していきます。

高価なアプリですが、iPadの機動性とApple Pencilを活かしたデザイン作業ができて満足度の高いアプリです。

https://apps.apple.com/jp/app/affinity-designer/id1274090551

ロゴ制作に最適な『Affinity Designer』

使用するアプリは『Affinity Designer』

ベクターモードとラスターモードの両方が使える、Photoshopとillustratorを合わせたようなアプリ。

ラスターモード

「ラスターモード」は小さなドットの集まりでできた画像データなので、拡大すればするほど粗く、ギザギザになってしまいます。

ベクターモード

一方「ベクターモード」は、線の長さや曲線の角度がデータ化された画像なので、どれだけ拡大しても粗くなることがありません。

様々な場面で使われるロゴはこのベクターモードで制作しておけば、どんな大きさでも対応できるというわけ。

今回は拡大縮小しても画像が粗くならない「ベクター形式」でロゴ製作していきます。

テキストのパス化とSVG書き出し。

テキストの状態だと変更できるのがフォントの種類やサイズ、ボールドイタリックなどの決まった形式のものだけ。それをもっと自由に変形させるため、テキストをパス化します。

1.テキストツール。

まずは元になるテキストを入力していきます。

「テキストツール」で文字を入力し、ベースになるフォントやサイズなどを決めておく。

2.パス化。「カーブに変換」

次に、このテキストを変形させるため、それぞれをパス化していきます。テキストを選択し、「カーブに変換」を選択。

すると、テキストひとつひとつが独立し自由に変形できる様になりました。

ポインタを操作すれば簡単に変形可能。

3.角丸で柔らかい雰囲気に「コーナーツール」

そしたら、実際に変形させていきます。使うのは「コーナーツール」

丸みをつけたい箇所を選択して、「丸み付け」で半径を指定。

画面上のどこかを押したまま、角をタップしていくと複数選択できます。

全ての角を丸くし終えました。

ここまできたら、もう一度パス化(カーブに変換)します。この時、「レイヤーパネル」からひとつひとつ選択していくのがポイントです。

これをしないと拡大、縮小したときに角の丸みが変わってしまいます。

これは、丸み付けで入力した半径が、拡大したときも縮小したときも同じ数値のまま固定されてしまっているから。

拡大、縮小したときにそのままの形を維持するために必要な作業。

テキストのパス化はこれで終わり。

4.ロゴマーク製作。「図形ツール」

自分の考えたロゴの形を「図形ツール」を使って作っていきます。

imDRESSionsのロゴは「扇形ツール」を3つ使って作りました。

これで、ロゴの完成。

最後に書き出していきます。

5.SVGで書き出し。

どんな大きさで使っても画像が粗くならないよう、SVG形式で書き出します。

書き出しを選択し、

書き出し方法を「SVG」にして、書き出したいアートボードを選択します。最後に「OK」をタップ。

保存先を選んで終了です。

そして、完成したのがこちら。↓

スマホで見ている人は、ズームして見て下さい。拡大しても綺麗な線になっていると思います。

ロゴ制作をiPadで。

iPadでグラフィックデザインをするなら『Affinity Designer』が今のところベストかなと思います。

iPadの機動性とApple Pencilを使ったデザイン作業など、iPadメインの人にはまず入れて欲しい本格的なデザインアプリです。

https://apps.apple.com/jp/app/affinity-designer/id1274090551