Skip to main content

CC Library Connection

Lesson 54 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

CC Library Connection

Lesson 54 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

54. CC Library Connection

Next Lesson: Adobe Stock

Lessons

Class Trailer

Getting Started

1

Getting Started with XD

02:21
2

What is UI vs UX

06:19
3

The UX Brief & Persona

11:22

Wireframing Low Fidelity, Type, Color & Icon

4

Wireframing (Low Fidelity)

01:58
5

How Wide for my Website

13:06
6

Existing UI Kits

07:49
7

Working with Type

09:09
8

Basic Colors & Buttons

14:14
9

Free UI Icons

11:45
10

Footers & Lorem Ipsum

05:27
11

New Pages & Artboards

04:20
12

Class Project 01 - Wireframe

11:11

Prototyping a Website

13

Prototyping & Interactivity

08:53
14

Create a Popup Modal

07:57
15

Prototype

02:54
16

Groups & Isolation Mode

02:30
17

How to Use Components (Previously Components)

17:19
18

Production Video - Left Nav

03:52
19

Repeat Grid

05:27
20

Updating Components & Repeat Grids

08:54
21

Prototype Tricks

06:03
22

Navigation Tricks & Tips

04:48
23

Class Project 03 - Components

04:07

Prototyping an App

24

Mocking Up an App

09:40
25

XD App on Your Phone

08:04
26

Fixing the Position

01:01
27

iPhone & Android Status Icons

03:10
28

Production Video - Login

06:45
29

Sharing Wireframes

13:32
30

Recording Your Interactions

03:13
31

Class Project - Wireframe Feedback

01:21
32

Mood Boards

07:43
33

Class Project - Mood Board

00:59
34

12 Column or Grids

04:57
35

Working with Colors

09:02
36

Tricks for Using Colors

06:34
37

Gradients

03:50
38

Class Project 06 - Colors

02:14

Text & Drawing

39

Use Web Safe Fonts

18:00
40

Character Styles

06:59
41

Font & Text Tips Tricks

05:43
42

Plugin Lorem Ipsum

05:39
43

Paste Properties

13:15
44

Class Project 07 - Text & Buttons

02:21
45

Draw Custom Icons

04:13
46

Strokes & Lines

14:28
47

Pen Tool

14:34
48

Drawing Practice

07:15
49

Production Video with Tips

12:27

Working with Illustrator, InDesign & Photoshop

50

Illustrator in XD

09:34
51

Class Project 08 - Custom Icons

01:49
52

InDesign in XD

11:38
53

Pros & Cons for Images

03:58
54

CC Library Connection

11:01
55

Adobe Stock

05:20
56

Free Images

01:48
57

Masking

06:44
58

Photoshop in XD

08:41
59

Infographic

12:12
60

Class Project 09 - Hi-Def Mockup

05:38

APP Design

61

Mobile Phone Mockup

18:08
62

Class Project 10 - Mobile Website

01:24

Placeholder content & Plugins

63

Hidden Features for Repeat Grid

05:17
64

Plugin - Content Generator

04:29
65

Plugin - UI Faces

03:15
66

Plugin - PhotoSplash

04:31
67

Plugin - Copy Cat

03:19
68

Advanced Asset Panel

04:37
69

Advanced Symbols

07:52

Micro Interactions

70

What are Micro Interactions

07:21
71

Button Grow

06:13
72

Animated Image Gallery

06:39
73

Full Vector Change

08:19
74

Class Project 11 - Micro Interactions

05:12

Prototyping Advanced, Voice Interactions & User Testing

75

Time Delay Transitions

04:42
76

Popup Menu or Modal

12:16
77

Animated Mobile Side Nav

03:26
78

Drop Down Menus

03:24
79

Drag Transitions

07:19
80

Number Ticker Scroll

06:51
81

Alexa Voice Commands

09:37
82

What is User Testing

16:53
83

Unmoderated UX Test

12:07
84

Class Project 12 - User Testing

02:23

Pitching to clients & customers

85

Mocking up in Photoshop

09:21
86

ProtoPie

02:40
87

Add Animation Using After Effects

09:39
88

Export Images & Assets

12:56
89

Export Code Using Design Specs

10:49

What Next

90

Class Project 13 - Roar Cycles

10:29
91

Conclusion

05:32

Final Quiz

92

Final Quiz

Lesson Info

CC Library Connection

Hi everyone. This video is all about how the CC library. Okay, this thing here connects between this plus other adobe products. We're going to mask out the background here with Photoshop, show you how to quickly updates via the cloud tricks for disconnecting, connecting, updating big bulk actions, some interesting stuff here. Plus we'll learn a little bit of masking sweetness from adobe Photoshop. Alright, let's get started. Alright to show the connection with adobe CC library first. We're going to get rid of this man to get rid of the image from it. You know, it's kind of locked into this box. You can just select on it and change the fill color. It'll get rid of the image back to the green. Now the CC library is actually in here. Okay, in the XD but it doesn't work very well. It's just kind of like a cut down version. So what we need to do is we'll leave it open but you need to use it in any other adobe products and we'll use Photoshop in this connection just to show you the way to mo...

ve around and get the most of it. So we're going to jump into Photoshop and we're going to open up so file open, we'll open up that hero image one JPG PSD. It doesn't matter. Okay, so there's the image we used in there. So we're going to use my most favorite and definitely underutilized technique in Photoshop. I want to remove the background. If you gotta select, go to subject, be prepared. People, this exists like that. Just draw a selection around them now down here in your layers panel click on this one. It says add layer mask, we're not going to go through a full Photoshop course here. I've got one of those if you want to go check it out, but that their select subject works for it doesn't it doesn't have to be just people, it can be objects that could be multiple people, it's pretty amazing. So we've got it here. I want to now add it to my library so I grabbed this top tool here, the move tool, click, hold and drag, drag, drag, drag, drag and just dump it over here. Cool, you can see it's got a nice mask out background now we're going to jump into 16. It'll take a little while to load because it's going via the cloud. Okay. And I'm gonna actually don't have to wait for the preview to finish, I don't think what will you do sometimes with victor's if it's taking a long time like this, you can just drag them out for some reason they just work this big old graphics not I'll fast forward it Alright. It didn't take too long. It's like another 30 seconds or so and so click and drag it out. AM I going to link it to this? I might actually just drink it, drag it over here and just have it kind of separate. Let's try both. No, I don't want her to replace it because it fills it knew there was a reason. Okay, I'm going to shrink it down and I'm going to use them in here so you can see how cool that creative cloud connection is and it gets a little bit better as well. So you might be still reeling after the amazing selection techniques like subject. But let's say you've got over that and you're like, okay, so I've got this in here, the green arrow. We've kind of been like turning off loads during this course. Okay. But now we're going to show how how useful it can be. So that is now connected to the graphic here in my symbol in my library. It is not connected to this fella. Once you drag him in, he becomes his own little copy. So there's nothing I can do to this, which is if I invert him, okay, I'm not sure what we were doing this, but he's not going to update and that's not going to update. So this guy is kind of like a one way street. Once you've used him, we've abused him, I'm going to not save him. He's done. So I want to show you a couple of things in illustrator. I'm going to open up a file. It's a file. Open. It's in our exercise files. It's in images and it's called poster. Where are you poster Ai file? So this is another project because like, I don't know working is a creative, you're never just doing one project. Right. It's a bunch of them. So this particular one, I've got my poster, I can see my libraries window libraries there he is there. You can see how cool the library is. Now when we're dragging like multiple versions of it out, you can see my selection isn't as good as I might have made out because there's a little it's a good first start. I'll show you how to adjust it in a second to get it a bit better. But let's say that that's what we want to do, right? Even bigger anyway, you can go there. So I've got them on two different ones. Now what I want to do is open them up and adjust them to do it. You need to be able to see him in a library, it can be the library and here it can be the librarian. XD. You just double click on it. What ends up happening is it will try and open up in its original file. Actually next day you gotta right click and edit every other program. You just double click it. So what it's done now, it's opened up that library. Otto item in Photoshop so I can go make adjustments and I'm going to make a quick adjustment. I'm going to select on the image here and I'm just going to command I or control on a pc for no good reason other than I want to show you that when I hit save. It'll update in XD in a second. Let's give it a second. Come on, fast forward. Alright. It updated now. That's a cool connection. Right, so you've updated the library item and updates here. One of the things I'll kind of and enter, well acknowledges the lag between updating it and coming in here. Now to be honest, I'm on like the world's worst internet. I chose to work from a cool little office that has very little internet. Like I get like one or two megabytes. So it is pretty slow anywhere else in the world. Uh well anywhere else in the world if you're living like this places office slash sheep farm is sheep outside. So the internet connection is really slow. It's not noticeable anywhere else honest. But you might be working on a sheep farm too and it's still worth it. Or at least I think it is. And the good thing about it is if I go to illustrator, can you see it updated there as well? And that creative cloud library means that when I'm building wire frame when I'm building a mock up and XD but also some graphics to go out for social media, you can connect everything via that CC library and when you make updates, they all updates are gonna go and back to Photoshop. I'm gonna undo that. Save it. It updates here and it slowly updates over here does update faster than illustrator. It does. It's just XC man. XD. Okay. So within the applications it's doing it super quick I think at the moment XD must be going via the web only. That's okay. It updates will fast forward it and come back now. One of the things that you might actually oh well wait go go little sheep farm internet there he is. Now one of the things you might be like actually I don't want that connection, I want to pull it from the library because it seems like a good idea to store stuff but I don't want to have that connection so you can when you're dragging it out, hold down the option key on your Mac or the old key on a pc. Don't drag it over that box, drag it out here again. What you'll notice is it came out but without the green arrow. So if you hold down the option key on a Mac, all key on a pc networks and all the adobe programs, Photoshop illustrator in design. If you're like man libraries is cool but they all connect and you don't like it just hold the key down when you drag it out so not holding it down. It links holding down option on a mac alterna pc. It breaks it and if I make updates to this now this guy will change because he's connected. This guy won't alright, let's say we want to break the connection afterwards. We've forgotten the shortcut and we're like hmm how do we get it? You can click on this little green arrow that gets rid of it. That's probably the easiest way sometimes that you want to do it in bulk. So you can go into your layers panel which we haven't used much. Right. Is you'll see the ones that have links. See the little linking icon, you can click on him and let's say we have a few different versions just faking it too. The moment you see you you any other links? Oh they're not on the outboard. That's why. So they're all on this one home page about about him him him you can see the little links are all grouped together. I can right click any one of them and say unlinked graphics. It might be a little bulk way to do it at the end. They will just become embedded in this image not connected to these guys anymore. All right. That my friends is the perks of using the credit cloud libraries. You can drag stuff in from illustrator from Photoshop and when you update it, they flow through all the different art boards. That's the other thing I didn't really mention if you use this guy and all of them. Okay. And then update it. They're all going to update good work dan save one of the best things to the end but we got there. That's it for this one. Let's jump into the next video. Alright hold it wait I said I promised to fix up this because it looks okay there. It looked okay next D. But there's this one I'll just do this. As a little bonus you can see the edges. You're like oh man it's not as good as I thought. Okay the little upgrade you can do to this one. This is the short quick version again is with your this image open. Okay we've got our mask. Let's click on the mask. Make sure you can see your Properties panel lets you might have to scroll down a little bit but you want to see select and mask and this is where the magic happens. So do the first thing, select subject make mask And then you end up with like a pretty good one. But to do the touch ups is this magical thing called select and mask at the top here. Okay make sure it's on black. He doesn't have to be on black. Pick anything but it's good to see it on contrast I guess on black what we're gonna do is one of the real nice options is this here? Okay this tool the second one down I'm going to use a brush size of it will depend on your document. is waiting for me which is if I click the here right here, you got to kind of like a click just clicking ones clicking ones you can see it goes through and re jigs it against black is really tough. Look at that one. So I'm just kind of like working the edge of the hair painting it a little bit staying inside this bed. It just says all you're doing is telling Photoshop to kind of go in and have another little look at it. It's not perfect. Okay, so you can do little touch ups this way. Any other touch ups, like it's pretty good everywhere else. Let's say you want to do. So that's good. You like it. One of the last things you can do is go through all of these options. Okay. There's no just kind of like adjust them and to see how much help, how helpful it might be. I don't find them that great but try them. What I find is the kind of two most bestest options is the shift. Ege might just tuck it in a little bit. You can see just kind of like I'll go way in. You can see just sucks it in a little bit often that can fix my problems. And the other one is this magic tick box which is on off on off. Just magic. I love it kind of goes and tries to blend the background a lot more. I love it and click. Ok, I'm going to hit save. I'm going to go check in illustrator and you can see it's such a better mask. Still not perfect but pretty good. So select subject and then make sure you've got the mask selected and you select the mask Again. That's the quick version. I want to spend like another 15 minutes tweaking it and getting it perfect with you. That's one of the other courses. I just wanted to give you a cool, sneaky hint to show you what you might be missing if you're not using select subject in Photoshop. All right, now, that's it. We learned about CC libraries and we did a little bit of cool masking. Let's get on to the next video.

Class Materials

Bonus Materials with Purchase

Six Completed Files
Exercise Files

Ratings and Reviews

Haseebullah Johar
 

Thank you, Dan Scott, for providing such a beautiful Adobe XD course. I completed the course today and noticed a couple of things that are missing. I want to share them here so that you can upgrade the course, which would be helpful for us. Hover state and toggle state. Dragging pages from 1-2 to 2-3 and then back from 3-2 to 2-1 with dragging is not working. Another thing is that we learned scrolling the website from top to bottom, but scrolling or pushing things from right to left has been completely omitted. These are the things I have noticed, and I would like you to upgrade them so that we can improve our Adobe XD skills.

Student Work

RELATED ARTICLES

RELATED ARTICLES