How to Design a Logo using a Logo Grid

Designing a logo can be a daunting task. There are so many factors to consider, and it can be hard to know where to start. In this tutorial, we’ll show you how to use the Vector Ink logo grid system to design a professional logo. We’ll also give you some tips on how to choose the right colors for your logo using our color palette library. So let’s get started!

Vector Ink is more than just an everyday online SVG editor. It’s a powerful vector editor for drawing complex vector logos with ease. You’ll spend literally seconds carving a shape using Vector Ink that would naturally take 5-10 minutes using any standard vector design software.

The Vector Ink logo grid system is a great way to create a professional logo quickly and easily. This system uses a series of geometric shapes to create your logo. You can start with basic shapes, such as squares, lines, and circles, and then use the Path Builder Tool to carve new shapes where those shapes intersect. This tool is similar to Illustrator’s Shape Builder Tool but allows for more precise interactions with the paths involved.

Once you have your basic shape, you can start adding color. When choosing colors for your logo, it’s important to consider how they will look in both light and dark contexts. You may want to use a light color for your main logo, and then use a darker version of that color for business cards and letterhead. Or, you may want to use two different colors that complement each other well. Using Vector Inks color palette library or color palette generator you can experiment with different color combinations until you find something that you like.

Getting Started

Get started by opening the vector editor in any web browser or install the Vector Ink app via Google Play.

Once in the app, click New to be taken into the canvas.

Upon entering the canvas, a Document Presets window will appear. Select the first option to use 700px x 700px canvas.

The Logo Grid

Now we’ll begin laying down the ground work for our logo grid.

Click the Rectangle Tool located in the toolbar on the left.

Then click on the Rectangle Tool again to bring up the list of shape tools.

From the shape tools menu, select the circle shape to activate the Circle Tool.

Holding shift (or by tapping the constrain button below), drag a circle shape onto the canvas.

The Shift key/constrain button will produce a circle of equal width and height.

The circle does not need to be any particular size, just big enough to fill up more than half the canvas.

Next, activate the Selection Tool and the newly added circle should be selected. If not, click on the circle to select it.

Now click on the Align-X and Align-Y buttons to align our circle in the middle of the canvas. If you’re using a mobile phone you may have to open the alignment panel to find these buttons.

Next, duplicate the circle by clicking the duplicate button located at the bottom of the screen.

Now that the circle has been duplicated, the newly duplicated circle will be selected and sitting directly on top of the original circle.

Next we want to scale the new circle down to about half the size of it’s parent.

Click on the top right transform handle so there is only one left.

This shortcut will allow us to scale the shape down evenly without having to holding the Shift key or using the constrain button.

Now scale the circle down until it’s about half the size of the parent.

Next, click off onto the canvas to deselect the selected circle.

From here, drag your mouse/finger over both circles to select them both.

Drag both circles up a bit, near the top of the canvas.

Next, select the Circle Tool in the toolbar, and selected it again to open the shapes menu.

Then select the line at the bottom of the shape menu to activate the Line Tool.

Next, draw a straight line from above the outer most circle, down on the left of the circles until it reaches the bottom of the canvas.

Then activate the Selection Tool.

With the Selection Tool active, drag the line to the right until it snaps to the left of the outer circle.

From here, duplicate the line by clicking the duplicate button

The drag the newly duplicated line to the right until it snaps to the left of the inner circle.

Now select the inner circle and duplicate it as well.

Then drag the newly duplicated circle down to the bottom between both lines.

Click on the top right handle so that all eight transform handles appear.

Then, drag the right handle so that it scales the right side of the circle until the right side of the circle snaps to the line on the right. Then do the same with the left handle.

After both sides of the circle are snug between both lines, drag the top handle down until it snaps into even dimensions.

At this point you should have a circle with an equal width and height sitting at the bottom between both lines.

From here, select the inner circle again and click duplicate.

Drag the newly duplicated circle down until it snaps to the bottom of the outer circle, and make sure it’s also snapped to the center of both circles.

Just like we did with the circle at the bottom, we want to make this circle fit perfectly between the bottom of the outer circle and the bottom of the inner circle with equal dimensions.

Click on the top right handle so that all eight handles are visible.

Then drag the top middle handle down until the top of the circle snaps to the bottom of the inner circle.

Then drag the right middle handle to the left until the circle snaps to equal width and height dimensions.

Then drag the whole circle to the right until it snaps to the middle of inner and outer circle.

Next, select the outer circle and duplicate it.

Then drag the newly duplicated circle to the right until it snaps to the left of the inner circle. Make sure it is snapped to the center of bother inner and outer circles vertically.

Next, duplicate that circle.

Then drag the newly duplicated circle down so that it snaps to the top of the inner circle. Make sure it also is snapped to the center of both the inner and outer circles.

At this point your logo grid should be complete. Compare it to the example below and make sure all circles are aligned correctly before moving forward.

Choosing a color palette

Now open the Fill-Color Panel by clicking the Fill-Color button in the top right, located left of the Stroke-Color button.

Then click on the three dots to the right of the color palette to open up the color palette window.

In the color palette window, click on the menu button located at the bottom right of the window to bring up the color palette library.

Feel free to select a color palette you like or select the one shown in the image below.

Then click the “x” button located in the bottom right of the window to close the color palette window.

Path Building

Now this part can be a little tricky if you are not use to Vector Inks Path Builder Tool. It is recommended that you watch the video to learn what to do in case you make a mistake as this written tutorial will not cover how to recover from a path building mistake. We’ll drop the video at the end of the tutorial starting from this point in case you run into issues building out this shape.

Start by highlighting all shapes on the canvas.

Next, activate the Path Builder Tool

Select the first color you wish to use for the first part of this logo.

Then, drag your mouse/finger from the bottom circle up until you reach the top corner show below.

Before releasing your mouse, make sure the shape shown below is completely highlighted orange.

Upon releasing the orange outline will turn blue if the shape was successfully formed. If the outline is still orange, feel free to activate the pencil and/or eraser icons located at the bottom of the screen to fix any mistakes.

Then, select the next color to use for the second part of the logo.

Drag from the left most corner shown below to the right corner where the outer circle and the bottom-outer circle intersect.

Lastly, drag through the remainder of the path as shown in the picture below.

Watch here in case you’ve ran into any issues as this shape is a bit complex for a first time user.

Once all shapes are outlined in blue, activate the Selection Tool and your results should look like this.

At this point you should play around with the gradient tool and other colors to experiment with the other features Vector Ink has to offer.

We hope you liked this tutorial. Share your experience in the comment section below and subscribe to our Youtube channel to be notified of more tutorial videos like this one.