Concepts is an infinite, flexible creative tool for all your good ideas. Available on iOS, Windows and Android.

How to Make Icons

Concepts’ Smoothing, Slice and Nudge tools make creating icons easy work. Learn how to make the icons we use in our own Concepts menus inside the app, and try your hand at making your own.

In this YouTube video, watch designer Lasse Pekkala create a left and right-handed icon for the Concepts UI. Sketch along with him or scroll below to follow the steps with the photo tutorial.

Note: Images are taken using Concepts for iOS, but all Windows, Android and iOS platforms support the following workflow.
 

Creating the Hand Graphic

If you’d like a quick start with this tutorial, download this Concepts template onto your iPad or iPhone. It has the tools and set up you need to create these icons. Tap the link, select “Open in...” and choose Concepts. It will open directly in the app for you.

1. Import a photo of your hand. Double-tap the Import button on your canvas as a shortcut to bring up the import menu. Choose Camera and take a photo of your hand. Try to capture it in a way that seems iconic.

Double-tap the Import button as a shortcut to open the menu, choose Camera and take a photo of your hand.

2. Open the Layers menu, and tap the image thumbnail to bring up the layer’s selection popup. Use the slider to turn down the opacity of the image.

Decrease the opacity of your photo using the slider on the layer popup.

3. Create a new layer above the image layer, and choose the Fixed Width brush from your tool wheel. This brush will keep your graphic’s outline as simple as possible.

Choose the Fixed Width brush and create a new layer above the image.

4. Apply smoothing to your brush. 0% gives you a raw line, 100% creates perfectly straight lines. Set the smoothing to around 50%.

Tap the smoothing icon on the inner ring of the tool wheel and set one of your presets with the slider.

5. Trace the outline of your hand onto the canvas.

You don’t have to get the outline exact.

6. Now find the Nudge tool in your tool wheel, and nudge in or out the parts of your lines that seem out of place. Nudging on a line will drag it about, while nudging on either side of a line will push it around.

The bigger the value of the tool size, the more line you’ll pull or push at once.

7. Now hide the reference image layer so you can see how the lines are looking without interference.

This hand is looking pretty smooth.

8. For smaller tweaks, zoom in on your image. You’ll notice the Nudge tool remains the same size regardless of zoom, so it’s easy to make edits without adjusting the tool.

The nudge tool remains the same size even when you zoom in on your image.

9. For extra smoothing to the entire shape, select your lines, then apply smoothing using the slider in the tool wheel.

Select and smooth your entire graphic at once with the smoothing slider.

10. The hand is looking a bit wide for the icon, so we’ll slim it down a little. Choose the Slice tool and set it to 0 points to make an incision in your line. (Make the tool larger to erase or smaller to incise.) Select the sliced thumb and reconnect it at a higher angle with the fingers.

At 0 pts, the Slice tool will seem to do nothing at all, it just appears as a tiny red dot. But it sliced your outline into two separate pieces.

11. If you need to trim the ends of your lines, make the Slice tool larger and erase them.

Trimming away a bit of excess at the bottom of the hand.

12. To give your outline a sense of direction, add in the palm line of the hand. Draw the curve with the Fixed Width pen. You can activate Snap in the Precision menu to help you align the lines. Go ahead and refine your graphic until you are happy with it.

With Snap active in the Precision menu, select your palm line and snap it into place. If Snap to Key Points is enabled, you might see some grey "snap markers” appear. Tap one to snap to that location or ignore them and place it freehand.

13. To check that your outline will work in the sizes you’ll be using it for, select your graphic and size it smaller. Using the selection menu at the bottom of the screen, toggle between stretch (keeps your line width) and scale (scales your line width based on size) to shrink your icon.

Select the graphic and pinch it small. If it gets too thick, undo with a two-finger tap and try using Stretch instead.

Looking good!

Mocking Up the Button

1. Now let’s mock up the button part of the icon. We’ll do this by adding a circle around your hand graphic. Open up the Basic Shapes object library and drag in a circle. Resize and position it around the graphic.

Tap the Import menu once to display your objects. If Basic Shapes isn't your active library, tap More to open the Object Market and find it. Then tap or drag a circle onto the canvas.

2. Select the circle outline, open the color wheel and choose a mid-gray. That’s all there is to the first button.

The button for a left-handed interface is ready.

3. To create a second button, select your entire graphic and tap Duplicate in the popup. Position it off to the side, then tap the Mirror button to flip it.

The right-handed button is exactly the same, only mirrored.

4. Let’s make this into the “active” button. Tap+hold the second circle, select black as the color, then adjust the line weight to a larger thickness.

The "active" right-handed icon is ready to be handed into the UI.

5. If you want a transparent background for your icon, head to Settings and select Transparent from among the paper types.

Find the Transparent background in Settings > Workspace > Background.

6. To export one icon at a time, just Select the icon and tap+hold+drag the selection. Pull up the command bar and drop it into your Files or other app.

You can toggle tap+hold+drag of selections in Settings > Gestures. Check or uncheck the box beside “Enable iOS drag+drop of active selections” under Tap+Hold.

And that’s it. That’s how simple it is to create icons in Concepts.

I hope these techniques help you to achieve your design goals quickly. If you have any questions about either the tools or process, please send a message to concepts@tophatch.com and we’ll be happy to help. For more video tutorials, visit our YouTube channel.
 

Content and video created by Lasse Pekkala

Recommended

Creating a Project Template - Learn how to create a project template for sketching, note taking, storyboarding, design plans and illustrations. Download these free templates.

Setting Up Your Menus, Brushes and Presets - Learn how to customize your canvas layout, menus, tool wheel and brush presets in Concepts.

Select and Edit Your Notes, Drawings and Designs - Learn how to select and edit anything you draw in Concepts.