Main content begins here

The Squiggly, Wavy, Curvy Vector Line

Saturday, March 7, 2009

Wavy Line Hell

There have been only two or three occasions in my career when I've needed to create a curvy vector line for a design in Photoshop. Each time it took me much longer than I anticipated. I'm not sure why, but what seemed like obvious approaches before always turned out to simply not work as hour upon hour went by.

Vector Curvy Line Solution

I finally found a way! The best method I've found so far is to use the Line Segment Tool in Illustrator to create a straight line. Then use Filter > Distort > Zig Zag. Be sure to select "smooth" for the line. Be careful not to use the ZigZag inside of the Effects dropdown but instead confirm you are in the Filter dropdown before applying the distortion.

You should be able to copy/paste into Photoshop as a smart object now. I'm glad this has turned out to help so many other folks!

Blog terms:
18
 

Comments

Thanks

I owe you a huge thank you!! I'm a huge fan of the blend tool in Illustrator – use it all the time. I also dig zig zag. I stumbled on to your tut and it inspired me to combine the two and holy cr*p! For months I've been looking for an app or filter that generate's guilloche patterns like the one's found on currency. Don't need it anymore. I can create my own. Mine eyes have seen the glory. I can't believe I never thought of combining those tools before. I just had to say thanks.

Thanks

Great tip! Thanks for the CSS update too!

Awesome!

Life saver. Thank you!!!

Cant find filter menu

is there no filter in AI CS4?

Dunno

Not using CS4 yet myself. I don't know the answer, sorry.

CS4

In CS4

It's in Effect->Distort & Transform->Zig Zag..

Thanks for the tip, saved me a heap of time!

wonderful! thankyou very

wonderful! thankyou very much

Help!

Hi! This really helped me create a wavy line in my logo, thanks.

But now I have created my wavy line, if I group it with my logo and then resize the whole lot the waves retain the formatting from before and don't resize proportionally - is there a way to stop this from happening?

I'm assuming you mean you

I'm assuming you mean you grouped it with your logo while still in Illustrator...? Not sure how to avoid your issue. If you resize it in Illustrator the curvy line does get a bit funky.

But if you copy to clipboard from Illustrator at normal size and paste it into Photoshop as a Smart Object, then resize in Photoshop, it resizes with the ratios intact. Maybe you can save it back out from there as a Photoshop EPS or somehow get it back into Illustrator if you need to.

even better

after you made the squiggly line with the filter, choose Object -> Expand appearence and it becomes a full vector

THANK YOU!!!

So simple, yet amazing!

You rock!

Awesome! Thank you very much.

Wonderful you =)

Thank you for this, it helped me alot today!

You are amazing!

Thank you, I have been looking for a simple fix like this!

THANK YOU!!!

This was a lifesaver, thanks a million.

Thanks!

This was so extremely helpful and will save me hours of frustration! Thanks so much!

SWEET!!!

I've used illustrator for YEARS and it's part of my profession, but just came upon the need to create a wavy, consistant line. and was like... what? There has to be an easy way to do this and you helped.

Thank you!!

This helped me so much today! I spent 3 hours yesterday trying to get my lines smooth and curvy...this took less than 5 minutes! You're awesome!

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <h2> <br> <img>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.

I am very pleased with the outcome of this project. A solution that compensates for critical deficiencies in IE support for CSS was provided by John, enabling us to push ahead with a strategy that may not have been possible otherwise. My advice to you if you're considering working with John Barrick on a project is: Do it! I intend to continue working with John on this and other future projects.

Lane MobilSense
Copyright ©2001-2014 Way Cool Web Design LLC. All Rights Reserved.