![]() Double-click the Repeat Grid group, select the first 30 pixel shape that we created, and adjust the colour to white. ![]() Once the gaps have been reduced, select the green right slider again, and drag this out to the right, until it lines up with our right-hand margin as before.ġ0. For this tutorial, reduce the spacing here to zero, so that there are no gaps between our shapes.ĩ. By selecting and clicking inside this space (the gap in between objects) you will see some pink guides appear, that allow you to adjust the gutter spacing. When using the Repeat Grid Tool, Adobe XD automatically creates a gutter (spacing) in between the different objects that are being repeated. Your shapes should now have a set of green guides around them, allowing you to drag the slider on the right, until it touches the edge of the right margin that we created in Step 3.Ĩ. Next, click on the Repeat Grid button in the Property Inspector on the right-hand side.ħ. Using Shift to select these three shapes (excluding the main rectangle). The three rectangle shapes should all be lined up alongside each other, with no gaps in between.Ħ. Create another vertical rectangle that is a different shade of grey to the two shades already being used by the other shapes, and position this alongside the shape created in Step 4. Colour this new shape black, and position this alongside the shape created in Step 3.ĥ. Create another vertical rectangle that is 100% height, and 67.5 pixels in width (70 pixels if you design your grid without the left and right margins). Give these shapes a slightly different shade of grey, so that we can easily distinguish the different shapes/elements, whilst working on the layout.Ĥ. Duplicate this shape, and also position a copy on the inside right edge of the main rectangle. This is going to form our site margin, and should be positioned on the inside left edge of the main rectangle. ![]() Create a thin vertical rectangle, that is 100% height and 15 pixels in width. Go to Object > Lock to lock this layer in position, so that we don’t select it by mistake when working through the steps to follow.ģ. Give this rectangle a grey colour for now. This shape is going to represent the maximum site width that we will be designing for, and should be centrally aligned to the artboard. Create a shape that is 100% height, and 1170 pixels in width. Create a new document 1920 x 1080 from the Start Screen.Ģ. In this tutorial, we’re going to learn how to create guides for responsive design, in Adobe Experience Design CC (Adobe XD).ġ.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |