簡単1分！フラットデザインのアイコンで使われる影(ロングシャドウ)の作り方

今回は初心者の方でも超簡単にフラットデザインのアイコン等で良く用いられる影(通称：ロングシャドウ)の作り方を解説致します。

この影(ロングシャドウ)があるだけで、フラットデザインが一気にプロっぽくなるよね～

いつもはPhotoshopを使用しているのでが、今回はIllustratorを用いてフラットデザインの影(ロングシャドウ)の部分を作っていきます。とっても簡単なので、今度のデザインに是非役立てて下さい。

フラットデザインで使われる影とは

フラットデザインでよくみかける影。これはロングシャドウと呼ばれています。このロングシャドウの特徴は

• 背面から斜め後ろに伸びている
• ぼかし等がなくくっきりしている

等が挙げられます。

この影(ロングシャドウ)があるだけで一気にフラットデザイン感が出るので、技として自身のデザインに取り入れたいと思う方も多いのではないでしょうか。

では早速フラットデザインの影(ロングシャドウ)の作り方を見ていきましょう。

フラットデザインの影(ロングシャドウ)の作り方

フラットデザインの影(ロングシャドウ)はIllustratorを用いて制作していきます。作った物をそのままPhotoshopで使用する事も出来るので、Illustratorが得意じゃない人もご安心を♪

1．影を付けるエレメントを配置する

まずはIllustratorのカンバスに影をつけたいエレメント(文字やシェエプ)を配置します。

こんな感じです。今回は文字に影(ロングシャドウ)をかけていきますが、シェイプにも同様の方法で可能です。

2．コピーする

影を欠けたい要素をコピーしておきましょう。

コピーした物はカンバスの外に配置しておいてOKです。

3．アウトラインを掛ける

影にするフォントの上で右クリックをしてアウトライン化します。シェイプの場合は必要ありませんので、ステップ3に進みましょう。

4．色を付ける

影にしたい色を選び、アウトラインをかけた文字に色をつけます。

背景の色より濃い目の色を選ぶようにしましょう。

5.パスを変形させる

次にパスの変形です。いよいよココでフラットデザインの影が出来上がります。

効果＞パスの変形＞変形から変形効果パネルを出します。

変化パネルが表示されたら、数値を以下の通りに設定します。

これでフラットデザインの影(ロングシャドウ)が出来上がります。

6．コピーしておいた要素を重ねる

最後にステップ２で用意しておいたコピーした要素を影の上に重ねれば完成です！

このままIllustrator上でデザインを勧める場合はクリッピングマスクをかけて影の範囲を調整しましょう。

Photoshopに移動させる場合は、影の部分と文字の部分をコピーして、そのままPhotoshopのカンバス上にペーストすれば使えます。Photoshop上でも影の範囲を調整したい場合はレイヤーマスクで調整しましょう。

Illustratorでのクリッピングマスク

Photoshopでのレイヤーマスク

以上でフラットデザインの影(ロングシャドウ)の作り方は完成です！

簡単1分！フラットデザインで使われる影(ロングシャドウ)の作り方まとめ

フラットデザインにおいて、この影のあり／なしはデザインのクオリティーに大きく影響しますよね。今回はこの影(ロングシャドウ)の簡単な作り方を解説させて頂きました。

参考になったでしょうか。

難しそうに見えて、作り方を知ってさえいれば簡単に出来るデザインなので、是非日々のデザインに取り入れてみて下さい♪