こんな影(シャドウ)はどう?5種類の影パターンとデザイン事例を紹介。

一周回って流行のドロップシャドウ

こんにちは、読むだけでデザインを学べる!デザイン研究所です!

デザイン特化メディアでは国内最大級のTwitterインスタグラムを運営しています。

 

今日のテーマ:ドロップシャドウ

一周回って流行しているドロップシャドウの紹介です!またドロップシャドウ以外の影の表現を4つ紹介しています!

影に関して引き出しが増えるかと思います。伝えたいイメージによって使い分けれると良いですね。ぜひ最後まで記事をご覧下さい!

 

 

 この記事で得られること
 イラレとフォトショのドロップシャドウ機能

 4種類の影を使ったデザイン!

 

ボタンデザインのまとめ記事を作りました。こちらの記事も含まれています。ぜひご覧ください!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 WEBデザインやバナーでよく使うボタンのデザイン。[…]

ドロップシャドウの作り方をイラレとフォトショで解説!

ドロップシャドウの作り方をイラレとフォトショで解説!

こちらが今回のデザインサンプルです。

右の図形にドロップシャドウを適用しています。

かつてはダサいとされていた表現が一周回って流行となることがよくあります。特に最近かなり目にするのがドロップシャドウの立体表現。完全にトレンドとなっております。

流行しているドロップシャドウ、デザインはリッチなトレンドへ

今回のデザインサンプルにも図形に薄らシャドウをかけています。このような薄らなシャドウをよく使います。

薄らシャドウは距離を少しつけて、イラレではぼかしを、フォトショではサイズを少し大きめ、不透明度で調節してあげるとそれっぽくなります!

どちらも描画モードは通常でOKです。

イラレ(Illustrator)のドロップシャドウのやり方

イラレ(Illustrator)のドロップシャドウのやり方

イラレはメニューの効果>スタイライズ>ドロップシャドウにて適用できます。

イラレ(Illustrator)のドロップシャドウのやり方

このようにイラレではX軸とY軸で左右の位置を調節できます!

ぼかしを小さい値にすればくっきりとした影になります。

 

フォトショ(Photoshop)のドロップシャドウのやり方

フォトショ(Photoshop)のドロップシャドウのやり方

Photoshopではメニューのレイヤー>レイヤースタイル>ドロップシャドウになります!

フォトショ(Photoshop)のドロップシャドウのやり方

フォトショップのドロップシャドウは、X軸やY軸ではなく距離と角度で調節します!

サイズを小さくすればくっきりとした影になります。スプレッドはエッジを強調するかどうかの調節ができます。大抵は0〜低い値が多いです。

 

ドロップシャドウはWEBデザインでも顕著に見られる流行です。ボタンや図形にドロップシャドウが定番ですね。

最近の海外のWEBデザインなどぜひ見てみてください!昔のドロップシャドウとは違った洗礼されたリッチな印象を受けるドロップシャドウです。

過去投稿100ではグラデーションに関してのトレンドを解説しました。グラデもまた以前は良くない印象でもありました。ここから読み取れることは過去にフラットデザインの流行がありそこからの進化の過程で今の流行であるリッチな表現になりつつあると思ってます。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

デザインのリッチ化。この流れは加速する

おそらくここからまたどんどんリッチな方向にデザインの流れはいく気がします。

今回のようなドロップシャドウ、3D表現、しかしそれらはフラットデザイン以前の立体表現とはまた違う進化したデザイン。

このようなデザインの流行もどんどん取り入れていきたいところですね!まずは使いやすいドロップシャドウから参考に取り入れてみてください!

3D表現についてはこちらの記事で解説しています。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

流行のドロップシャドウを使ってみよう!

ボタンや図形、写真に対して使うのがおすすめです。

 

デザ研
今っぽいデザインを作りたい時にぜひ!

 

 

4種類の影(シャドウ)を使ったデザイン。色んなパターンを使い分けよう!

いろんな表現が可能、5つの影の作り方

ドロップシャドウ以外の影の表現をまとめてみました。

このように影といっても多様な表現があります!

その1であるドロップシャドウは前章で解説したのでそれ以外の作り方を紹介します。

ポップな影はコピーして下に配置しずらすだけ

ポップな影はコピーして下に配置しずらすだけで簡単に作ることができます。

これは文字にもできますし、図形に対してもできます!かつ影の色を変えたり模様を加えたりすることで多様な表現が可能です!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

コピーし倒して影を作るやり方、文字や切り抜きに対して使うことができます

コピーし倒して影を作るやり方はボタンには不向きですが、文字や切り抜きに対して使うことができます。

こちらの画像の中の影は倒して作っています!

 

楕円形を使って影を作る

図形を使って影を表現しています。楕円形で作る影はかわいくて個人的に好きです!

またこの影をいくつかの要素に繰り返し適用することで統一感UPも図れます。

また他の図形使った影の一例としてロングシャドウもあります!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

ブラシで影を描く

ブラシで影を書くこともあります。これを使う際は文字に対してであったり、コラージュや合成写真に対して使うことが多いですね!

文字に対して書く影はこちらの記事で

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

コラージュや合成写真に対して描く影はこちらの記事をご覧下さい!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

多様な影の表現を覚えよう!

伝えたいイメージに合わせて使い分けれると良いですね。

 

もっとドロップシャドウのポイントを使ったデザインが見たい方!

この記事で解説したドロップシャドウのデザインをもっと見たい方は、、、

デザイン研究所が運営する学べるギャラリーサイト「managary」へどうぞ!

もっとドロップシャドウのポイントを使ったデザインが見たい方!

 

デザ研
クリックするとドロップシャドウを使ったデザイン”だけ”が表示されます!

こんな影(シャドウ)はどう?5種類の影パターンとデザイン事例を紹介。まとめ

いかがでしたでしょうか?影について解説していきました。

ドロップシャドウは初心者ぽくなってしまう要因でもあるのでそこは要注意です!基本的にドロップシャドウは薄らかけると初心者ぽくなりません。

 

ちなみにこちらの記事はおしゃれなデザインを作る34のテクニックを解説したまとめ記事にも含まれています。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 今回の記事ではそんなデザインをおしゃれにするテクニ[…]

 

こちらの記事はクールなデザインまとめ記事にも含まれています!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 今回の記事ではそんなデザインをクールにするテクニッ[…]

 

こちらの記事はWEBデザインまとめ記事にも含まれています!WEBで使える32種類のテクニックをまとめました!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 WEBデザインには色々なテクニックが散りばめられて[…]

・流行のドロップシャドウを使ってみよう!
・多様な影の表現を覚えよう!

 

 

この投稿をInstagramで見る

 

デザイン研究所(デザ研)ほぼ毎日投稿(@designkenkyujo)がシェアした投稿

広告
>インスタでデザインを学ぶ

インスタでデザインを学ぶ

デザインの見る目を養うインスタアカウントを運営中!初心者から脱するデザインのポイントを解説しています。だいたい毎日更新です!

CTR IMG