Published on <a href="http://ift.tt/2ofd3ie">| Prototyping: From UX to Front End &mdash; Medium</a> Phil Goodwin 
<h4>Using Adobe Capture CC to quickly generate patterns from your own images.</h4>
<img alt="" src="http://ift.tt/2o9p4sT">
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 <a href="http://ift.tt/2ofojvf">Part 2</a>).
Now, let’s make something…
<h3>Step 1: Download Adobe Capture CC</h3>
Easy peasy, download that app! It looks like this…
<img alt="" src="http://ift.tt/2o9p4ZS">Great job on the icon, <a href="http://ift.tt/2oftrj9">Adobe Creative Cloud</a> design folk!
<h3>Step 2: Find &amp; Import A Source Image</h3>
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.
<img alt="" src="http://ift.tt/2o9yswy">
Tip: You might want to choose an image that contains some simpler shapes. These will translate well into <a href="http://ift.tt/2ofojvf">patterns you can recreate in Adobe Illustrator</a>.
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.
<h3>Step 3: Choose Your Cut &amp; Zoom</h3>
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.
<img alt="" src="http://ift.tt/2ofoGWw">
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).
<img alt="" src="http://ift.tt/2o9og7x">
When you’ve got something you’re diggin’, press that purple button…
<h3>Step 4: Refine Your Pattern</h3>
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).
<img alt="" src="http://ift.tt/2oflj1L">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.
<img alt="" src="http://ift.tt/2o9vxEo">
Cooooooool ✌️!
Let’s finish up our work in Capture CC — hit “Next” and Save the pattern.
<h3>Step 5: Export Your Pattern Tile</h3>
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 <a href="http://ift.tt/2ofojvf">making this thing into a piece of vector greatness</a>, 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 &gt; Export As… &gt; Pattern Tile.
<img alt="" src="http://ift.tt/2ofokPP">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? <a href="http://ift.tt/2ofojvf">Let’s go to Part 2…</a>
Capture CC has several other cool features outside of its ability to generate patterns. For a full list of features and capabilities, check out <a href="http://ift.tt/1OfevcP">the official Adobe Capture CC product page</a>.
<h3>Do you like free stuff?</h3>
I have a mailing list for <a href="http://ift.tt/2o9gcU9">Updates &amp; Freebies</a> where you get goodies direct to your inbox.
Press this button to get in on the action ?
<a href="http://ift.tt/2o9gcU9"><img alt="" src="http://ift.tt/2ofzKD1"></a>
You can find me on…
<ul>
<li><a href="https://twitter.com/fhlcreative">Twitter @fhlcreative</a></li>
<li><a href="http://ift.tt/2o9t1hl">Dribbble</a></li>
<li><a href="http://ift.tt/2ofgOUU">Instagram @fhlcreative</a></li>
</ul>
<img src="http://ift.tt/2o9yrcc" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2offQbu">Create Awesome Patterns (Part 1 of 2)</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Create Awesome Patterns (Part 1 of 2)

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

Top Stories