With the growing number of smartphones and tablets supporting higher screen resolutions, designers are increasingly starting to move away from bitmap textures in favour of vector-based patterns. This enables developers to maintain the highest-quality graphics on their sites without the need to constantly update them.
In this 15-minute tutorial, I am going to show you how to how to turn a vector graphic into a repeating pattern in Adobe Illustrator, export it for the web, and use it on your sites.
Open Pattern.ai (provided in the supporting files for this tutorial) in Illustrator. This is the starting graphic for the tutorial, but if you have your own design, you can use the same process to turrn that into a repeating pattern.
Our basic design. We will turn it into a repeating pattern
Once you have ‘Pattern.ai’ open, choose Object > Pattern > Make.
Illustrator CS6's new tools help automate the process of pattern creation
This will open up the Pattern Options dialog. Customise until you get a pattern that you like. Once you are finished, click the Done button above the artboard.
The Pattern Options dialog enables you to control how your pattern repeats
02. Get the pattern onto the artboard
Now that the pattern is in the Swatches panel (if you don’t have your Swatches panel open, go to Window > Swatches), click and drag the swatch onto the artboard.
Click and drag the pattern from the Swatches to the artboard
03. Create a new artboard for the pattern repeat
Zoom in until you can see a rectangular box inside the pattern. (Don’t worry: this isn’t an error – it just shows where the repeat starts.)
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
The pattern being edited: the rectangle shows where it repeats
Once you’ve found the rectangular box, go to the Tools panel and select the Artboard Tool. Holding [Shift], draw another artboard as shown below. Release [Shift] when you're done.
Draw a new artboard with the dimensions shown here
04. Save the pattern for web use
Select the new artboard by going to Window > Artboards to bring up the Artboards palette. You should have two artboards in the palette: select the second.
Now go to File > Save For Web.
Use Save For Web to save your pattern unit
Another dialog will appear. For best quality, go to the Preset drop-down and select PNG-24. Make sure Transparency is ticked so you can have a custom colour behind the pattern.
Click Save. When prompted for a location, choose the imgs directory in your project folder.
Use the PNG-24 preset for your pattern
05. Integrate the pattern into your site
Now that the pattern is ready to go, open index.html and primary.css (in the css folder). You shouldn’t have to make any changes to the index.html file unless you want to build the rest of the site straight over the pattern. In the primary.css file, add the following code:
body { background-image: url('../imgs/pattern.png'); background-repeat: repeat; }
(You want to add the background-repeat line because sometimes browsers have trouble loading patterns, so this covers all bases.)
Once you’ve saved both files, preview the result in your browsers of choice to make sure the pattern is working correctly. And that's it: you have a repeating design on your site. You can now test out this technique with your own patterns.
