If you’ve ever wanted to build a custom logo but aren’t familiar with professional vector design software, it is entirely possible to design a logo on your phone. Using the app Assembly, you can build a custom vector logo, right on your phone, using its shape building tools.

Generally, graphic designers use professional vector design software to design a logo. Why? Well, the tools to properly design and polish a logo don’t really exist on a mobile device. That being said, the app Assembly is the closest you can get to logo creation perfection on a mobile device. It allows you to use a huge library of shapes to build any type of icon you want, then top it off with any font you like. To summarize, if you need to design a logo on your phone, use Assembly. And now without further ado, here’s your Assembly logo tutorial.

Note: Assembly is only available for the iPhone and iPad

Step 1: Have An Idea For a Logo

Before you start your logo design in Assembly, you should have a general idea of what you want to make. You could sketch something out on grid paper or use a sketching/painting app (Like Procreate) on your phone to draw out ideas. Alternatively, you could jump right into Assembly and use it to help you generate an idea.

For this tutorial we’re going to make a very simple logo using basic shapes and some of Assembly’s shape manipulation tools. I don’t have an idea sketched out yet, so I’m going to use Assembly for the logo ideation part.

Step 2: Start a New Project

When you open Assembly, it will take you right to the project screen. Here you can see all your previous projects as well as your options for creating a new project at the top.

For designing a logo in Assembly, it doesn’t really matter what dimension we choose. But, since we’re designing on a phone, I’m going to start a new project at 1×1. This gives me a good amount of artboard space to see while the any of the bottom menus are open.

Step 3: Start With Shapes

I want to create a simple logo with some sort of mountain or tree icon. As I mentioned, I haven’t sketched anything out yet, but I have an idea in my head. Hopefully, playing around with the shapes in Assembly will turn into something good.

First, I’ll add some basic shapes to my artboard, using the Basics library at the bottom of the screen. To do this, just tap a shape and it will be added to your artboard.

When you add a shape, Assembly with automatically select a colour scheme to your project. Since I’m trying to build a new shape for my logo icon, I want all the new shapes I add to be the same colour. When an additional shape is added, Assembly will give it a new colour. Let’s change it.

To do this, tap the small circle on the top right of the Shapes panel. It will show up when you have a shape selected and the circle will be the colour of your shape. This will bring up your colour options.

You can choose a custom colour, or go to Swatches. I’m going to use the Swatches because Assembly has some really great colour schemes in there.

Here you can make a custom colour scheme or use an existing one. For now, I’m going to stick with the colours Assembly has given me. Once I find that colour scheme in the Swatches panel, I’ll apply the same colour to my new shape so I can begin building.

Step 4: Shape Experimenting

Now that we can add shapes and change their colour, we can experiment and build. There are all sorts of shape manipulation tools you have in Assembly and knowing how to use them will really help you make some cool shapes.

You can stretch, transform, rotate, flip, cutout, combine, and intersect shapes. Additionally, you can edit anchor points on every shape.

If you want to place a shape in a precise position you can use the arrows on the bottom left of your screen to nudge shapes in any direction.

Also, if you find the shape snapping isn’t allowing you to place your shapes where you want, you can turn that off at the top of your screen by pressing the magnet icon.

If you want to move a shape in front of another, use the up and down arrows on the right of your screen. This chooses the order of your layers. I’m going to see what types of shape combinations I can make from transforming my shapes.

Step 5: Shape Refining

So far, I think I like working with the triangles but I’m going to see what it looks like with three triangles together; like a mountain. To do that, I’m going to duplicate the triangle by tapping the icon of the two squares on the right of the screen.

Next, I’m going to nudge the middle triangle down a bit, to create some variety in the mountain tops. I like the shape, but I think it needs some contrast. So I’m going to open the Swatches panel again to bring up my colour schemes. Then I’ll give the two side triangles different colours, but keep the middle one grey.

Step 6: Making Shapes Uniform

I like the direction this is heading, but I want to make the triangles a bit closer together, so I’ll nudge the two outer triangles in. I can zoom in really close to make sure everything aligns. To do this, just use two fingers moved apart to zoom in, and together to zoom out.

Next, I want to add something to the bottom of my triangles to make them uniform and ground them like actual mountains. There’s a rounded line shape I can use at the bottom. I’m going to rotate it by tapping the rotate icon on the right (the round arrow). Then I’ll make it bigger by tapping on the white circle on the edge of my shape’s bounding box, and bringing it out.

Next, I can make it white so it disappears into the background and only appears to change the shapes of the triangles under it. Since it isn’t fitting perfectly on top of my triangles, I can duplicate the rounded line again and place it below.

Step 7: Adding Negative Space

The shape is much simpler now, but I want to add something else. I want to mimic the three triangles shape in the bottom as well. To do this, I will select the whole group of shapes, shrink it, and make it white, then place it at the bottom.

To select multiple shapes, you can either press and hold each shape one at a time or zoom out and tap and hold an empty area of the screen. Then drag your finger over all the shapes, selecting them as you drag.

Once I’ve selected all my shapes, I’ll copy them. Then I’m going to group the shapes together. This is done by tapping the link icon in the corner of your shape selection.

When all my shapes are grouped, I can select a single colour to apply to the whole thing. Then I’ll shrink the shape and move it at the bottom of my original shapes.

Step 8: Shape Combining

At this stage, the icon is almost done. I just want to polish it up by making sure everything is aligned, my colours work together, and that I like the shape I’ve built for my logo icon. First, I’m going to use the combine and cut out tools to simplify my shapes. Since I’m using three different colours for my icon, I’ll have three distinct shapes once I’m done.

First, I’ll create a copy of my current shape, just in case I ever need to come back and make changes later. Next, I’ll ungroup everything, then go through each shape, starting with the small white triangles at the bottom. I’m going to combine them into one shape. To do this, I’ll first delete the curved lines as they are not needed. Then I’ll select the three triangles and tap the round blue icon on the bottom right, then select Combine. Now, they are one shape.

Then I’ll do the same to the curved lines under my main triangles. Then, I’ll select both the small white triangles and the curved line shape, and combine them as well. After that, I’m going to select my whole shape, the three triangle along with the new white shape below, and go to Cut Out. This eliminates the white triangles shape and the curved line entirely, and instead, cuts them out of each of my main shapes.

Step 9: Finalizing The Logo

Now we have our shape all cut out. The shapes underneath are still mostly in their original shapes, and that’s fine since our main shape is complete. Just remember to group your shape together so the pieces can’t move independently from each other.

Remember to copy your shapes as you go along, just so you can go back to an older version of your icon if you need to. We’re not working in a program with multiple history states.

I’m not really happy with the colour scheme I’ve been using so far, so let’s try out some other options in the Swatches panel.

After the colour is finalized, I’m going to add text to complete the logo. I’m using a font that comes with Assembly rather than uploading my own. I’m using Ostrich Sans Heavy.

To add text to your logo icon, click on the text tab at the bottom of the screen. Then tap the New Text Object button. This will automatically bring up a screen where you can type. When you’re done typing, press Done at top right, then you’re brought back to the main screen with a Font button and styling options at the bottom of the screen.

After you select your font, you can adjust the kerning and select a colour for your text. Kerning is adjusted using the plus and minus icons next to the font button. Colour selection is to the right of that.

And now the logo is all done!

From here, you can export to a .png, .svg, or .pdf file. A .pdf file retains vector information and can be opened in Adobe Illustrator, so I usually export as a .pdf. To export, hit the menu button at the top left, then tap Export. This will give you the open to send your logo to a number of places on your phone, or to simply email the file.

After you export, you can still continue making adjustments in Assembly, or take it into Illustrator to really polish.

Assembly Logo Tutorial – In Summary

Assembly is a really awesome app to design in, weather you’re creating a vector illustration or a logo. Hopefully the steps above are easy to follow if you’re new to Assembly.

Did you enjoy this Assembly logo tutorial? Do you want to see more Assembly tutorials? Let me know in the comments below 🙂

If you want to learn more about logo design, not necessarily in Assembly, but in general, check out the book Creating a Brand Identity: A Guide for Designers by Catharine Slade-Brooking.

As an Amazon Associate I earn from qualifying purchases.

Photo Credits

Photo by Diana Schröder-Bode on Unsplash