【Vectornator】マスクを使ってポップなオリジナルロゴを作成する

Vectornatorでマスクを使ってロゴを作るiPad

私が推しに推している『ほぼイラレ』な無料ツール、Vectornator

前回、テキスト挿入と装飾だけで簡単なテキストロゴを作成しました

フォントや色などを変えれば、いろんなテキストロゴができます!

が。

きりん
きりん

それでもまだオリジナリティが足りない…

そう考えているクリエーティブなあなたのために、もう一歩先ゆく技を伝授したいと思います!

こんな人に読んでほしい!
  • Vectornatorをいまいち使いこなせてない
  • もっと個性的なテキストロゴが作りたい
  • マスク…?アウトライン化…?
  • Canvaではできないような画像を作成してみたい
きりん
きりん

デザイン初心者

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

ド素人主婦の私にもできました

何がわからないかもわからないVectornator迷子のあなた、安心してください。

私も常に手探り!!(言っちゃった!)

一番初心者に近いド素人主婦目線で、画像たっぷりでやさし〜く解説しています。

Vectornatorをダウンロードした方は、ぜひ一緒にやってみてくださいね。

テキストにマスクをかける

前回はテキスト挿入について詳しく解説しました。

テキストを挿入する方法がわかったら、いよいよオリジナリティを出すための「飾り付け」をします。

飾り付けをするときに役に立つのがマスク機能です。

マスク機能のざっくり説明

例えばこの「きりん」の文字は、マスクをかけた状態。

マスク機能で装飾した「きりん」
キリンの模様をイメージしたデザインです

このような見た目にするには、以下の2枚のレイヤーが必要です。

①模様をつけたい範囲を塗りつぶしたレイヤー
②模様を描いたレイヤー
用意するもの

①模様をつけたい範囲を塗りつぶしたレイヤー(1枚目)
②模様を描いたレイヤー(2枚目)

材料が揃ったら、あとは以下の手順でマスクをかけるだけ。

  1. ①のレイヤーを上にする
  2. ①と②のレイヤーを全て選択して、マスクアイコンをタップ
今まさにマスク機能を使おうとしている瞬間
全選択→マスク(仮面)アイコンをタップ

以上!

一度理解すればとっても簡単なんですが…

きりん
きりん

初心者の私は、マスクの使い方がなかなか覚えられませんでした…

というわけで、この記事ではマスク機能についてもっと詳しく図解していきます。

マスク機能でロゴ作成する実践練習

それでは、練習として以下のロゴを作ってみましょう。

マスク機能で作ったロゴ
マスク機能でこんな可愛いロゴ(のつもり)も作れます!

この記事ではiPhone版アプリで解説していますが、PC版や iPad版でも操作は同じです。

《各メニューアイコンの名称一覧》

主に上部・左側に表示されるメニュー
右上(または右端)に表示されるメニュー

今後のバージョンによって、アイコンのデザインや位置・メニューの名称が変わる可能性があります。
※この画像は2022年5月のものです

①模様をつけたい範囲を塗りつぶす

マスク機能を使えば、どんな形にも模様をつけることができます。
今回はテキストに模様をつけたいので、テキストを挿入します。

Vectornatorでテキストを挿入
(テキスト挿入方法は前回の記事冒頭を参照)

フォントも自由ですが、できるだけ太めがおすすめ。
(太いほど模様の付く範囲が広くなります)

②別のレイヤーに模様を描く

新規レイヤーを追加します。

Vectornator新規レイヤーの追加
レイヤーメニュー(菱餅アイコン)から、右上のプラスボタンをタップ

レイヤー名(デフォルト:新規レイヤー)をタップすると名前が編集できます。

Vectornatorレイヤーに名前をつける
相変わらず邪魔なiPhone内蔵キーボード…

後でわかりやすいので、レイヤー名は変更しておくと良いですね。

今回は以下のように名前をつけました。

①模様を付けたいレイヤー(テキストのレイヤー)
②模様レイヤー(今から描く模様のレイヤー)

※自分でわかればなんでも良いです。

レイヤーを作成できたら、模様を描きます。

水玉模様を書きたいので、円形ツールで正円をたくさん描きます。

《 正円の描き方 》

Vectornator正円(○)の描き方
図形メニューから[…]をタップ
Vectornator正円(○)の描き方
図形の中から円形を選択
Vectornator正円(○)の描き方
片手で画面の端を押さえながら、円形を描写

「片手で画面の端を押さえながら」は、どの図形でも有効。
正三角形や正方形など、縦横比が均等な図形が描写できます。

いくつか円を描いたら、複製ツールで増やしましょう。

複製ツールを使用すれば…
図形を移動させるアクションで、何個でも複製できます!

面倒な人は、範囲の周辺だけ模様があればOK。

きりん
きりん

正直面倒だった…次は水玉のフリー画像使おう…

ところで…

今コピペしているとき、一緒にテキストの文字が動いてしまってイライラしませんでしたか?

そんなときはレイヤーロックという機能があります!

錠マークをタップすると、ロックがかかります

ロックされたレイヤーは、編集することはもちろん削除選択もできなくなります。

絶対に消したくない!1ミリも動かしたくない!というレイヤーはロックをかけておくと安心ですね。

今回は、水玉模様をコピーするときテキストを巻き込みたくないので、一時的にテキストのレイヤー(「①模様を付けたいレイヤー」)にロックをかけました。

きりん
きりん

これで心置きなくコピペできる!

面倒なので範囲選択してまとめてコピペします
コピペすればすぐできます

③模様をつけたいレイヤーを上に移動させる

マスクをかけるときは、レイヤーの順番が大事。

①模様を付けたいレイヤー(テキストのレイヤー)
②模様レイヤー(水玉模様のレイヤー)

↑この順番で重なっている必要があります。

レイヤーメニューで確認してみましょう。

菱餅アイコンをタップ

この場合、②模様レイヤーの方が上にきていますね。
絵の見え方も、テキストの上に水玉模様が乗っている状態。

①の塗りつぶしたレイヤー(テキスト)が上になるようにします。

レイヤーの順番を変える
テキストが模様に隠れず全て見えていればOK

※レイヤーにロックをかけていたら、ここで外しておきましょう。

④テキストをアウトライン化する

今は編集可能なテキストですが、これをアウトライン化(パス化)します。

まだ編集可能なテキスト(アウトライン化すると編集できなくなります)

ここの操作は前回テキストロゴを作った時と同じです。

[スタイル(ブラシマーク)]>[テキストからアウトラインを作成]

テキストメニューのまま、テキストを選択した状態で行います
アルファベットそれぞれが図形として認識されています

テキストの周りに青い線が出てきました。

これがアウトライン化。
文字一つ一つが図形として独立した状態です。

何が起こっているかわからなくても大丈夫。
わからないついでに、このままパスを結合します。

[パス(四角が2つ重なっているアイコン)]> [結合]

※アウトライン化したテキストが選択されていない場合は、複数選択ツールでテキストを選択します。

独立したテキストを選択→結合すると…
全て一緒の枠で囲まれました!

アウトライン化された文字がひとかたまりになりました。

この一連の工程を省いてもマスクはかかります。
ただ、今やっておくと後でいいことがありますので忘れずに…。

⑤全てを選択して[マスク]をタップ

いよいよ最後の仕上げ、マスクをかけます!

忘れてはいけないのが「全選択」すること

全選択(点線の四角にチェックマークのアイコン)をタップ

iPad版やデスクトップ版はすぐ見つかると思います

画面上部にない時は[・・・]の中に隠れています。
(iPad版はすぐ見つかりますが、iPhone版は隠れています)

[…]をタップすると、隠れたメニューが出てきます
青い線や四角い枠で囲まれていれば選択完了

マスク機能選択した図形のみに適用される

マスクはクイックアクションバーのマスク(仮面?)アイコン。

クイックアクションバー内のマスク
クイックアクションバー内のマスク

アレンジメニュー(菱形の十字キーみたいなアイコン)内にもあります。

アレンジメニュー内のマスク
アレンジメニュー内のマスク

お好きな方をタップすると…

じゃーん!!

テキストが水玉模様になりました!可愛い〜!(自画自賛)

ちなみに今の状態でレイヤーを見てみると…

きりん
きりん

あっ!
②の模様が①のレイヤーの中に移ってる…!?

後でやり直したい時にマスクを解除できないの…?

いえいえ、ご安心ください。

先程のマスクがかかったテキストを選択すると、マスクマークに斜線がついたアイコンが。

これがマスクの解除アイコン。

マスクを解除

押してみると…

元に戻ります。

レイヤーは元の状態には戻りません。
ただし、レイヤーグループの中にテキストのみのレイヤーがあります。

レイヤーの下三角(▼)をタップ

このように、全てのオブジェクト(図形)にそれぞれ1枚ずつレイヤーが存在しています。

必要があればコピー&別のレイヤーにペーストします。

テキストに影をつける

このままでも可愛いのですが、さらにロゴっぽさを出したい…

そんな時は文字に「影」をつけてみましょう。

[スタイル(ブラシマーク)]> [影]

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

影をつけたい図形(今回はテキストです)を選択して、[影]をオン

ワンタップで影がつきます!

影の大きさや濃さ、色なども変えられます。

色々いじって好みの影をつけてください。

さまざまなアレンジ

ここまでくると、もうちょっとテキストをかわいい感じにしたくなってきます。

例えば最後のSの文字だけ傾けてみたり…

※オレンジの点は「回転」、青い点は「縮小」や「拡大」が可能
Sの字だけ傾きました

Oの中の丸を消してみたり…

Oの中の円だけ選択してゴミ箱へポイしました

テキストの中の一文字だけちょっとアレンジしたい…
「アウトライン化」しておくと、こんなことが可能になるのです。

マスク加工した後だとアウトライン化できません。

完成したロゴをアウトライン化すると…
アッー!マスクした模様が消えた!!

せっかくの作業が台無しになります。気をつけましょう!

ロゴを書き出す

可愛いロゴができたら画像ファイルとして書き出します。

ここからは前回のテキストロゴの工程と一緒。
必要な場合は↑の記事を参考にしながらサイズ調整を行なってください。

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

ブログ等で使うならPNGが最適です

画像の大きさなどを確認し、[書き出し]をタップ。

[画像を保存]をタップ。

(もしくは[“ファイル”に保存]でもOK)

画像が保存されました!

Vectornatorで作成したロゴ
もちろん透明化されています。

サイズ調節を面倒くさくてしなかったので変な余白が…。
皆さんは書き出し前にサイズ調整してくださいね!

いろんな図形にマスクをかけてみよう

テキストにマスクをかける方法を解説しました。

今回はアウトライン化してオブジェクト(図形)にしてからマスクをかけましたが、テキストのままでもマスクはかかります

テキストの一文字だけを動かしたりしない場合はアウトライン化しなくてもOK。

ただ、アウトライン化しておけば後で自由に変形できるので、よりオリジナリティを出すことが可能です。

テキスト以外にも図形を組み合わせて、世界に一つだけのオリジナルロゴを作成してみてくださいね!

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