画像に文字入れアプリ「Vectornator」無料でIllustrator要らず

iPhone、iPad、Mac 画像に文字や図形を入れる Vectornator

「画像に文字や図形を入れたい!」「画像に手描きで表現を加えたい!」、ブログやネット販売、そしてビジネスでのやり取りにおいて、これが簡単にできれば、相手に言いたいことを伝える上で、大きな武器になります。今回はアプリ「Vectornator」を使った、画像への文字の入れ方を初心者にもわかりやすく解説します。

目次

画像に文字入れ、手描きアプリ「Vectornator」はIllustrator要らず

画像に文字入れ、手描きアプリ「Vectornator」はIllustrator要らず

Vectornatorは
iPhone
iPad
Mac
これらデバイス向けに
無料で公開されています。

ベクターデータを扱う場合は
高価なAdobe Illustrator が有名ですが、
プロのクリエーターでもなくて
ブログ用の画像を作ったり
ネット販売用のイメージ画像作る程度なら
このVectornatorでもじゅうぶんだと思います。

ここでは、iPadの画面を使って
解説します。

尚、Vectornatorを使う上で
Apple Pencilは必須ではありませんが
あったほうが作業は捗ります。

Vectornator 画像に文字と図形を入れる手順解説

解説に入る前に、
僕もAdobe Illustratorはずっと使って、名刺、年賀状、かんたんなフライヤー制作をしてきました。ですが、本来のIllustratorの持つ機能はまったく使いこなせないままでした。VectornatorはIllustratorほどの機能は持っていませんが、使ってみた感想では、僕の使うような範囲であれば、じゅうぶんな機能を持っていると感じました。

STEP
Vectornator 画像をセットする

最初に文字や図形を入れる画像をセットします。

右上の「+」ボタンをタップ。

Vectornator

インポートする材料を選びます。
ここでは画像に文字や図形を入れるので
写真」をタップします。

Vectornator

画像一覧から使う画像を選んで
セット完了です。

Vectornator
STEP
Vectornator 画像に文字を入れる

まず、文字を入れるための
文字専用レイヤーを作ります。

」レイヤーボタンをタップして
すぐ下の「」ボタンをタップすると
レイヤー2」が新規に作成させます。
レイヤー1」は元の写真です。

レイヤーについてはコチラの「Adobe Fresco」の記事で解説しています。

Vectornator

レイヤー2」を選択した状態で
左のツールから
2:テキスト」のボタンをタップ

Vectornator

画像上の任意の位置をタップして
ドラッグすると
テキストボックスが表示されます。

Vectornator

自動で入っている
「テキスト」の文字を削除してから
文字を入力します。

Vectornator

文字入力ができました。

Vectornator

次は、文字を装飾します。

STEP
Vectornator 文字の装飾

まずは、左のツールから

  1. 一番上の「3:矢印」ボタンをタップ
  2. 文字をタップして選択
  3. 右上から「スタイル」ボタンをタップ

スタイル」の調整バネルが表示されます。

Vectornator

1.フォントを変える

4:フォント」をタップ

Vectornator

フォントの一覧が表示されますので
使いたいフォントを選びます。

Vectornator

フォントが変わりました。
ここでは、「COPPERLATE」を選びました。

Vectornator

2.文字の大きさを変える

スタイルから
5:サイズ」をタップ。

Vectornator

サイズの数値を入力または
スライドバーを動かしても
サイズ変更ができます。

Vectornator

最大で「300pt」までの入力ですが
これ以上に大きくする方法は
後ほど解説します。

Vectornator

3.文字の色を変える

6:塗り」の
ここだとオレンジ色の部分をタップします。

Vectornator

」のカラーバーで
文字の色を選択すると
すぐ上の四角形に反映されますので、
●を動かして、細く色を調整します。
調整した色はすぐ上の
グラデーションバーの左のポイントと
文字のいちばん左端と同じ色になります。

同じように
グラデーションバーの右のポイントと
文字の右端が同じ色になります。

Vectornator

これを使って、違う色にしました。

Vectornator

4.文字のグラデーションを調整する

文字を選択したときに表示されている
オレンジの●2つ、
これをそれぞれドラッグして動かします。

Vectornator

2つの●を動かして
横方向のグラデーションを
縦方向に変えました。

Vectornator

次に、グラデーションの
イエローとホワイトの割合を変えます。

グラデーションのバーの
ホワイトのボタンを左へ動かすと
文字のホワイトの割合が大きくなります。

Vectornator

反対に、
ホワイトのボタンが右端にあるときに
イエローのボタンを右端まで動かすと
グラデーションが無くなります。

Vectornator

5.文字を移動させる

文字が選択された状態で
タップしたままドラッグします。

Vectornator

6.文字をもっと拡大する

スタイル設定か行った文字の大きさを
もっと大きくします。

」の拡大・縮小ボタンをタップ

Vectornator

文字周囲の黒い●をドラッグすると
拡大できます。
好みの大きさで指を離すと固定されます。

Vectornator

画像の中央あたりまで移動させました。

Vectornator
STEP
Vectornator 図形を入れる

図形を入れる前に
文字のときと同じで
図形用に新しいレイヤーを作成します。

」レイヤーボタンをタップして
」ボタンをタップすると
新規レイヤーが追加されます。

Vectornator

レイヤー3」が選択された状態で
左のツールから図形ボタンをタップして
」ボタンをタップします。

Vectornator

図形一覧の中から
使う図形を選びます。
ここでは☆を選びました。

Vectornator

画像上でタップして
ドラッグした量の大きさで
図形が描けます。

Vectornator

星のスライダーを動かすと
星をもっと多角形にできます。

Vectornator

文字のときと同じように
左のツールの一番上のボタンで移動
右の列の一番下のボタンで拡大縮小
それぞれ行います。

Vectornator

次は「矢印」を入れます。
矢印は、僕もブログ記事の作成で
頻繁に使うので、重要な機能です。

左のツールから図形をタップして
表示される図形一覧から
ー線」をタップして選びます。

Vectornator

上部にある「スタイル」ボタンをタップ

Vectornator

画像上をタップ、ドラッグして
線を描きます。
太さ、線種、長さ、位置、色などは
あとから変更できます。

Vectornator

1.線の太さを変える

スタイル」の中にある
ストロークの幅」のスライダーを
右方向へ動かすと、線が太くなります。
反対に、
左方向へ動かすと、線が細くなります。

Vectornator

2.線の種類を変える

ラインを矢印に変えます。

スタイル」から
先端形状」をタップします。

Vectornator

先端形状の一覧から
線の両端のデザインを選びます。
選ぶと直ぐに、
描いた線に反映されます。
一部、矢印の先端が欠けて見えますが
大丈夫です。

Vectornator

画像の任意の位置をタップすると
矢印のデザイン全体が見えるようになります。

Vectornator

3.線の長さを変える

最初に作業スペースを広げるために
スタイル」ボタンをタップして
スタイルを非表示にしてます。

次に左のツールから
一番上の矢印型のボタンをタップしたあと
描いた矢印をタップして選択状態にします。

Vectornator

矢印の先端にある●を
ドラッグして動かした分だけ
長さが変わります。

Vectornator

画像上の任意の位置をタップすると
選択が解除されて、矢印全体が見えます。

Vectornator

4.線の色を変える

左ツールの矢印型のボタンをタップして
色を変える線をタップして選択し
スタイルボタンをタップして
スタイルパネルを表示させ
」の色の部分
下の画像だとイエローの部分をタップします。

Vectornator

最初に色のスライダー、
次に四角形の中で細かく選択して
色を決めます。
その色が、そのまま線の色に反映されます。

Vectornator

スタイルボタンをタップして
スタイルパネルを非表示に、
画像上の任意の場所をタップして
線の選択を解除すると
矢印の全体が見えます。

Vectornator

5.線を移動させる

線を選択した状態で
タップしたままドラッグして
任意の位置に動かします。

Vectornator

でき上がりです。

Vectornator
STEP
Vectornator 画像の保存

でき上がった画像を保存します。

左上の「>」ボタンをタップ。

Vectornator

○の共有ボタンをタップ。

Vectornator

ブログやネット販売のページ用に使う場合は
JPG」をタップします。

Vectornator

画質」を設定します。
100%が最高画質ですが、
そのぶんデータが大きくなりますので
画像が粗くならない程度に調整します。
僕の場合、90%~95%が多いです。

そのあと「Save」をタップします。

Vectornator

画像を保存」で
カメラロールに保存されます。

Vectornator

これで、保存完了です。

これで完成です。

Vectornator

Vectornator まとめ

VectornatorはIllustratorと同じ、デクタ-データを扱うアプリなので、画像をピンチアウトして拡大しても、文字や図形が全く粗くなりません。

Vectornator

これは、このブログでこれまでに解説してきた、他の画像に文字を入れるアプリには無い特徴です。でも、Webに載せる程度の決まった小さな画像を作成する場合、あれば便利ですが、無くてもじゅうぶん見た目にキレイに作ることは可能です。

細かい文字や色の設定、図形を自由に操る、そして今回は解説していませんが、ブラシを使った表現などを行いたい場合は、無料でここまでできるVectornatorは、最高に素晴らしいできで、僕が使う範囲なら、最強のAdobe Illustratorを置き換えるほどの実力を持っています。

よかったらシェアしてね!

コメント

コメントする

目次
閉じる