Adobe XD CC Tutorial

App Logo

In our previous articles, we learned about How to create some basic shapes, modify properties and how to use hand and Zoom tool. Now we are ready to create some advanced UI elements. In this article, we are going to create a simple logo for our App. Before creating our logo a brief about what we are going to create in this tutorial series.
We are working on an eCommerce application design. Our e-commerce store brand name is dealsato.xyz. We are going to create a logo for the same brand. Before staring below is the image what we need to create.

For this article, we are going to use create a new blank document. Now let's first divide our logo into simpler UI elements. in our logo, we have one pentagon, a small round circle, few text items.
Now we are going to start with the rectangle tool. Let's create a rectangle. Hmm, we have our rectangle. It's time to create a pentagon. For our Pentagon, we are going to use the above rectangle as a reference. Select pen tool creates a point on the left edge of the rectangle. Ensure the point is in the center of the left edge of the rectangle. The next second point is on the top edge of the rectangle. Next, the third point is on the top right point of the rectangle. Forth point on the bottom right point of the rectangle. Fifth the last point on the bottom edge of the rectangle. The last point position (only x or y based on the vertical and horizontally pentagon). Now for closing the Pentagon merge the 7th and the last point with the first point.

Step by Step Process to create a Pentagon in Adobe XD.

Once done define a border and color for the logo. For this tutorial, I am using a black color fill and no border. Now our main element of the logo is ready. Let's add some text to the logo we are using 4 text items with the following text. For text item, we are using red color with font "Cosmic Sans MS".

  • Deals
  • o
  • at
  • oXYZ

Next, arrange all the elements as shown in the following image.

Now for editing the elements, we need to convert our text into objects. For this select all the text elements and go to "Object->Path->Convert to path". Next, we need to extend the "t". For this double click on it and then select right most 6 points and extend it towards the right until it reaches the rightmost edge of the Pentagon. Refer the following image for more details.

Now the last thing is remaining. Select "o", "Deals", "at" and Pentagon. Now go to "Object->Path->Substract". After performing this operation our logo likes as shown in the following image.

So our logo is almost done. Let's change the color for "oXYZ" color. Finally below is the different color variation for our logo.

Our logo is done. What is next we are going to use it for our entire app and website prototype.

Following is the download link for Adobe XD file for this article.

FileDownload
Dealsatoxyz_Logo.xdLogin to Download

In the next article, we are going to create splash screen for our app.

0 Comments
Leave A Comment

Please login to post your valuable comments.

share