New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating a repeatable pattern for the web

From: Illustrator CS6 New Features

Video: 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.

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.

Show transcript

This video is part of

Image for Illustrator CS6 New Features
Illustrator CS6 New Features

23 video lessons · 18945 viewers

Justin Seeley
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.