2015.02.16
たった1クリックでロングシャドウを作る方法
あなたはフラットデザインのトーンを崩すことなく立体感を表現できる「ロングシャドウ」を簡単に作る方法をご存知でしょうか？最近はWebサイトに限らず、アプリでもフラットデザインが良く使われており、ロングシャドウを見る機会も増えてきたのではないでしょうか。
ところがロングシャドウは作るのに意外と時間がかかってしまうんですよね。それが原因でロングシャドウを少し遠ざけてしまっている方もいらっしゃるのではないでしょうか。しかし実は、1クリックでロングシャドウを作る方法があるんです！それがPhotoshopの「LongShadowGenerator」というプラグインです。
この「LongShadowGenerator」というプラグインを利用することによって、効率よく綺麗なロングシャドウを作ることが出来ます！今回は、そのロングシャドウを1クリックで生成する「LongShadowGenerator」の使い方をご紹介します！
そもそもロングシャドウとは？
本題の前に、そもそもロングシャドウとは何のことか再確認してみましょう。ロングシャドウとは、上記画像のようにフラットデザインのトーンを崩すことなく立体感を表現する技法のことです。光源を左上にあると仮定して、斜め45度にとても長い影がついてますよね。これがロングシャドウです。
こうすることで、その要素に立体感を持たせることが出来るのです。「立体感はグラデーションで表現すれば良いんじゃない？」と思ってしまいますが、フラットデザインはグラデーションを使用しないのが基本ですから、立体感を持たせたい要素にグラデーションを使用すると違和感が生まれてしまうのです。そこで、ロングシャドウを活用することでフラットデザインのトーンを守りながら立体感を表現することが出来るのです。
ロングシャドウはこれ！といった規定はなく、例えば影の角度が45度ではなかったり、影の先端に少しぼかしが入っている場合もあります。あなたのデザインするサイトのトーン&マナーに合わせて微調整してみてください。
ロングシャドウを作る方法とは？
では実際に、ロングシャドウはどのようにして作るのでしょうか。今回はPhotoshopの「LongShadowGenerator」というプラグインを利用して、1クリックでロングシャドウを作る方法をご紹介します！
まずはプラグインをダウンロード
プラグインを配布しているLongShadowGeneratorへアクセスします。画面左下にあるダウンロードボタンをクリックしてプラグインをダウンロードします。このプラグインの特徴は以下です。
- 1クリックでロングシャドウを生成
- 影の長さや透明度の調整が可能
- 影の色やぼかし具合も調整可能
- PhotoshopのCS6とCCで利用可能
プラグインを起動する
まだプラグインを導入されたことがない方は、Adobe Extension Manager CCのダウンロードページへアクセスし、「Extension Manager」をダウンロード&インストールしてください。その後、ダウンロードした「LongShadowGenerator」の拡張子が「.zxp」のファイルをダブルクリックで開いてください。
Photoshopを起動し「LongShadowGenerator」の操作パネル(上記画像)を開いてください。パネル内の設定項目は以下です。
- LongShadowLength：影の長さ
- LongShadowOpacity：影の透明度
- Blackshadow：影の色(黒か白か)
- Flatten：影の先端をぼかすか
- Generate：ロングシャドウを生成
ロングシャドウを施したいレイヤーをクリックした状態で、上記の項目を設定し最後に「Generate」ボタンをクリックすることでロングシャドウを生成します。なんと、操作はたったこれだけです！あっという間にロングシャドウを作ることができました。
例：その1
以下の設定でロングシャドウを生成した場合
- LongShadowLength：40px
- LongShadowOpacity：20%
- Blackshadow：黒
- Flatten：チェック
例：その2
以下の設定でロングシャドウを生成した場合
- LongShadowLength：40px
- LongShadowOpacity：20%
- Blackshadow：黒
- Flatten：チェックしない
例：その3
以下の設定でロングシャドウを生成した場合
- LongShadowLength：640px
- LongShadowOpacity：20%
- Blackshadow：黒
- Flatten：チェック
まとめ
いかがでしたか？見た目はシンプルですが、意外と手間のかかるロングシャドウを1クリックで作ることができました。あなたもご存知のように、フラットデザインはフラットだからこそ、何かにアクセントを付けないと平凡なデザインになってしまったり、ユーザビリティの低下にも繋がってしまいます。
このプラグインを利用すれば、今後は効率よく綺麗にロングシャドウを作ることが出来ますね！しかしだからといってロングシャドウを多用し過ぎると、かえって分かりづらくなってしまいます。程よくフラットデザインのアクセントとして活用しましょう！ロングシャドウのようにフラットデザインに適した技法はこれからも増えてくるのでしょうか？今後の流れにも注目して、より高品質なフラットデザインを作っていきたいですね！