Image Layer

Image layers are your go-to tool for adding pictures, photos, icons, and graphics to your game designs. Whether you're placing character portraits, game board decorations, or background textures, image layers give you complete control over how your images look and behave.

This guide walks you through everything you can do with image layers—from basic positioning to advanced visual effects!

Position and Size

These properties control where your image appears and how big it is on your design.

Property	What It Does	Range	Default
X (Left)	Horizontal position from the left edge of the design	-9999 to 9999 pixels	0
Y (Top)	Vertical position from the top edge of the design	-9999 to 9999 pixels	0
Width	How wide the image container is	1 to 10000 pixels	100
Height	How tall the image container is	1 to 10000 pixels	100
Anchor	Which point of the layer the X/Y position refers to (like setting the "origin" point)	9 positions: top-left, top-center, top-right, middle-left, middle-center, middle-right, bottom-left, bottom-center, bottom-right	top-left
Rotate	Spins the image clockwise (positive) or counter-clockwise (negative)	-360 to 360 degrees	0
Rotate Around	Which point the layer spins around (like putting a pin through the layer)	Same 9 positions as Anchor	middle-center

Pro Tip: The Anchor property is super handy! Set it to "middle-center" and your X/Y values will position the center of the image instead of the top-left corner. This makes centering things much easier!

Image Source

Property	What It Does	Example
Image	The URL or path to your image file. This can be a web URL (https://...) or a reference to images you've uploaded to your game.	`{{ images.dragon.url }}` or `https://example.com/image.png`

Dynamic Images: You can use variables in your image URL! For example, {{ images.character_{{ row.type }}.url }} will load different character images based on data in your dataset.

Image Fitting & Positioning

These properties control how your image fits inside the layer's width and height—just like CSS object-fit!

Object Fit

Determines how the image should be scaled to fit its container:

Mode	How It Works	Best For
Fill	Stretches the image to completely fill the width and height. May distort the image if the aspect ratio doesn't match.	When you want to fill the entire space, regardless of distortion
Contain	Scales the image to fit completely inside the bounds while keeping its aspect ratio. May leave empty space on the sides or top/bottom.	Ensuring the entire image is visible without cropping
Cover	Scales the image to fill the entire bounds while keeping its aspect ratio. May crop parts of the image.	Background images where you want full coverage without distortion
Scale Down	Same as "contain" but never enlarges the image—only shrinks it if it's too large.	Small icons or logos that shouldn't be enlarged
None	Keeps the image at its original pixel size, no scaling at all.	Pixel-perfect placement of images

Object Position

When using Contain, Cover, Scale Down, or None, this determines where the image sits within the container:

Position	Where the Image Sits
Top-Left	Image aligns to the top-left corner
Top-Center	Image centers horizontally at the top
Top-Right	Image aligns to the top-right corner
Middle-Left	Image centers vertically on the left side
Middle-Center	Image centers both horizontally and vertically (default)
Middle-Right	Image centers vertically on the right side
Bottom-Left	Image aligns to the bottom-left corner
Bottom-Center	Image centers horizontally at the bottom
Bottom-Right	Image aligns to the bottom-right corner

Example: Set Object Fit to "Cover" and Object Position to "top-center" to create a nice header image that fills the space and is centered at the top—perfect for character portraits!

Flip

Mirror your image horizontally, vertically, or both!

Option	Effect
None	Image appears normally (default)
Horizontal	Flips the image left-to-right (mirror image)
Vertical	Flips the image top-to-bottom (upside down)
Both	Flips both ways (180° rotation equivalent)

Quick Trick: Use Flip: Horizontal to reuse the same character art facing different directions!

Border & Corners

Add decorative borders around your images and control how the corners look.

Border Properties

Property	What It Does	Range/Options	Default
Border Type	What kind of border to draw	None (no border), Color (solid color), or Texture (image pattern)	None
Border Color	The color of the border (when using Color type)	Any hex color	Blue (#0000ff)
Border Thickness	How thick the border line is	0 to 9999 pixels	5
Border Opacity	How transparent the border is	0 (invisible) to 100 (solid)	100
Border Alignment	Where the border sits relative to the image edge	0 (inside), 50 (centered), 100 (outside)	50
Border Texture	URL to an image to use as a repeating border pattern (when using Texture type)	Any image URL	—

Border Alignment Explained:

0 (Inside): Border is drawn inside the image area, making the visible image slightly smaller
50 (Center): Border straddles the edge—half inside, half outside
100 (Outside): Border is drawn outside the image area, adding to the total size

Corner Styles

Make your image corners fancy! Component.Studio offers 9 different corner styles:

Corner Type	Description
Square	Standard sharp 90° corners (default)
Round	Smooth, circular rounded corners—classic and elegant
Chamfer	Cut corners at an angle—modern and geometric
Fillet	Rounded inset corners—sophisticated and subtle
Rabbet	Stepped corners—picture frame style
Irregular	Random corner variations—organic and unique
Tassle	Decorative pointed corners—ornate and fancy
Asterisk	Star-shaped corners—playful and eye-catching
Dogear	Folded page corners—great for paper-like elements

Property	What It Does	Range
Corner Radius	Controls the size/intensity of the corner effect	0 to 100

Note: Corner Radius affects different corner types differently. For Round corners, it's the curve radius. For Chamfer, it's the cut size. Experiment to find what looks best!

Visual Effects

This is where the magic happens! Component.Studio has a powerful effects pipeline that lets you stack multiple visual effects on your images. Effects are applied in the order you arrange them, so you can create complex, layered looks.

Blending

Property	What It Does	Range/Options
Opacity	How transparent the entire image is	0 (invisible) to 100 (solid)
Blend Mode	How this image blends with layers behind it	Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion, Hue, Saturation, Color, Luminosity

Popular Blend Modes:

Multiply: Darkens—great for shadows and shading
Screen: Lightens—perfect for light effects and glows
Overlay: Increases contrast—adds punch to images

Blur

Property	What It Does
Amount	How much blur to apply—higher values = blurrier

Drop Shadow

Add depth to your images with realistic shadows!

Property	What It Does
Distance	How far the shadow is cast from the image
Angle	Direction the shadow is cast (0-359 degrees)
Blur	How soft the shadow edges are
Color	The shadow color

Realistic Shadows: Use angle 135° (bottom-right), distance 3-5 pixels, blur 3-5 pixels, and a semi-transparent black color for natural-looking shadows.

Glow

Make your images radiate light!

Property	What It Does
Distance	How far the glow extends
Color	The glow color
Inner Strength	How much glow appears inside the image
Outer Strength	How much glow appears outside the image

Outline

Add a stroke around the edges of your image (like a thicker, colored border that follows the shape).

Property	What It Does
Width	How thick the outline is
Color	The outline color

Color Overlay

Tint your image with a color wash!

Property	What It Does
Color	The overlay color
Opacity	How strong the color tint is (0-100)

Creative Use: Use a red color overlay at 30% opacity to make images appear hot or dangerous. Blue at 20% for cold or icy effects!

Color Adjustments

Fine-tune the colors and brightness of your image with precision controls:

Property	What It Does
Red	Adjust the amount of red in the image (0-200, where 100 is normal)
Green	Adjust the amount of green (0-200)
Blue	Adjust the amount of blue (0-200)
Gamma	Adjust mid-tone brightness (0-200)
Saturation	Color intensity—0 is grayscale, 100 is normal, 200 is super vibrant
Contrast	Difference between light and dark (0-200)
Brightness	Overall lightness (0-200)

Remember: All color adjustment values default to 100 (normal). Values below 100 reduce the effect, values above 100 increase it!

Layer Controls

These special properties control how the layer behaves:

Property	What It Does	Default
Render	Whether to show this layer at all (true/false)	true
Hide Overflow	Crops anything outside the layer bounds (true/false)	false
Z-Index Enabled	Turn on advanced layer ordering (true/false)	false
Z-Index	Layer stacking order when enabled—higher numbers appear on top	1000

Z-Index Pro Tip: Normally, layers stack in the order they appear in your layer list. Enable Z-Index when you want specific layers to always be on top or bottom, regardless of list order!

Layer Toolbar

The layer toolbar gives you quick access to handy visualization tools:

Button	What It Does
Eye Icon	Quickly hide/show the layer while designing (doesn't affect final output)
Brim Icon	Shows a visual outline around the layer to see its exact boundaries
Bounds Icon	Shows additional boundary information and measurement tools
More Menu	Access layer operations like rename, delete, duplicate, move between groups, and reorder

Tips for Success

Performance Tips:

Use appropriate image sizes: Don't load a 4000×4000 image if you're only displaying it at 200×200 pixels!
Optimize your images: Use compressed JPEGs for photos, PNGs for graphics with transparency
Limit heavy effects: Blur and glow effects are beautiful but can slow down rendering if overused

Design Tips:

Layer effects strategically: Try blur + drop shadow for depth, or glow + color overlay for magical items
Match your Object Fit to your content: Use "Cover" for backgrounds, "Contain" for icons, "Fill" when aspect ratio doesn't matter
Experiment with blend modes: They can create stunning effects when layering images—especially with Multiply and Screen
Use borders creatively: Texture borders with wood or metal patterns can add premium polish to card designs

Workflow Tips:

Name your layers: "Background Image" is much clearer than "Image Layer 7"
Use variables for dynamic images: {{ images[row.character_type].url }} lets one layer show different images based on your data
Group related images: Use layer groups to organize your design—keep all background elements in one group, foreground in another
Toggle visibility frequently: Use the eye icon to hide/show layers while designing to see how elements work together

Common Questions

Why does my image look blurry?

This usually happens when you're scaling an image up significantly. Try using a higher resolution source image, or set Object Fit to "None" or "Scale Down" to prevent enlargement.

How do I make a circular image?

Set Corner Type to "Round" and set Corner Radius to 100. Make sure your layer Width and Height are equal for a perfect circle!

What image formats are supported?

Component.Studio supports PNG, JPEG, GIF, WebP, and SVG image formats.

My image won't load—what's wrong?

Check that your image URL is publicly accessible and starts with http://, https://, or is a proper reference to an uploaded image like {{ images.myimage.url }}. If you see a gray placeholder, the image is loading. If you see a red error placeholder, the URL is invalid.

Happy designing!
Remember: The best way to learn is to experiment. Try different combinations and see what works for your game!