Photoshop Gooey Effect

Christian Werther
Mar 9, 2016 · 2 min read

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.

Animation of the sale funnel chart

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.


Photoshop effect

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.

Christian Werther

Written by

Senior Product Designer & Associate Partner @umweltdk

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade