Using Illustrator CS6 to Create Background Patterns for Your Websites

One of the toughest things about creating background for anything, especially repeating ones for websites, is matching up the edges for repeating patterns. It is difficult to judge and visualize how the end result will look. In the past, defining a pattern in Photoshop was a painstaking process, especially when it came to creating diagonal lines that matched up and look correct. Now in Illustrator CS6, we can create patterns quickly and easily, and we can even preview how they will look before we are finished, so there is no need for trial and error in Photoshop.

First, create a new document in Illustrator CS6 of any size. I chose 1024 x 768, just so the example will be large enough for you to see. Your pattern might not necessarily be this large, especially if you are going for subtlety. Go to Objects, Pattern > Make. You will enter pattern making mode, where you will create your repeating pattern. There is a square in the middle of the canvas, and that is where you will develop your pattern.

You can change the size of your pattern square by selecting the Pattern Tile Tool in the top left corner of the Pattern Options Panel. A bounding box will appear, where you can resize your pattern square. Holding Option/Alt and Shift while dragging will allow you to scale the bounding box from the center. You can leave yours alone and simply zoom in, but I am increasing my size so that it will be easier for you to see.

Screen shot 2012-08-07 at 1.35.18 PM

Screen shot 2012-08-07 at 2.30.12 PM

One thing that you want to be sure to do is uncheck the “Move Tile With Art” setting, because this is annoying and makes the entire process difficult and counter-intuitive. If you want to create diagonal lines, which is popular as a website background, Select the Pen Tool and draw a vertical line. You can constrain the line to vertical, horizontal, or diagonal by holding the Shift Key. This should make it easier.

Screen shot 2012-08-07 at 3.00.45 PM

Next, Hold down the Option/Alt key while holding the shift key, and drag to the right, creating a copy of the first line, but with just a small amount of space between the two.

Screen shot 2012-08-07 at 3.00.23 PM

Now that you have done this, simply hit Command/Ctrl + D to duplicate the last action that you performed, creating a new line with the same amount of distance to the right as the last line you drew. Repeat this until you have enough vertical lines to cover the pattern tile. It is okay if your lines overlap the tile. They may also overlap each other.

Screen shot 2012-08-07 at 3.06.17 PM

This is the time to change the color of your lines to whatever you would like for them to be. Use the Swatches Panel to choose a color, or select one from the Color Picker. Hold down Shift and hover your cursor over the corner of the bounding box, until it changes to a bent arrow. Now, you can rotate the lines at a 45° angle.

Screen shot 2012-08-07 at 3.04.54 PM

Note: If the lines of your pattern don’t align properly, use the arrow keys to nudge the pattern in different directions, until the lines are continuous and straight. Once everything is aligned, go to Done in the top left corner, and you will go back to a blank canvas. The difference is, that your pattern has been saved to the Swatches Panel. Now, any shape that you create can be filled with this pattern.

Screen shot 2012-08-07 at 4.10.59 PM

Select the Rectangle Tool, and while holding Shift, draw a square. Then, simply click the swatch to fill it with your pattern. To export your design as a pattern to use on your site, go to File> Export> and then save the selection as a PNG file, with transparency.

Screen shot 2012-08-07 at 4.14.52 PM

You can essentially make the pattern as large or as small as you’d like, but for web purposes, it is a good idea to make your file as small as possible.The reason that we wanted to create our pattern this way is to ensure that the pattern will be continuous, whether it is stacked vertically or horizontally.

To implement the repeating diagonal pattern in your site, all you have to do is place the PNG file that we just created into the images folder on your site. Then, open up your CSS Stylesheet and find the section called body. Then, you simply use the code pasted below.

<code>

body{
background:url(images/diagonal.png) repeat;
}

</code>

The results are a seamless repeating pattern of diagonal lines across the background of the site, which you can see below.

Screen shot 2012-08-07 at 4.48.13 PM

One thing that you might be wondering is why I made the exported file a PNG file. The reason is that we can specify a background color under our PNG file, showing through the transparent portions of it. I added Blue to the background color just to show you the results.

Screen shot 2012-08-07 at 4.52.57 PM

The transparency in PNGs gives you a little more flexibility. If the design is flat and fairly simple, such as this one, you could also use a Gif file as well, because they support transparency. For more complicated patterns, you should choose PNG as your file format.

Controlling Your Grid

There are advanced controls that will allow you to create intricate patterns easily. Going back to Illustrator, Select the Elliptical Tool and select red as your color in the Swatches Panel. In Pattern making mode, hold shift to draw a circle, with only half of it inside of the Pattern Tile.

Next, Hit Command/Ctrl+C to copy the circle and then hit Command/Ctrl +F to paste a new one if front. This will give you 2 overlapping circles. Change the top circle to orange, and use the arrow keys to nudge the circle slightly.

Screen Shot 2012-08-07 at 11.52.55 PM

Now that we have created a base object, we can create some fairly complex patterns with the settings inside the Pattern Options Panel. Directly underneath the new pattern name, there are settings to change the orientation of the pattern itself. You can Choose from Brick by Row, Brick by Column, Hex by Column, and Hex by Row.

Screen Shot 2012-08-07 at 11.40.28 PM

Using brick by Column as an example, Illustrator staggers the pattern by a calculated amount, so you don’t have just horizontal or vertical patterns. This adds a lot of variation to your pattern, making it more interesting. The next setting underneath allows you to control the amount of offset, via a fractional value. This gives you a uniform stagger to your pattern, without having to develop this by hand, which is a huge time saver.

Screen Shot 2012-08-07 at 11.47.38 PM

The result of the selected 1/2 staggered pattern is shown below.

Screen Shot 2012-08-07 at 11.57.32 PM

The other settings and options are available to make it easier to create the pattern that you desire, and allow you to customize your pattern-making experience to your own personal preferences. Overlap allows you to toggle which object is on top and which one is on bottom, which can drastically change your patterns appearance instantly.

Copies determines how your grid is set up, such as 5×5, 9×9, 1×3, and many other options. Another great option is the ability to choose the opacity of the surrounding pattern, so that you can tell where your original starting design is located. The default is 70%, but you can set it higher or lower, just like you would with layer opacity.

Conclusion

I encourage you to play with the different settings, and you will be able to create amazingly precise, complicated background patterns with fairly little effort. Being able to preview a pattern as you are making it allows you to ensure proper alignment, without having to try it out, and then go back and edit it over and over again. Pattern Mode in Illustrator CS6 is an essential feature in your web design arsenal for making great patterns, so you can focus on creativity instead of measurements and alignment.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote