この演出、
現場で
今回、
以下の
1問目「より立体感を感じるハートはどっち?」(難易度★)
2問目「より奥行きを感じるデザインはどっち?その1」(難易度★★)
3問目「より奥行きを感じるデザインはどっち?その2」(難易度★★★)
いかが
1問目の答え:A
2問目の答え:B
3問目の答え:A
以上が
あなたが
※本コーナーの
Illustratorは、
多くの
ワンランク上の
1.オブジェクトにハイライトを加えて立体感を強調する
まずは
この作例では、
私が、
Aの作例では
気軽に
今回の
光と影の関係性
私たちは
- ハイライト:
光が 直接当たって、 最も 明るく 見える 部分 - ハーフトーン:
光が 当たっている 明るい 部分 (明部)と、 当たっていない 暗い 部分 (暗部)の 中間部分 - シェード
(陰): 物体の 光が 当たらない 暗い部分。 物体その ものに 帯びる カゲ - シャドウ
(影): 物体に よって 光が 遮られ、 壁や 地面に 投影される カゲ
ここで
- 物体の
立体感は、 明暗 (光と 陰)の 差に よって 表現できる - 空間での
物体の 位置関係は、 シャドウ (影)に よって 表現できる
デザインに合わせた光と影の使い分け
平面上の
例えば、
高級感や
→本物に
すっきり
→カゲを
リッチで
→滑らかな
親しみや
→パキッと
どっしりと
→物体が
軽やかさや
→画面から
この
Illustratorの「3Dとマテリアル」機能でハイライトを作る
「3Dと
作例の
作例Aに
【手順1】3Dに変換したいオブジェクトを選択
まずは、
【手順2】「3Dとマテリアル」の「膨張」を選択
次に、
すると、
オブジェクトが
ここで、
パネル内には
1.オブジェクト
立体の
3Dの
2.マテリアル
表面の
金属感や
また、
3.ライト
光の当たり
光源の
では、
【手順3】ライトの設定をする
「ライト」タブに
光源が
・環境光
【手順4】
また、
【手順5】
今回は
・ベースプロパティ
「粗さ」は、
(ちなみに、
デザインの
2.オブジェクトをぼかして「距離感」を表現する
続いて
この作例では、
私が、
これは、
ピントが
その結果、
階層を意識して自然な奥行きを演出する
オブジェクトを
被写体に
オブジェクトを散りばめるコツ
今回の
オブジェクト
Illustratorでオブジェクトをぼかす方法
ここからは、
1.【Illustrator
オブジェクトの
2.【Photoshop
オブジェクト
同じオブジェクトに
例えば、
袋文字の
では、
「スタイライズのぼかし」の作成手順
【手順1】
【手順2】
【手順3】
「ぼかし(ガウス)」の作成手順
【手順1】
【手順2】
【手順3】
今回の
ご紹介した
ぜひ、
3.オブジェクトを「交差」させて重なりを作る
最後に
この作例では、
私が、
AとBを
- 人物が
タイトル 文字の 中に 腕を 通している かのような 重ね方を している - 人物が
リボンの 装飾を 飛び越えている かのような 重ね方を している
このように、
オブジェクトの重ね方を工夫する
2問目の
しかし
【ポイント1】一部をあえて交差させてリアルな立体感を演出する
オブジェクトの
また交差させる
このように、
【ポイント2】重なりでインパクトとストーリーを生み出す
作例Aでは、
Illustratorの「クロスと重なり」で前後関係を部分的に入れ替えるコツ
Illustratorの
ここでは、
【手順1】「選択ツール」で前後関係を変更したいオブジェクトをすべて選択
まずは
【手順2】「クロスと重なり」の「作成」を選択する
「オブジェクト」
重ね順を後から編集する方法
「やっぱり
【手順2】
【手順3】
適用後も
重ね順の
手軽かつ
まとめ:デザインに奥行きを生み出すためのポイント
今回は
最後に
1.光と影を使い分ける
- デザインの
方向性に 合わせて 光と影の 見せ方を 変える ことで、 ビジュアルの クオリティアップに つながる - より立体感を
強調したい ときや、 リッチな 印象に 仕上げたい ときは、 ハイライトを 加えるのが 効果的
2.階層を意識してぼかす
- 「手前・主役
(被写体)・奥」の 階層を 意識する - 被写体に
近い 要素ほ どくっきりと 見せ、 離れる ほどぼかしを 強く 加える ことで、 より 自然な 奥行き感を 演出できる
3.重ね方で視覚効果を演出する
- オブジェクトを
重ねる ことで、 ビジュアルに 前後関係が 生まれる - 一部分だけ
前後を 入れ替える ことで 立体的な 関係性が 生まれる - オブジェクトの
動線を 意識した 重なりを 作る ことで、 インパクトや ストーリー性が 強調される
お相手は
※本コンテンツは、
執筆:
株式会社
“伝わる
すべての問題にチャレンジしてみよう!
あなたの感性はどれを選ぶ?「デザインクイズチャレンジ」
第66
第65
第64
第63
第62
第61
第60
第59
第58
第57
第56
第55
第54
第53
第52
第51
第50
第49
第48
第47
第46
第45
第44
第43
第42
第41
第40
第39
第38
第37
第36
第35
第34
第33
第32
第31
第30
第29
第28
第27
第26
第25
第24
第23
第22
第21
第20
第19
第18
第17
第16
第15
第14
第13
第12
第11
第10
第9回 この
第8回 この
第7回 この
第6回 この
第5回
第4回 この
第3回 この