Learn how to add images to a UXPin screen.
- [Instructor] Now that we have the UI elements in place, we can now concentrate on bringing in the image. The image is going to go in this placeholder here. Now there are a couple ways of doing it, so let's take a look at it, and to do that, you're going to have to open your Wireframe project from your dashboard, and when you come here, you're going to see the Homepage. Now the first way of doing it is just to select Add image right up here at the top, and if you go over to your Chapter Two exercise folder, there is a Lake.jpg image. Click Open, and you can see that it is added to the project, just like that, and I can just move it in.
Now I'm going to zoom out a little bit here, so you can see what I'm doing. So I'm just going to drop the magnification to 80%. I've got an extra placeholder here. No big deal. All right so we got the image in place. It's covering everything, so we'll just come to the Layers panel. There's the image, and there's the other image that we replaced, so we're going to take that out, and we'll just come down here, and the image is in place.
I'm going to show you another way of doing it. So let's just take this image out of here. What we're going to do is we're going to come to the Libraries and we're going to add an Image component, so we'll just drag that on. You just pull it down to fit, and again, I'm just going to move it to the bottom of the stack, and I don't want the words and things to interfere, so I'm just going to turn off their visibility. So we'll just double-click.
Add the Lake.jpg image, click Open, and you notice it's uploading. It's in place, and the really cool thing about using the image component or the image library item is that it fits in, it almost acts like a mask. I can just turn on the text, and we're good to go. Now down at the bottom here, I'm just going to close the Layers panel, we have some icons, and I've got four of them. They're in your Exercise folder, so we're just going to do the first one, and the first one will be just, we'll do canoeing.
So I'm just going to zoom in here so we can see what we're doing. 150%, there we go, and I'm just going to scroll over here so we can see it. We've got this icon right here, right here in the App Bar, and we want to replace it, so we just select it, we delete it, and then we come up here to the image, and we'll choose the Canoe svg image in our Chapter Two Exercise folder. We'll click Open, and you can see, there it is, and all we have to do now to move it into place is just scale it, so we can just hold down the Shift key and scale it into place.
Make sure it sits on the bottom, and then we can just choose the text, and enter the word Canoeing. So if you're bringing in line art, it has to come in as SVG images. You cannot bring it in as Illustrator or AI images. You can also use transparent PNGs, or just good old PNG images. There you go, there's the way of adding imaging to a project. It's really not terribly difficult to do.
It's just that there are two ways of doing it. You can drag and drop right onto the canvas, or you can use the Image component here and just place the image smack into it, and you'll get all your masking and sizing right inside that component.
- Importing artboards from Photoshop and Sketch
- Adding interactivity
- Adding animations
- Designing responsive sites
- Sharing prototypes with stakeholders
- Creating image carousels
- Create slide-in menus