Creating Seamless Patterns for the Web Made with ❤ by Ellen Donovan © 2013 In this tutorial, I will show you how to create a seamless pattern and then how to turn it into a seamless graphic that you can use to place in your web pages as a background image. To create a seamless pattern there are many software tools that can help you accomplish this. We are going to use a new feature called pattern maker in Illustrator CS6, to create a pattern in a snap. 1. In Illustrator CS6, create a new blank document. Go to the File drop down and choose, File > New. Add the following dimentions of 300px by 300px. 2. In the Tool Bar, select the Ellipse Tool (L). 3. Select a fill color of your choice. 4. Choose no stroke for the stroke. 5. To draw a perfect circle, click and hold down the shift key at the same time. Note: Turn rulers on and set them to pixels if needed. (CTRL+ R). or View > Rulers > Show Rulers. Note: Turn on Smart Guides to see the dimentions of the circle begin drawn. (CTRL+ U). or View > Smart Guides. SEAMLESS PATTERNS ➻ Page 1 6. Go to Window > Pattern Options to open the Pattern Options Panel. With the circle still selected, go to the Pattern Options panel, options menu and select Make Pattern. 7. A pop up note will appear. Click OK to adding the pattern to the Swatches pannel. 8. In the Pattern Option pannel make the following selections. • Name the pattern circles. • From the Tile Type choose Brick by Row. • Leave Brick Offset to 1/2. • Check Size Tile to Art box. • With the constrant porportions selected change the H Spacing to 15px. • In the upper right hand corner of the the document, select the Done button to save your pattern. SEAMLESS PATTERNS ➻ Page 2 9. Delete the circle you have drawn on your art board. Snap! You have made a seamless pattern. Now all you have to do is make this pattern a seamless image for web pages. 10.To do this, simply go to your Swatch panel, click and drag out a copy of your circle pattern that you have made to the art board. 11. Go to the Layers Panel and twirl open Layer 1 and Group. 12.Go to the bottom most layer and you will see a white box in the thumbnail. Select the donut selector to select the path on this layer. SEAMLESS PATTERNS ➻ Page 3 13. Select the Art Board Tool in the tool box. 14. In the option menu under the Preset drop down menu, select Fit to Selected Art. 15. Last but not least, go to File > Save for Web to optimize your image. Now you have your seamless image that you can apply in your webpages! SEAMLESS PATTERNS ➻ Page 4