Hey it’s a Monday morning freebie! This one took a little extra time to make, so I really hope you enjoy it. It is (mostly) seamless, so you can drop it into your swatches panel and fill any shape with it.
I say mostly because it went through a series of transformations – one of which was an export to photoshop (for some wacom-esque highlighting) followed by a hi-res auto trace in Illustrator. So, some edges are slightly off, but the overall seamless effect is there. Go ahead and download it, but stick around for some behind the scene paparazzi shots of how it was made.
I’ll admit it – I had never made a seamless pattern before. I knew I wanted it to be swirly, so I pen-tooled some reference photos for ingredients as I brainstormed just how this was going to work.
By the time these ingredients were ready I had a plan for a workable but really laborious process to make a seamless pattern. In the screenshots below you’ll find an explanation of how it was done, but really, if you know of a better way please share in the comments!
EDITED: Track6 knows a much more accurate and quick way to accomplish these steps and was nice enough to share it with everybody in the comments. The idea is the same, but the process better. Thanks!
As you can see from the last screenshot, the pattern was still quite a mess at this stage. Filling out the middle took a little while of puzzle piecing everything together. By the end of the workday last Friday I had spent a little too much time on this thing, and still wasn’t happy. So over the weekend curves were smoothed and highlights added, and finally it was starting to look right. An anxious face showed up in the curves so I made a little preview image just for fun.
So that’s the story of this freebie! I hope if you embark on making your own custom seamless pattern you’ll share some shortcuts with me in the comments.
Go Media is a creative agency based in Cleveland, Ohio. Besides the GoMediaZine, we also work for clients and sell stock artwork and design files on the Arsenal.
July 28th, 2008 at 11:45 am -
WOW!!!!
thanks for this tutorial! =)
keep it up!
July 28th, 2008 at 11:59 am -
Great tutorial, nice little guide.
I’ve always understood the concept of making something seamless, but I’ve never had it actually shown to me.
Looks like I was right. :)
July 28th, 2008 at 12:12 pm -
That and. Pattern design has some serious theory to it that no one highlights no AT ALL. EVER. There are two books from the same author dated like 1928 or earlier that go deep into the method of patterns.
But in photoshop if you make a say even 400 by 400 image.
Put one of the shapes in the center and make the background transparent.
Use that to make a pattern with just that one shape.
Repeat for however many you have.
Then make Non destructible tile layers of each shape. And just drag them around.
It’s stupid that photoshop can’t just make the option for space invaders but eh, old software is old
Contact me further if you want help with the idea or would like me to make a mini tute
July 28th, 2008 at 12:45 pm -
Hi tripdragon,
Thanks for the tips. If you think of the book’s title I’d be real interested to look it up. Also – do you have an example of the technique you explained?
July 28th, 2008 at 1:41 pm -
Woooou.
Very good tutorial!!!!
July 28th, 2008 at 2:44 pm -
adam i’ll make one shortly
July 28th, 2008 at 2:49 pm -
Easier way:
Create a background tile at whatever size you want to use, let’s say 3 in. Place your ingredients overlapping an edge and then use the MOVE dialogue box (return key) to move that piece the size of the tile (3 in.) horizontally and then once again vertically. Make sure to hit “COPY’ instead of hitting enter in the dialogue box so your shape duplicates instead of just moving.
After all of your edges are how you’d like them, select the background tile, copy it in front of everything and with everything selected, use the CROP tool in the pathfinder panel. Then you’ll be money.
Last step is optional but I ALWAYS clean the tile up by grouping it all, if it already isn’t and entering isolation mode (Ai CS3) and drawing an unfilled rectangle, then “SELECT SAME FILL & STROKE” and hit delete to get rid of all of the unfilled paths the CROP tool leaves behind. Leaves you with a cleaner file.
Now you only have to chop everything once, not every time you dupe something!
July 28th, 2008 at 3:07 pm -
Brilliant Track6! That’s definitely faster and probably more accurate, since the move command is exact. Thanks for sharing – I’ll use this one.
July 28th, 2008 at 3:08 pm -
wow gomedia is insane! I absolutly love every thing they make and publish on this blog. Hope I can one day work here!
July 28th, 2008 at 3:24 pm -
Glad to help.
July 28th, 2008 at 3:37 pm -
Great tut! I have made a few patterns in a very similar manner. Every designer needs to know the process to create patterns. Thanks for the info.
Peace,
WAR
July 28th, 2008 at 3:37 pm -
Nice job Adam! I love the end result. The micro tut is great – only suggetion would be also type it out with text because having the steps describe in images isn’t good for SEO!
July 28th, 2008 at 3:43 pm -
Thanks Jeff. Yea… I was taking some cues from Dave’s tutorials because his look so nice. I’ll keep that in mind for next time for sure.
July 28th, 2008 at 5:20 pm -
Track6: Nice work. Go Media, love the site. This tutorial was certainly helpful.
July 28th, 2008 at 7:37 pm -
Here is a quick and dirty photoshop version
http://ldbss.com/simple_steps.jpg
aside from menus and hiding the layers or working from a second file to create the tiles it’s two steps
I would rather have a real tile view so you can “see” how a tile is turning out without needing to constantly remake the pattern or dragging the tile to the palate in Illustrator.
There is an old plugin for Illustrator. But. It sill really misses the point.
July 28th, 2008 at 7:41 pm -
Books
Pattern Design (Paperback) 1903
by Lewis F. Day (Author)
http://www.amazon.com/Pattern-Design-Lewis-F-Day/dp/0486407098/ref=sr_1_1?ie=UTF8&s=books&qid=1217291945&sr=8-1
Abstract Design and How to Create It (Paperback) 1930
by Amor Fenn (Author)
http://www.amazon.com/Abstract-Design-Create-Amor-Fenn/dp/0486276732/ref=sr_1_1?ie=UTF8&s=books&qid=1217291967&sr=8-1
Good books and method never become useless
July 28th, 2008 at 9:21 pm -
Adam, you belong in the 60/70’s… your cool Glaser (Dylan) Poster gravatar and now this! I love it!!
Thanks for the micro-tut!
July 29th, 2008 at 7:01 am -
I don’t know how applicable it is to vectors, but the offset-command in PS makes seamless tiling very fast and easy. http://www.cadtutor.net/dd/photo/seamless/seamless.html has an example (maybe not the best ever, but still.)
July 29th, 2008 at 11:11 am -
hahaha, Steps 7-235. I love it. Did you really count them all or just approximate?
July 29th, 2008 at 12:47 pm -
Wow! Thanks so much for this tut! I have been looking for so long for a good tut on how to do a seamless pattern! Great job and much appreciated! ;)
July 29th, 2008 at 1:15 pm -
Hey Matt – no I just approximated :) Mileage may vary. Following Track6’s advice really helps reduce the repetition.
July 29th, 2008 at 1:27 pm -
Good nice…
August 2nd, 2008 at 8:09 am -
The best tutorial of the year ever!
Thank you for the free share!
August 15th, 2008 at 3:58 pm -
this is really helpful, thanks, I knew it would be easy to do, but its all about the method
August 19th, 2008 at 5:53 am -
Great resource. Thanks for sharing.
You can find lots of high quality vector patterns at http://www.patternhead.com
August 25th, 2008 at 8:34 am -
Very cool. I always hate doing patterns. Nothing is worse than a pattern that isn’t lined up perfectly.
September 3rd, 2008 at 3:03 pm -
I love this tutorial, thank you so much. A great creative inspiration.
October 27th, 2008 at 2:30 am -
So preciate for this tutorail!
December 17th, 2008 at 12:05 pm -
Great job! Thank You!
December 23rd, 2008 at 11:52 pm -
Thanks for the great post! It even me inspired me to make one of my own, see http://www.vividvector.com/wordpress/?p=64
Keep up the great work!
January 16th, 2009 at 6:42 pm -
Great tut. Thanks !!!
January 21st, 2009 at 6:58 pm -
thanks man!!!
February 11th, 2009 at 5:26 pm -
Thank u so much for sharing. I am self taught, for lack of time and money and tips like this are SO helpful. :)
February 20th, 2009 at 7:45 pm -
Nice tutorial, very helpful.
February 24th, 2009 at 6:52 pm -
This is one of the most beautiful free resources on the net right now. I bet if you would have finished that other one and never did the swirlier one, we’d still be breathe taken by the awesomeness of the piece.
March 6th, 2009 at 2:26 pm -
great, thank you
March 11th, 2009 at 8:29 pm -
Thanks for the useful tutorial. I will use it on future logo design projects.
March 30th, 2009 at 5:33 pm -
It's simple but really cute final result,.. swirls can be useful,.. :)
April 19th, 2009 at 5:36 pm -
Great tutorial. Never really thought about using the divide tool. Can't wait to try this out.
April 20th, 2009 at 6:52 pm -
Wow, I like the tutorial, thanks for this.
July 8th, 2009 at 5:32 am -
gerçekten harika bir şey bu!
July 8th, 2009 at 6:32 am -
gerçekten harika bir şey bu!
September 28th, 2009 at 8:04 pm -
In Illustrator CS4 there is a graphics style called (Live reflect X and live reflect Y) that can be in the found in the Additive library. To get at it just use the lower left pull out menu in the graphics style library.
It's simple (option click to add the style) Then draw. Click again in the x and y to set a grid that works best for you.
What it does is lets you set set up a repeating pattern grid, where you can just draw a pattern directly. You will need a good eye for line, and direction to pull this off, but I trust you are all handy enough with a Wacom to come up with some good stuff right off the bat. If you want to delete the effect you can find in under the appearance panel as a transform, just delete that and you are back to your base shape.
September 30th, 2009 at 7:14 pm -
check out M.C. Escher on tessellations for more ideas on interlocking figures.
October 16th, 2009 at 4:58 pm -
WOOW
November 14th, 2009 at 7:08 pm -
There is one more way to make this process easier…don't do any cropping. Place a rectangle with no stroke and no fill BEHIND everything else (lowest element in the stack order) and Illustrator will automatically see this as the patternable area. Anything that overhangs this rectangle will be ignored.
February 12th, 2010 at 11:26 pm -
woww…….this trick is very important for me..because i always get problem with vector creating..
April 8th, 2010 at 5:44 pm -
nice post, leading here from search engine i got nice info in here
April 13th, 2010 at 12:52 pm -
nice to be here
April 15th, 2010 at 9:45 am -
thx 4 the informations, good to know.
April 15th, 2010 at 9:51 am -
thanks for this tutorial!
April 19th, 2010 at 12:24 pm -
nice for info when i need for Catatan Blogger Seo Matre ajib and Catatan Blogger Seo Matre ajib
May 5th, 2010 at 3:52 am -
Great tutorial, nice little guide.
dizi izle
May 5th, 2010 at 3:53 am -
Great tutorial, nice little guide.
dizi izle
May 5th, 2010 at 3:59 am -
Great tutorial, nice little guide.
dizi izle
May 5th, 2010 at 4:00 am -
Great tutorial, nice little guide.
dizi izle
May 5th, 2010 at 4:01 am -
Thanks for this nice work!
dizi izle
May 5th, 2010 at 4:01 am -
Thanks for this nice work!
dizi izle
May 5th, 2010 at 4:14 am -
Thanks for this nice work!
dizi izle
May 5th, 2010 at 4:15 am -
Thanks for this nice work!
dizi izle
May 18th, 2010 at 7:27 pm -
followed by a hi-res auto trace in Illustrator …
really ?
June 5th, 2010 at 1:01 am -
Hhe article's content rich variety which make us move for our mood after reading this article. surprise, here you will find what you want! Recently, I found some wedsites which commodity is colorful of fashion. Such as xxxxxxxx that worth you to see. music-ofthesun Believe me these websites won’t let you down.
June 5th, 2010 at 1:03 am -
Hhe article's content rich variety which make us move for our mood after reading this article. surprise, here you will find what you want! Recently, I found some wedsites which commodity is colorful of fashion. Such as xxxxxxxx that worth you to see. music-ofthesun Believe me these websites won’t let you down.
June 11th, 2010 at 2:10 am -
thank you so very much
June 19th, 2010 at 2:39 am -
I liked this blog content.
June 22nd, 2010 at 4:46 am -
I love the end result. The micro tut is great – only suggetion would be also type it out with text because having the steps describe in images isn't good for SEO
June 29th, 2010 at 6:13 am -
Nice post :) Really like the pattern and it's nice to know how to create one actually. Thanks for sharing this.
July 1st, 2010 at 9:16 pm -
nice share my bro
July 6th, 2010 at 1:37 am -
thank you darling
July 6th, 2010 at 11:32 am -
Made some shoes using this seamless vector pattern!
http://i169.photobucket.com/albums/u236/siouxpe...
July 11th, 2010 at 9:52 am -
good article for vector
July 14th, 2010 at 5:36 am -
wow thanksss..
July 17th, 2010 at 9:16 am -
good post.. thanks
August 1st, 2010 at 6:12 pm -
this vector wonderful
August 4th, 2010 at 1:10 pm -
just discovered this website, reli reli reli appreciate it, please do more guides and stuff, it is reli useful to know how to make reli good use of these vector images, thank you very much >3<”
August 6th, 2010 at 8:22 pm -
tskler admin
August 18th, 2010 at 11:47 pm -
thank you darling