Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:9Length:30 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Move Icon

To kick things off, let’s learn how to set up an artboard with a grid, and then design a ‘move’ icon.

2.1 Move Icon

[MUSIC] In this lesson we’re going to learn how to design a move icon in Adobe XD. So, to to start with, I'm working on a 60 by 60 pixel art board, and I'm going to switch on my grid. And the grid is set to 1. So every one pixel there will be a horizontal and vertical grid line. The first thing to do is select the line tool, and left-click and hold Shift to draw a horizontal line. Next we're going to select the pen tool and left-click and hold Shift to draw a line at a 45-degree angle. Left-click again, drag this down the other side, and you'll see those guides nicely line this up. So we can left-click again. And it wants to continue that line, but we can press Escape on the keyboard and it cancels that. And we now have our arrowhead. So, we can can drag over both of these shapes and set the width to 2. And from the color picker we can now pick a color. I'm going to use 4A4A4A. Press Return. And we can also add this as a color swatch here for use at a later time. So now we can drag the arrow head into position and rotate by left-clicking from the corners when you see this symbol. And it rotates freely. Or we can hold Shift and rotate in set increments. And you can also enter your rotation up here in the property inspector. So we can drag this into position. And then go to Edit > Duplicate, and hold Shift and drag this across. And then, again, hold Shift and rotate from one of the corners so it's pointing the other way. So now we've created one of our arrows. We can drag over both of these, go to Edit > Duplicate, and again, hold Shift and rotate from one of the corners. And it will complete our arrow. Now the horizontal one is aligned to the pixel grid nicely. This vertical one, we need to select this and just remove this 0.5. So we'll change that to 29, we'll round it down, and you'll see it shuffles in place. And these arrows as well, we can just shuffle those into place. And then drag over everything and go to Object > Group. And our arrow shape is all now grouped together. And we can scale this down and up from the center, by holding Shift and Alt and left-clicking.