Azyrom supports importing images as standalone elements or as fills for shapes. Learn how to import, edit, and optimize images in your designs.
Importing Images
Drag and Drop
The easiest way to add images:
- Drag an image file from your file explorer
- Drop it onto the canvas
- The image is placed where you dropped it
File Menu
Select the image tool
Press I to activate the Image tool, then click on canvas to place an image.
Select your image
Browse and select one or more image files.
Place on canvas
Click to place the image, or it's placed at the center of the viewport.
Copy and Paste
Copy an image from anywhere (web browser, other apps) and paste it directly into Azyrom with
⌘/Ctrl + V.
Supported Formats
- PNG - Best for graphics with transparency
- JPG/JPEG - Best for photos
- GIF - Static images (animations show first frame)
- WebP - Modern format with good compression
- SVG - Imported as editable vector shapes
Image as Shape Fill
Use images to fill any shape:
- Select a shape (rectangle, ellipse, or custom path)
- In Properties Panel, click the Fill section
- Choose "Image" from the fill type dropdown
- Click "Choose Image" to select a file
Fill Modes
| Mode | Behavior |
|---|---|
| Fill | Image scales to cover the entire shape (may crop) |
| Fit | Image scales to fit inside the shape (may show gaps) |
| Stretch | Image stretches to exactly match shape dimensions |
| Tile | Image repeats to fill the shape |
Create circular profile photos by adding an image fill to an ellipse. The image automatically clips to the circle shape.
Editing Images
Resizing
- Corner handles - Resize proportionally by default
- Shift + Drag - Free resize (allows changing proportions)
- Properties Panel - Enter exact dimensions
Cropping (NEW)
Double-click an image element to enter crop mode:
- The image displays with a semi-transparent overlay outside the crop area
- A white border shows the current crop bounds
- Rule of thirds grid lines help with composition
- 8 resize handles appear at corners and edges
- Press Enter to confirm crop or Escape to cancel
Crop mode is non-destructive - the original image is preserved and you can re-enter crop mode at any time to adjust. Cropping only works on image elements, not image fills.
Adjusting Image Position in Fill
When using an image as a shape fill:
- Select the shape
- In the Fill section, click the image thumbnail
- Use the position controls to adjust placement
- Or double-click the shape to drag the image directly
Image Adjustments
When you select an image element, the Image Adjustments section automatically appears in the Properties Panel. This provides professional color correction controls for real-time image editing.
Accessing Image Adjustments
- Select an image element on the canvas
- Look for the "Image Adjustments" section in the Properties Panel (auto-expanded for images)
- Or click the "Adjust" button in the Quick Access Bar
Available Adjustments
| Adjustment | Range | Default | Description |
|---|---|---|---|
| Exposure | -2.0 to +2.0 | 0.0 | Brightness in EV stops (like camera exposure) |
| Contrast | -100 to +100 | 0 | Tonal range - negative reduces, positive increases |
| Saturation | 0 to 200 | 100 | Color intensity (0 = grayscale, 100 = normal) |
| Temperature | -100 to +100 | 0 | Cool (blue) to Warm (orange) color shift |
| Tint | -100 to +100 | 0 | Green to Magenta color shift |
| Highlights | -100 to +100 | 0 | Brighten or darken lighter areas |
| Shadows | -100 to +100 | 0 | Brighten or darken darker areas |
Using the Sliders
- Drag the slider - Adjust the value with real-time preview
- Value display - Shows current value next to each slider
- Reset icon - Click the refresh icon next to any modified slider to reset to default
- Reset All - Click "Reset All" at the bottom to restore all adjustments
Temperature and Tint sliders show "Cool/Warm" and "Green/Magenta" labels to help you remember which direction each adjustment goes.
Common Adjustment Workflows
Correct underexposed photos: Increase Exposure (+0.5 to +1.5) and boost Shadows (+20 to +50)
Add warmth to portraits: Increase Temperature (+10 to +30) and slightly reduce Saturation (-10 to -20)
Create high-contrast look: Increase Contrast (+30 to +50), decrease Highlights (-20), increase Shadows (+20)
Convert to grayscale: Set Saturation to 0
Other Image Effects
Blur
Apply Gaussian blur for soft, out-of-focus effects using the Effects section.
Create a frosted glass effect: Place a blurred image behind a semi-transparent shape. Use backdrop blur for even better results.
Replacing Images
Replace an image while keeping its size and position:
- Select the image element
- Right-click and choose "Replace Image"
- Select the new image file
The new image takes on the dimensions and effects of the original.
Optimizing Images
Resolution
For crisp exports:
- 1x - Use images at actual size
- 2x - Use images at 2x the displayed size
- Print - 300 DPI minimum
File Size
Large images increase file size. Consider:
- Resize images to the maximum size they'll be displayed
- Use JPG for photos, PNG for graphics
- Compress images before importing
SVG Import
SVG files are imported as editable vector shapes:
- All paths become editable with the Pen tool
- Colors can be changed
- Elements can be ungrouped and edited individually
This makes SVG ideal for icons, logos, and illustrations you need to customize.