📚LAST CHANCE to register for our 4 week Intro to UI Design & Figma Fundamentals course. Sign up now.

close
Shot by #<User:0x000055e185fcc9b8>

Art by Ryan Hammond

How to create dreamy color blurs (an Adobe Illustrator tutorial)

Ever wonder how designers create those blurred grainy gradient-like effects in Adobe Illustrator? Today, we’re sharing a quick and easy Adobe Illustrator tutorial to help you achieve the same look and feel. These dreamy color transitions and gradients have become quite the trend this year in graphic and web design, and it’s easy to see why.

Unlike traditional gradients that we are accustomed to creating using the Gradient Tool, this new technique makes use of Adobe Illustrator’s Mesh Tool—allowing for way more control and an infinite amount of unique color possibilities. Take a look at some examples:

  1. Gradation 04 blur branding color mixing flat gradient gradient color identity noise sky
  2. Datalands Site art creative data data viz datalands dataviz design illustration infographic information
  3. Color Play background blur branding branding design color design gradient identity noise visual identity

Row 1: Ryan Hammond, Script & Seal, Ryan Hammond for Herefor Studio.


How it’s done

We asked designer and partner at Herefor, Ryan Hammond, to break down his process for creating these blurry looking gradients. Ryan was kind enough to share his technique as well as a step-by-step visual of the process. Let’s take a closer look:

1. Start with a base color applied to a shape, then using the Mesh Tool in Adobe Illustrator, begin adding color. A color can be applied to any anchor point once you initiate the Mesh Tool within that shape (the hot-key for the Mesh Tool is ‘U’). You can create a more complex gradient by adding anchor points.

2. The process beyond that is a bit of a hybrid between finger-painting and watercolor. You can push and pull color through the shape, but overworking or using certain colors can turn it into mud. You can always delete anchor points within the shape if it gets out of control.

3. That’s it! I sometimes apply a little texture to it in Photoshop afterward.

1d44d08d756a9b1a996ac5e0eddf9752


Examples to inspire your designs

Now that you know how to start creating dreamy color blurs in Adobe Illustrator, here’s a curated collection of examples to inspire your next design. The color blur effect looks wonderful in many different applications from graphic design to branding, UI design, and more. We encourage you to keep experimenting with all of the endless possibilities!

  1. HM Architecture Concept architecture blur color concept elegant fade ios mobile typography ui ux
  2. Art exhibition animate app art blue clean clear daily 100 design dribbble service simple design typography ui ui ux design uidesign uiux ux ux design web white
  3. Nike | UI Mobile Version blur blurred buy cart checkout color gradient mob mobile mobile app responsive shop shopping cart style
    Shot Link
  4. Another thing blurs branding color gradient identity mint movement primary
  5. Cotton Lake cotton gradient graphic lake logo minimal minnesota simplistic typography
  6. Be (seltzer) water, my friend. brand branding can gradient logo monogram script seltzer
  7. Please blue gradient please red script texture type
  8. Evolum brand branding chakras colorfull emotion evolution festive flow growth identity logo logo design meditation minimal
  9. spike: homepage app courses e-learning edtech education identity landing landing page memberships online product design product page promo site teach visual identity web web design webinar website
    Shot Link

Row 1: Kyle McDowell 🤘🏼, Valery Cheplygin, Giga Tamarashvili for Bold Monkey. Row 2: Ryan Hammond for Herefor Studio, Aleisha Samek, John Oates for Focus Lab. Row 3: Jacob Etter, Omnium, Vladimir Gruev for heartbeat.


MORE GRADIENT RESOURCES

Find more Process stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.


Previous
Next