Photoshop Gooey Effect
The story behind: Last week at our agency (umwelt) I started developing a new site, including a sales funnel chart. I had a quick chat with the designer who thought it could be a scrolling effect with the ever popular “Gooey Effect”. I made the effect. Everybody was happy.
Through the process I kept the designer in the loop. At one point he asks me how the effect was made. I lost him at SVG filters and thought maybe Photoshop could replicate the effect since, in it’s most basic form, it is two blurred elements and some contrast. I then created a new document, made a couple of paths with some feather, added a contrast filter — which didn’t do much. Then I replicated a couple of contrast filters. To my surprise the effect was almost perfectly reproduced.
A quick How-To:
1. Create a minimum of two element or shapes that you want on a blank canvas.
2. Blur the elements or apply feather (will be cancelled out by the contrast), for elements like typography i recommend converting them to smart objects.
3. Add a brightness/contrast filter above your blurred elements and crank the contrast to max. Duplicate the filter until you have crisp lines.
4. Move your elements around and watch them goo together.
Quick update:
Download the sample PSD file here: http://goo.gl/yfzw9G
Thanks to Mads Kjær for proofreading.
