Images

You can add images to your file, such as incorporating photos, screenshots, or other visual assets into your design content. Motiff supports images in PNG, JPEG, HEIC, and WebP formats.

About images

Images in Motiff are not a separate layer type but a fill type. You can add images to any shape or vector network.

Layers with image fills will show icon in the Layers panel on the left sidebar.

After selecting a layer with an image fill, you can view and modify the image in the Fill modal of the right sidebar. Motiff will display a thumbnail and label of the image in the Fill modal.

Add images

Add images as a fill

You can set an image as a fill for an existing shape through the Fill modal in the right sidebar. This method only supports uploading images locally.

Upload Images

1. 1.Select or create a shape on the canvas.
2. 2.Click on the Fill swatch to open the color picker.
3. 3.Click on the Fill mode and select Image from the options.
4. 4.A placeholder image of black and white checks will be applied to the shape. Click on Choose image in the preview.
5. 5.Select an image from your computer and then click Open.
6. 6.The image you selected will be set as the fill for the shape.

Replace image fills

After you have set an image as a fill, you can replace it at any time. Here are two methods for replacement:

• Drag the image over the image preview area in the fill modal.
• Drag the image over the Fill swatch in the right sidebar.

Add images in bulk

You can add images in bulk through in the toolbar. This method allows you to precisely choose the placement of each image. Since Motiff uses images as fills, you can add them to existing layers.

1. 1.

   You can add images from the following places:

   • Add from the Shapes menu in the toolbar.

   • Use keyboard shortcuts:

     • macOS: ⇧ Shift + ⌘ Command + K
     • Windows: Shift + Ctrl + K
2. 2.

   Motiff will open a file selection window where you can select multiple image files and then click Open.

3. 3.

   Motiff will display a plus cursor and a thumbnail of the first image. If you select multiple files, the top left corner will show how many images you have left to add.

4. 4.

   There are several ways to add images:

   • Click on an area of the canvas to add the image at the corresponding coordinates. The image size will be consistent with its original size.

   • Click and drag to define the dimensions of the image. The image you add can be different from the original size of the image.
   • Click on an existing layer on the canvas to set the image as the fill for that layer, with the image fill mode defaulting to fill.
   • Select Place all in the menu bar to add all images to the canvas.
5. 5.

   Repeat the above steps for the remaining images. Or click the Discard all in the menu bar to discard all unplaced images.

   

Paste images

The following content will introduce how to paste images from the clipboard and what outcomes to expect after pasting.

Paste to create a new layer

You can directly paste an image from the clipboard onto the canvas to create a new layer. In this way, you can copy images directly from the web without having to download them to your device.

1. 1.Click a blank area on the canvas to deselect layers.
2. 2.Use shortcuts to paste the image and create a new layer on the canvas:
   • macOS: Command + V
   • Windows: Ctrl + V
3. 3.Motiff will create a rectangle with the same dimensions as the original image and apply the image as a fill.

Paste into an existing layer

If you select a layer before pasting the image, Motiff will add the image as a fill to that layer.

By default, Motiff will add a new fill to the layer. If you want to replace an existing fill, you can select the Fill modal in the right sidebar before pasting.

1. 1.Select the layer you want to add an image to.
2. 2.Use shortcuts to paste the image:
   • macOS: ⌘ Command + V
   • Windows: Ctrl + V
3. 3.Motiff will add the image as a new fill to the selected layer. The image fill mode defaults to fill, but you can change it to fit, crop, or tile.

Edit images

Adjust image fill properties

You can view information about the image fill from the Fill modal in the design panel.

1. 1.The Fill modal will display the fill type as Image.
2. 2.The thumbnail of the image will be displayed on the left side of a fill, where you can click and open the color picker.
3. 3.Modifying the values can adjust the image's opacity. Motiff represents it as a percentage value (%).
4. 4.Click can set whether the image is visible.
5. 5.Click to delete the image fill.
6. 6.Click to add a new fill.
7. 7.Click to view, apply existing styles, or create new styles. Motiff supports creating color styles with images, solid colors, and gradients.

You can also click on the image thumbnail in the design panel to open the fill menu and view more image settings. Motiff supports adjusting the following:

1. 1.Fill type
2. 2.Blend mode
3. 3.Fill mode
4. 4.Rotation
5. 5.Image preview
6. 6.Image adjustment

Image fill mode

Motiff supports four different image fill modes, which will lead to different display effects depending on the size of the image and the layer:

• Fill ensures that the image completely fills the entire layer while keeping the width of the image and the layer the same. If the image and layer have different shapes, Motiff may crop the image to ensure the layer is fully filled.
• Fit allows the image to be fully displayed within the layer. Under this setting, the image may not completely fill the entire layer.
• Crop allows you to freely adjust the display range of the image. This is a non-destructive action, similar to using mask.
• Tile creates a repeating pattern of the original image to fill the entire layer. You can adjust the size of the repeating pattern using a percentage value. Motiff sets the percentage based on the original size of the image. You can also enter a percentage in the provided field, or click and drag the blue handle on the canvas to adjust the scale.

Scale images

When Motiff applies an image as a fill, it cannot adjust the scale or size of the image itself.

However, similar to any other layer, you can scale the layer filled with the image. We will scale and position the image based on the image fill mode you choose.

In the example below, the image fill mode is set to fill. When resizing the layer, Motiff will scale the image to ensure it can fill the entire layer.

Crop images

1. 1.

   Select the layer you want to adjust.

2. 2.

   Click on the fill modal in the design panel to open the fill menu.

3. 3.

   Click next to the image fill mode and choose Crop.

4. 4.

   Eight blue handles will appear around the image. You can crop the image by:

   • Click and drag the blue handles in any direction to crop.

   • Click and drag the image to reposition it.

     

5. 5.

   Click anywhere on the canvas to apply the crop.

Rotation

You can rotate the image within the layer, which will not affect the orientation of the layer itself, only the image within it.

Click to rotate the image 90º clockwise:

1. 1.Select the layer you want to adjust.
2. 2.Click the image thumbnail in the design panel to open the fill menu.
3. 3.Click to rotate 90º clockwise.
4. 4.You can rotate multiple times as needed.
5. 5.Click in the upper right corner of the fill settings to close and return to the canvas.

Preview images

The Fill menu supports previewing the image. You can perform the following operations:

• Upload images from your computer: Hover over the preview and click Select image. If you have already added an image, this can replace the existing image with a new one.
• Replace images: Drag the image file onto the image preview area to replace the image. Motiff will retain the settings of the previous image.

Image adjustments

Motiff also offers image adjustment features, which is similar to the filter functions in photo editing software.

These adjustments are non-destructive. You can undo or change these settings at any time.

Apply image adjustments

You can adjust images through the Fill menu:

1. 1.

   Select the image layer you want to adjust.

2. 2.

   Click the image thumbnail in the design panel to open the Fill menu.

3. 3.

   You can preview the image in the menu.

4. 4.

   All of the settings below have handles. By dragging the handle to adjust the value of the corresponding setting, you can see the changes on the canvas and in the image preview area:

   • Drag left for negative adjustments.
   • Drag right for positive adjustments.
5. 5.

   Click to save and return to the canvas.

Types of adjustments

Motiff supports seven types of image adjustments:

1. 1.Exposure
2. 2.Contrast
3. 3.Saturation
4. 4.Temperature
5. 5.Tint
6. 6.Highlights
7. 7.Shadows

Exposure

Exposure indicates how much light reaches the sensor inside the camera. You can reduce exposure to make the image darker (underexposed) or increase it to make the image have more light (overexposed).

Contrast

Contrast refers to the difference between light and dark pixels in an image.

You can reduce contrast to narrow the color range and create a muted image. Or, you can increase the difference between the light and dark portions of the images. This results in a more vivid image with brighter highlights and darker shadows.

Saturation

You can adjust the intensity of colors in an image with saturation. Completely reducing saturation can yield a black-and-white image. You can also increase the saturation to create an image with more intense, saturated colors.

Temperature

You can adjust the color temperature along the horizontal axis, from cooler (blue-toned) to warmer (orange-toned).

Cooler images have a blue undertone, while warmer images have an orange undertone.

Tint

You can adjust the colors in an image by using tint, which is measured along the vertical axis from green to red.

Drag the slider left to make the image appear greener, or drag it right to make the image appear redder.

Highlights

You can isolate and adjust the brighter areas of the image with highlights. By adjusting the highlights parameter, you can change the brightness and contrast of the highlight areas in the image, making them more pronounced or softer.

Shadows

You can isolate and adjust the darker areas of the image with shadows. By adjusting the shadows parameter, you can change the brightness and contrast of the shadow areas in the image, making them more prominent or softer.

Adjust to the left to lower the light level and create deeper shadow areas, or adjust to the right to increase the light to create brighter shadow areas.