Working with layers

Layers are the building blocks of every template in PixelFiddler. Each layer is a separate element — a product photo, a line of text, a shape, an icon — that sits on top of the canvas. Stack them together, and you get a finished image ready for your store.

Think of layers like transparent sheets of paper piled on top of each other. The sheet on top covers what is below it. You control which sheet goes where, how big it is, and how it looks.

Layer types at a glance

PixelFiddler supports six different layer types. Each one serves a different purpose in your template.

Type	What it does	Typical use
Image	Displays a photo from your media library	Product photos, lifestyle shots, backgrounds
Text	Renders styled text on the canvas	Product names, prices, CTAs, sale badges
Shape	Draws a geometric shape	Dividers, decorative elements, colored blocks
QR Code	Generates a scannable QR code	Product URLs, coupon codes, landing pages
SVG/Icon	Places a vector icon or custom SVG	Social icons, checkmarks, arrows, badges
AI Image	Creates an image from a text prompt	Custom backgrounds, decorative art, filler visuals

Image layers

Image layers pull photos directly from your connected storage. When you add one, you select an image from your library and place it on the canvas.

Every image layer has a fit mode that controls how the photo fills the layer boundaries:

• CROP — the image fills the entire area, cutting off edges if the aspect ratio does not match
• RESIZE — the image fits entirely within the area, leaving empty space if needed

You can also apply visual effects to image layers — blur, brightness, contrast, and more. See the effects section below for the full list.

Tip

Use CROP for backgrounds and hero images where full coverage matters. Use RESIZE for product photos where you need to show the entire item without anything being cut off.

Text layers

Text layers let you place product names, prices, discount labels, or any other copy directly on your template.

Available text properties:

• Font — choose from the available font families
• Font size — set the size in pixels
• Font weight — control how bold or light the text appears
• Color — pick any text color using the color picker
• Background color — add a colored background behind the text
• Alignment — position text within its bounding box using 9 anchor points (top-left, top-center, top-right, middle-left, center, middle-right, bottom-left, bottom-center, bottom-right)

Note

Text layers are perfect for dynamic content. Combine them with template variables to automatically insert product names, prices, or custom messages at render time.

Shape layers

Shape layers add geometric elements to your design. Use them for backgrounds, dividers, decorative accents, or colored overlays.

Available shape types:

• Rectangle — with optional corner radius for rounded corners
• Circle — perfect circles and ellipses
• Line — straight lines for dividers or visual separation

Shape properties include fill color, stroke width, stroke color, and corner radius (rectangles only).

QR Code layers

QR Code layers generate scannable codes right inside your template. Point them at product pages, coupon codes, or any URL you need your customers to reach.

Set the content of the QR code (a URL, text, or coupon code) and customize its appearance with foreground color and background color options.

Tip

QR codes work great on packaging mockups, event flyers, and social media graphics. Pair them with a dynamic variable so each generated image points to a different product page.

SVG/Icon layers

SVG layers let you add crisp, scalable vector icons to your template. PixelFiddler includes a built-in library of Material Design Icons with 16 ready-to-use shapes, or you can upload your own custom SVG files.

Because SVG icons are vector-based, they stay perfectly sharp at any size — no pixelation, no matter how large you scale them.

AI Image layers

AI Image layers generate visuals from a text prompt. Describe what you want, set the dimensions, and PixelFiddler creates the image for you.

To add an AI image layer, provide a prompt (a text description of what you want the image to look like) and specify the width and height in pixels.

Caution

AI image generation uses additional credits based on the output dimensions. Keep sizes reasonable to manage costs.

Adding layers to your template

To add a new layer, click the + button in the Layers panel on the left side of the editor. A menu appears with all six layer types for you to choose from.

You can also use keyboard shortcuts for faster workflow:

Shortcut	Layer type
T	Text
I	Image
R	Rectangle
C	Circle

Selecting and managing layers

There are two ways to select a layer:

• Click on the canvas — click any visible element directly on the canvas to select it
• Click in the Layers panel — click a layer name in the list to select it

Once a layer is selected, its properties appear in the right-side panel where you can adjust every setting.

Deleting layers

Select the layer you want to remove, then press Delete or Backspace on your keyboard.

Copy and paste

Duplicate layers quickly with standard shortcuts:

• Ctrl+C to copy the selected layer
• Ctrl+V to paste a copy

Layer ordering

The order of layers in the Layers panel determines which elements appear in front of others. Layers at the top of the list appear at the front of the image, covering layers below them.

To reorder layers, drag and drop them up or down in the Layers panel. Move a layer higher in the list to bring it forward, or lower to push it behind other elements.

Tip

Put background elements at the bottom of the layer list and foreground elements like text and badges at the top. This keeps your template organized and makes it easy to find specific layers.

Common properties

Every layer, regardless of type, shares a set of common properties you can adjust.

Position and dimensions

• X and Y — control where the layer sits on the canvas (measured in pixels from the top-left corner)
• Width and Height — set the layer size in pixels
• Rotation — rotate the layer by any number of degrees
• Opacity — control transparency from 0 (fully transparent) to 100 (fully visible)

Blend modes

Blend modes change how a layer interacts visually with the layers beneath it. PixelFiddler offers 25+ blend modes including popular options like:

• Multiply — darkens the image, great for shadow effects
• Screen — lightens the image, useful for glow effects
• Overlay — combines Multiply and Screen for richer contrast
• Darken, Lighten, Color Dodge, Color Burn, Soft Light, Hard Light, Difference, Exclusion, and more

For most templates, the default blend mode works fine. Experiment with others when you want creative visual effects.

Effects

Apply visual adjustments to any layer using the built-in effects:

Effect	What it does
Blur	Softens the layer with a Gaussian blur
Brightness	Makes the layer lighter or darker
Contrast	Increases or decreases tonal range
Saturation	Boosts or reduces color intensity
Sharpen	Enhances edge definition
Noise	Adds a grainy texture
Grayscale	Converts to black and white
Sepia	Applies a warm, vintage tone

Border

Add borders to any layer by setting:

• Border radius — round the corners (especially useful for image and shape layers)
• Stroke width — thickness of the border line
• Stroke color — color of the border

Shadow

Add depth to your layers with drop shadows:

• Shadow color — the color of the shadow
• Shadow blur — how soft or hard the shadow edge appears
• Shadow offset — how far the shadow is cast from the layer
• Shadow opacity — transparency of the shadow effect

Layer limits

Templates have a few limits to keep rendering fast and reliable:

Limit	Maximum
Total layers per template	20
Image layers per template	3
SVG layers per template	10

Note

If you hit the image layer limit, consider combining multiple product photos into a single image before uploading, or use shape and text layers to fill out your design instead.

Next steps

Now that you understand how layers work, continue building your templates:

• Text and branding — Deep dive into typography, fonts, and brand-consistent text styling
• Dynamic variables — Swap text, images, and colors automatically at render time
• Generate images — Turn your finished templates into production-ready images