PSDファイルでできるんだ!要素がぷるるんとアニメーションでくっついたり離れたりするエフェクト -Photoshop Gooey Effect

これ、くっついたり離れたりするのはCSSアニメーションのデモではなくて、PSDファイルでスマートオブジェクトを移動させているとこです。

Gooey Effectのアニメーション

Photoshop Gooey Effect

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

PSDのアニメーション

ハメコミ合成じゃないよ

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

Gooey Effectのデモ

サンプル: Creative Gooey Effects

Gooey Effectのデモ

サンプル: Creative Gooey Effects

Gooey Effectのデモ

サンプル: Creative Gooey Effects

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

PSDのキャプチャ

Gooey EffectのPSD

使い方は簡単です。

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

top of page

©2016 coliss
o