みなさん、こんにちは。
あなたの探していたアイデアが見つかる
アイデア図鑑「Aiz」です！
先日、実家の物置を整理してた
いや、させられたんですが…笑
その時に懐かしいモノが出てきまして。
それが、幼稚園の時にやった
「貼り絵」の作品でして。
みなさんもやったことないですか？
色紙を手でちぎって、
のりを付けてペタペタ貼ってく。
図工とか好きだったので夢中でしたね。
たしか、、、
クラスのみんなで
虹とか花火とかも作った気がします！
そんな貼り絵ですけど、
どんな風に作っていきますか？
先ほども言いましたが、
色紙をちぎって、ペタペタと
上から“重ねて“貼っていきますよね。
実は、この「重ねる」感覚が
デザインを作る上で
仕上がりをグッと高めてくれる
賢い考え方になるんです！
よく見ると街中にもネットにも
頻繁に使われるデザイン手法。
だけど、その仕組みを理解しているか
何となくで終わってるかで、
数ヶ月後の成長に天と地の差が出てきます。
しかもコレ、
かなり基本的な感覚なので、
理解してないと詰むかもしれません。
もっとデザイン上手くなりたい方は、
このまま下にスクロール！
それ以外の人は、無駄な時間にならないように
ブラウザバック推奨です。
アクリル板で重なりを理解する
「重なり」と同じ意味合いで
デザインを始めたてで習う用語として
「レイヤー」があります。
最初、レイヤーの説明を聞いただけだと
分かりづらい部分だと思います。
私自身も自分で何度も動かしてみて
やっと理解できた1人ですので、皆さんと同じ。
この重なりやレイヤーの説明をする時には
アクリル板のような透明な板を
使って説明するのが分かりやすいです！
重なりパターン①「か」の文字&男の子
それでは、
上の画像を使って説明していきますね！
まずは、「か」の文字と男の子。
「か」の点を
男の子が持っているみたいで
可愛いですよね！
さて、説明に戻りますと、、、
透明なアクリル板の上に
素材が乗っている
とイメージしてみてください！
この素材が乗っている
1枚1枚のアクリル板が
レイヤーになります。
次に、完成画像を
横から見てみると、、、
実は、レイヤーとなるアクリル板が
重なっているんです。
編集している私たちは
真上から見ているので、
1枚の画像に見えているんですね！
よく見ると、男の子の手が
「か」の点で隠れているので
文字のほうが上にきています。
ちなみに、
レイヤータブで見ると、こんな感じです↓
重なりパターン②「さ」の文字&男の子
次は、別の画像で説明していきましょう！
「さ」の文字と、男の子にします。
「さ」のカーブ部分に足を置いて
手でつたいながら歩いてます。
まるでアスレチックみたい。
こちらも同じように
アクリル板理論で考えていきます。
こちらも完成画像を横から見ると、、、
今回は逆に、男の子のほうが文字の前にあるので
男の子レイヤーは上にきていますね！
レイヤーで見ると、
下のような感じになってます↓
重なりを応用すると…
他にも…
「な」の文字に乗ってる妹ちゃんと
手助けするお兄ちゃんだったり。
「り」の文字をまたぐ女の子だったり。
いろんな組み合わせを考えられちゃいます。
めっちゃ楽しいですよね！
つまり「重なり」とは、
透明なアクリル板を
どの順番で並べるか、ってことです！
重なりで表現できる、立体感。
今回のデザイン例も見て分かるとおり、
こちらも重なりの手法をフル活用してます。
カラフルな壁の重なり
自分を縛り付けていた苦痛から脱却する。
そんな意味合いを込めて、
1番奥を青暗くして、壁を乗り越えるたび
明るく変わっていく背景に仕上げました。
実は、この背景。
8つの図形を順番に
重ね合わせて作っているんです！
ちなみに、
編集時のレイヤー画面はこちらです↓
このように、
重なりを利用することで、
2次元の画面を見ているはずなのに
3次元のような立体感を持たせられるんです！
ちょっと不思議な感覚ですよね。
この不思議な感覚がキッカケになって
読み手側も目に止まりやすくなります。
ジャンプする男性で、さらに立体感UP!
また、
立体感をさらに強調するために
ジャンプする男性サラリーマンを追加してます。
キャラクターが入ることで、
より背景の構成が分かりやすいです！
さて、次の「実際に作ってみよう！」
のコーナーでは、この飛び越える表現を
詳しく解説していこうと思いますので、
私と一緒にやってみましょう！
実際に、作ってみよう！
それでは、、、
「図形を飛び越える」表現の作り方を
PhotoshopとCanvaで解説していきますね！
重なり順を考えて、作る。
飛び越える表現で必要な素材は、
ジャンプする男性と
前２つの背景の図形だけになりますので
下のように作れればOKですよ！
まず考えるのは、
どんな順番で重ねたら完成に近付くのか。
完成図をイメージしてみることです！
「どうしたら飛び越える表現になるんだろう？」
→「そうだ！完成図をイメージしてみよう」
→「男性の足が飛び出すから1番前だな！」
→「あとの図形は後ろに配置すればいけそう」
私の思考回路を再現してみましたが、
こんな感じで考えてました。
ちなみにレイヤーではこんな感じ↓
でも、ちょっと待てよ？
なんか後ろの足の重なり、変じゃないですか？
この足が図形の下にきていないと
飛び越えてる感じじゃないですよね…
どうしたら…
ん？コレよく見ると、、、
「足先を消す」ことで
解決できそうですかね？
マスクとブラシを使って、不要な部分を消す
このように不要な部分がある時は、
「マスク」と「ブラシ」を使って
消すのが個人的にオススメです！
レイヤーの下にある日本国旗アイコンが
レイヤーマスクになります。
男性レイヤーを選択して、
下にある日本国旗アイコンをクリックして
レイヤーマスクを設定してください。
男性レイヤーの隣に
白い縦長アイコンが表示されたらOKです。
次に、
消したい部分の選択範囲を作ります。
消したい足先は、1番後ろにある図形とかぶっています。
ですので、今回は1番後ろにある図形を
「command」or「ctrl」を押したまま
アイコン部分をクリックします。
すると、
図形のカタチに沿って
選択範囲が自動で作られます！
できたら、先ほどつくった男性レイヤーの
レイヤーマスク（縦長の白アイコン）を
選択しておきます。
「ブラシ」の設定を進めていきます。
ブラシの形状は「ハード円ブラシ」
不透明度は「100%」にしてください。
ここから、
不要な部分を「消す」作業に入ります！
先ほど設定したブラシの色を
真っ黒にしてなぞると、消えて
真っ白にしてなぞると、元に戻ります。
これを利用して、
図形とかぶった足先部分だけを
消していきましょう。
マスクとブラシで加工すると、、、
より飛び越えている感が強調されましたね！
Canvaは、切り抜きモード。
残念ながらCanvaでは
マスク機能はありませんが、
下のような画像なら作れちゃいます！
使ったのは次の2つの画像のみ！
両方ともCanva内の無料素材ですので、
みなさんも探して使ってみてください。
この表現のコツとしては、
頭は枠から飛び出すけど、
足は枠よりも後ろに置く点です。
まず作る際には、
素材の大きさと位置関係を
あらかじめ決めておきます。
今回、女の子が右側に歩いているので
動きを意識して、少しだけ右に寄せて
枠よりも「後ろ」に配置してます。
次に、
女の子だけをコピー&ペーストして、
そのあと元画像とピッタリ重ねます。
コピーした女の子は、
「1番上」になるように重ねてくださいね！
ここでポイント！
「切り抜き」モードを使っていきます。
女の子をダブルクリックすると、
暗っぽい画面になって
切り抜き画面に切り替わります。
そのあと、
下にあるL字のカーソルを
上に引っ張ってみてください。
上げる目安としては、
下の植物と女の子が被らない位置まで
カーソルを上げてください。
完了を押すと、、、どうでしょう！
下半身だけが非表示になって、
頭だけが枠よりも前面にくる
立体的なデザインに仕上げられました！
この手法はカンタンなのに
かなり応用が効くので、
今日、絶対に覚えて帰ってくださいね！
デザインの無料アドバイス、やってます。
ここまで詳しく解説してきましたが、
実践するのはあなた自身。
時には、つまずいたり、
分からなくなる事もありますよね。
でも、デザイン詳しい人なんて
周りにいないし、どうしたら…
そんなあなたに吉報です！
現在、自分は「公式LINE」を運営し、
このたび、LINEの友達登録者限定で、
デザインの無料相談を開始しました！
現役デザイナーに直接相談できるチャンス！
ぜひ、活用してみてくださいね↓
コメント