Skip to main content

Photoshop in XD

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

Daniel Walter Scott

Photoshop in XD

Lesson 58 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 2200+ more >

Lesson Info

58. Photoshop in XD

Next Lesson: Infographic

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

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

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