Published on | Prototyping: From UX to Front End — Medium Phil Goodwin

Using Adobe Capture CC to quickly generate patterns from your own images.

One evening recently, I discovered an extremely powerful (not to mention fun and easy) tool to create patterns. It had me so jazzed that I stayed up late creating beautiful patterns from photos I had taken in the weeks prior.

Meet Adobe’s new app, Capture CC (actually, I’m not sure how new it is…but it’s new to me ?). Whether or not you’ve had experience designing or creating patterns is irrelevant with Adobe Capture CC — they’ve have made it easier than ever to jump aboard.

Note: With some basic knowledge of Adobe Illustrator, you can turn these patterns into vector-based-goodness in just a few minutes (covered in Part 2).

Now, let’s make something…

Step 1: Download Adobe Capture CC

Easy peasy, download that app! It looks like this…

Great job on the icon, Adobe Creative Cloud design folk!

Step 2: Find & Import A Source Image

Alright, so to create a pattern, you’ll need a base image to use. I chose to use a picture that I took of a vintage fishing reel box.

Tip: You might want to choose an image that contains some simpler shapes. These will translate well into patterns you can recreate in Adobe Illustrator.

Open Adobe Capture and choose the Patterns tab. Select the “+” button. Select the image in the bottom right corner, and choose where you want to pull your source image from.

Step 3: Choose Your Cut & Zoom

With your source image in place, you’ll notice that Capture CC gives you 5 different “cut” options. You can tap through them and get an idea of the types of patterns they generate.

As you go through the cut options, zoom in/out on your image using your fingers. I tend to like the results when I zoom in really close, capturing basic shapes and a few colors. You are setting up what I’ll call the “source image swatch” for your pattern (see below).

When you’ve got something you’re diggin’, press that purple button…

Step 4: Refine Your Pattern

You’ll be able to refine your pattern on this screen by editing your source image swatch. You can rotate and nudge the image around the bounding box and see the results in real-time just above it (love that, super nice).

Various patterns created using the same source image swatch.

Again, once you’re satisfied hit “Next” in the upper right and check out the full screen preview of your pattern.

Cooooooool ✌️!

Let’s finish up our work in Capture CC — hit “Next” and Save the pattern.

Step 5: Export Your Pattern Tile

After saving, you’ll find yourself back on the main Patterns screen. Choose the pattern you just created to open it up in Preview mode.

Patterns are made up of repeated tiles. To accomplish our goal of making this thing into a piece of vector greatness, we’ll need the individual tile that makes up this schweet pattern you just created. We will be able to remake this tile in Illustrator and use that to create our vector pattern.

To export the pattern tile, here’s what cha do: Hit the share button in bottom middle > Export As… > Pattern Tile.

Your final pattern tile could also be a square — it depends on the cut you chose earlier in Step 3.

Send that thang to yo-self.

Ready to continue in Adobe Illustrator? Let’s go to Part 2…

Capture CC has several other cool features outside of its ability to generate patterns. For a full list of features and capabilities, check out the official Adobe Capture CC product page.

Do you like free stuff?

I have a mailing list for Updates & Freebies where you get goodies direct to your inbox.

Press this button to get in on the action ?

You can find me on…

Create Awesome Patterns (Part 1 of 2) was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Create Awesome Patterns (Part 1 of 2)

Cool stuff, every week

More Articles