Join Chris Converse for an in-depth discussion in this video Navigation dots, part of Sketch: Prototyping an Image Carousel.
- [Instructor] So now with all of our arrows created, next we're gonna work on the dots inside of the navigation bar. So, I'll come up here to my zoom tool. Let's zoom in on one of the art boards. I'm gonna choose art board two here. And so what we're gonna do is create a circle, and we're going to put it right in the center of the art board right between the first set and second set of six columns. So let's come up here to insert menu. Let's come down to shape, let's choose oval. Gonna get my cursor inside of here. I'll see a smart guide show up right in the center. Gonna hold the option key and the shift key and then click and drag.
So here I have a 24 by 24 sized circle, so let's come in here with the lock tool selected, and let's just hit the down arrow to bring this down to a 20 by 20 circle. So I'll zoom up on this a little bit more. So with these circles selected, let's come over here to the inspector panel, let's uncheck the fill, let's come down to the border. Let's apply white as the color. For the thickness we'll bring this up to four. Then let's come up here and select this, gonna move this over toward the right.
So the left side of the circle aligns with the left side of the seventh column. Next I'll come up here to the position. We're gonna set the position of the Y value to 595. Then with that in place, let's select the circle, let's either right-click or come up here and choose create symbol, and we're gonna name this nav hyphen dot. With that in place, we'll say okay. If I scroll up here in the left side, where we can see the layers, we'll see that nav-dot is now inside the image two art board.
So now we'll select this hold the option and shift key, let's click and drag and we're going to drag a copy so that the right side of this copy is on the right side of the sixth column. And that'll give us a distance of 25 pixels between the two and we can see that showing up in the smart guide. Then I'll hold the option key, and shift drag again. And when this is the same distance as the other two we'll see a smart guide show up. And then one more time let's option drag a copy of this towards the right.
Creating four circles that are evenly spaced. And just to make sure, we can come in here and select all four circles and then up here on the alignment tools at the top of the inspector panel, we can hit the distribute layers horizontally. Choose place on sub pixels and then I'll just move a little bit. And so now, we have a new nav-dot symbol and we have four of those places on the image two art board. And now with all four of these selected let's come up here and wrap all of those into a new symbol. So we'll click create symbol.
We're gonna call this nav hyphen bar, click OK, and we'll see now in the image two art board we now we'll have one symbol called nav-bar. And inside of this symbol, are all of the instances of the nav-dot symbol. So to see this, let's go back to the symbols page hold the space bar, I'll pan over. I'm gonna select the nav-bar label here and just move this over here to the left little bit. Then I'll zoom up on these two.
Hit the escape key. I'm gonna select nav-dot. Let's come over here and change the background color to black. Just so we can see the art work. And this background option will have no effect on the way the symbols look as long as we don't check this check box here that says include in instances. And then I'll come over here and select the nav-bar symbol and lets activate the background color here, and set that to black as well. So now that we have the nav-dot symbol created and the nav-bar symbol which includes instances of the nav-dot.
Next, we'll make the nav-dot selected state and then we'll make use of these nested symbols in the art boards.