From the course: UXPin for UX Design

Create assets in Photoshop - UXPin Tutorial

From the course: UXPin for UX Design

Start my 1-month free trial

Create assets in Photoshop

“

- [Tom] It is no secret that Photoshop is one of the tools used to design screens for a variety of devices, and one of the neat things about UXPin is you can bring those Photoshop screens directly into UXPin. In this exercise, I'm going to show you how to bring a Photoshop document into the UXPin Editor. To do this, you will need the UXPin plugin for Photoshop. Before we start, it is important that you understand Photoshop artboards aren't supported, so you can't have multiple artboards. It's got to be a Photoshop PSD. Now you're going to need to get the plugin, and right now, the plugin is a bit of an issue. As I'm recording this, Adobe has updated Photoshop to Photoshop 2020, which is the version that's on the machine that I'm using, and unfortunately, the plugin is not compatible with that version. I have contacted UXPin, and they can assure me that by the time you are actually looking at this course, this plugin will be compatible with Photoshop 2020, so I'm going to show you how it works, where to look for it and all that stuff. So let's get started. So to get the plugin, I'm just going to come over to me, Your Account, and you're going to look for Integrations, and right here, you can see there is a plugin. So when you click that plugin, I'm going to stick this on the Desktop, you just click Save, and the plugin is ready to go. Now what this is, is an installer, so all you need to do to have the plugin is basically just double-click the installer and let it do it's thing. So let's go take a look at the actual Photoshop document. So I'm just going to pop over to Photoshop, and here's our document. Now as you can see this is setup quite basically. Everything is grouped, and it's a good idea to group stuff when you're moving stuff over to UXPin. So I've got the city image here all the icons that are in the project, all of these little icons, are in the SVG format, and they're sitting in their own little folder or group, and of course, the navigation is also there. So how do you get your file out of Photoshop and ready for use in UXPin. Well, what you do is you come to File, Generate. Now in this version, I do not have the UXPin plugin installed, but you will see that there will be a second category for UXPin, and that's all you need to do. You just select it, and it just goes to work, generates all the images that you need, zips it up, and puts it in a format that is readable. So how do I get that? File, into UXPin. Well, I'm going to go back to UXPin and right here. So when you start a document, what do you want to start with today? We're going to import a PSD. So I'm just going to click that, and there's the UXPin file that was created out of Photoshop. I select it. I click Open, and you can see that it goes to work unpacking it, putting everything together, converting to a format that UXPin can use, and you're kind of looking at this saying, "Well, hold on here. "Why am I getting a blank screen?" You're not. There it is. So if I go to Edit design, and Zoom Out here so you can see it, and first thing I want to do of course is just put it on a canvas. So I'm going to use the iPhone Xs, which is a little bit large, but if I open up the Layers panel, you can that all of the assets inside of the Photoshop PSD have come in, in tact. So there you go. This is how you export your PSD content into UXPin. You just need that plugin, go to Generate in the File menu of Photoshop, and away you go.

Contents