Creating Vector Art with Adobe Shape and Adobe Illustrator
- Exploring Adobe Shape
- Editing in Adobe Illustrator (or Photoshop)
- Final Thoughts
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.
)
Figure 1 The Adobe Shape website
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).
)
Figure 2 Adobe Shape
Exploring Adobe Shape
After signing in, you are ready to trace. Initially the camera for your device is used to capture an image that will be traced. In Figure 3, you can see my iPad camera capturing my keyboard.
)
Figure 3 My first boring tracing with Adobe Shape
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.
)
Figure 4 Choose a library or create a new one
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.
)
Figure 5 Choose a source
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.
)
Figure 6 Choosing a Creative Cloud asset
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).
)
Figure 7 Default trace on left, trace inside on right
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.
)
Figure 8 Remove portions of the tracing
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.
)
Figure 9 Capturing the details you want
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).
)
Figure 10 Accept the changes and trace the artwork
After the path is generated, you can give the artwork a name (see Figure 11).
)
Figure 11 Giving the artwork a name
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.
)
Figure 12 The tracing artwork in your 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).
)
Figure 13 Share the tracing artwork
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.