Creating Vector Art with Adobe Shape and Adobe Illustrator

Contents

Article Description

With the release of Adobe Shape, capturing inspiration in the form of vector art just got easier. Adobe Shape traces images you capture from different sources and the resulting vector artwork can be shared with others or brought to Illustrator and edited. In this article, web developer Brian Wood looks at how Adobe Shape works and follows an Adobe Shape to Illustrator workflow.

From the author of

Adobe came out with a slew of new apps for iOS in late 2014, one of them being Adobe Shape. Shape is app that is used purely for tracing images you take with the device camera, images already in the device library, or from images in your Creative Cloud account (see Figure 1). It’s pretty easy to use and simple to boot. The idea (to me) is that you can turn imagery into vector artwork that can then either be used as-is, or even brought into an application like Adobe Illustrator to edit it further or use part of it.

I found myself being oddly addicted to it, tracing everything I could think of to test its tracing prowess. What I found was that it is good for conceptualizing ideas or trying to capture the basic vector shape for something, but it falls a bit short for complex content with loads of detail. To me, the app is most likely intended more for capturing inspiration instead of hard-core vector tracing. I also find that it works best when capturing hand-drawn sketches or lettering, logos or icons, or other artwork with high contrast.

Currently, Shape is only available for iPhone 5+ and iPad 3+, and you need a free or paid Adobe Creative Cloud subscription to be able to sign in and begin exploring. After installing Adobe Shape, you will need to log in with your Adobe ID (see Figure 2).

If you tap the X, you can go back to a library view where you can choose which library to add the traced content to and choose the source for the image to be traced. Choosing a library is a great way to organize the content based on project, client, or other, but you need to be a Creative Cloud subscriber to access them (see Figure 4). When added to a library, the tracing file is then synced with the Creative Cloud, which means you can access it in other apps like Illustrator and Photoshop.

To learn more about Creative Cloud Libraries, check out my article on this topic.

You can trace an image you take with the device camera within Shape, or choose an existing image from the device Camera Roll or from Creative Cloud (which includes your libraries) by tapping + (plus), as shown in Figure 5.

I wanted to access an image from my Creative Cloud assets, so I tapped + (plus) and chose Creative Cloud. After tapping an image (the guitar) from my list of assets (Figure 6), I then chose to open the file in Adobe Shape.

If you want to trace from the device camera, I suggest you first take a picture with the device camera (outside of Adobe Shape). Then you can use the iOS photo editing features to convert the image to black/white and increase contrast, for instance, to achieve a better tracing result when Shape traces.

With the image open in Adobe Shape, green highlights indicate where the dominant trace lines will appear. You can refine the trace by dragging the slider, and you’ll see that more or less is traced depending on the slider setting. By default (currently), Shape traces around the perimeter of objects (around the outside). You can tap the circle that is half-filled (see Figure 7) to have Shape trace the interior of objects (opposite).

After refining the trace settings, you can then tap the green Capture button (see Figure 8). Adobe Shape then gives you an opportunity to remove parts of the tracing or add them back in. By default, if you tap on (or swipe across) green paths, they are removed from the final tracing and turn white.

If you remove some of the tracing that you actually wanted to keep (this almost always happens), you can tap the subtract button (-) to switch to add (+), then tap or swipe that content to ensure it’s in the final tracing. Whatever is green is going to be a part of the final tracing (see Figure 9). One saving grace is that you can zoom in to the tracing and be a little more selective.

After you are finished, you can then tap the checkmark (shown in Figure 10) to accept the changes, and Shape will create the vector and smooth the curves. To me, this is the best part of the app. When I saw the green lines and how “jagged” they looked the first time, I never thought this was going to produce usable artwork. But the app smooths out the paths as best it cans and even simplifies a bit as it goes (see Figure 10).

You can then either go back to refining the paths (by clicking Refine) or save the tracing artwork by clicking Save. The traced artwork now appears as a thumbnail and is listed with anything else you’ve traced (I traced a few other things, as you can see in Figure 12). The artwork is saved with the library chosen and can then be shared with others via a Creative Cloud library.

If you tap on one of the trace object thumbnails, you’ll see the final traced artwork larger. When previewing the traced artwork, there are also options for renaming it and sharing using methods like email or saving the image locally on your device. This makes it easy to share the traced content with others—whether or not they are Creative Cloud subscribers (see Figure 13).

Now that you have the traced artwork, you can access it in the latest versions of Illustrator CC or Photoshop CC along with Illustrator Draw (an iOS app). Next, you’ll see how we can bring the traced artwork from Adobe Shape into Adobe Illustrator CC.