a blog on prototyping by pidoco°

Looking for more fidelity in your prototypes? Pidoco allows you to upload images to add design elements and content to your prototypes, e.g. logos, graphics or entire screenshots. But sometimes, the uploaded image is too large or you only need a particular part. So the only option is to crop it. But worry not! With Pidoco, you can crop your images right where you need it – directly in your prototype. And here is how it works…

Step 1: Upload image

Before you can edit and crop an image in your prototype, you have to upload one first. To upload an image, open your prototype. Open any page and scroll down to the My Images section of the Stencil Palette. Click the Add Custom Images link to open the Upload Dialog. Depending on your image source, you can either upload your image from a local drive by clicking the “Browse…” button or inserting the link from an external source and then clicking on Add. The image may take a few seconds to upload. The uploaded image will appear in the My Images section of the Stencil Palette. You can drag the image onto the canvas like any other stencil.

Upload images using the My Images section of the Stencil Palette

Select images for uploading using the Pidoco Image Upload dialog

Step 2: Crop image

Once you have inserted your image into your prototype page, you can start editing it. To crop your image, start by selecting it with your mouse. Little sizing handles will appear at the edges and corners of the image, which allow you to resize it. Now press the “Ctrl” key on your keyboard and drag the sizing handles to crop the image. Keep the “Ctrl” key pressed until you are done cropping.

Crop uploaded images using the Ctrl key and your mouse

Done! That’s how easy it is to trim your uploaded images to just the right size or portion. Of course, you can undo any cropping later on by “un-cropping” the image, i.e. pressing the Ctrl key and returning the sizing handles to the original position. The original of the image in the Stencil Palette will not be affected by your cropping, so you can return to the original at any time. To duplicate the cropped images, just copy and paste it wherever you need it.

Other editing options

You can also re-size your images or add borders via the Context Menu.  Find shortcuts for cropping and scaling images in our Keyboard Shortcut Survival Kit.

Do you need help with cropping your images? Contact us via support@pidoco.com or Facebook and Twitter.