Liquid / Fast Icon Tutorial

Liquid / Fast Icon Tutorial

Hey, guys!

This week I decided to go with the how-to and make a tutorial about the vector icons with the illusion of moving. Or as I call them – liquid, because these icons look as if they are melting.

I haven’t worked on this style for a while now, however, I get a lot of requests to put together a tutorial on them. Your wish is my command!

First of all, I can tell from my own experience that it’s really difficult to create a whole set of icons in this particular style alone, and it doesn’t certainly work for every icon. So use it at your own risk. If you ask me, in my opinion, it looks best with stand-alone illustrations like this one I did some time ago:

Earth Illustration

Before we start working on the whole melting/liquefying effect, we should create a glyph icon, or use the one from the archive. For this tutorial I’m going to use the price tag icon I created recently. I suggest taking the icons with rounded corners, because they go better with the rounded stripes.

tag icon

This style is great for creating the illusion of a fast moving object!
If you want your icon to create the illusion of movement, tilt it to the right! Don’t be afraid to rotate it by 45 degrees to increase this illusion. It will give that dynamic feel to your icon and show that it’s going into certain direction.

Since the price tag is already tilted, I don’t need to do it once again, but you can check it out and see how it looks like here:

wooshy icons

Quick tip: Did you know that direction in which you rotate your icon is incredibly important? For people from the left-to-right reading countries, human brain perceives the right facing/tilted icons as moving forward, and vice versa. Keep this in mind when designing icons!

Time to add some liquid stripes!
Adding stripes is quite easy. Follow the instructions below, and you will be there.

First of all, draw three or more rounded rectangulars and stack them on top of each other to see how big the gaps will be. Check the placement of the elements. Please notice that I’m working with a white background, so I purposely coloured the middle shape white to see the end result from the start.

pixel view

When you are happy with the placement, simply join the sticking out shapes with the main icon, and then extract the stripes that should go inside from the overall shape. These are the basics of creating this type of icons.

liquid tag icon

Don’t forget you can pump up the inner elements with this effect too!
It might be a small detail, but it will give so much personality to your icon. Try experimenting with the placement of the stripes and you’ll be surprised how many new sweet spots you will find!

fast tag icon

There is yet another way to spice things up and make your icons more interesting. You can achieve it by adding a few little finishing touches. Take a look at these drops, for example. They are not crucial for the identifiability or delivering the message, but they certainly give the icon some character.

fast tag icon

Overall this technique is pretty demanding and can’t be used everywhere. But it’s perfect if you need to illustrate some motion like in our case – a quickly moving checkout icon. Just don’t overuse it! But most importantly – have fun!

I would love to see what you can come up with working in this style. If you decide to create something in this stylistics, hit me up with your works via Dribbble or Contact Form.

Oh, and in case you want to check out the source files (.ai) for this icon, you can Download it from here.

Stay awesome!

icon-design-guide

Pin It on Pinterest

Share This