Adobe XD Intermediate: Brand Customizing

Name: Adobe XD Intermediate: Brand Customizing
Author: Jessica Henley

Customize your brand through iconography and design tokens

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

Course: On-Demand

Hello, my name is Jessica Henley, and in these lessons you will learn brand icons, intro to design tokens, and customizing web page tokens. In this lesson, I will show you brand icons. Getting started, I want to show you how to create a new file. You can navigate to File and click on New. You can also navigate to a new file by clicking Command or Control in for New. Here we have the pop-up window. There are several sizes to choose from, which include iPhone 14, and its size is 430 by 932 pixels. We also have a drop-down menu, so we have iPhone 14, iPhone 14 again, but notice it's a different size. It also has the option for iPhone Mini 13 version, iPhone XR, XS, Max, 11, even Google Pixel, and iPad. Next, we have web page, which has a size 1920 by 1080 pixels. If I click on it, you can see that it launches. But that's not the size that you want, you can just go ahead and X. Let me go back to File New. Here clicking on the down icon. We have various sizes as well. So again, for web, we had 1920 by 1080. So if you're looking for high definition, you want to go with this file size. You have web 1366 by 768, and web 1280 by 800. We also have Instagram Story. For Instagram Story, we have high definition at 1080 by 1920. It even has Twitter post, which is 1024 by 512, and it also has Facebook options and YouTube options. If none of these options work for you, you can also put in a custom size. Here I'm going to choose web page 1920 by 1080, which I already have open. Now for the icons. If you want pre-made icons, you can navigate to the plugins. Again, for plugins, make sure you're under design, and here below we have libraries. We have layers. Notice the shortcut for layers is control or command Y, and we have plugins. The shortcut for plugins is shift, command P, or shift, control P. Here under plugins, I have EOS icons. To get this plugin, you want to navigate to the top. Go to plugins, and click browse plugins. Once you're here, you can see manage plugins, and right below it, we have search all plugins. You can place in a keyword. In this case, I'm going to put icons. As you can see, I have two installed, icons scout, which you will have to create an account and sign in in order to use their icons. However, if you want to skip that part, you can download. EOS icons. So here for the icons, they have so many icons to choose from. As you can see, it says it has more than 1,000 free icons available. It also has 24 different categories and two different themes available, and they offer support for their icons. If you would like this icon, plug in, you could press get. As you can see, it doesn't have it available for me, because I've already installed it. Notice when searching for plugins, there's a lot to choose from, so I would highly recommend looking through these. For example, we have MBI icons available. We also have open icon, which has a collection of 70,000 free icons available. There are so many choices to choose. Up at the top, this is the one I have installed. We're going to exit. Let's dive in into what this plugin has available to us. So here we have EOS icons, and it says we can search for icons from the EOS collection, or copy and paste from one of the options below. When I click on an icon, it will copy it. And also look, we have categories, which is really cool. Now first I'm going to keep it on all, and then I'll come back up, and then I'll give you a preview of what it looks like when you choose one of the categories. And it has actual themes as well. Under action, which is again, all, so it's starting from the top. We're not going to look at all of them, of course, we'll just quickly browse through. So here, I'm just going to go ahead and get closer to my canvas by scrolling in. Scroll in, I'm holding down command or control, and with my scroller, I can scroll at the same time. So, for example, this banking icon, remember, it says when you click on it, it will copy it. So I need to right click and paste. You can also use the shortcut, control or command V, and here's the banking icon. Before we customize this icon, because you may want to use some of these icons for your particular brand, let's go ahead and talk about categories. Under categories, we have action, alerts, artificial intelligence, even have communication and design. Let's take a look at places. So if I click on places, I even have this umbrella right here. So if I click on that, it will copy it, right click paste. Let me look at hardware. So for hardware, I can go ahead and scroll through. They have this headset. So if I click on it, it automatically copies it, right click and paste. So these are our icons that I have chosen, and we'll go ahead and send it this. Now let's take a look at how can you customize these for your particular brand. It's super simple. As you click on the actual icon that you have picked, you can go over to appearance. Notice you can turn down the opacity if you wanted to, but for the fill, you can click here and scroll up like so and change the colors. And you can keep an eye on the actual color code as well. So here I could copy over the code and right click and copy it. And I'll say if I wanted the same color. As you can see, you can also save swatches as well, but I can right click paste and press enter. I can also press this plus sign in order to store this color for next time. And I can click on this headset and do the same thing. And the next lesson I will continue talking about brand icons. Thanks for watching.

Intermediate Provider : Jessica Henley 4 Lessons · 31m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

Adobe XD offers a variety of document sizes for iPhones, websites, social media platforms, and other custom sizes. These lessons will show you how to pick the proper sizes that will suit your design needs. You’ll learn about the role icons play in your design, how to browse plugins to find premade icons, categories and themes for icons, and how to change the colors of premade icons. You will also explore how to use Adobe XD tools to create customized icons for your brand, including modifying shapes into customized icons by changing their appearance and adding effects. This lesson also includes tutorials on using plugins to browse website templates and creating design tokens for your brand. You’ll receive tips on how to stay organized by adding colors and character styles to your design assets. When you’re ready to preview your design, you can do so in a web browser and add comments, look at specifications, and view variables within the designs.

In these lessons, you will be introduced to design tokens, and learn to customize your designs by exploring iconography and design tokens for business brands.

What You'll Learn

Designate colors and character styles for icons in your designs
Browse plugins to find premade icons and change their colors, categories, and themes
Create customized brand icons by modifying shapes, changing their appearance, and adding effects
Use design tokens to customize websites and webpage tokens for business brands
Preview designs in a web browser to add comments, view specifications, and inspect variables
Pick proper document sizes in Adobe XD for iPhones, websites, social media, and custom needs

Key Takeaways

Adobe XD offers a variety of document sizes for iPhones, websites, social media platforms, and other custom sizes to suit different design needs.
Icons play a role in design, and plugins can be browsed to find premade icons organized by categories and themes whose colors can be changed.
Adobe XD tools let you create customized brand icons by modifying shapes, changing their appearance, and adding effects.
Design tokens can be created for a brand, and plugins can be used to browse website templates.
Designs can be previewed in a web browser, where you can add comments, look at specifications, and view variables within the designs.

Frequently Asked Questions

What will I learn in this intermediate Adobe XD course?

You will learn to designate colors and character styles for icons, understand icon design tools, and utilize design tokens for websites, while exploring iconography and design tokens for business brands.

What lessons does this course include?

The course includes four lessons: Brand Icons (Part 1), Brand Icons (Part 2), Intro to Design Tokens, and Customizing Webpage Tokens.

How do I work with premade icons in Adobe XD?

You will learn how to browse plugins to find premade icons, work with their categories and themes, and change the colors of premade icons, as well as create customized icons using Adobe XD tools.

How can I preview my design?

When you are ready, you can preview your design in a web browser, where you can add comments, look at specifications, and view variables within the designs.

What skills does this course cover?

This course covers Adobe XD, Brand Enhancement, Brand Design, and Learning Design.