Creating a repeatable pattern for the web

show more Creating a repeatable pattern for the web provides you with in-depth training on Design. Taught by Justin Seeley as part of the Illustrator CS6 New Features show less
please wait ...

Creating a repeatable pattern for the web

Now it's time to put our creative energy to good use, and put together something we can actually use in one of our future web projects. In this movie, I'll be walking you through my process for creating a repeatable pattern that you can use on the web or any other type of project you might be working on. In the last year, texture in web design has become an essential part of any designer's repertoire. However, there aren't too many programs out there that let you create textures or patterns easily. Let's take a look at how easy it is to add a little something extra to this iPhone mockup using the new Pattern Options in Illustrator.

As you can see this is already a pretty good mockup, but I want to add a little bit of polish by putting some texture into the background. I could spend time crafting a pattern with multiple paths and shapes by hand, but I think I'll just use the Pattern Options in Illustrator CS6 and let that do the work for me. The first thing I have to do is draw out a shape. So I'll come over here to my shapes and I'll make sure I grab the Polygon tool. By default, it automatically draws out a hexagon for me, and that's what I'm going to use for this demonstration. Let me zoom in using Command+Plus on the Mac, Ctrl+Plus on the PC.

I want this shape to be approximately 25 pixels wide. Once I get the shape drawn, I'll switch to my Selection tool to make sure I have it selected. Now it should be noted that once you start creating patterns, you're going to be brought to a screen that's relatively light in color. So if you're working with a shape that has a light color in it, it might be hard to differentiate it from the background. So in this case, while I'm designing the pattern, I'm going to switch the stroke color of this object to black so that you can actually see it. I'm also going to make sure that the Stroke is set to 0.5 points.

I want it to be relatively small. Once I have that done, I'm ready to create my pattern. So I'll go up here to the Object menu, choose Pattern, and select Make. Once I do that, it's going to automatically start to create my pattern for me. For the Name, I'll call this honeycomb. For the Tile Type, I'll choose Hex by Column. The Width and Height, I'm okay with, and I'm not going to add any horizontal or vertical spacing. I like the fact that it's altogether. I'm also happy with the number of copies.

Once I've got all of my options set like I need them to be, I can then make the change to the color, and set it to white like I originally wanted it to be. So I'll select the artwork in the center and then I'll make sure I'm working on the Stroke and I'll change it to white. As you can see, the artwork pretty much disappears but that's okay, I know that it's correct because I've already set it all up. Now, I'm simply going to hit Done, and it's going to take me back out to my original artwork. I can now delete the shape and I'll zoom out, so you can see the entire iPhone mockup screen.

Now I'm going to select the background, and I'm ready to apply this swatch to it. I'll make sure I'm working on the Fill, but I don't want to override this Fill. I actually want to add a new Fill on top of it. So in order to do that, I need to utilize something called the Appearance panel. So I'll come over here to the right and find the Appearance panel, I'll just drag this out, so you can see it. Once I have the Appearance panel out, I'll go ahead, and expand it a little bit, and I'm going to add a new Fill by clicking this button here. Adding that new Fill adds it to the top, and I can then click, and find my honeycomb pattern and it's instantly applied.

Now it's a little too harsh, I just want it to be a slight change to kind of finish it off or add that little bit of polish. So I need to tone it back a bit. That's relatively easy in the Appearance panel as well. All you have to do is expand out the Fill, click on the Opacity link, and then dial back the opacity. In this case, I think 20% works pretty good. Once I do that, I can then bring the Appearance panel back over to the right, and I'll zoom-in a little bit so you can see the pattern. So it's just a subtle texture that I've added to the background, and if I show you here; here is before and after, one more time, before, after.

So you can see, it's just that little subtle change in the background, but it's added a little something extra to this that I really like.

Creating a repeatable pattern for the web
Video duration: 3m 58s 56m 59s Intermediate Updated Oct 04, 2012


Creating a repeatable pattern for the web provides you with in-depth training on Design. Taught by Justin Seeley as part of the Illustrator CS6 New Features

please wait ...