みなさん、こんにちは。
あなたの探していたアイデアが見つかる
アイデア図鑑「Aiz」です！
この記事を書いている時点で、
WEBデザインを始めてから
丸2年が経っていました。
ほんと、時間ってあっという間ですよね笑
これまで、どのぐらいでしょうか？
数百に及ぶデザインを作ってきましたが
私も経験した、誰しもぶつかる壁があります。
それが、デザインの「マンネリ化」です。
特に、私の場合は、
「文字の加工が、いつも同じだな…」
と悩む時期がありました。
誰もが読みやすい文字となると
明朝体とゴシック体。
装飾が強すぎるフォントは
そもそも読みにくいから使いたくない。
そうなると、、、
自然と、いつも使うフォントが
固定されてきちゃいます。
そんな、マンネリ化から
私が実際に脱却できた
とあるテクニックを、今回はご紹介！
今回も、初心者にも優しい
カンタンにできて、
個性も出せるアイデアになってるので
見逃すなんて、もったいない！
「マンネリから脱却したい！」
今、そう思っている方には
ぜひ最後まで目を通してくださいね。
マンネリ化解消！文字にイラスト合成
【原因】シンプルだと、マンネリだと感じやすい
これまで2年間の間に、いろいろな方の
十人十色のデザインを見てきましたが、
デザインに自信がない人には、
ある共通点があることが分かりました。
それは、
「シンプルさ」を嫌うことです。
デフォルトに近いフォント。
スキマがある背景。
初期設定の状態に見えると、
手抜きだと思って、余計に加工しがちなんです。
例えば、、、
明朝体やゴシック体は、シンプルな見た目。
「なんだか手を抜いてるように見えない？」
だから、下のようなデザイン装飾の強い
フォントを選んじゃう人もいるんです。
でも、これじゃあ、
正直、読みにくくて
内容が伝わりずらいですよね。。。
そこで、私が提案したいのが
シンプルすぎず、個性も出せる
文字にイラストを合成するテクニックです！
【解決】文字にイラストを、合成させる
文字加工のマンネリ化を
脱却する方法は、、、ズバリ！
「イラストを合成」することです！
合成と聞いて、
「え？！難しそう…」と思うかもですが
いきなり、私が無理難題を言うと思いますか？
（思われてたらどうしよう…泣）
デザインの仕組みとしては、
超絶シンプル。
文字と関連するイラストを探して
文字の上に重ねておくだけです！
私自信が普段から愛用してるほど
意外とカンタンにできちゃうので、
次は、イラストを合成する時に役立つ
コツを3つ、伝授していきますね！
イラスト合成のコツ3選
「ただ、文字にイラスト乗せるだけでしょ？」
と適当に配置してしまうと、
元の文字も読みにくくて、
逆に伝わりづらくなってしまう原因に…
ここで、私がいつも気を付けている
イラスト合成の時のコツがありますので
一緒に見ていきましょう！
ポイント① 点々があると、イラストは入れやすい
まず、1つ目のポイントは
文字自体に「点々」があると
イラストは入れやすいです。
例えば、
「桃」という字なんかどうでしょう？
「兆」の部分に、点々があるので
合成にはピッタリの漢字です。
さらに、
点々に合わせるイラストは、
丸い形のものが相性抜群！
点々を隠すように配置してあげてください。
ポイント② 直線や穴の空いた場所に入れる
ポイント2つ目は、
直線や穴の空いた場所に
イラストを入れ込むことです。
例として、今回は、
「TRAIN」なんてどうでしょう？
「R」の部分に、丸っこい穴が。
「I」の部分に、直線がありますよね。
「R」の丸っこい穴には、
電車の正面イラストを。
直線的な「I」の部分には、
電車を上から見たイラストを入れました。
このぐらいの加工なら、
見やすさもありつつ、
オリジナリティも出せてますよね。
ポイント③ 文字の特徴的な部分に合成する
最後の、3つ目のポイントとしては
文字の特徴的な部分に合わせて
イラストを入れ込んでいくことです。
「文字の特徴的な部分ってなに？」と
はてなマークが伝わってくるので、
例を出して、ご説明します。
今回使うのは「崖」という文字。
さて、
この文字の特徴はどこでしょうか？
ここで大切になってくるのが、
文字が本来持っているイメージと、
文字の特徴の「共通する部分」を
見つけていく作業になります。
まずは、崖の文字が持つ
イメージと文字の特徴を
書き出してみましょう。
崖の持つイメージは、
ゴツゴツとした急斜面の山肌。
文字の特徴としては、
土の重なり、はらいの部分ですかね。
次に、今書き出したイメージと特徴から
共通する点を見つけていきます。
崖の文字の、はらいの部分が
崖のゴツゴツとした山肌に見えてきませんか？
そこで、私のアイデアとしては
崖のはらいの部分を、山肌にして
クライミングする人のイラストを
入れ込んで、遊んでみました。
このように、
文字の特徴に合わせて、
ある一部分にだけイラストを入れれば
マンネリ化は、1発で解消です！
どんなコンセプトにも使える
万能テクニックですので、
ぜひ、使い倒して習得しちゃってください！
文字にイラスト合成させてみました！
では、今回もしゅーの完全オリジナル
文字にイラストを合成する手法で
3種類デザインを作ってきたので、
参考にしてみてください！
アイデア① 桃の「点々」に、イラスト合成
日課になった素材探しの作業。
桃の可愛らしいイラストが見つかったので
「桃」の文字に合成しちゃいました。
桃が画面の上から降ってくる。
そんな背景にしたくて、
桃1つ1つの角度を変えながら、
ランダムに配置していきました。
降ってくる桃が、ちょうど
桃の「兆」の点々に重なるイメージで
整いすぎない、遊び心ある
レイアウトを意識してますね。
アイデア② TRAINの｢R｣&｢I｣に電車を合成
このデザインのアイデアは、
中心部分がくり抜かれたような
中抜けフォントが見つかったので、
「なんか線路みたい」と思ったのが始まり。
「R」の丸っこく穴が空いた部分に
トンネルを潜るように、正面の電車を。
「I」は線路の雰囲気を残したいので
真上からの電車を、合成してみました。
真上からの画角を、大事にしたかったので
周りをGoogle Map風に、
淡い色合いで、電車が際立つように
デザインしていきました。
アイデア③ 「崖」のはらい部分を、クライミング
テレビで、クライミングの映像が
流れていた時に、
「登る動作のイラスト使いたいな」
と思っていたので、今回使ってみることに。
「山」とか「登山」などの漢字よりも
「崖」のはらいの部分が、
クライミングの山肌に見えたので、
「崖」の漢字を採用しています。
あえて、崖の漢字を
限界まで大きく拡大させて、
画面から大胆にハミ出させることで、
崖の巨大さも表現。
半分ほどもハミ出してますが、
ここまで大きく配置していると
問題なく「崖」と読めますよね！
実際に作ってみよう！
3種類の作り方は、だいたい同じなので
このデザインの基本となる
桃のアイデアを
今回は一緒に作ってみましょうか！
STEP① 雰囲気に合った、文字を入れる
まずは、イメージに合った
文字入れの作業です。
そもそも、桃って聞いて
どんなイメージを持ちますか？
見た目が、ピンク色だとか
味が、甘かったり
形が、丸っこいとか。
イメージに合ったフォントを選んでいきます。
今回私が使ったフォントは、
「Zen Maru Gothic – Regular」で
優しい丸ゴシックにしてみました。
カラーコードは「#f26c85」です。
STEP② イラストを探してくる
次に、イラスト探しですが、
もうこのサイトを見てる人は
ご存知ですよね？そうです！
「イラストAC」さんで探すのがおすすめです！
検索バーに「桃」と入れて検索すると
目移りするほど、魅力的なイラストが
ズラリと表示されます！
その中でも水彩風のイラストを選択。
背景が透過される、
「PNG」形式でダウンロードすると
今後の作業がしやすくなりますよ。
STEP③ イラストを切り取って、入れ込む
ダウンロードしたイラスト素材を
右クリックで、Photoshopで開いて
個別のタブで開いてあげます。
作業がしやすくなると思います。
桃のイラストレイヤーを
選択した後に、
「オブジェクト選択ツール」で
欲しいイラストを囲んでいきます。
点線で選択されるので、
「command」または「ctrl」＋「C」でコピー
「command」または「ctrl」＋「V」でペースト
して、イラストを入れ込めれば、OK!
STEP④ イラストを、文字の上に並べる
切り抜きを、入れ込んでいって
桃の文字の上に配置していきます。
ここでのポイントとしては、
4種類とも角度を少しずつ変えていくと
コピペ感が薄まって、仕上がりが良くなります！
STEP⑤ ハミ出た部分を、消して修正
イラストを入れ込んでみたけど
文字がハミ出た部分がありますよね…
これって「文字の点々がハミ出ている」から
文字の一部を消せれば、修正できそうですよね。
「マスク」を使って消していきましょう！
桃の文字レイヤーを選択して、
日本国旗のマークをクリックして
マスクの白い四角形を表示させます。
次に、ブラシツールの設定です。
描画色を「#000000」の黒色に。
ブラシの形を「ハード円ブラシ」にして
不透明度を「100%」にしておきます。
ブラシの設定ができたら、
ハミ出ている部分をなぞっていくと…
なぞった部分が消えていきます。
ハミ出た部分がなくなったら、完成です！
Canva① 雰囲気に合った、文字を入れる
Canvaでも、同じような手順です。
まずは、文字を選んでいきましょう。
今回は「Kosugi Maru」にしてみましたが
フォントの雰囲気、どうでしょうかね？
Canva② イラストを検索する
文字が選び終わったら、
次は、イラストを探していきましょう。
いろんな素材が出てくるので、
お好みの桃イラストをお選びください。
Canva③ 文字が出ないように、上に重ねる
イラストも探せたら、
さっそく、重ねていきましょう。
同じイラストでも、
角度を変えれば、可愛く仕上がりますよね！
どうしても、ハミ出してしまう場合は…
イラストを重ねる時に、
どうしてもハミ出てしまう…
そんな時もあると思います。
そんな時には、
背景と同じ色の図形を重ねると、
見えなくなりますので、
試してみてください！
お疲れ様でした！
今回も完走してくれたあなたに
おめでとうございます！！
な、なんと、、、今回の記事で
この「デザイン図鑑 Aiz」の
記事数が30本を超えてました！
まさか、飽き性の私が
ここまで継続できるとは。
私自身が一番驚いています笑
これまで、初心者にもマネしやすくて
でも、プロっぽく見えるアイデアを
てんこ盛りの資料で解説していきました。
とりあえず、書きたい内容は
ひとまず書き終えたので、
これからはデザインを教える活動に
専念していきたいと計画しています。
何度も、何度も、
覚えるほど、繰り返し読んでもらって
みなさんの成長の手助けができていたら
デザイナー冥利に尽きますね。
これからも、私と一緒に
デザインをめいっぱい
楽しんでいきましょうね！
デザインの無料アドバイス、やってます。
ここまで詳しく解説してきましたが、
実践するのはあなた自身。
時には、つまずいたり、
分からなくなる事もありますよね。
でも、デザイン詳しい人なんて
周りにいないし、どうしたら…
そんなあなたに吉報です！
現在、自分は「公式LINE」を運営し、
このたび、LINEの友達登録者限定で、
デザインの無料相談を開始しました！
現役デザイナーに直接相談できるチャンス！
ぜひ、活用してみてくださいね↓
コメント