Transformations

Transformations are how you position, resize, rotate, and manipulate elements on your canvas. Master these and you'll have precise control over every aspect of your theme's layout.

The Basics of Transformations

Every layer has transformation properties that control:

Where it is (Position)
How big it is (Scale)
How it's oriented (Rotation)
Where it pivots from (Anchor)
How transparent it is (Opacity)

Position

Position controls WHERE your layer appears on the canvas.

Understanding Coordinates

X and Y values:

X: Horizontal position (left to right)
Y: Vertical position (top to bottom)
Origin (0,0): Top-left corner of canvas

(0,0) ─────────────────→ X increases
  │
  │     Your canvas
  │
  │
  ↓
Y increases

Reading positions:

X: 100, Y: 50 = 100 pixels from left, 50 pixels from top
X: 960, Y: 540 = center of 1920x1080 canvas (16:9)

Moving Layers

Method 1: Drag with mouse

Click layer on canvas
Drag to new position
Visual and intuitive

Method 2: Arrow keys

Select layer
Press arrow keys to nudge
Arrow keys = 1 pixel movement
Shift+Arrow keys = 10 pixel movement
Perfect for precision!

Method 3: Controls panel (right side)

Select layer
Find Position X and Y controls in the Properties tab
Drag the sliders or type exact values
Changes apply in real-time

Method 4: Animation

Use Move X or Move Y animations
Animate position over time

Positioning Tips

Centering elements:

For 1920x1080 canvas:
- Center X = 960
- Center Y = 540
For other resolutions, divide by 2

Alignment strategies:

Use grid overlays (Settings → Grids)
Rule of Thirds for balanced composition
Even spacing: 100px, 200px, 300px, etc.

Negative positions:

Position off-screen for entrance animations
X: -200 (off screen left)
Y: -100 (off screen top)

Scale

Scale controls the SIZE of your layer.

Understanding Scale Values

Scale types:

Width & Height (in pixels)
Scale (as multiplier: 1 = 100%)

Scale multiplier:

1.0 = Original size (100%)
2.0 = Double size (200%)
0.5 = Half size (50%)
0 = Invisible (collapsed completely)

Resizing Layers

Method 1: Drag corner handles

Select layer on canvas
Drag corner handles
Hold Shift = maintain aspect ratio
Free drag = stretch/squash

Method 2: Controls panel

Use the Width and Height controls
Or adjust the Scale multiplier
Lock aspect ratio checkbox available

Method 3: Animation

Use Scale animation
Grow or shrink over time

Aspect Ratio

Maintaining proportions:

Hold Shift while dragging corners
Or check "Lock aspect ratio" in Properties
Prevents distortion

When to break proportions:

Intentional stretch effects
Filling specific spaces
Creative distortions

Fixed aspect ratios:

16:9 = width 1.77x height
4:3 = width 1.33x height
1:1 = perfect square

Scaling Tips

Upscaling vs Downscaling:

Downscaling (making smaller): Usually fine
Upscaling (making bigger): Can look pixelated
Rule: Upload assets at target size or larger

Uniform scaling:

Scale entire layer proportionally
More natural-looking
Use for most cases

Non-uniform scaling:

Stretch only width or height
Squash and stretch effects
Use sparingly (can look distorted)

Relative sizing:

Background: Scale 1.0 (full size)
Logo: Scale 0.5 (half size)
Icons: Scale 0.25 (quarter size)

Rotation

Rotation controls the ANGLE of your layer.

Understanding Rotation

Degrees:

0° = No rotation (default)
90° = Quarter turn (90 degrees clockwise)
180° = Upside down
270° = Three-quarter turn (or -90°)
360° = Full rotation (back to start)

Rotation direction:

Positive values = Clockwise
Negative values = Counter-clockwise

Rotating Layers

Method 1: Rotation handle

Select layer on canvas
Find circular arrow handle (above layer)
Drag to rotate
Visual feedback

Method 2: Controls panel

Use the Rotation slider or input
Type exact degree value
Real-time preview on canvas

Method 3: Animation

Use Rotation animation
Spin over time
0 to 360 for full rotation

Rotation Anchor Point

Critical concept: Rotation happens AROUND the anchor point!

Default anchor: Center of layer

Rotates around its middle
Most common use case

Changing anchor:

Move anchor to corner = rotates around that corner
Move anchor off layer = orbits around that point
Advanced technique!

Examples:

Anchor at center: Layer spins in place
Anchor at top: Layer swings like a pendulum
Anchor below layer: Layer rotates around external point

Rotation Tips

Small rotations:

±5-15° = subtle tilt
Adds visual interest
Looks less "stiff"

Common angles:

45° = Diagonal
90° = Perpendicular
180° = Flipped
360° = Full spin (for animations)

Combining rotations:

Static rotation + animated rotation
Base angle + spinning effect
Creates complex motion

Anchor Point (Pivot)

The anchor point is WHERE transformations happen FROM.

What Anchor Affects

Anchor controls:

Rotation center point
Scale origin point
NOT position (layer still positioned by its anchor)

Default anchor: Center of layer (0.5, 0.5)

Understanding Anchor Values

Anchor coordinates:

0 to 1 range (percentage of layer size)
(0, 0) = Top-left corner
(0.5, 0.5) = Center (default)
(1, 1) = Bottom-right corner

Visual representation:

(0,0)────(0.5,0)────(1,0)
  │         │         │
  │         │         │
(0,0.5)─(0.5,0.5)─(1,0.5)
  │         │         │
  │         │         │
(0,1)────(0.5,1)────(1,1)

Changing the Anchor

In the controls (right panel):

Find Anchor X and Anchor Y controls
Set values (0 to 1)
Layer's rotation/scale point changes instantly

Common anchor positions:

Center (0.5, 0.5): Default, most versatile
Top-center (0.5, 0): Pendulum effects
Bottom-center (0.5, 1): Upward growth
Corners: Specific rotation effects

Anchor Use Cases

Pendulum swing:

Anchor at top (0.5, 0)
Rotate animation
Swings from top

Door opening:

Anchor at left edge (0, 0.5)
Rotate 90°
Opens like a door

Scaling from bottom:

Anchor at bottom (0.5, 1)
Scale animation
Grows upward (like plants)

Orbiting:

Anchor outside layer bounds
Rotation makes layer orbit around point
Advanced technique!

Opacity

Opacity controls TRANSPARENCY.

Understanding Opacity

Values:

1 = Fully opaque (100% visible)
0.5 = Half transparent (50% visible)
0 = Fully transparent (invisible)

Range: 0 to 1 (or 0% to 100%)

Changing Opacity

In the controls panel:

Find Opacity slider
Drag to adjust from 0 to 1
Real-time preview on canvas

Via animation:

Opacity animation
Fade in/out effects
Most common use!

Opacity Tips

Layering effects:

Stack semi-transparent layers
Creates depth and atmosphere
Overlay effects

UI states:

Selected: Opacity 1 (fully visible)
Unselected: Opacity 0.5 (dimmed)
Disabled: Opacity 0.3 (very faint)

Fade animations:

Start: 0, End: 1 = Fade in
Start: 1, End: 0 = Fade out
Combined with other animations for smooth transitions

Advanced Transformations

Tint (Color Overlay)

What it does:

Overlays color on entire layer
Tints the layer that color
Preserves transparency

Use cases:

Color variations from one asset
Highlight/selection colors
Color coding
Mood effects

Application:

Find Tint control in right panel
Click the color picker
Choose color and layer takes on that hue

Example:

One star image
Tint different colors: red, blue, yellow
Multiple colored stars from one asset!

Blend Modes

What they do:

Control how layer blends with layers below
Creates special visual effects
Like Photoshop blend modes

Common modes:

Normal: Default, no special blending
Add: Brightens, glowing effect
Multiply: Darkens, shadow effect
Screen: Lightens, soft glow
Overlay: Contrast boost

Use cases:

Light effects (Add/Screen)
Shadows (Multiply)
Texture overlays
Atmospheric effects

Projection Points (Perspective)

Advanced feature! Creates 3D perspective effects.

What it does:

Distorts layer's four corners
Creates perspective/skew
Simulates 3D rotation

Use cases:

Perspective text
3D-looking panels
Vanishing point effects
Artistic distortions

Caution:

Complex to use
Can look distorted if overdone
Test and preview carefully

Transformation Workflow

The Standard Approach

Position first
- Get elements in roughly the right place
- Use grid overlays for alignment
Scale next
- Size elements appropriately
- Check relative sizes
Rotate if needed
- Add tilts for visual interest
- Check anchor point is correct
Opacity last
- Usually keep at 1 (fully visible)
- Or animate opacity instead
Fine-tune
- Arrow keys for precise nudging
- Preview constantly (Spacebar)
- Adjust as needed

Transformation Tips

Work in layers:

Background first (position, scale)
Foreground next
Details last

Use consistency:

Similar elements = similar sizes
Even spacing
Aligned edges

Preview at target resolution:

What you see is what you get
Test on actual display if possible

Grid and guides:

Enable grids for alignment
Rule of Thirds for composition
Disable for final work

Common Transformation Mistakes

"Everything is off-center!"

Fix:

Calculate center position (canvas width/2, height/2)
Use grid overlay
Check anchor points

"My rotation looks wrong!"

Causes:

Wrong anchor point
Check anchor is where you think it is

"Scaling distorts my image!"

Fix:

Hold Shift while dragging corners
Or enable "Lock aspect ratio"
Re-upload properly sized asset

"Can't position precisely!"

Solution:

Use arrow keys (1px nudges)
Type exact values in the controls panel
Enable grid for alignment

"Layer disappears when I transform it!"

Reasons:

Scaled to 0 (check Scale value)
Opacity set to 0 (check Opacity)
Moved off-canvas (check X/Y position)
Behind other layers (check layer order)