PSDファイルでできるんだ!要素がぷるるんとアニメーションでくっついたり離れたりするエフェクト -Photoshop Gooey Effect
Post on:2016年3月14日
これ、くっついたり離れたりするのはCSSアニメーションのデモではなくて、PSDファイルでスマートオブジェクトを移動させているとこです。

Photoshop全体でも撮影してみました。
くっついたり離れたりは水平移動だけでなく、自由な方向に対応しています。

ハメコミ合成じゃないよ
「Gooey Effect」はネバネバ・ベタベタくっついたり離れたりする動きで、最近のUIデザイン、ボタンやナビゲーションなどにも使われているのをよく見かけます。

サンプル: Creative Gooey Effects

サンプル: Creative Gooey Effects

サンプル: Creative Gooey Effects
これらの動きはSVGフィルターで実装されているのですが、基本的なフォームをPhotoshopで繰り返すことができたらと考え、作成されたのがこのファイルです。
PSDは下記ページからダウンロードできます。

Gooey EffectのPSD
使い方は簡単です。
- キャンバス上に2つ以上の要素・シェイプを作成します。
- 使用する要素にブラーエフェクトを少し適用します。
- ぼかした要素にブライトネスとコントラストのフィルターを加え、コントラストを最大にします。境がはっきりするまで、フィルターは繰り返してください。
- 要素を動かすと、ネバネバ・ベタベタするGooey EffectがPhotoshop上で楽しめます。
sponsors