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

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Web Design Design Thinking UX Design Design Projects

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.

2,000+ classes ranging from fundamentals to advanced techniques.

Photoshop in XD

Photoshop in XD

Lesson Info

58. Photoshop in XD

Lessons

Getting Started with XD

What is UI vs UX

The UX Brief & Persona

Wireframing (Low Fidelity)

How Wide for my Website

Existing UI Kits

Working with Type

Basic Colors & Buttons

Free UI Icons

Footers & Lorem Ipsum

New Pages & Artboards

Class Project 01 - Wireframe

Prototyping & Interactivity

Create a Popup Modal

Prototype

Groups & Isolation Mode

How to Use Components (Previously Components)

Production Video - Left Nav

Repeat Grid

Updating Components & Repeat Grids

Prototype Tricks

Navigation Tricks & Tips

Class Project 03 - Components

Mocking Up an App

XD App on Your Phone

Fixing the Position

iPhone & Android Status Icons

Production Video - Login

Sharing Wireframes

Recording Your Interactions

Class Project - Wireframe Feedback

Mood Boards

Class Project - Mood Board

12 Column or Grids

Working with Colors

Tricks for Using Colors

Gradients

Class Project 06 - Colors

Use Web Safe Fonts

Character Styles

Font & Text Tips Tricks

Plugin Lorem Ipsum

Paste Properties

Class Project 07 - Text & Buttons

Draw Custom Icons

Strokes & Lines

Pen Tool

Drawing Practice

Production Video with Tips

Illustrator in XD

Class Project 08 - Custom Icons

InDesign in XD

Pros & Cons for Images

CC Library Connection

Adobe Stock

Free Images

Masking

Photoshop in XD

Infographic

Class Project 09 - Hi-Def Mockup

Mobile Phone Mockup

Class Project 10 - Mobile Website

Hidden Features for Repeat Grid

Plugin - Content Generator

Plugin - UI Faces

Plugin - PhotoSplash

Plugin - Copy Cat

Advanced Asset Panel

Advanced Symbols

What are Micro Interactions

Button Grow

Animated Image Gallery

Full Vector Change

Class Project 11 - Micro Interactions