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%.
Then trace it with the Pen tool.
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.
Now fill the path color by using the Eyedropper tool.
With the Eyedropper tool active, select the path, then click on the image to pick the color. That’s it. Quick and easy.
wooncherk
thanks for this tutorial… i hope i can draw as good as u… my drawing is so awful… haha…
Design Shack
Great, simple tutorial. Now featured on Design Shack!
Jenn Vargas
Great tutorial! Now if only I could get the pen tool to cooperate with me! Looking forward to some great posts in the future!
Timothy Diokno
Colourlovers.com! Ah yes! Just signed up last week!
Calvin Chan
thanks for the tutorial. Colourlovers.com looks like a very useful site!
Darren
Wow that must have taken a while. But a very nice design none-the-less
Fatboyjim
@Jenn
I too have problems with the pen tool.
Great tutorial, I had always wondered how it was done, my graphical skills being poor. Could the same be achieved using live trace or would this require you to go around grouping all the paths in order to fill them?
kevin
From personal experience – it’s getting good with pen tool that’s the hardest.
But once you nail that down…the following is much easer, obviously.
good tutorial – keep up the great work!
Heri
I like tutorials that don’t drag on by explaining every little detail just so incompetent users can follow along. Thanks for making it practical – I’m an Inkscape user myself, and your tutorial was more then easy enough to understand and apply using Inkscape even though I’m not familiar with Illustrator.
Stephen
@Jenn: The pen tool just needs some TLC. Once it begins to play nice you’ll wonder how you ever did without it. :)
Bene
I really suck at drawing and my scanner it’s not quite good :/ Awesome tutorial.
tebo
Great illustration, great tutorial, great job!
Nacho
I love colourlovers too. Is a great source for palettes.
Ryan
A very nice and concise tutorial. Thanks for sharing how you achieved such a beautiful result. I too must brush up on my pen tool skills as well as Illustrator skills period!
Any hope on a tutorial about the watercolor effect in your background?
scart
perhaps i can do it easy on coreldraw. i’m not comfortable with illustrator :D nice tuts though :)
Nathan Chapman
Thanks for getting back to my email, I have wanted to do this for a long time but havent worked out how. Great tut by the way.
Herman Tho
Great tutorial. i hope u also provide the water effect
LaurenMarie - Creative Curio
Hehe, so now we just have to learn to draw with pencils. Another vote for seeing you write a watercolor tutorial!
Respiro Media
Outstanding work! I simply love it… :)
Jermayn Parker
I remember at school, we called illustrator “Frustrator”, a very apt name I would say.
BUT seriously a very good tutorial and love it
Bian
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.
Nate
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!
Mark
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.
Furious Photographers
You guys are bitchin’ I digg ndesign and this new site! Rock on!
Lexi
I was wondering why you didnt make your life easier by using live trace or loive color?
Andrew Power
I really doubt you’d be able to get nice clean lines like this with live trace.
Sonic
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! )))
Jenn Vargas
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!)
Levent Veysi
Thanks.That’s very good…
Durmak Yok Yola Devam…
Rick Sloboda
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.
Jason
Inspirational once again. The tip about always drawing out designs by hand is helpful too. Thanks.
pete
thanks for not dumping the scan into live trace. nice work.
Matt Cook
I just have to work on step 0, “Learn to draw.” :-)
Suren
Hi!
I’m suren.I won to be a web designer.can u help me.please
send me illustrate photo file.
Suren.
PHP Scripts Directory
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.
Fireproof83
You know what… this could be done with some old cheap wallpaper found in 1-dollar shops, if you can’t draw. ;)
Alex Newman
your site is amazing – i love the detail in the comment box. Do you code all of your CSS / WordPress PHP yourself? amazing
Paula
Hi! tanks for sharing :)
I really love your page, it’s so beautiful, sometimes i visit it just to stare at it ^_^!
dunk js
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
eshark
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!
ling
could i have source of this image ? means AI. file !
thanks for share
Ling
Ranjani
Thanks a lot for sharing!I really love your page.It’s awesome and looks quite cool.
Livingston Samuel
Great tutorial. Thanks for sharing. I’ll definitely try my hands on this. :)
MellieMel
Interessting stuff. Im bizzy making my own flow illustration at the moment
katherine
wicked stuff! I have only recently started working in illustrator and I’m in love! Most likely because I’m in love with vector art at the mo, but illustrator is the king of all kings/queens of all queens.
Carly
Wow… This website captures everything that I want my website to be… I am glad to have found it… The flowers and colours and paper theme are just lovely!
The tutorial looks really helpful… I might have to give it a go… I’m a bit shakey with the pen tool though… must practise!!
GadgetMuse
Amazing. I am officially in love with the design of your website. I mean, wow!
huda
Hi, you did a great job with tracing that wonderful sketches!! ;) but i really wonder how do you trace the curves? because it looks clean..
Christina
I love your site and it’s great to see you in Web Designer this month!!!
Great work :)
Mai
i LOVE it!!!! now i know i NEED to get adobe, hehehe, i’m working on a scholarship Design Contest and this will help me alot!
nafeesa
thank you so much for this tutorial. i’m kinda weak at tracing desings or image at Ai. but i hope to do good now after learning this technique.i’ll definitely send you my work after learning this tutorials. your site is just great and awesome. i love it.
gonzo
you have just explain in easy words what a palette was used for! i have found many many palettes and never got a clue what they did with it… nice!
http://www.colr.org is a good one too!! plus you can upload a pics from you galleries (eg flckr.com or else photobucket) and it will give you the colors in pixels on the pic uploaded! good site!
and this WEB ROCKS my world from YESTERDAY onnnnnnnnnnnnn
Brú
Great Job! I love this website! :D
Nathan
Amazing amazing tutorial! I need to favourite this one!
Egor
One of the greates site that I have ever seen! Thank you for inspiration!
Neo
Brilliant! I love it!
Alex R.
Thank you, Nick La! How old are you?
aditi dhamija
fantabulous work!!!
accidently discovered this site but from now on … this my favourite WALL now !
Thomas
Been searching for tutorials like yours for ages! Thank you so much!
Faisal
Hey Nick,
Art and Graphics design has always been my passion, however, never really pursued it. Great tutorials and site. If you could please suggest some courses at Humber which I could take part-time to improve my skills.
Thanks for your inspiration.
Faisal
Heather Marie Miller
Gorgeous. This type of art has forever been elusive for me and I am pleased to have stumbled apon your website. Your website is lovely indeed!
Cheers,
h.
Alana
Grate tutorial. I can not draw on paper but i love the pen tool. Thank you.
5ivedance
I colored my work by a colorpick tool ,and copy the color code to the illustrator,
it is not easy to use, I’ll follow your method. Thx verymuch.
DEEPAK RANJAN
maam your tutorials are very effective and inspiring its a great website
yongming
i like it a lot. it’s really good.
AudioPill
Man, this is the most beautiful WordPress themes I ever saw!
Can you advice how can I build one just like this?
Thank You
kamal jeet singh
Very gud tutorials i ever seen
raff_Lin
Thank you, always wanting to know how a simple way to do this T_T
erica stjohn
For a while, I have been trying to learn how to create art like this in photoshop, and it hasn’t worked for me. Yesterday, I got Illustrator and I can finally give this a try! Thanks SO much for the tutorial! I am still trying to figure Illustrator out and this helps tremendously!
Arazöz
I can not draw on paper but i love the pen tool. Thank you
Sean Payne
Came across your site in some research on how to do something. Thought “that’s beautiful”, and kept rolling. Then, after slogging it out learning some basic coding, and sitting down to a blank screen on which I saw nothing, I thought I’d drink a few beer and surf for inspiration.
Came on this again, by random, and now I know exactly the next resource I’m going to be skulking around, between stints at W3Schools. I’m going to be going over everything with Nick La’s name on it.
Kelley
WOW! you’re amazing. I’m just learning Illustrator and I can’t wait to try this out!! Thanks.
Lekan Onilede
Its great to know that sombody out there is willing tto share such huge arsenal of knowledge. PLS how do you create your glow/particle fills around the phoenix & on its tail. THUMBS UP once more.
anis shahnewaz
thank you
sujith prasanna
wel come
retratex
Nice drawing.
Huuhkaja
That is so stubididdididid!
Fort Myers Photographer
I know this is an old post! But this is really a great tip for any artist! Thank you!
Design Team from India
Design team from india for all your design work.
APOKA
Has you heard of Live trace ? Even before there was streamline.
Achi
I just wanted to let you know that your sites are very inspirational. I’ve read multiple articles and hope my next design can be half as creative as yours. Thank you for all the time you put into your articles. :o)
~Achi
Ipec Group
very good technic to make this vectorel and real… thank you
Alexa
wow that is really cool let alone how hard and long it takes 2 color it
Aleks
On the first sight, it to draw simply!
But at me nothing it turns out. I can not master Illustrator in any way
I draw only in the program Adobe Photoshop!
Excuse for bad knowledge of the English language.
My site on Russian….
Good luck!
Lindsey Richards
What was the dpi you saved it as?
What is the usual dpi for a web background anyways?
steelfrog
Lindsey Richards: Use 72DPI for web graphics since monitors cannot display higher. I usually scan around 300DPI or so, but you can go much, much higher.
Flavia
This is an old post but, I had to comment.
There’s a free program called WinTopo, used in engennering, that trace your sketch by itself, you don’t have to trace it manually!
And it’s a really dumb program, really easy to use.
j3media
HI,
you can also use the fantastic tool that is live trace in illustrator CS2 & CS3. (i think its on earlier versions but it doesnt work as well.)
naveen
i want basic flower illustration with example
mohammed sadek
ok thank
Flash Development
Great post, going to use same techniques in flash photo gallery.
wawa
so beautiful…
Web Designer
Good Technique, best practice to start with illustration on paper.
Web 2 Developer
clasi
wow!
nice
sho
luv for this sketch!!!
so..beautifulll………………….
pegah
hi,thank’s about youre good subject,& special color.art is life….
cynthia
Very cool tutorial! I just found your site and am bookmarking and returning when I have a little more time.
NIMMI
hi m a carpet designer……..(CAD).i am working on adobe photoshop…..if u want a freelencer…thn plz contact me…ur design is gud…….thanks….-nimmi
designerlistic.net
mmmm….nice, web design graphic design flash are the most i liked
designerlistic.net
Rafael
Now this is really helpful especially for someone like me who is still in the learning process. Thanks a lot. You’re doing a great job on this.
manu
Awesome Work! fantastic! i like this style so much… thanks a lot for inspire me.
rakesh
i lov you rakesh jha
eris
uhhh..that’s very beautiful….
the best picture…
nice day
rebecca
hi i am rebecca and this picture is beautiful i collect these kind of photos so if you see one send it to me please thank you
eiei
i love this
fathima
hmmm! i love it!!!!!!!!!!!!!!!!1
khalid
hmmmmm….. i love vector graphics could u send me some graphics by mail i”ll be thank full to u
rodrigo
it’d be easier with a livepaint group. just select all the paths, turn them into a live paint group, select the color and drop it with the bucket
great tut
kristi
i want 2 downld this software so dat i can do paint like dis…….
mathavan.p
This website is very different.It is useful for arts mans.I appreciate this site.
ntas
i love this
FZ
hi i’m FZ
this pictur is beauty …… and also this webside…
thanks…….
YAJAIRAPEREZ
hello i like to flower
bye kiss I ‘am Puerto Rico,Mayaguez
so bye
..
this website is TOTALLY amazing :)
iffah raayma
hi hmmmm!
i think it is lovely!!!!!
irina
i love the website … sketching is the best!!!! ;)
indra
Hi,,,,,,,,,,,,,Bunga adalah Inspirasi dari seorang Cew’_
oCey kan?
Geri
This site is super!!!
It shows it in such a simple way but has such great effect! This has helped me a lot with my graphical design course and study. XD fab!
kkhushhali
superb….aafut…
aji
i love your site it is beautiful site i am also the designer
but my designes mostly for portal
commodityonline.com
brilliantstudent.com
infomagic.com
gayatry
I AM GAYATRI.
I LOVING IT.
zia
i love your site it is beautiful site i am also the designer
but my designes mostly for portal
zia
add me
[email protected]
if u want me to …….f off lol
zia
:)
zia
:@ :@ :@ :@ :(:)
sanat
thanks
Tyson
Thanks, and nice site.
kassandra
hay you guys I am so proud of the art we IM so glad we have a web site like this
kassandra
hay you guys I am so proud of the art we did IM so glad we have a web site like this……. sike……… . .jk.
nasrin
hi very very very beautiful
D_E_R_M_A_N
thak you
Rifas
wow very nice…
Muhammad Irfan
This is very beautiful & very very nice design website.
fanig4
megz
wow it looks amazin i wish i could draw like that
Patty
I was finding a flower image for me to draw and I saw your illustrations, I admire viens and flower patterns and I make them as backgrounds. I don’t use adobe photoshop (coz I don’t have time to install it, long story). Anyway, I love your site. Every single bit of it… Love the design… ;)
Lizubiton buxon
THis is crappy and you smell bad
Shel
Really nice designs!
firewoini
send me please
Embem
I am inspired. I want to design my own website, maybe I can …….. Thanks
christie
great post! thank you for sharing the colourlovers.com trick. makes life much easier.
mbreti3gut
Simple and useful trick. Thanks
tiny
Wow, how long did it take you to trace all you hand-drawn lines?
Keith D
Nice
I’ll give it a try using Adobe Fireworks.
Result is very impressive.
Keith D
charlotte
omg this site is sooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo gd xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
saranya
hello i like to flower could u send me some graphics by mail i”ll be thank full to u. this pictur is beauty …… and also this webside…
thanks…….
this website is TOTALLY amazing.
Shar
MY goodness! This is cool! I just got illustrator and this one just helped me out a lot since I like to draw my designs on paper first!! Hope you have more Illustrator tutorials soon!! I’m starting to love Illustrator more and more!
sothearoth
I would like to learn from you.
Thank you.
Nagoorammal
very nice……
pls send some desighnes me ……. Thanku so much
husna
pls send me some good images of ur work.
Thank you…
Allison
Hello!
I love your flower design. Would like your permission to use it on my business cards. Please contact me with more pictures that I could use of this pattern!
Many thanks!
Allison
husson bano
thank you for offering of friendship ok now i am gooing to contect with you
ahmad
comment Guideline
Lin and Jirsa
Awesome Tutorial! Learning new things every time i check out your site!
jeromy
I love the artwork. I am making name cards for my wedding and wanted to use the sketch (step1) as a background. Do you have any objections to my using it if I cite this website?
cennet
Thanks Thanks What’s the problem here? Google could bury the meager profit number from even the biggest media conglomerates.
cennetevi
these are awesome!
thanks for putting in the effort to get this list together http://www.cennet.gen.tr
cennetevi
Thank =)=)=) you http://www.cennet.gen.tr webdesignerwall Thanks
selva
is a good way
Marie
fantastic tutorial
Bill
thank you for offering of friendship ok now i am gooing to contect with you
milu
good pictures
bagsin
fantastic tutorial, thanks
Photographick
Great article and so easy to follow. Thanks!
manola
very coool .
thanks
ppar
Thanks:)
gaga
hasssy hdn dyr yufuryhsnbfd7 ijreufufjngyuf b jcgbub hm, did hryj hfdnjrhd s furnmuigrfnirhr ngrn kgjlrkrekgjfugernrejghrngjy rnrhwakfiakeaa8eKWLLjhf iihrhieuhiureui3whuiw nuihfuindjfhuireujejdhuidjdiewuiwejuijre uiejewroiewriuhfjiehfjidksehruiewjeuhejewhuifweiufwuiweuiruiewuiewruiyuiey eyiewriewuyewiurweiuyewuiweyiue uiew ew
eihewiuewiuheuihriuehwruiwihuewuiewewuihewiurhewui ehiruhiurheiurw iejwuewhwieu ui huiewhueiwlwehilwe
ewhuier jnf wejhuewuirewbrywerrw ijhrewuewg hewr bewuiewhrewujhr784wrhkjwruiejkreurhewjhewuirhweuirhwej ewurhewn j
rjghrhrejhuirhr iio o o oo o o o krgjiregirgror oero ro o o o rejhgiurheuigrehuigrehiuerhuireiguhdrfgreg
ergrgerlogerjgioejijretiieurtoei erkgj nohjiv
Cyrus
Great , Illustrating the Flower Pattern
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com
Kate Nickerson
The illustration looks beautiful, but it looks like it took forever! I don’t see how that could be considered “quick and easy”! Especially the tracing part.
Eviilicious
Well, this certainly is a smart way of digitalising hand-drawn images! :D
After scanning the image, I always edit it with Photoshop, putting it into black&white mode etc. Very basic way of making stuff digital, so this is certainly helpfull ;) Thnx!
Mike
I don’t konw how to draw
panel radyatör
this is wonderful i alwasy curious this thanks
Habib
i want some designe
satya
satyasuseela
drawingthien
beatyful!
panel radyatör
nice thanks
kiki
beautiful!
What font is this? I have been looking everywhere for it.
Eyerusalem (Jerry)
Wow…., nice. I like it very much
vincentdresses
The designs showed here show what simple and tasteful design is all about. Another one to consider
Kanika
Hey…thanks for explaining, well can u tell us ,how could you done the background in pastel colors in this site.:-)
Dana Gray
I am trying to make a wedding card announcemetns I could really use some help in getting designs templates, fonts, flowers shapes for adobe photoshop, I don’t know how to draw either, I’m really lost, Thanks for all your help. Sincerely, Dana
kumar
i need illustator design
Mehedi Hasan
It is very nice art,
Thank you
GCLUB
I try to follow the examples already. Results have recently been encouraging.
Web Design
wow i love this!!! thanks for sharing
Raghu
It is very nice.
Raghu
It is very nice art,
lollipoppy
I love it thaaaaaanks!!!!!!! <3
Pulkit Om
I found this site very useful for making good flower sketches for my site. Thanks for your help.
zeeshan
great job!
zeeshan
i also want to know that how we can make designs like that! really impressive
Send Flowers Pakistan
i appreciate your effort!
Send Flowers Pakistan
very nice job! impressive!
Send Flowers Pakistan
god bless you you made my problem solve. nice art!
Send Flowers Pakistan
brilliant! thank you for sharing!
Send Flowers Pakistan
asasa
flowers pakistan
very nice! great piece of art.
flowers pakistan
asfdsf
Progs4u
Thank you so much ..
You are very cool
Youtube giriş proxy
Thank you nice post..great job.
kate
kwl
nice flower patterns
i traced it and i told ma frends that i did it but they didnt believe me they knew that i traced it
khay
it’s cool.. great post!!
Reo
i was just wondering if you can also use the freedom pen tool & if you can how can you.
i am not very good using the pen tool, i would rath use the freedom pen tool and i think this technigue is amazing & would like to try it out (:
thank you :3
lumi
Thank you!! Very helpful, great technique and great explanation. And looks beautiful!!
hamid ziaee
Flower is beautiful
apple
nice flower pattern thank you
preety girl
Nice flower ….
sumaira
kindly detail send me
tütüne son
i traced it and i told ma frends that i did it but they didnt believe me they knew that i traced it
tütüne son
Thank you, very nice. However, some files can not be displayed on your website, be aware of.
All Vectors
I do know most of the ways mentioned here, but I have never used some of these :). Thank you.
Juno Mindoes
I definitely see why Apple want to skip this step and move directly to streaming media, but white iphone 4 not there yet
Henry Peise
The modern and delicate makes iphone 4 white so charming that even me, want to own one. But what i can do now, is to wait the price to decline.
supratall
Thank you!! Very helpful, great technique and great explanation. And looks beautiful!!
mikwillson
That is to be expected in a long-term, high-risk project like ours. So, we turned to the blogging community for help – and got it! We have published our problems, and the community responded with results!cheap ugg boots
Princess
WOOOOOOOOOOOOW, I LOOOOOOVE ITTT :)
Uçak Bileti
hayatımdan sildim seni
Ben
Hmm, let’s see.
deealexx
Great tutorial!!!
tütüne son
It’s very nice and i love drawing and thank you
complex41
And then he handed you the thirty-five 45
altın çilek
Thank you!! Very helpful, great technique and great explanation. And looks beautiful!!
hcg damla
Thank you!! Very helpful, great technique and great explanation. And looks beautiful!!
شات صوتي
thnks
goooooooooooooood
min:(
^_^
top
The Neighbourhood Nerd
You should install NospamNX – there are bot comments all over the place! It’s far simpler than Akismet, but I’ve found it to be hugely effective.
On a related topic, great artwork; I’ve been wanting to do something abstract like this for a while :)
شات كتابي
this si awesome! mwah
thnks
goooood
How To Put On A Condom | How To Get Taller
This is great!!!This topic is truly relevant to my field at this moment, and I am really glad to discover your blog site.
How To Get Taller | How To Put On A Condom
Splendid work. Thank you so much for this post. Interesting content.
SEO
Thank you for that very interesting.
dada
Thanky you for the litlle help with thw pictures flower…<3
dada
and is the very intresting,thats right SEO…
mydexter
Thank yoy
Taufiq
Sama gak prosesnya dgn Freehand, thanks before
Moliva
Thanky you for the litlle help with thw pictures flower
รับทำเว็บ
Thanky you. It very work.
spring valley vitamins
definitely, a BIG BIG deals.thx, for article
ppuva
cool
resimler
definitely, a BIG BIG deals.thx, for article
rodha
oh my lady gaga
Nora
Thank you, is much helpful.
دردشة غلا السعودية
Thank u so much
Go check out this fun webpage…
Alquiler yates Ibiza
This topic is truly relevant to my field at this moment, and I am really glad to discover your blog site.
Nadzar
i like this, nice tutorial tracing technique, A++ ^^
DymoLabels
hi
i love this post
i really like your blog
keep it up