Vector Graphics, Colors, Shadows, & More

Topics covered in this Adobe XD tutorial:

Importing & modifying vector graphics, Aligning & distributing layers, Layer opacity vs. fill opacity, Reusing colors (color swatches), Adding a drop shadow

Exercise Preview

Exercise Overview

In this exercise, you’ll learn about importing, creating, and styling vector elements.

Importing & Modifying Vector Graphics

1. In Adobe XD, go to File > Open from Your Computer or hit Cmd–Shift–O (Mac) or Ctrl–Shift–O (Windows).

2. Navigate into Desktop > Class Files > Adobe XD Class > NYC and double–click on About Page - Ready for Graphics.xd to open it.

   This design is further along than the earlier NYC exercises. We want to finish the navigation at the top by adding a logo and a semi-transparent background to distinguish the navbar area from the rest of the page.

3. To prevent ourselves from accidentally moving the cab photo, Ctrl–click (Mac) or Right–click (Windows) on the cab photo and choose Lock.

   TIP: You can also hit Cmd–L (Mac) or Ctrl–L (Windows) to lock an item, or hover over a layer in the Layers panel and click the lock icon.

4. We need to add a logo to the top left of the page. We want to import the logo as a vector graphic so it remains as editable vectors in XD. While we could copy and paste from Adobe Illustrator into XD, let’s see how to import vector files into XD.

   Go to File > Import.

5. Navigate to Desktop > Class Files > Adobe XD Class > NYC and notice:

   • We’ve provided the NYC Logo in three file formats: AI, PDF, and SVG.
   • The PDF file is grayed out on Mac, and not even shown on Windows.
   • The AI (A dobe I llustrator) and SVG (S calable V ector G raphic) files are available to import.
6. Double–click on the NYC Logo.svg to import it.

7. The logo was placed in the middle of the artboard. As shown below, drag the logo so its left edge aligns with the first aqua content column. Leave a little bit of space between the top of the logo and the top of the artboard, but don’t worry about an exact amount as we’ll tweak it soon.

   

8. Zoom to 100% by hitting Cmd–1 (Mac) or Ctrl–1 (Windows) so you can see the logo better (scroll so you can see the logo if needed).
9. Let’s change the logo color to white. Make sure the logo is still selected.
10. In the Property Inspector, click on Fill to open the color picker.
11. Choose white.
12. Hit Esc to close the color picker.

13. Let’s make the logo a little smaller. With the logo still selected, hold Shift (to maintain the aspect ratio) and drag the bottom-right handle to make the logo a little smaller (as shown below):

    

14. We don’t need to see the grid anymore, so let’s hide it. Hit Cmd–Shift–' (Mac) or Ctrl–Shift–' (Windows) to hide the layout grid.

15. Choose View > Guides > Hide All Guides or hit Cmd–; (Mac) or Ctrl–; (Windows).

Creating a Navbar Background

Let’s darken the area behind the logo and navigation text links so they stand out more.

1. To see everything, zoom to fit all by hitting Cmd–0 (Mac) or Ctrl–0 (Windows).
2. In the Toolbar, select the Rectangle tool .

3. As shown below, drag a rectangle across the entire top portion of the artboard. Extend the rectangle slightly off the left and right sides to ensure it completely covers the artboard (so we won’t see the left and right borders):

   

4. In the Toolbar, choose the Select tool .
5. With the rectangle still selected, in the Property Inspector, set H (height) to 80.

6. To ensure the top border is hidden outside the artboard, in the Property Inspector under Border click on Outer Stroke.

   

7. In the Property Inspector, click on Fill to open the color picker.

8. Set Hex to 6b4656 and hit Return (Mac) or Enter (Windows) to apply it.

   TIP: You can type in a single character hex color value (such as B) and XD will expand it to #BBBBBB automatically! You can also type in 3 character values (like 2ab) and XD will expand it to #22AABB for you.

9. Click on Fill again to close the color picker.
10. Click on Border to open the color picker.
11. Choose white.
12. Click on Border again to close the color picker.
13. In the Layers panel, Rectangle 1 should be selected. Double–click on its name and rename it nav bg.

14. Drag the nav bg layer below the EVENTS text (the last item in the navigation).

Aligning & Distributing Layers

1. Make sure you can see the three text links in the navbar at the top right of the page.
2. Click on EVENTS to select it.
3. Hold Shift and click on the two other text links: HISTORY and RESOURCES.
4. To evenly space out the text, at the top of the Property Inspector, click Distribute Horizontally (the fourth icon from the left).
5. We want to vertically center all the navbar elements. If part of the NYC logo is positioned below the bottom of the navbar background, the alignment won’t work. Make sure the NYC logo is completely inside the navbar background before proceeding.
6. Let’s select everything in the navbar. In the Layers panel, click on the NYC Logo group name to select it (do not click on the folder icon).
7. Hold Shift and click on the nav bg.
8. To vertically center all the elements to each other, at the top of the Property Inspector click Align Middle (Vertically) (the second icon from the left).
9. While everything is still selected, let’s group the navbar elements for organization. Hit Cmd–G (Mac) or Ctrl–G (Windows) to group them.
10. In the Layers panel, double–click on the new Group 1 name to edit it.
11. Type nav and hit Return (Mac) or Enter (Windows).
12. Click on a blank area of the canvas to deselect the group.

Layer Opacity vs. Fill Opacity

Anywhere you use a color in CSS, you can specify opacity (using RGBA). XD offers the same control, so we can set different opacities on the layer, fill, and border.

1. Let’s make the navbar’s background color semi-transparent. On the artboard, click on the navbar background to try to select it.
2. Look in the Layers panel and see that the entire nav group is selected. This means the nav bg we want to edit is not selected.
3. Click on a blank area of the canvas to deselect the group.
4. Double–click on the nav background to enter the group and select it.

5. Look in the Layers panel and see that the nav bg layer is selected!

   When dealing with nested groups you may have to double–click many times to drill down into the group you want to work in. Let’s see a more direct way.

6. Click on a blank area of the canvas to deselect the layer again.

7. Hold Cmd (Mac) or Ctrl (Windows) and click on the navbar background again.

   Your click should have reached through the group and directly selected the nav bg layer. This works no matter how nested your groups are!

8. With the nav bg layer selected, go to the Property Inspector and under Appearance, drag the Opacity  slider to see that it affects both the fill and the white border.
9. We want the border to stand out to better delineate the content, so we only want to change the fill’s opacity. Put Opacity  back to 100%.
10. Click on Fill to open the color picker.
11. To the far right of Hex, set transparency to 50%.
12. Click on a blank area of the canvas to close the color picker and deselect the nav bg.

13. Notice the fill is now transparent, but the white border is still fully opaque.

    NOTE: You can also set Border opacity the same way as Fill opacity.

Reusing Colors (Color Swatches)

We want to reuse the purple color you just create elsewhere in this file, so let’s save it as a color swatch. Colors swatches not only let you quickly apply colors, you can quickly change that color everywhere it’s used in the entire file!

1. Hold Cmd (Mac) or Ctrl (Windows) and click on the navbar background again.
2. To open the Libraries panel, at the bottom left of the window click the  icon.
3. In the Libraries panel, click the + button to the right of Colors to save it as a swatch.
4. Click on an empty part of the artboard to deselect.
5. The white border color was also turned into a swatch, but we don’t want it. In the Libraries panel, Ctrl–click (Mac) or Right–click (Windows) on the white swatch and choose Delete.
6. Scroll down to the bottom of the artboard and find the gray footer. Let’s change this to the same color we used for the nav background.
7. Click on the gray footer rectangle on the artboard.
8. In the Libraries panel, click on the semi-transparent purple color swatch.
9. Look on the artboard to see that the footer is the same exact color we used for the nav background.
10. In the Libraries panel, Ctrl–click (Mac) or Right–click (Windows) on the semi-transparent purple color swatch and choose Edit.
11. In the color picker that appears, drag to choose any new color (it doesn’t matter what you choose) and notice that the color changes everywhere in the file!
12. Click on a blank area of the canvas to close the color picker.
13. Let’s make one more color swatch to better understand how they work. Notice that the two headings (UNLIKE ANY OTHER CITY and Popular New York Attractions) are the same reddish color.
14. Ctrl–click (Mac) or Right–click (Windows) on either of those headings and choose Add Color to Assets.
15. In the Libraries panel, Ctrl–click (Mac) or Right–click (Windows) on the reddish color swatch that you just added, and choose Edit.

16. Drag to choose any new color (it doesn’t matter what you choose) and notice that the color changes both headings!

    When you edit a color swatch, XD will change every place that exact color appears in the entire file. You didn’t have to apply the swatch to create a link as you do in many other apps. Think of this more like a search and replace for color. Pretty cool!

Adding a Drop Shadow

Let’s add a drop shadow to the NEW YORK CITY heading to make it stand out more from the taxicab photo behind it.

1. Scroll up and select the large NEW YORK CITY heading.
2. In the Property Inspector, check on Shadow.
3. Click on the word Shadow to open the color picker.

4. The far right vertical slider is for Alpha (transparency). Drag the slider all the way up to the top to darken the shadow.

   NOTE: At the bottom of the color picker, the transparency setting is to the far right of Hex (it should now be 100%).

5. Click on the word Shadow to close the color picker.
6. Under Shadow, click in the B (blur) value to put your cursor there.
7. Press the Down Arrow key to see the value decreases from 6 to 5.
8. Hold Shift and press the Up Arrow key two times to increase the value to 25.
9. To vertically move the shadow, click into the Y value.

10. Hold Shift and hit the Up or Down Arrow keys to move the shadow.

    NOTE: Shift–Arrow keys move 10 pixels. Arrow keys move 1 pixel at a time.

11. When done, set Y to 0.
12. Click on an empty part of the artboard to deselect and see the final layout.

13. Save the file and close it.