Every designer would agree that pictures are often worth more than a thousand words. With UXPin’s image features, you can make good use of your visual resources and prepare hi-fi designs easily.
Take your wireframe to a higher level with perfect images to visualize the final effect for your customers!
Adding images to prototype
Actually, there are three different ways to add an image to your design. They have just one thing in common: they are all super fast! Let’s start from the most straightforward option. You just need to drag and drop an image directly from your computer to the canvas. A loading process will start immediately after you drop the image. As easy as that!
Another option requires using an Image element. You can simply click the Image icon on the left panel or use search option (cmd+F/ctrl+F). Once you select it, you’ll instantly see a modal window with the list of your files. When you decide which one you’d like to use, confirm by clicking the “Open” button and the image will be uploaded to the canvas right away in its original size.
If you want to change one of the already uploaded images, it’s enough to use the “Upload image” option from the Custom menu located in the right panel of the editor. In such a case, you can choose the image from the files located on your computer as well.
The Custom menu will appear in the right panel only when you select image element on the canvas!
Finally, if you want to specify the size of your images before you add them, you can simply press P letter on your keyboard. This way you’ll be able to draw the actual image placeholder with your mouse – once you release it, the modal window to upload your files will be opened right away.
The limit for uploading a single image is 30MB but please not that the heavier the image, the more time it takes to load it.
Most of the images can be compressed considerably without losing their quality. There are special tools for this purpose. This way, our images will load really fast!
With UXPin you don’t need to worry about customizing the image before you upload it. You can introduce all the necessary changes directly in the application. To use the crop feature, just open the Custom menu in the right panel of the editor and click the Crop button. Like most cropping tools, you can frame the image area you want to crop with a simple click-and-drag of your mouse.
If you crave for precision, you can type in the exact dimensions so your picture will be cropped just as you want.
You can also make a good use of Ratio feature and choose a ready-made size from the dropdown menu.
Now you only need to confirm changes with the “Save” button.
If you don’t like the final result, cmd+z on Macs or ctrl+Z on Windows will magically undo your work so you can try again.
Just as we mentioned before, you can forget about adjusting each image perfectly before you upload it to the application. We’ve prepared a bunch of image editing features to help you create some awesome-looking pictures. You’ll be able to change brightness, contrast, saturation, vibrancy and sharpness by means of simple sliders! Let’s use “Custom” menu once again but this time choose the “Adjustments” option.
You can use the sliders to work out the best combination of the above parameters or just insert the values for them. Once you work out the best look for an image, you can apply the same style to any other images by inserting the same value for vibrance, sharpness, contrast, etc. Don’t worry if you get lost along the way. You can click “Reset” any time and your image will be restored to its initial look.
Pro tip: adding images to a project
We’ve prepared an easy and quick way to add multiple images to UXPin: simply drag the files you want and drop them onto the project area. They will be combined into a single document.
You can open this document not only in the preview mode but also in the editor! UXPin will save each uploaded image as a separate page in the prototype. You can then edit the pictures or copy them to other prototypes.