Converting artwork to patterns using Adobe Ideas and Adobe Illustrator CS6

The release of Adobe Touch Apps on iPad and Android tablets extends your artistic capabilities beyond the limits of desktop software. Adobe Touch Apps include a wide variety of apps that enable you to express your creative talent on-the-go by creating artwork directly on your tablet device and transferring it to your Adobe desktop applications later.

Adobe Ideas is a simple, yet amazing application that enables you to create vector graphics on your iOS or Android tablet. If you are a designer who prefers to draft your artwork with paper and pencil, Adobe Ideas provides a great advantage because it enables you to draw your artwork in a digital format from the start, so you don't have to scan your paper sketch and redraw it digitally later. You can also choose to use a stylus pen that gives you more accurate lines and efficient drawing results. Adobe Ideas files integrate with Adobe Illustrator CS6 so you can further refine your artwork.

In this tutorial, I introduce you to Adobe Ideas and help you create some artwork. I also show you how to transfer that artwork to Illustrator CS6 where you can then edit its layers and convert it to a pattern using the new pattern creation features.

For this tutorial, I use Adobe Ideas on an iPad, but you can use an Android device as well.

Overview of Adobe Ideas

You can get Adobe Ideas for iOS and Android by searching for it in the Apple App Store or on Google Play. You can also read more about it and get a direct link to the purchase page by visiting the Adobe Ideas page.

Navigating in the file gallery

When you open Adobe Ideas, you see the file gallery, which enables you to open an existing file or create a new one. Simply tap an existing file to open it. You can also select a file by tapping and holding it. On the top right side of the gallery window are four icons (see Figure 1):

• Creative Cloud: Sync your work for access from other devices — this is especially useful for transferring your work to Illustrator for further refinement.
• Duplicate: Select a file or multiple files to duplicate.
• Delete: Select a file or multiple files to delete.
• Settings menu: See what's new in Adobe Ideas and access your account and preferences.

At the bottom of the file gallery are two icons: The Plus icon on the left lets you create a new document. The Photo icon on the right lets you create a new document based on an image from your camera or camera roll.

Getting familiar with the artboard and its tools

The artboard is incredibly easy to use. Your canvas is in the middle, and the Tools panel is on the left. The icons in the application's title bar (see Figure 2) enable you to perform the following tasks:

• Left arrow icon: Tap this icon in the upper left corner to go back to the file gallery.
• Document title: Tap the document title (shown as "Untitled 21" in Figure 2) to rename the document.
• Share icon: Tap this icon to send the document as a PDF file via e-mail or to add it to your photo library.
• Full-screen icon: Use this feature to hide the Tools panel so you can view the document canvas full-screen.

The Tools panel (see Figure 2) gives you access to everything you need to create your artwork:

• The Pen tool is your main drawing tool that you can use to create line art.
• The Eraser tool enables you to erase any portion of your artwork.
• The Hand tool enables you to navigate the artwork. When you click and hold the Eraser icon, you can switch to the Transform icon, which lets you move the artwork of the active layer on the artboard. You can also resize the artwork by pinching with two fingers to increase or decrease its size.
• The Undo and Redo arrows enable you to undo or redo your work (up to 50 operations).
• The Size circle enables you to increase or decrease the size of the Pen tool or Eraser tool.
• The Opacity slider enables you to change the opacity of the current selected color. Just tap and drag.
• The Color palette enables you to choose the ink color from the current swatches or from an opened image using the Eyedropper icon. You can also choose a color based on RGB, HSB (hue, saturation, and brightness), or even Themes if you have already created a color theme.
• The Layers icon opens the Layers panel, which enables you to add new layers, change layer opacity, create a layer based on an image from your camera or gallery, and rearrange the order of your layers by dragging and dropping them. Note that the iOS version of Adobe Ideas gives you multiple drawing layers, while the Android version provides only one photo layer and one drawing layer. At the top of the Layers panel, you will find tools to delete a layer or create a new layer.

Building artwork in Adobe Ideas

To get started, you first need to visit the Apple App Store or Google Play and install Adobe Ideas on your iOS or Android device.

Creating a new Adobe Ideas document

Follow these steps to create a new Adobe Ideas document and start drawing:

1. Tap the Adobe Ideas icon to launch the application.
2. Click the Plus icon at the bottom of the Adobe Ideas file gallery to create a new document.
3. In the new document, tap the default name of the document in the title bar and change the document title to Pattern-artwork.
4. Choose the Pen tool and set its size to 3. Choose black as your ink color.
5. Start drawing the outline of your artwork (see Figure 3).

Using layers in your artwork

You can use layers in Adobe Ideas to add more complexity and control to your artwork. Follow these steps to set up and work with layers:

1. Open the Layers panel by tapping the Layers icon in the Tools panel.
2. Tap the Plus icon to create a new layer.
3. Tap the handle on the right of the new layer and drag it under the layer that includes the artwork outline. This will enable you to color in your outlines on a separate layer.
4. Select the Pen tool, change the ink color, and start painting the artwork with bright colors. You can use the Eraser tool to remove unwanted colors or the color that bleeds outside the edges of the outlines.

Sharing your creation

When you are finished with your artwork in Adobe Ideas, you can save it to Adobe Creative Cloud so you can refine it in Illustrator CS6. (You must have a membership to sync files to Creative Cloud.) In the file gallery, tap the Creative Cloud icon on the top right side of the screen to sync your files to Creative Cloud (see Figure 4). If you transfer the artwork using your Creative Cloud storage account, your artwork will be saved in .idea format, which you can open in Illustrator CS6.

If you're using Illustrator CS5 or CS5.5, you'll need to download the Touch Apps Plugins, available on the Creative Cloud Apps and Services page, to open a .idea file. (You must log into Creative Cloud to access the Download link for the Touch Apps Plugins.)

You can also e-mail your artwork as a PDF file that preserves the drawing in vector format by tapping the Share icon in the top right corner of the artboard.

Optimizing the artwork path in Illustrator

If you don't already have Illustrator CS6, you can download a free 30-day trial. You can also use your Creative Cloud membership to download and install the product.

When you open Adobe Ideas artwork in Illustrator CS6, you will notice that it contains several overlapping paths and many anchor points. Each line you draw in Adobe Ideas creates a new separate path in a sublayer of the main layer that you created in the Adobe Ideas Layers panel. You need to optimize the paths first to reduce the unwanted anchor points that may cause a large file size or unnecessary CPU processing.

Use the following steps to optimize the artwork in Illustrator CS6:

1. Open the file Pattern-artwork.idea in Illustrator CS6. Note that the file preserved the same layer structure you created in Adobe Ideas.
2. Use the Select tool to select all of the artwork. Or to select everything on the artboard quickly, press Control+A (Windows) or Command+A (Mac OS).
3. From the Object menu, choose Path > Simplify.
4. In the Simplify dialog box, make sure the Preview and Show Original options are selected so you can see the simplified results and compare them with the original path.
5. Change the curve precision to 95% and note that the number of anchor points dropped from 9,499 to 4,013 (see Figure 5).

You can also optimize the paths with other techniques, such as combining or merging paths and shapes using the Pathfinder panel or the Shape Builder tool.

Converting artwork to a seamless pattern

Before the release of Illustrator CS6, creating and editing seamless patterns was a painful process that required a lot of tedious work.

The new pattern tools in Illustrator CS6 enable you to create patterns quickly and easily. Figure 6 shows the Pattern Options panel, which helps you modify patterns.

The Pattern Options panel includes the following options:

• Pattern Tile tool: Use this tool to adjust the bounds of the tile.
• Name field: Name or rename the pattern.
• Tile Type: Choose the tiling arrangement for the pattern. You can choose Grid, Brick By Row, Brick By Column, Hex By Column, or Hex By Row.
• Brick Offset: Enable this option by setting Tile Type to Brick By Row or Brick By Column. Then use it to change the offset of brick tiling. Brick Offset can also be adjusted on the tile directly using the Pattern Tile tool.
• Width and Height: Change the size of the pattern tile.
• Size Tile To Art: Select this option to set the tile size to be the same as the artwork bounds.
• Move Tile With Art: Select this option to move the pattern tile when all the artwork is moved.
• H and V Spacing: Change these values to set the space between the artwork bounds and the copies on each side.
• Overlap: Control how the tiles overlap with one another. You can set the overlap to be Left On Front, Right On Front, Top In Front, or Bottom In Front
• Copies: Define how many repetitions of the artwork appear for a preview of the pattern.
• Dim Copies To: Select this option to change the opacity of the tile copies so you can focus more on the artwork. Deselect this option to see what the actual pattern will look like.
• Show Tile Edge: Select this option to show the tile bounds as a solid line on the artboard.
• Show Swatch Bounds: This option shows the boundary box around the pattern. It is useful because it shows the edges of the pattern.

Use the following steps to craft a seamless, repeating pattern from your artwork:

1. Select the artwork on the Illustrator artboard.
2. From the Object menu, choose Pattern > Make, which opens pattern editing mode.

   You will see a new pattern swatch with your artwork, and the Pattern Options panel will appear so you can customize the pattern. You will also see an alert message that tells you a new pattern has been created and added to the Swatches panel. Click OK to enter pattern editing mode (see Figure 7).

3. Select the artwork and move it to fit the tile bounds. Click OK to apply the pattern changes. Name the pattern so you can easily find it in the Swatches panel.
4. Delete the artwork from the artboard.
5. Using the Ellipse tool, draw a circle on the artboard. If you hold the Shift key while drawing, you can easily create a perfect circle.
6. Click the Fill box on the Tools panel to apply a fill color instead of a stroke color.
7. From the Swatches panel, click the Show Swatches Kinds Menu button at the bottom of the panel, and choose Show Pattern Swatches. Click the pattern you just created to apply it to the circle. The pattern fills the circle seamlessly. In Figure 8, I have increased the size of the artboard to preview the pattern better.

Where to go from here

In this tutorial, I have shown you how to create artwork with Adobe Ideas and then use that artwork in Adobe Illustrator CS6 to create a seamless pattern. To learn more about Illustrator CS6, read my recent book, Illustrator Foundations: The Art of Vector Graphics, Design and Illustration in Illustrator.

The sample archive (ZIP, 460 KB) accompanying this article includes the Illustrator files that show the final artwork and the seamless pattern created in the tutorial. Feel free to compare your work to the sample.

Adobe Touch Apps turn your tablet device into an essential part of your production process, and you can practice different ways to integrate Touch Apps with your CS6 desktop products. Learn more about Adobe Ideas and other Adobe Touch Apps on Adobe.com. Finally, get inspired by the Illustrator how-to guides in the Illustrator CS6 showcase.