Creating patterns in Illustrator CS6

27 Jun 2012

Creating patterns in previous versions of Illustrator has always given me a bit of headache. Depending on the pattern that I wanted to create, I often chose another route to achieve the result I wanted. A lot of times there was this annoying issue of a tiny pixel gap around the pattern swatch. This alone was already a reason for me not to create a pattern if I didn't have to. However the biggest issue for most people is the complexity involved in the creation of a seamless pattern

Random Circles created using Illustrator CS6 new pattern feature

In version CS6, Adobe made it very easy, and flexible. There are a lot of options you can try out, which makes this feature very powerful. It's definitely my favorite new feature in Adobe Illustrator CS6…

Illustrator CS6 Appearance panel showing color info

While I wasn't thinking of actually creating something, I started to draw a few random circles. Giving each of them a different size and color. I applied a Multiply transparency effect on all of them (except the white one) and gave them an opacity of 70% to achieve this nice transparency color effect on the overlapping areas.

Illustrator CS6 pattern creation warning window

Once I thought I have an interesting composition to start from, I selected all circles, and chose Pattern > Make from the Object menu. Illustrator gives you a warning that the new pattern has been added to the Swatches panel, and that any changes made while in the Pattern Editing Mode will be applied to the pattern swatch upon exit. This is very important to know, because you have the option to edit your pattern at any time. However, if you want to create a new pattern from an existing one, you need to make sure you choose the Save a copy button at the top left of the screen when you are in Pattern Editing Mode.

In Pattern Editing Mode in Illustrator CS6

Once you click the warning screen OK, Illustrator takes you into Pattern Editing Mode. The beauty of this new mode is that you get to see your pattern in action. You'll see the pattern effect on your entire canvas. By default, you'll see this at an opacity of 70%, but you can adjust this to another percentage if you like. Plus you can control the repetition of the pattern. Notice also the bounding box of your swatch and the pattern tile which you can toggle on and off. In my example I chose Grid as tile type, but you can choose a lot of other options there.

Illustrator CS6 Pattern Options panel

You can for instance also choose for a Hex shape which creates a bit more randomness. In this mode I can also move my circles around, and apply other colors. While modifying things I constantly see the pattern being updated. This time I don't have to worry about any mismatch, because Illustrator will take care of this as soon as I use the Overlap option and move my circle over the border. As you can see there are many options that can help you create the pattern you want in no time, without frustration.

Once you are happy with the result, you just click Done at the top left of the screen, and you are back in normal mode. If you decide later you want to edit your pattern swatch, you just double click it from the Swatch panel. If you want to create a variation of an existing one, you double click it and as soon as you are in Pattern Editing Mode you click Save a copy at the top right of the screen.

How to save a pattern tile for the web?

My example isn't really a ideal material to use as a background tile for a web page, but what if I want to save it for the web? How would I be able to this? Here is how… After you have created your pattern swatch, you can drag it from the Swatch panel onto your canvas. You'll notice the swatch bounding box. If you only select that box, using the Direct Selection tool (white arrow) while also holding down the Option/Alt key, you'll see its exact dimensions in the Control panel at the top of your screen.

All you have to do is making sure you create an Artboard that has the exact same size and matches the borders of this tile. So you select the Artboard tool, and draw a rectangle that matches the tile boundaries (or you edit the current Artboard you are working on by dragging its corner handles).

As a double check to make sure you don't end up with any fuzzy pixel border, switch to Pixel Preview mode (Cmd/Ctrl + Option/Alt + Y), and make sure everything is nicely positioned on the pixel grid. If that is all OK, all you have to do is go to File > Save for Web… (Cmd/Ctrl + Shift + Option/Alt + S). Now you have your seamless tile that you can apply in your webpages.

Comments

  1. 1 Christina 04 Jul 2012

    This is such a nice feature and especially the opportunity to choose different tile types is attractive. Suddenly it seems so easy to create intricate arabic-inspired patterns.

    I love it when you write about new features - it always feels like getting advice from an old friend.

  2. 2 Jakki 13 Jul 2012

    I LOVE THIS FEATURE!! It is one of the best things about Illustrator CS6.

    Btw I absolutely love your site, everything is so clean and polished *_* *drool*

The Deck

Ads via The Deck