How to Create a Vector Texture From Scratch

A few times a each month we revisit some of our reader’s favorite posts from throughout the history of Vectortuts+. This tutorial by Jesse Hora was first published on April 28th 2009.

Working with beautiful, perfect, clean shapes in illustrator is what I love, don’t get me wrong, but sometimes its nice to give an illustration a little something more. Some depth or additional layers of visual reference, when done well, can take an illustration to the next level. When done poorly they can make an illustration look amateur. We’ll learn how to make a high-quality vector texture from scratch in this tutorial. Let’s get started!

Introduction

I have noticed that a lot of designers will not take the time to create a new texture, they will either use something they found or will quickly try get a texture from a photo. When I see this it drives me crazy because it’s a super simple process to get a nice texture. Take the time to do it right. In this tutorial, I will show the process I use to get a nice vector texture, its not complicated at all, but it might help to remind some folks that it’s okay to step away from the computer for a second.

One thing I should mention is that if you are looking to get a screen-print or letterpress texture look/feel, obviously the best way to achieve that is to scan in a piece of that source and apply it to what you are working on. I like to make different textures and apply them in a wide variety of ways. Maybe in a future tutorial I can show you how I use them. For now I will go through the simple process of creating a vector textures, as well as supply you with some extra textures, you can download them for free here!!!

Final Image Preview

Below is the final vector texture we’ll be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Step 1 – Rip Yourself Away

Since most designer/illustrator types spend countless hours starring at the computer screen, this first step will be the hardest, and most important. Rip yourself away from email, Photoshop and yes even Illustrator and step away from the computer!

Step 2 – Gather Materials Away

Grab anything that is around you. A few of the materials that I like to use are paint, a paint roller, copy machine, razor blade, a nail, my thumb, sand paper, dirt, a booger (yuck), food, thread, sticky notes, a cactus, use scissors… I could go on forever.

Step 3 – Play

Put the paint to the paper, its fun right? Anything goes; scribble on the paper with tons of different markers, use sand paper, spit on it, dump water on it, cut it up, mash it up in the dirt, let your bulldog slobber and chew on it… try anything. For this tut I’m going crazy with the paint roller.

Tip: A nice way to get a ‘distressed’ texture is to simply print out a completely black sheet of paper and scratch, rub, tear and crumple it.

Step 4 – Scan

OK play time is over, back to the computer (boo!). I really like the way the paint roll texture looks, so I am going to use this for the rest of the tutorial. I like to scan at a pretty high resolution (400-600dpi) because it allows for more detail and if you ever want to use the raster version instead of the vector, then you have some room to scale it up. Don’t forget to let things dry before you scan (haha!).

Step 5 – Photoshop

Open the scan in Photoshop. First, using the Crop Tool, crop the image to a manageable size. Notice the wrinkles in the paper, I like to clean those up a bit by going to Image > Adjustments > Levels, and I applied the settings shown below (but adjust to what looks best for your image). Now go to Image > Adjustments > Threshold and again apply the settings shown below, or what looks best for your image. Now you have an image that is strictly black and white, perfect for Live Trace in Adobe Illustrator. Save it as either a PSD or TIFF.

Step 6 – Illustrator Time

Open the black and white PSD in Illustrator. Now its time to Live Trace this bad boy. Go to Object > Live Trace > Tracing Options. An alert may pop up, because this image is high resolution, hit OK. Next, using the Adjustments and Trace Settings you can refine the live trace. After using Live trace a million times, I have a go to setting called “Mazin’” that works perfectly, which is shown below. Hit OK and let Live Trace do its magic. When it’s done hit Expand.

Step 7 – Clean

The last thing I like to do is to separate out the white from the file so that the texture is ready to use. Go to Select > All and then Object > Ungroup (if you are in CS3 you can just double-click into the grouping). Then using the Selection Tool (black arrow) click on the corner of the white, then while its selected go to Select > Same > Fill Color. Now we can hit delete to get rid of all the white.

Finished!

Boom! You have a delicious vector texture. That’s it folks, short and sweet! For more texture goodness check out JesseHora.com. The final vector texture is below.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.