Photoshop in XD
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
Photoshop in XD
Hi there. This video is all about working with Photoshop Now. If you don't have adobe Photoshop, it's not going to like stop you using XD but I guess I want to show you some cool things in Photoshop if you do. And also just identify often as a career to be a UX designer. Often you need more than just adobe XD skills. You need some skills and things like Photoshop, an illustrator. And what we want to do now is I want this to kind of extend all the way across and you'll notice that lots of like these banner ads and bars and stuff. Use a really weird format, like a long thin format and photographs just don't fit that format. So we want to stretch it out. So we're gonna take this away and magic it up some more background here in Photoshop. I'll show you quickly here before after before. After that was a cool one. Right? When you get rid of the person and we extend the sky. Look at the sky, no sky, no sky, no rocks there look more and it's stretched out wide. This is a little bit of Photosh...
op to help us extend our adobe XD skills. Let's jump in now and get to it. Right? So the file we're going to start with is let's bring it in. Let's go to file import let's go the long way file import exercise files. Images will use this plane called hero image too. You can import that now. I wanted to go into, I'm going to clear a space for it. I'm going to get rid of the bicycle. He's just in there randomly. So I'm going to clear a space for all of this space, looking at all. Moving in clear a big gap. So what I'd like to do is I want to start at the beginning there, it's kind of, I want it to be just over this side, but I need this kind of area over here. I could try and match the color but it never seems to work right If I click on this and say I drop a tool and I click on this blue, right on the edge here. Okay, you can see it kind of works but you can definitely see the edge here. So I just want to extend it. Same on this side. I want more on this side so I can make another rectangle and try and connect it up. But we're going to show you that sweet tricks in Photoshop. We'll start with this one and get more and more impressive. So let's open that exact same image up in Photoshop. So Photoshop it's gonna open, let's find it enhanced called hero image too. Now if you don't have Photoshop can just watch along, I've got a graphic in there that you can use. Okay, it's called hero in there. No, it's called extended to the extended image to you could use that this is the final result of this. So what I wanna do is I want to reset my workspace so that it matches yours. There's a couple of ways of doing this. This particular image is going to work really easy with the crop tool. Okay, so grab the crop tool. I'm going to turn on this. Okay. It's off by default, turn it on and I'm going to drag it this way a bit because I want some more on that side zooming out and I want a bit more on this side. Get ready city. I'm gonna zoom in a bit because I want this to be impressive. Okay. The return kick back, relax and watch it. Just generate more background. Ready magic. Huh? Just kind of made it and blended it and it's beautiful. Now I can drag this into my library like we're connecting back with things and then we realized our library takes a while, Only an XD. I'll come back to that. Let's just look at practicing example, show you a different way of doing it. Okay, so let's go to, well, let's just practice with the Hero Image one even though we've marked, we're not going to use this one. Right? Oh, it's extended Image one. That's the final results. Given away giving it away, let's go Hero Image one. Okay, in this case here we can do the exact same thing. But instead of using the crop tool, some people prefer to do it this way. So crop tool, let's turn content aware off. It's on for forever more remember to turn it off because sometimes it's a pain I'm going to drag out the side of it because I just want to say you want them in the middle, you just need more of this. So hit return and it's done nothing right. It's just kind of like made a bit more area over here. What I'd like to do is grab my rectangle marquee tool, want to grab all of this. Okay. And I want to go to edit and content aware scale basically that's what that crop tool was doing. Remember we turned it on this is doing it manually because then you can just drag it and slowly, it depends on the version of Photoshop you have, if you're in the latest version, you're going to actually have to, I'm gonna have to undo that hold shift while you're dragging it. Okay, so hold shift while dragging that cursor and just look the somehow magical Photoshop theories just like invent more background is kind of weird because there's like extra panels but who knew how big they were to get started with. Okay, so really handy and really easy when you've got something like, like this one here is quite a clear definition between the background. If this, if there was like 10 of his cousins all around it would be very hard, but if there's like a unique object in it, it can be really easy. I want to take this a bit further because we've all had those problems, right? Like those, those letterbox sizes, this thing here or leaderboard or banner ad that kind of size is really tough to design for because all images come in this kind of more traditional ratio. Let's take it a bit further and look at some of the other content to wear things that you'll use when you're kind of working with XD. It's not a full Photoshop of course, just a little taste. Just a little bit of the things that you're most likely to use. So once you get a file open in Photoshop and one should open a one that's called content aware dot psD Open them up. So the same problem as before. I want to extend this out. So we're gonna go to edit content aware scale. Remember holding shift down so you can drag it to the right and just pretty cool. Huh? Just like invented. It's really great for like inventing new sky or in this case small ocean or grass just where you kind of like, I love like it would be nice to leave this all the lovely cropped but there's often times you just need space to be able to put text and logos and ads and all that sort of fun design stuff hit return when you're finished. That's one thing, let's say that the client comes back and says, we don't want the woman in it. Can you find one without it? What you can do is grab the rectangle tool, drag a box around her and go to edit and whether use content aware scale we're gonna use this one now called fill so click on Phil one of the options it should default to is content aware click OK and go to select de select. Mine's done an average job. I've done that like times and like half the time it comes out great. Other half it comes out a little bit average, that's fine. And the next thing I want to do is I wanted to show you back to that crop tool because I want more sky. Right? I just need a bit more and the thing crops off in a weird angle. Just kind of stops there. Maybe we'll turn this back on, remember to turn it off afterwards. I'm going to drag it up higher about about that high, roughly. Okay, let go hit return and get ready. Watch all this stuff over here in the clouds. Be prepared for greatness. We're better than that first hero image, brilliant. Huh? I love it. It's just like extended it up to the edge magically it's added more clouds. You can kind of see some repeats in there a little bit but you'd have to be really looking and regardless if you like it's just a good place to get started. If you're like, man, I can't deal with that repeat. You could now go and clone tools, stamp it out or do some adjustments. But for me it's looking pretty perfect. Now, all I need to do is just drag this into the library and I can start using it. We are not using it in this particular course. But I just wanted to I guess show you some of the exciting bits that you can use when you are dealing with XD and those really strange formats. Okay, phones. Another one. Where is my phone? It's just kind of weird height. Okay, so long and stretch. Have you ever done banner ads when they're like skyscrapers? Do a lot of banner ads in adobe animate. Okay. And it's just really handy when you need this like weird shapes so you can start kind of condensing things. Cool. Alright, so our little lady should have appeared. Here. She is. I'm going to add it in here. Double click it a little bit of room here. I could have given it a lot more room but that's kind of where I wanted it. Pretty cool. Huh? Alright, so that's gonna be it with our connection to Photoshop, Photoshop obviously can do a lot more. But I just, I wanted to show you a couple of cool things in there and that are useful and relevant to XD and also show you that often to do a project like this. You might need to jump in and out of a few other products like Photoshop illustrator maybe in design. Probably not in design. Alright, let's jump into 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