Adobe XD: Graphics and Text

Name: Adobe XD: Graphics and Text
Author: Alyssa Galganov

Explore creative ways to use images and fonts in Adobe XD

Preview the first lesson free — get full access to all 4 lessons.

Course: On-Demand

Hello, my name is Alyssa, and in these lessons I will introduce using images and graphics in Adobe XD. Visuals will greatly improve your Adobe XD designs. These visuals can include vector graphics, photographs, icons, and more. Let's go over a couple of simple ways to add these elements to your projects. If you prefer to use menus to access your images, then you would go up here to file, import, and navigate to the image you would like. I'm going to click on user experience two in the user experience images folder provided, and select it by clicking on import. The image is placed in the center of my art board on top of any other elements that might be on this page. I'm gonna go ahead and delete it so I can show you another way to do the exact same thing. This time we will use keyboard shortcuts. I'm going to press Command + Shift + I and navigate to that same user experience two image, and click on import. For Windows users, it would be Control + Shift + I. Again, I'm gonna go ahead and delete this. And I'm gonna go ahead and bring over the user experience images filter, and show you that we can also just drag and drop onto our art board. I'm gonna go ahead and click on user experience one this time, hover over this box until I see the blue background, and then I release. And the image is inside there. There's still some of the image that has been hidden, and you can tell that because it's faded. Anything that is in focus is gonna be where it goes. So I could also just, with this selected, move it up a bit. And there we go. So we could do the same thing with the other shape. We have a square here. We can drop in that same other image. And again, we could click on it and place it how we like. We are not limited to just using photographs. We can also use vector art. The best way to actually use vector art in Adobe XD, which is also a vector-based program, is to copy and paste. So I have an Adobe Illustrator file ready to go here called User Designer. Just so you can see, here she is. I'm gonna click and drag over her. I'm gonna press Command + C. It would be Control +C for Windows. I'll close it and get this out of our way 'cause we don't need that again. And I'll click on my board here and just press paste. And there we go. I'm gonna go ahead and show you that she could be changed. That's what the great thing is. So let's navigate over to her little pink shirt here. And we can tell that's highlighted. The pink is showing over here in the fill. Let's click on it and just sample a blue. And there we go. Or green. Let's do a different color this time. And I'll click off. So any of her, any of the elements that make up this graphic image can be changed, which is what I like is the flexibility of vector images. It's very easy. You could either copy and paste, you can drag and drop, you could import from your navigator. Whatever makes you happy through this. Thank you for watching. Please stay tuned for the next lesson where we will learn about adding and using fonts in Adobe XD.

Beginner Provider : Alyssa Galganov 4 Lessons · 15m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

In this course, we will explore creative ways to use images and fonts in Adobe XD. Visuals greatly improve Adobe XD designs. These visuals include vector graphics, photographs, icons, and more. We will also discuss how to resize, reposition, and mask elements, as well as options for font choices, weights, and styles that can enhance your projects.

Adobe XD allows you to easily try out a variety of designs. You can add images and text and then manipulate them to your liking. We’ll explore how to add a frame to an image, round its corners, add a drop shadow, and a variety of other effects. You’ll learn about masking, which allows you to choose which part of an image is visible and is a creative way to change up the look of an image.

What You'll Learn

Add images, graphics, and vector visuals to Adobe XD designs
Install, use, and manage fonts for your projects
Mask an image within a shape to control which part is visible
Resize and reposition images and elements
Apply effects such as adding a frame, rounding corners, and adding a drop shadow

Key Takeaways

Visuals such as vector graphics, photographs, and icons greatly improve Adobe XD designs.
Adobe XD lets you add images and text and then manipulate them by resizing, repositioning, and masking.
Masking allows you to choose which part of an image is visible and is a creative way to change the look of an image.
Font choices, weights, and styles can be used to enhance your projects.
Image effects in Adobe XD include adding a frame, rounding corners, and adding a drop shadow.

Frequently Asked Questions

What does this Adobe XD course cover?

It explores creative ways to use images and fonts in Adobe XD, including vector graphics, photographs, and icons, plus how to resize, reposition, and mask elements and work with font choices, weights, and styles.

What is masking in Adobe XD?

Masking allows you to choose which part of an image is visible, and it is presented as a creative way to change up the look of an image.

What image effects will I learn to apply?

You will learn how to add a frame to an image, round its corners, add a drop shadow, and apply a variety of other effects.

What lessons are included in this course?

The course includes Adding Images and Graphics, Adding and Using Fonts, Resizing and Repositioning Images, and Masking Images.

What skills does this course help build?

It supports skills including Adobe Fonts, Adobe Visual Communicator, Adobe XD, Graphic Communication, Graphic Arts, and Graphic Design.