Illustrator CC Web Patterns

Learn how to create pixel-perfect patterns for use on the web, using Illustrator's intuitive pattern editing mode, introduced in version CS6.
Course info
Rating
(15)
Level
Beginner
Updated
Feb 23, 2016
Duration
1h 9m
Table of contents
Description
Course info
Rating
(15)
Level
Beginner
Updated
Feb 23, 2016
Duration
1h 9m
Description

In this short project, Laura Coyle will show you how to create pixel-perfect patterns for use on the web, using Illustrator's intuitive pattern editing mode, introduced in version CS6. Project steps: Take one of Illustrator's included patterns, adjust it for web use and export a single repeat unit. Test the repeat unit in an HTML file, and look at online resources for web pattern inspiration. Create a geometric motif, use it in a repeat pattern, and change color schemes using the appearance panel and blending modes. Explore Brick Repeat, Hex Repeat styles, and the Tile Tool with the geometric motif. Editing Patterns: Scaling, Changing Color, Saving as a Library.

About the author
About the author

Laura Coyle creates distinctive art with wide appeal. Her clients include major brands like Target, Amazon.com, Disney, and publications including Better Homes and Gardens and The Wall Street Journal.

More from the author
Illustrator CC Simple Designs
Beginner
1h 56m
May 10, 2017
Illustrator CC Working with 3D
Advanced
58m
Nov 15, 2016
Illustratoring with Laura Coyle
Intermediate
2h 36m
Nov 3, 2016
More courses by Laura Coyle
Section Introduction Transcripts
Section Introduction Transcripts

Introduction
Back in Illustrator CS6, Adobe introduced a really cool feature, the Pattern Editing Mode, and for the first time in Illustrator you could create patterns intuitively by just moving around motifs while Illustrator makes the updates to the repeat instantaneously so you can really just concentrate on your design flow. It's a wonderful thing, and this feature was greatly anticipated by so many of us who like working with patterns. However, this feature was really designed for making pattern fill swatches to work with inside of your Illustrator art. It's great for that. But the pattern editing feature doesn't fully cater to those of us who want to go beyond fill swatches and create pattern units for fabric or website backgrounds or for any application where you need to export a single unit of a repeat pattern and use it in the world outside of Illustrator. For example, when you create or edit a pattern in Pattern Editing Mode, you'll often wind up with art that isn't pixel perfect where the dimensions of the repeat unit might be decimal numbers. When you go to export a single unit of that pattern, the resulting image file will have round number dimensions because Illustrator won't export an image with its dimensions in fractions of pixels. It will round up or round down to the nearest round number, so your final pattern tile might have a gap in the art, which is the difference between that half a pixel edge in your art and the whole pixel edge of the exported image. When you go to use this pattern as a web background, you'll see that gap, often as a while line, so I've developed a method that I use to get reliable results so any pattern I create in Illustrator can work seamlessly in the real world. It takes a few extra steps, but it's worth it because working in Illustrator, as we know, gives you the most flexibility and editability. Anything you create can be resized and recombined into a new design without ever having to worry about how large you can make your art or what resolution you may need in the future. My name is Laura Coyle, I'm a freelance Illustrator, and in this project we'll focus on exporting pattern tiles from Illustrator that can be used in repeat on a website or in other digital applications. We'll create a basic grid repeat pattern in Pattern Editing Mode from start to finish, and I'll show you some tips for resizing and editing the pattern while maintaining its pixel perfection. When you complete the project, you'll have the tools you'll need to adapt your existing patterns for the web and create new patterns that will tile seamlessly outside of Illustrator. To begin, choose File, New to get the New Document dialogue, and we'll choose the Web document Profile. And this automatically starts us off with pixels as our unit of measure. Next, go to the bottom of the panel and open up the Advanced menu. And notice we have RGB set up as our color space, and the Raster Effects resolution is set to 72 ppi, which is fine. And very importantly, the option Align New Objects to Pixel Grid is checked. And it's great to start out our file with this setting so that the final art we export is crisp, and this is the key to making it repeat seamlessly on the web. Next, I want to make the artboard a bit larger, so I'll choose 1024 x 768. And you can go ahead and name this document however you like, and then click OK. Now I want to change the color of the canvas to white because this will make it easier to use the area around the artboard for previewing pattern fills. So to do this, go to the Preferences menu using this shortcut; that's command or Ctrl + K. Then choose User Interface and click White, and then click OK. And I'll create a rectangle at the artboard size; that's 1024 x 768. And I'll just close this pop-up Transform panel for now. In the top control bar, I like to use the align icons that appear here when you have something selected. And if you don't see these icons when you have your rectangle selected, then click on the menu icon and choose Align to Artboard. Then you can use the align icons that appear to center the rectangle perfectly on the artboard. You can also find these options on the Align panel. I actually just closed that, but you can always find it in the Window menu at Align. So now we're off and running. We have our document set up, and this rectangle will become the testing ground for the patterns we'll be working with in the next video.