Main Interface Areas
The editor is divided into four main areas:- Layers Panel (left): Manage all your layers
- Canvas (center): Visual preview of your wallpaper
- Inspector Panel (right): Edit properties of selected layers
- States Panel (bottom left): Manage different device states (locked, unlocked, sleep)
- Timeline Panel (bottom): Visualize and adjust animations over time
1. Layers Panel (Left)
The Layers Panel is where you manage all the layers in your wallpaper. Features:- Add Layer button: Click to create new layers (Text, Basic, Gradient, Image, Video, Emitter, Transform)
- Layer list: Shows all layers in your project in a hierarchical tree
- Layer actions: Right-click or use the three-dot menu for options like Rename, Duplicate, Delete
- Drag and drop: Reorder layers by dragging them
Transform Layers are only available in gyro wallpaper projects and enable device tilt effects. Learn more →
- Chevron icon (▶/▼): Indicates a group layer with sublayers; click to expand/collapse
- Green highlight: Shows the currently selected layer
- Layer name and type: Each layer shows its name and type (e.g., “Basic Layer”)
2. Canvas (Center)
The Canvas is your visual workspace. It shows a real-time preview of your wallpaper exactly as it will appear on your device. Interacting with Layers:- Selection: Click any layer to select it. Clicking the empty canvas background will deselect all layers.
- Movement: Click and drag a layer to move it.
- Resizing: Use the selection handles. Hold Shift to lock aspect ratio, or Alt/Option to resize from the center.
- Rotation: Drag the rotation handle (the circle above the top-middle edge).
- Context Menu: Right-click any layer to quickly Rename, Duplicate, Delete, or reorder it.
- Zoom:
- Hold Shift and use your mouse wheel / trackpad.
- Use the + and - buttons in the top right.
- Press Cmd/Ctrl + Plus/Minus.
- Press Cmd/Ctrl + 0 to fit to screen.
- Panning: Hold Shift and drag with your mouse, or use two fingers on a trackpad to move the canvas view.
- Snapping: Layers will automatically snap to the edges of the canvas and to other layers for perfect alignment.
- Grid View: Drag the center knob to simulate tilt.
- Phone View: Tilt a virtual 3D phone to see the depth effect.
- Recenter: Reset simulation to the neutral position.
3. Inspector Panel (Right)
The Inspector Panel shows detailed properties for the selected layer. General Tabs (on most layers):- Geometry: Basic layer properties (position, bounds, rotation, anchor point, etc.)
- Compositing: Opacity, corner radius, clip contents
- Content: Background color, background opacity, border color, border width
- Animations: Keyframe animation settings
- Gyro: Configure device tilt effects (Transform Layers only)
Each tab is specific to the layer type. For example, Image layers have an Image tab, and Transform Layers have a Gyro tab for configuring tilt effects.
- Position (X, Y): Layer location on the canvas
- Bounds (W, H): Layer dimensions
- Rotation (X, Y, Z): Layer rotation in degrees
- Opacity: Layer transparency
- Corner Radius: Rounded corners
- Background Color: Layer background fill
- Border: Border color and width
4. States Panel (Bottom Left)
The States Panel lets you create a different look for your wallpaper when on different device states, like your device being on the lock screen, home screen, or sleep (off). Available States:- Base State: The default state.
- Locked: How the wallpaper looks when your device is on the lock screen.
- Unlock: How the wallpaper looks when your device is on the home screen.
- Sleep: How the wallpaper looks when your device is off.
Locked Light and Locked Dark), allowing you to define different colors and opacities for different iOS appearance modes.
How It Works:
- Select a state (e.g., “Locked”).
- Modify layer properties (position, opacity, etc.).
- CAPlayground automatically creates smooth transitions between states.
5. Timeline Panel (Bottom)
The Timeline Panel provides a visual representation of all animations in your project. It appears automatically when a layer has an animation enabled. Features:- Visualize Durations: See exactly how long each animation lasts.
- Scrubbing: Click and drag on the Time Ruler at the top of the timeline to see how your animations look at any specific point.
- Playback Controls: Use the Play/Pause and Restart buttons to test your animations.
- Zooming: Use the + and - buttons in the timeline header to change the time scale (zoom in for precision, zoom out for the big picture).
- Label Resizing: Drag the divider between the layer names and the tracks to adjust the width of the label column.
6. Device Preview (Canvas Shortcut)
Click the Phone Icon (bottom-left area of the canvas) to enter Device Preview mode. This simulates how your wallpaper will look and behave on a real device.- Interactive States: Swipe up from the bottom to “unlock” the phone, or swipe down from the status bar area to “lock” it.
- Depth Effect Toggle: Test how your layers interact with the lock screen clock.
- Theme Toggle: If you have enabled Light/Dark states, use the Sun/Moon toggle to switch appearance modes.
- Sleep Simulation: Click the side button to toggle the Always-On Display (Sleep) state.
Menu Bar (Top)
The menu bar provides quick access to important functions:- Project Name: Shows the current project name (click to rename). This is a dropdown that also lets you go back to the Projects page, rename your project, or delete your project.
- Undo/Redo: Undo (Cmd/Ctrl+Z) and Redo (Cmd/Ctrl+Shift+Z)
- Settings: Configure editor preferences (snapping options, keyboard shortcuts, etc.)
- Export: Export your wallpaper as .CA zip file or .tendies file (Cmd/Ctrl+E)
- Save Status: Auto-saves to your device (You can manually save by hovering over the status)
Editor Settings
Click the Settings (gear icon) in the top menu to customize your environment:- UI Modes:
- Default Mode: The standard interface with full-sized panels and icons.
- Compact UI: Toggle this to shrink the interface, giving you more room for the Canvas. Perfect for laptop screens or smaller monitors.
- Snapping: Enable or disable snapping to edges and other layers to help with alignment.
- Keyboard Shortcuts: View and customize shortcuts for various editor actions.
Keyboard Shortcuts
Master these shortcuts to work faster in the editor:| Action | Shortcut |
|---|---|
| Undo | Cmd/Ctrl + Z |
| Redo | Cmd/Ctrl + Shift + Z |
| Delete Layer | Delete or Backspace |
| Duplicate Layer | Cmd/Ctrl + D |
| Zoom In/Out | Cmd/Ctrl + + / - |
| Fit to Screen | Cmd/Ctrl + 0 |
| Bring Forward | Cmd/Ctrl + ] |
| Send Backward | Cmd/Ctrl + [ |
| Bring to Front | Cmd/Ctrl + Shift + ] |
| Send to Back | Cmd/Ctrl + Shift + [ |
| Maintain Aspect Ratio | Hold Shift while resizing |
| Resize from Center | Hold Alt/Option while resizing |
Next Steps
Now that you understand the interface, learn how to use it:Creating Layers
Learn how to add different types of layers
Editing Layers
Master layer editing and properties
Layer Hierarchy
Organize layers with groups and sublayers
Your First Wallpaper
Follow a complete tutorial