Illustrating the Flower Pattern 245
Since Web Designer Wall was launched last week, I received several emails regarding on how I made the main illustration background. I thought I should put up a quick Illustrator tutorial so everyone can share. This article will outline the main steps on how I made the flower pattern in Illustrator. Hopefully, this can answer your question.
1. Sketch
Always draw your illustration on paper first. This will save your time.
2. Trace
The illustration was traced in Adobe Illustrator using my favorite tracing technique. First, import the scan in Illustrator and set Layer Opacity to 20%.

3. Coloring
After you've done the tracing, go to Colourlovers.com (or any color palette sites) and find the color themes that you like. What I did was copy the sample image from the site, then paste it directly in Illustrator.

With the Eyedropper tool active, select the path, then click on the image to pick the color. That's it. Quick and easy.
Nice tutorial, clear & simple instructions… that’s what we need… I’m gonna try it right away cause I really like what I’m looking! Thanks.
Hey Guys! Great tutorial again. I came across your site when looking for the abstract background tutorial. I wanted to let all those that didnt know that there is a technology developed by adobe for color palettes. Its called “kuler”
http://kuler.adobe.com/
And it lets users post their color schemes and gives the values in CMYK, RGB, LAB etc. great resource. You can also download the palettes as .ASE files (swatch files) directly into your CS applications!
Great tutorial guys. I love the background image of this site. It is so unique!
I’ll definitely be using the tips learned from this tutorial in some future web projects.
Colourlovers is a great resource, but I find myself at Adobe Kuler more frequently these days.
You guys are bitchin’ I digg ndesign and this new site! Rock on!
I was wondering why you didnt make your life easier by using live trace or loive color?
I really doubt you’d be able to get nice clean lines like this with live trace.
Wow, i ordered my designer to create some flower effects for our new project. I hope this tutorial will be useful for him.
Thanks for your work. Really creative design and interesting site. Regards! )))
Thanks for the encouragement, everyone :)
Do you have any recommendations for how best to learn to use the pen tool properly? Should I get a tablet or will I be fine with a mouse?
(hint hint – great topic for a future tutorial!)
Thanks.That’s very good…
Durmak Yok Yola Devam…
Nick, some amazing talent you have. Combine it with functionality promoted by the likes of Jakob Nielsen (www.useit.com) and you’d be unstoppable. Cheers.
Inspirational once again. The tip about always drawing out designs by hand is helpful too. Thanks.
thanks for not dumping the scan into live trace. nice work.
I just have to work on step 0, “Learn to draw.” :-)
Hi!
I’m suren.I won to be a web designer.can u help me.please
send me illustrate photo file.
Suren.
This is an outstanding tutorial about tracing images in adobe illustrator. Thanks for sharing it with all of us. By the way, the background image is really very nice.
You know what… this could be done with some old cheap wallpaper found in 1-dollar shops, if you can’t draw. ;)
your site is amazing – i love the detail in the comment box. Do you code all of your CSS / WordPress PHP yourself? amazing
Hi! tanks for sharing :)
I really love your page, it’s so beautiful, sometimes i visit it just to stare at it ^_^!
I am chinese.I like you desion and i aslo be interesting in illustration
bu I have never learned to paint.how can i do
Good tutorial! I’ve done the same too when it comes to draw a vector drawings.
to dunk js : usually Chinese people are very talented when comes with art, for you I think keep more practice + enjoy your drawing, dont give up!