CC Library Connection
Daniel Walter Scott
Lessons
Getting Started with XD
02:21 2What is UI vs UX
06:19 3The UX Brief & Persona
11:22 4Wireframing (Low Fidelity)
01:58 5How Wide for my Website
13:06 6Existing UI Kits
07:49Working with Type
09:09 8Basic Colors & Buttons
14:14 9Free UI Icons
11:45 10Footers & Lorem Ipsum
05:27 11New Pages & Artboards
04:20 12Class Project 01 - Wireframe
11:11 13Prototyping & Interactivity
08:53 14Create a Popup Modal
07:57 15Prototype
02:54 16Groups & Isolation Mode
02:30 17How to Use Components (Previously Components)
17:19 18Production Video - Left Nav
03:52 19Repeat Grid
05:27 20Updating Components & Repeat Grids
08:54 21Prototype Tricks
06:03 22Navigation Tricks & Tips
04:48 23Class Project 03 - Components
04:07 24Mocking Up an App
09:40 25XD App on Your Phone
08:04 26Fixing the Position
01:01 27iPhone & Android Status Icons
03:10 28Production Video - Login
06:45 29Sharing Wireframes
13:32 30Recording Your Interactions
03:13 31Class Project - Wireframe Feedback
01:21 32Mood Boards
07:43 33Class Project - Mood Board
00:59 3412 Column or Grids
04:57 35Working with Colors
09:02 36Tricks for Using Colors
06:34 37Gradients
03:50 38Class Project 06 - Colors
02:14 39Use Web Safe Fonts
18:00 40Character Styles
06:59 41Font & Text Tips Tricks
05:43 42Plugin Lorem Ipsum
05:39 43Paste Properties
13:15 44Class Project 07 - Text & Buttons
02:21 45Draw Custom Icons
04:13 46Strokes & Lines
14:28 47Pen Tool
14:34 48Drawing Practice
07:15 49Production Video with Tips
12:27 50Illustrator in XD
09:34 51Class Project 08 - Custom Icons
01:49 52InDesign in XD
11:38 53Pros & Cons for Images
03:58 54CC Library Connection
11:01 55Adobe Stock
05:20 56Free Images
01:48 57Masking
06:44 58Photoshop in XD
08:41 59Infographic
12:12 60Class Project 09 - Hi-Def Mockup
05:38 61Mobile Phone Mockup
18:08 62Class Project 10 - Mobile Website
01:24 63Hidden Features for Repeat Grid
05:17 64Plugin - Content Generator
04:29 65Plugin - UI Faces
03:15 66Plugin - PhotoSplash
04:31 67Plugin - Copy Cat
03:19 68Advanced Asset Panel
04:37 69Advanced Symbols
07:52 70What are Micro Interactions
07:21 71Button Grow
06:13 72Animated Image Gallery
06:39 73Full Vector Change
08:19 74Class Project 11 - Micro Interactions
05:12 75Time Delay Transitions
04:42 76Popup Menu or Modal
12:16 77Animated Mobile Side Nav
03:26 78Drop Down Menus
03:24 79Drag Transitions
07:19 80Number Ticker Scroll
06:51 81Alexa Voice Commands
09:37 82What is User Testing
16:53 83Unmoderated UX Test
12:07 84Class Project 12 - User Testing
02:23 85Mocking up in Photoshop
09:21 86ProtoPie
02:40 87Add Animation Using After Effects
09:39 88Export Images & Assets
12:56 89Export Code Using Design Specs
10:49 90Class Project 13 - Roar Cycles
10:29 91Conclusion
05:32 92Final 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
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 Classes
Web Design