私が推しに推している『ほぼイラレ』な無料ツール、Vectornator。
前回、テキスト挿入と装飾だけで簡単なテキストロゴを作成しました。
フォントや色などを変えれば、いろんなテキストロゴができます！
が。
それでもまだオリジナリティが足りない…
そう考えているクリエーティブなあなたのために、もう一歩先ゆく技を伝授したいと思います！
- Vectornatorをいまいち使いこなせてない
- もっと個性的なテキストロゴが作りたい
- マスク…？アウトライン化…？
- Canvaではできないような画像を作成してみたい
デザイン初心者、
フォトショもイラレも未経験の
ド素人主婦の私にもできました！
何がわからないかもわからないVectornator迷子のあなた、安心してください。
私も常に手探り！！（言っちゃった！）
一番初心者に近いド素人主婦目線で、画像たっぷりでやさし〜く解説しています。
Vectornatorをダウンロードした方は、ぜひ一緒にやってみてくださいね。
テキストにマスクをかける
前回はテキスト挿入について詳しく解説しました。
テキストを挿入する方法がわかったら、いよいよオリジナリティを出すための「飾り付け」をします。
飾り付けをするときに役に立つのがマスク機能です。
マスク機能のざっくり説明
例えばこの「きりん」の文字は、マスクをかけた状態。
このような見た目にするには、以下の2枚のレイヤーが必要です。
①模様をつけたい範囲を塗りつぶしたレイヤー（1枚目）
②模様を描いたレイヤー（2枚目）
材料が揃ったら、あとは以下の手順でマスクをかけるだけ。
- ①のレイヤーを上にする
- ①と②のレイヤーを全て選択して、マスクアイコンをタップ
以上！
一度理解すればとっても簡単なんですが…
初心者の私は、マスクの使い方がなかなか覚えられませんでした…
というわけで、この記事ではマスク機能についてもっと詳しく図解していきます。
マスク機能でロゴ作成する実践練習
それでは、練習として以下のロゴを作ってみましょう。
この記事ではiPhone版アプリで解説していますが、PC版や iPad版でも操作は同じです。
《各メニューアイコンの名称一覧》
①模様をつけたい範囲を塗りつぶす
マスク機能を使えば、どんな形にも模様をつけることができます。
今回はテキストに模様をつけたいので、テキストを挿入します。
フォントも自由ですが、できるだけ太めがおすすめ。
（太いほど模様の付く範囲が広くなります）
②別のレイヤーに模様を描く
新規レイヤーを追加します。
レイヤー名（デフォルト：新規レイヤー）をタップすると名前が編集できます。
後でわかりやすいので、レイヤー名は変更しておくと良いですね。
今回は以下のように名前をつけました。
①模様を付けたいレイヤー（テキストのレイヤー）
②模様レイヤー（今から描く模様のレイヤー）
※自分でわかればなんでも良いです。
レイヤーを作成できたら、模様を描きます。
水玉模様を書きたいので、円形ツールで正円をたくさん描きます。
《 正円の描き方 》
「片手で画面の端を押さえながら」は、どの図形でも有効。
正三角形や正方形など、縦横比が均等な図形が描写できます。
いくつか円を描いたら、複製ツールで増やしましょう。
面倒な人は、範囲の周辺だけ模様があればOK。
正直面倒だった…次は水玉のフリー画像使おう…
ところで…
今コピペしているとき、一緒にテキストの文字が動いてしまってイライラしませんでしたか？
そんなときはレイヤーロックという機能があります！
ロックされたレイヤーは、編集することはもちろん削除や選択もできなくなります。
絶対に消したくない！1ミリも動かしたくない！というレイヤーはロックをかけておくと安心ですね。
今回は、水玉模様をコピーするときテキストを巻き込みたくないので、一時的にテキストのレイヤー（「①模様を付けたいレイヤー」）にロックをかけました。
これで心置きなくコピペできる！
③模様をつけたいレイヤーを上に移動させる
マスクをかけるときは、レイヤーの順番が大事。
①模様を付けたいレイヤー（テキストのレイヤー）
②模様レイヤー（水玉模様のレイヤー）
↑この順番で重なっている必要があります。
レイヤーメニューで確認してみましょう。
この場合、②模様レイヤーの方が上にきていますね。
絵の見え方も、テキストの上に水玉模様が乗っている状態。
①の塗りつぶしたレイヤー（テキスト）が上になるようにします。
※レイヤーにロックをかけていたら、ここで外しておきましょう。
④テキストをアウトライン化する
今は編集可能なテキストですが、これをアウトライン化（パス化）します。
ここの操作は前回テキストロゴを作った時と同じです。
［スタイル（ブラシマーク）］＞［テキストからアウトラインを作成］
テキストの周りに青い線が出てきました。
これがアウトライン化。
文字一つ一つが図形として独立した状態です。
何が起こっているかわからなくても大丈夫。
わからないついでに、このままパスを結合します。
［パス（四角が2つ重なっているアイコン）］＞ ［結合］
※アウトライン化したテキストが選択されていない場合は、複数選択ツールでテキストを選択します。
アウトライン化された文字がひとかたまりになりました。
この一連の工程を省いてもマスクはかかります。
ただ、今やっておくと後でいいことがありますので忘れずに…。
⑤全てを選択して［マスク］をタップ
いよいよ最後の仕上げ、マスクをかけます！
忘れてはいけないのが「全選択」すること。
全選択（点線の四角にチェックマークのアイコン）をタップ
画面上部にない時は［･･･］の中に隠れています。
（iPad版はすぐ見つかりますが、iPhone版は隠れています）
マスク機能は選択した図形のみに適用される。
マスクはクイックアクションバーのマスク（仮面？）アイコン。
アレンジメニュー（菱形の十字キーみたいなアイコン）内にもあります。
お好きな方をタップすると…
テキストが水玉模様になりました！可愛い〜！（自画自賛）
ちなみに今の状態でレイヤーを見てみると…
あっ！
②の模様が①のレイヤーの中に移ってる…！？
後でやり直したい時にマスクを解除できないの…？
いえいえ、ご安心ください。
先程のマスクがかかったテキストを選択すると、マスクマークに斜線がついたアイコンが。
これがマスクの解除アイコン。
押してみると…
元に戻ります。
レイヤーは元の状態には戻りません。
ただし、レイヤーグループの中にテキストのみのレイヤーがあります。
レイヤーの下三角（▼）をタップ。
このように、全てのオブジェクト（図形）にそれぞれ1枚ずつレイヤーが存在しています。
必要があればコピー＆別のレイヤーにペーストします。
テキストに影をつける
このままでも可愛いのですが、さらにロゴっぽさを出したい…
そんな時は文字に「影」をつけてみましょう。
［スタイル（ブラシマーク）］＞ ［影］
影はスタイルメニュー内の最下部にあります。
影をつけたい図形（今回はテキストです）を選択して、［影］をオン。
ワンタップで影がつきます！
影の大きさや濃さ、色なども変えられます。
色々いじって好みの影をつけてください。
さまざまなアレンジ
ここまでくると、もうちょっとテキストをかわいい感じにしたくなってきます。
例えば最後のSの文字だけ傾けてみたり…
Oの中の丸を消してみたり…
テキストの中の一文字だけちょっとアレンジしたい…
「アウトライン化」しておくと、こんなことが可能になるのです。
マスク加工した後だとアウトライン化できません。
せっかくの作業が台無しになります。気をつけましょう！
ロゴを書き出す
可愛いロゴができたら画像ファイルとして書き出します。
ここからは前回のテキストロゴの工程と一緒。
必要な場合は↑の記事を参考にしながらサイズ調整を行なってください。
左上の共有アイコン（四角に↑）をタップ。
画像の大きさなどを確認し、［書き出し］をタップ。
［画像を保存］をタップ。
（もしくは［“ファイル”に保存］でもOK）
画像が保存されました！
サイズ調節を面倒くさくてしなかったので変な余白が…。
皆さんは書き出し前にサイズ調整してくださいね！
いろんな図形にマスクをかけてみよう
テキストにマスクをかける方法を解説しました。
今回はアウトライン化してオブジェクト（図形）にしてからマスクをかけましたが、テキストのままでもマスクはかかります。
テキストの一文字だけを動かしたりしない場合はアウトライン化しなくてもOK。
ただ、アウトライン化しておけば後で自由に変形できるので、よりオリジナリティを出すことが可能です。
テキスト以外にも図形を組み合わせて、世界に一つだけのオリジナルロゴを作成してみてくださいね！
