フラットデザインに一工夫!ロングシャドウ作成ツールまとめ


フラットデザインに一工夫!ロングシャドウ作成ツールまとめ

どうもです。
夏休みの間特に行く予定もなく、毎日ゲーセン通いをして音ゲーを練り上げてしまったはやちです。
jubeat(ユビート)とSOUND VOLTEXが熱いです。

別にさびしくなんか ないです <(  ´ิ-´ิ ┌┛)┌┛

今回はフラットデザインの新たなトレンド、ロングシャドウエフェクトを簡単に作れるツールを紹介いたします( ˘ω˘)

ロングシャドウエフェクトとは

斜め45度に長ーくのびるドロップシャドウ ぼかしのない、シャープなドロップシャドウ を利用したエフェクトのことです。
フラットかつ立体的な処理を考えたらこうなったらしいです( ˘ω˘)☝

Long Shadows Generator(WEBツール)

link1

テキストから簡単なアイコンまでcssで生成してくれます( ˘ω˘)☝

Long Shadows Generator(PSD)

link2

テキストやアイコン、どんな形でもロングシャドウを生成します( ˘ω˘)☝

LONG SHADOW GENERATOR(PSD)

link3

いろんな角度から作れるジェネレーター。
上下横のシャドウは使う道はあるのか謎ですが…( ˘ω˘)?

Long Shadow Photoshop Action(PSDアクションファイル)

link5

アクションひと押しで生成。便利ですね( ˘ω˘)☝

Long Shadow Maker

link4

シャドウの伸び具合を調節できるのでよいですね( ˘ω˘)<イイネ(裏声)
こちらは有料で4ドル。日本円で約391.48円(2013/8/27のドル相場)です( ˘ω˘)☝

まとめ

まだまだデザインするには使い所が難しいロングシャドウですが
色々と試していって見合ったデザインを見つけて行きたいですね( ˘ω˘)ムズカシイネ

 

あと有料は質がいいですね、おねだりしたいですね( ˘ω˘)オネガイシマス

この記事を書いた人

はやち
はやち フロントエンドエンジニア 2010年入社
フロントエンドエンジニアのはやちです( ˘ω˘)☝
以前までは顔隠しておりましたが思い切ることにしました…。
相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌
今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ