Skip to main content
Image layers display static images like photos, logos, and icons. CAPlayground supports PNG, JPEG, and SVG formats.

​
Creating an Image Layer

​
Method 1: Local Files

  1. Click Add Layer in the Layers Panel.
  2. Select Image Layer….
  3. Choose one or more images from your computer.
  1. Click Add Layer in the Layers Panel.
  2. Select Import from Link.
  3. Paste the URL of the image and click Import.

​
Method 3: Drag and Drop

  • Simply drag an image file from your computer directly onto the editor canvas.
SVG Support: SVGs are automatically converted to PNGs when imported to ensure compatibility with all devices.

​
Image Properties

These properties are found in the Content tab of the Inspector Panel.

​
Fit Mode

Controls how the image fills the layer’s bounds.
  • Cover: Spans the entire layer, cropping the image if necessary.
  • Contain: Shows the whole image, adding empty space if necessary.
  • Fill: Stretches the image to fit exactly (may look distorted).
  • None: Keeps the image at its original size.

​
Editing Images

CAPlayground includes built-in tools for permanent image modifications. These tools create a new version of your image and replace the original in your project.

​
Crop

The Crop tool allows you to select a specific portion of your image.
  1. Select your image layer.
  2. Go to the Content tab.
  3. Click Crop.
  4. Adjust the green selection handles to your desired area.
  5. Choose Maintain bounds after crop if you want the layer to keep its current size on the canvas.
  6. Click Apply crop.

​
Permanent Blur

Use this to bake a blur effect directly into the image file.
  1. Click Blur in the Content tab.
  2. Adjust the Blur Amount slider.
  3. Click Apply Blur.
Permanent vs. Dynamic Blur: Use the Blur Tool for a permanent background effect (better performance). Use the Filters Tab for a blur that you want to animate over time.

​
Reset Bounds

If you’ve resized your image layer and want it to return to its original width and height, click Reset Bounds.

​
Filters (Dynamic Editing)

In the Filters tab, you can add non-destructive effects that can be adjusted or animated later.
  • Gaussian Blur: A dynamic blur effect.
  • Contrast, Saturation, Sepia: Traditional color adjustments.
  • Hue Rotate: Shift all colors in the image.
  • Invert: Flip the colors of the image.

​
Common Properties

Image layers support all standard properties in the Geometry and Compositing tabs.

​
Geometry

  • Position (X, Y): Location on the canvas.
  • Bounds (W, H): The size of the layer. Match this to your image’s aspect ratio for the best look.
  • Rotation: Rotate your image in 2D or 3D.

​
Compositing

  • Opacity: Adjust transparency from 0% to 100%.
  • Corner Radius: Round the corners of your image to create circles or rounded frames.

​
Best Practices

  • File Size: Keep images under 2MB for faster loading and better performance.
  • Transparency: Use PNGs with transparency for logos and icons.
  • Resolution: Use images that match the resolution of your device for maximum sharpness.

​
Troubleshooting

​
”My image looks stretched”

Solution:
  • Check your Fit Mode. Set it to Cover or Contain to maintain the correct aspect ratio.

​
”I can’t see my image”

Check:
  • Is Opacity set to 0%?
  • Is the layer hidden?
  • Did the upload finish? Large files may take a moment to appear.

​
Next Steps

Video Layers

Add moving GIFs and videos

Layer Hierarchy

Mask images with other layers

Creating Animations

Bring your images to life

Export Your Project

Test your design on device