【Vectornator】テキスト挿入と装飾だけ!初心者向けロゴ作成講座

Vectornatorの「テキスト挿入」でロゴ作成iPad

「ブログのタイトルロゴ作りたいけど、フォトショもイラレも持ってない」

「なんかいい感じの画像が作りたいけど、やり方がわからない」

そんな方におすすめなのが、無料ドローツールのVectornator(ベクターネーター)です。

Vectornator: Vector Design

Vectornator: Vector Design

Linearity GmbH無料posted withアプリーチ

こんな人に読んでほしい!
  • Vectornatorでテキストを挿入する方法が知りたい
  • 画像作成ツールを扱う技術がない
  • 画力もセンスもない
  • オリジナリティのあるタイトル画像を作りたい
きりん
きりん

デザイン初心者

フォトショもイラレも未経験

ド素人主婦できました

無料なのに本格的、ドローツールVectornatorでテキストを挿入する方法を解説します。

「そもそもVectornatorとは?」という方はVectornatorアプリ紹介記事からどうぞ。

Vectornatorでテキストを挿入する方法

Vectornatorのテキスト挿入の方法はとっても簡単。

Vectornatorのテキスト挿入はかんたん
※あえて煽るスタイルでお送りしております。怒らないで!

一般的なイラストツールなどを使ったことがある人なら感覚でできてしまうと思います。

きりん
きりん

が、私はつまずきました…

この記事では、私のように「簡単なはずなのにテキスト挿入できない!」という方に向けて、画像たっぷりでやさし〜く解説します

それではさっそくテキストを挿入していきましょう。

この記事ではiPhone版アプリで解説していますが、PC版や iPad版でも操作は同じです。
お手持ちのVectornatorで実際に操作しながら読み進めてみてくださいね!

まずはテキストツールを選択します。

[テキストツール](四角に[あ]のアイコン)をタップ

Vectornatorテキスト挿入手順

次に、テキストを挿入したい範囲を選択するようにスワイプします。

きりん
きりん

私はスワイプせずタップしかしなかったので、一向にテキスト入力できませんでした…

タップするだけではテキスト挿入できません!
かならず挿入場所をスワイプで選択します。

選択すると、自動で「テキスト」という文字が入力されましたか?

iPhone版でテキスト入力
iPhoneだとテキスト入力時キーボードが邪魔くさいです

キーボードで文字を入力すれば、テキスト挿入完了です。

左メニューの選択ツール(矢印マーク)をタップすると、テキストの周りに枠が表示されます。
この枠がテキストエリア
枠上にある青い点を動かすと伸縮しますが、テキストエリアが広くなるだけで、文字の大きさは変わりません。

テキスト挿入完了
テキストエリアが選択されている状態

ところで、テキストエリアの下にメニューバーが表示されていますね。

クイックアクションバー
これのことです

これは『クイックアクション』

選択しているものに対して操作できるショートカット的なツールバーで、大変便利です!

例えば、[ぁあ]と書かれたアイコンをタップすると、文字の大きさをすぐに変えることができます。

クイックアクションバーが表示されないときは…
左上の設定ボタン(歯車マーク)[クイックアクションを表示]をオン

クイックアクションを表示する方法
「クイックアクションを表示」

スタイルメニューでテキストの見た目を編集

テキスト挿入は簡単でしたね!(私はつまずいたけど)

では次に、挿入したテキストのフォントや色を編集しましょう。

テキストの見た目を変える時は、ブラシマークのスタイルメニューを開きます。

【縦向きiPhone】(∧)マーク(画面下部)をタップ

スタイルメニューの開き方
この中にスタイルメニューが隠れています
スタイルメニュー
スタイルメニューやレイヤーメニューなどがでてきます

【横向きiPhone・iPad、PC】ブラシマークをタップ

スタイルメニューの開き方
横向きの画面なら、一発でスタイルメニューが開けます

フォントを変更する

まずはフォントを変えたいとき。

[スタイル]>[テキスト]内「フォント」

Vectornatorスタイルメニュー

標準搭載されているフォントはすぐ使えます。

Vectornator搭載のフォント
英字フォントの種類は豊富

「Vectornatorで使えるフォントが少ない!」
そんな時にはFontinatorが便利。

Fontinator

Fontinator

Linearity GmbH無料posted withアプリーチ

フリーフォントや手持ちのフォントをVectornatorに登録できます。

ここで注意。

スタイルメニューのテキスト項目は、テキストツールを選択しているときだけ出てきます。

スタイルメニューの内容は、その時に選択しているツールによって変化します。

テキストを編集したいときは、必ずテキストツールアイコンをタップしてからスタイルメニューを開きましょう。

[スタイル]テキスト項目で変更できること
  • フォントの種類
  • サイズ
  • 位置揃え
  • カーニング(文字幅・行の高さ)
  • 境界(テキストエリア)を文字サイズに合わせる
  • テキストからアウトラインを作成(パス化)

テキストの色を変える

[スタイル]> [塗り]の色を選択

[塗り]は[テキスト]項目の下部にあります。

今は[塗り]が黒色になっています

[塗り]の色をタップすると、テキストの文字色を変更できます。

単色

グラデーションもできます。

Vectornatorテキストをグラデーションにする
グラデーション
Vectornatorグラデーション調整
選択ツールでグラデーションの向きや長さも調節可能

“塗り“についてはVectornatorの基本知識の記事にも書いていますので、未読の方は併せてご覧ください。

テキストに影をつける

[スタイル] > [影]をオン

[影]はスタイルメニューの最下部にあります。

影が入ると急にいい感じに…!

影の色や向き、ぼかしの加減なども調節できます。

テキストからアウトラインを作成

アウトラインとは、テキストの境界をパス化することで図形として認識させる操作です。しなくてもロゴ化できます。

しかしサイズを変更したり、さらに細かい装飾を加えたいときは、アウトライン化しておくと自由度が高くなります!

テキストロゴを選択 > スタイルメニュー 

テキストからアウトラインを作成
テキストを選択した状態でスタイルメニューを開く

[テキストからアウトラインを作成]をタップ。

アウトライン化されたテキスト
アウトライン化されたテキスト

今までは編集可能だった『KIRIN』の文字が、アウトライン化することによって独立したオブジェクト(図形)になりました。

すべての文字を選択した状態で、青い点をタップしたまま移動させると…

サイズが縮小されました

ロゴを書き出す

いい感じのロゴができたら、画像ファイルとして書き出します。

まずは必要な画像サイズに変更します。

左上を起点(0)として、縦横にメモリがついています。
必要な大きさに合わせましょう。

アートボードのサイズ変更

画面左上にロゴの端を合わせ、大体の大きさが決まったら、アートボード(キャンバス)の大きさを変更します。

左上の設定(歯車マーク)をタップ。

[幅]と[高さ]を入力

アートボードのサイズが希望のサイズになったら、テキストと余白のバランスを調節します。

アウトライン化したテキストなので調節もラクチン!

書き出し

サイズの変更と最終調整ができたら、いよいよ書き出しです。
書き出しとは、Vectornatorのデータを他の形式に変換し、用途に応じて使いやすくすること。

画像データとして書き出せば、ブログやSNSなどに貼り付けられるようになります。

きりん
きりん

データが画像化する瞬間!ワクワクする〜!

それではやってみましょう。

左上の共有アイコン(四角に↑)をタップ。

ロゴの書き出し
左上の共有アイコンをタップ

ブログに使うならPNG形式がおすすめ。

「透明度」をオンにすると、何も描いていない白い部分が透明になります。

画像の大きさなどを確認し、右下の[書き出し]をタップ。
次の画面で、「書き出したデータをどうするか」を選びます。

[画像を保存]をタップ。
これでiPhone(iPad)デフォルトの写真アプリに保存されます。

他にも「ファイルに保存」「メール添付」「LINE送信」などが可能。

きりん
きりん

間違って友達のLINEに送らないように注意しなければ…

これで画像の完成です!

わーい!

透明化されているので、何色の背景でも使えます。

草原に降り立つ金色のKIRIN

ここまでがテキスト挿入と装飾の基本です。

色やフォントを変えて、自分好みのロゴを作ってみてくださいね!

Vectornatorでイラストやアイコンに挑戦してみたい方はこちらもどうぞ

タイトルとURLをコピーしました