A better way to wireframe



What are images?

Images can be used to visually enrich your projects. For example, you might want to add your client's real logo to your project instead of just using the image stencil as a placeholder. When you use images in your projects, they actually consist of an image stencil filled with an image file.

Uploading images

In order to use image files in a project, you first need to upload the file to Pidoco. To do so, open any page of your Pidoco project. Then simply drag the image file onto the canvas. The image will appear on the page and also will be added to the stencil palette for later use. Instead of using drag&drop, you can also click the "UPLOAD IMAGE" button at the beginning of the stencil palette and use the file browser to select the image you wish to upload.

Adding images to image stencils

You can replace existing image stencils in your project with real image files. To do so, open the context menu of the image stencil and click the "Select image" link. This will open a dialog where you can select any previously uploaded image file or upload a new file. Select the desired file to place the image directly inside the image stencil.

Scaling and cropping images

You can scale and crop images directly in your project. To do so, select the image on the canvas and use the anchor points to scale it as desired. To scale proportionally, hold the Shift key while scaling. To crop the image, hold the Strg or CMD key.

HD images

On many mobile devices, the pixel values that you use in HTML do not correspond to the screen sizes that you will find in the specification of your mobile device. For example, the screen size of the Google Nexus 7 is 600 x 960 HTML pixels. However there are 800 x 1280 actual screen pixels. If you now want to have a pixel image that shows full screen, the image file should be 800 x 1280 whereas the img tag in HTML should get a style of width: 600px; height: 960px; in order to fully fit the screen. The same applies to our prototypes.

In general, we say that in a prototype it is ok for images to be a bit blurry if the pixels of the image file and the screen do not match perfectly. A prototype is not the final product and should be created and changed rapidly. However, sometimes this is not acceptable and you may want to have proper images, especially on a retina display. Therefore, we have added the option to upload an image as an "HD Image". This will simply shrink the image stencil to half the size of the uploaded image file to better match the size of your prototype page and the other elements. This way, you do not have to resize all your uploaded images manually.

<< back to overview

Newsletter Signup

A new Pidoco is coming this Fall. Sign up for our newsletter to stay up to date.

Don't worry, we won't flood your inbox with daily emails and we'll never send you spam!