Format, style, and crop images
Once design elements – Images, Stencils, Icons and Templates – are added to the page, they are called Objects.
All objects, including Images, are styled and customized in the Format Panel – and share many of the same formatting controls.
In this article, we’ll introduce you to the Format Panel, and show you how to customize images to create your design.
We will also cover an image-specific feature, non-destructive cropping, that will allow you to trim and reuse any individual image throughout multiple projects within the same account. This is particularly useful when working with logos and branded design elements, or with images that have multiple points of interest.
Go to the Right Sidebar and click the Format Tab. The tab will turn blue, and will open the Format Panel.
The Format Panel is divided into Sections with specific formatting controls. The sections are collapsible, so clicking on a section’s name will hide or reveal that section.
The panel will always display the default sections that are common to most objects: Size & Position, Fills & Strokes, Opacity, Rounded Corners and Drop Shadow.
Size, Position, Rotate and Flip
Size, Position, Rotate and Flip controls are grouped together in the Size & Position section, and each of these actions can be performed both in the Format Panel and on the page.
On the page, use the resize handles to change the size of the object.
In the Format Panel, use the Width & Height inputs for precise values and fine-tuning, and use the arrow keys, on the keyboard, if you want to change these values incrementally.
An image’s Aspect Ratios is locked, by default, when you add it to the page. This is to maintain its appearance and proportion. If you need to customize an image’s proportions, click on the Unlock Aspect Ratio button and resize the image on the horizontal or vertical axis.
On the page, select an object and drag it to the desired position.
In the Format Panel, set the object’s position by entering the exact coordinates in the input fields. Your object’s position is measured in pixel-distance from both the left and top margins. You can use your keyboard’s arrow keys to change these values incrementally.
- Once an object is selected on the page, the arrow keys move objects pixel by pixel – for fine adjustment.
- ‘Shift' + arrow moves objects 10 px
On the page, click the rotation handle at the top of the object and drag to rotate.
In the Format Panel, enter the degree-value in the Rotation Input Field. You can change the value by using the keyboard’s arrow keys.
You can flip an object both horizontally and vertically.
In the Format Panel, the vertical and horizontal Flip Buttons flip the object while still maintaining its size and aspect ratio.
On the page, first unlock the Aspect Ratio. Then, select a Resize Handle and drag it across the centerline of that object to simultaneously resize and flip.
Strokes, Opacity and Shadow
When working with Images, you can add and customize Image borders with the Stroke settings.
To adjust the stroke color, go to the Format Panel, and in the Fills & Stroke section, click on Stroke Color to open the Color Picker Popover.
Select the Swatches Tab to choose a color scheme from Moqups Classic, Material Design, Bootstrap or iOS 8. This tab also displays the colors you’ve already used in your project.
Select the Picker Tab to create your own custom colors.
In both tabs, you can…
- Enter the Hex value for a color
- Adjust the stroke-color opacity
Under the color settings, you can choose the Stroke Width, and set Stroke Style to Solid, Dotted or Dashed.
The Opacity slider adjusts the global Opacity of a whole image, or group of images. If you want to customize opacity more precisely, you can also adjust the Stroke opacity (see above), together with global Opacity, for a combined visual result.
To add a Shadow to an object, navigate to the Format Panel and open the Drop Shadow section.
Enable shadow to set the color, opacity, angle, distance, and size of the shadow.
To edit the corners of an object, use the Rounded Corners section and enter values in the inputs.
By default, the four input fields are synced. Entering a value in one input will propagate that value to the other corners.
To enter differing values for each corner, deselect the Sync all corners icon located between the four inputs.
Copy and Paste Styles
Once you have customized an image, you can apply that customization to another image or object – or group of objects.
To copy and paste styles:
- Select the object from which you wish to copy styles
- Right-click and choose Copy Styles or press Alt/Option + C
- Select the object to which you want to apply styles
- Right-click and choose Paste Styles or press Alt/Option + V
Set Default Styles
When you set a project’s Default Styles, every new object you add to the pages of that project will adopt those styles.
To set Default Styles for a project:
- Click on the empty area of any page
- Open the Format Panel
- Set styles
To clear Default Styles, click the Clear Default Style link at the top of the Format Panel.
Cropping is non-destructive, meaning that, after cropping an image, you can always go back and re-crop it. This is handy when you want to use the same image repeatedly, but focus on different areas of interest within that image.
Your Image Library is account based, so you can reuse images on multiple projects within your account. This is particularly useful when working with logos and branded design elements, or with images that have multiple points of interest.
To crop images:
- Double-click on an image to activate the cropping function
- A black border will appear around the image
- Use the black resize handles to crop the image
- Click outside the image to complete the cropping process