PSDファイルでできるんだ!要素がぷるるんとアニメーションでくっついたり離れたりするエフェクト -Photoshop Gooey Effect
Post on:2016年3月14日
これ、くっついたり離れたりするのはCSSアニメーションのデモではなくて、PSDファイルでスマートオブジェクトを移動させているとこです。
![Gooey Effectのアニメーション](http://coliss.com/wp-content/uploads-201601/2016031401.gif)
Photoshop全体でも撮影してみました。
くっついたり離れたりは水平移動だけでなく、自由な方向に対応しています。
![PSDのアニメーション](http://coliss.com/wp-content/uploads-201601/2016031403.gif)
ハメコミ合成じゃないよ
「Gooey Effect」はネバネバ・ベタベタくっついたり離れたりする動きで、最近のUIデザイン、ボタンやナビゲーションなどにも使われているのをよく見かけます。
![Gooey Effectのデモ](http://coliss.com/wp-content/uploads-201601/2016031404-01.gif)
サンプル: Creative Gooey Effects
![Gooey Effectのデモ](http://coliss.com/wp-content/uploads-201601/2016031404-02.gif)
サンプル: Creative Gooey Effects
![Gooey Effectのデモ](http://coliss.com/wp-content/uploads-201601/2016031404-03.gif)
サンプル: Creative Gooey Effects
これらの動きはSVGフィルターで実装されているのですが、基本的なフォームをPhotoshopで繰り返すことができたらと考え、作成されたのがこのファイルです。
PSDは下記ページからダウンロードできます。
![PSDのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016031402.png)
Gooey EffectのPSD
使い方は簡単です。
- キャンバス上に2つ以上の要素・シェイプを作成します。
- 使用する要素にブラーエフェクトを少し適用します。
- ぼかした要素にブライトネスとコントラストのフィルターを加え、コントラストを最大にします。境がはっきりするまで、フィルターは繰り返してください。
- 要素を動かすと、ネバネバ・ベタベタするGooey EffectがPhotoshop上で楽しめます。
sponsors