Format, crop, and replace 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’ll explain how you can save a custom style that applies to all future images, and how you can quickly replace an image on the page.
We will also cover two image-specific features: Crop and Background Removal.
Format Panel
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 all stencils: Size & Position, Fills & Strokes, Opacity, Drop Shadow, and Blur.
Select, Size, Position, Rotate, and Flip
When you select a single object, that object’s name is displayed at the top of the panel, just above its coordinates. This makes it easy to locate and identify that object in the Outline Panel.
When you select multiple objects, the panel displays the number of objects in that group, in order to help you confirm your selection before applying any style changes or transformations.
Size, Position, Rotate, and Flip controls are grouped together below the coordinates, and each of these actions can be performed both in the panel or on the page.
Size
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.
Position
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
Rotate
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.
Flip
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, Shadows, and Blur
Strokes
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
Opacity
Shadow
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.
Blur
To add a Blur to an object, navigate to the Format Panel, open the Blur section, and enable the Blur slider.
The Blur feature is particularly useful when mocking up a popover or modal window.
Rounded Corners
You can round an object’s corners both from the Format Panel, in the Rounded Corners section, as well as directly on the page, using the object’s custom handles.
To round corners from the Format Panel:
- 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 button located between the four inputs.
- Enable Scale Radius if you want the rounded corners to scale proportionally as you resize an object.
To round corners directly on the Page:
- To round all corners simultaneously, drag any of the light-blue custom handles towards the center of the object.
- To round a specific corner (Rectangle stencil only) hold Option/Alt and drag the relevant handle towards the center.
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
Save Custom Styles for Images
When you save a custom style for images, every new image that you add to the page will adopt your custom style.
To save a custom style for your images:
- Style an image on the page using the Format Panel
- Select that image
- Right click to open the Context Menu
- Choose the Save custom style for Image
- All subsequent images you add to that project will now reflect that style
To remove a custom style from your images:
- Select any image on the page
- Right click to open the Context Menu
- Choose Clear custom style for Image
To remove custom styles from all your stencil types, including images:
- Select any object on the page
- Right click to open the Context Menu
- Choose Clear all saved styles
Crop
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:
- Select an image to display the Contextual Toolbar for Images
- Click on the Crop Image button
- A black border will appear around the image
- Use the slider to zoom in and out
- Click inside the black border and use the hand-cursor to adjust the placement of the crop-window
- Use the black resize handles to crop your image
- To apply the crop, click outside the image or click ‘Done’
‘Reset’ returns the image to original
Background Removal
Background Removal is particularly useful during the creation of preliminary mockups, when you often cobble together images, logos, and other kinds of visual references. Even though these elements are just temporary stand-ins for subsequent, more polished design elements, they still have to be slick and professional enough to be persuasive.
Inevitably that means cropping, stacking, adjusting, and grouping these assets to create a credible draft. You may need to quickly remove the background color from a logo, eliminate a distracting visual artifact, or see whether the product shots look better without their background. To remove a background from an image:
- Select an image to display the Contextual Toolbar for images.
- Enter Background Removal mode by clicking on the Magic-Wand icon.
- Click on the area of an image to remove a solid color, or click and drag to remove a color range.
- To apply the changes, click outside the image or click ‘Done’.
- ‘Reset’ returns the image to original.
- To save the altered image, right-click and select ‘Add to library’ option from the Context Menu.
Replace Image
You can quickly update and replace any image on the page. Just drag a new image from the Image Library, or from your computer, and drop it onto an existing one when the ‘replace’ icon appears.
Or, you can select an image on the page and use the Replace Image button on the Contextual Toolbar to select a replacement from your computer.
