How to create your first template

This guide walks you through creating your first image template in PixelFiddler using the visual editor. By the end, you will have a reusable template that you can render on demand with different images, text, and branding — no design tools required.

Prerequisites

Before you begin, make sure you have:

• A PixelFiddler account with at least one space set up
• At least one image uploaded to a storage — see Upload your first photo if you need help with this

What is a template?

A template is a saved canvas layout made up of layers — images, text, shapes, and more. Once you create a template, you can reuse it to generate consistent product images at scale. Think of it as a reusable design blueprint for your product cards, social media posts, banners, and other visual assets.

Step 1: Open the template editor

1. Log into your PixelFiddler dashboard
2. In the sidebar, click Templates
3. Click the Create Template button

The visual editor opens with three panels:

• Left — Layers panel: Shows your layer stack. Every image, text block, or shape you add appears here. You can reorder layers by dragging them up or down.
• Center — Canvas: The visual editing area where you see your template come together. This is where you drag, resize, and arrange elements.
• Right — Properties panel: Displays settings for the currently selected element. When you click a layer on the canvas, its options (position, size, color, font, and more) appear here.

Tip

You can collapse the left or right panel by clicking the panel toggle arrows at the edge of each panel. This gives you more room on the canvas when working on smaller screens.

Step 2: Set your canvas size

The canvas is the foundation of your template. Start by choosing a size that matches where you plan to use the final image.

1. With nothing selected on the canvas, look at the Properties panel on the right
2. Under Canvas Size, choose a preset from the dropdown or type in custom dimensions

Available presets

Social Media

Preset	Dimensions
Instagram Post	1080 x 1080
Instagram Story	1080 x 1920
Facebook Post	1200 x 630

E-commerce

Preset	Dimensions
Product Card	800 x 800
Product Banner	1200 x 400
Marketplace Thumbnail	500 x 500

Web

Preset	Dimensions
Web Banner	1920 x 1080
Blog Header	1200 x 628

For this walkthrough, select Product Card 800x800 — a versatile square format that works well on most e-commerce platforms.

Note

You can always change the canvas size later. Any layers you have already placed will keep their positions, but you may need to adjust them to fit the new dimensions.

Step 3: Set a background

Every template needs a background. You can use a solid color, or set a background image.

Option A: Solid background color

1. In the Properties panel, find the Background Color field
2. Click the color swatch to open the color picker
3. Choose a color or enter a hex value (for example, ffffff for white or f5f5f5 for a light gray)

Option B: Background image

1. In the Properties panel, click Set Background Image
2. Browse your media library and select an image
3. The image fills the canvas automatically

Tip

For product cards, a clean white or light gray background keeps the focus on your product. Save the bold colors for social media posts and banners.

Step 4: Add an image layer

Now let’s add your product image to the canvas.

1. Press the I key on your keyboard, or click the + button in the Layers panel and select Image
2. Your media library opens — browse or search for the image you want to use
3. Select the image and click Add

The image appears on the canvas as a new layer.

Position and resize the image

• Move: Click and drag the image anywhere on the canvas
• Resize: Grab one of the corner handles and drag to scale the image up or down
• Precise values: Use the X, Y, Width, and Height fields in the Properties panel to enter exact pixel values

Tip

Hold Shift while dragging a corner handle to keep the image proportions locked. This prevents your product photos from looking stretched or squished.

Step 5: Add a text layer

Text layers let you add product names, prices, taglines, or any other copy to your template.

1. Press the T key on your keyboard, or click the + button in the Layers panel and select Text
2. Click and drag on the canvas to place a text box
3. Type your text — for example, your product name

Style your text

With the text layer selected, use the Properties panel on the right to adjust:

• Font family: Choose from the available font list. Popular choices for e-commerce include clean sans-serif fonts.
• Font size: Set the size in pixels. For product names on an 800x800 card, try starting around 36-48px.
• Font weight: Choose from light, regular, bold, and other weight options.
• Color: Click the color swatch to pick a text color, or type a hex value directly.
• Opacity: Slide to make text more or less transparent (0 is invisible, 100 is fully opaque).

Note

You can add multiple text layers to a single template. For example, add one layer for the product name and another for the price. Each layer has its own independent style settings.

Add text effects

For extra visual polish, you can add a shadow to your text:

1. In the Properties panel, expand the Shadow section
2. Set the shadow color, blur, x offset, y offset, and opacity

This is useful when placing text over busy backgrounds — a subtle shadow helps the text stand out.

Step 6: Arrange your layers

As you add more elements, the order they appear in matters. Layers higher in the Layers panel sit on top of layers below them — just like stacking sheets of paper.

1. Open the Layers panel on the left
2. Find the layer you want to move
3. Click and drag it up or down in the list to change its position

For a typical product card, a good layer order from bottom to top is:

1. Background color or image (bottom)
2. Product image
3. Text layers such as product name and price (top)

Fine-tune layer properties

Select any layer on the canvas or in the Layers panel to access additional settings in the Properties panel:

• Opacity: Control how transparent a layer is (0-100)
• Blend mode: Change how a layer interacts with layers beneath it (for example, Multiply, Screen, or Overlay)
• Angle: Rotate the layer by a specific number of degrees
• Fit mode: Choose Crop or Resize to control how the layer content fits within its bounds

Step 7: Preview your template

Before saving, take a moment to review how your template will look when rendered.

1. Click the Preview button in the top toolbar
2. PixelFiddler renders all your layers into a single composite image
3. Review the result — if anything looks off, close the preview and make adjustments

Tip

Use the preview frequently as you build. It shows you the exact output that PixelFiddler will generate, including how layers blend together and how text renders at its final size.

Step 8: Save your template

When you are happy with your design, it is time to save.

1. Click the Save button in the top toolbar
2. Enter a template name in the dialog that appears
3. Click Save

Your template name must follow these rules:

• Use only lowercase letters, numbers, and hyphens
• No spaces, underscores, or special characters
• This is called kebab-case format

Valid names:

• product-card
• instagram-post-v2
• summer-sale-banner
• thumbnail-800

Invalid names:

• Product Card (no uppercase, no spaces)
• product_card (no underscores)
• my template! (no spaces or special characters)

Caution

The template name is used to reference this template in URLs and API calls. Choose a clear, descriptive name because changing it later may break existing references.

Step 9: Find your saved template

After saving, your template appears in the Templates list in the sidebar.

1. Navigate back to Templates
2. You will see your new template listed with its name and a thumbnail preview
3. Click on any template to open it in the editor and make changes

From here you can:

• Edit the template by clicking on it
• Duplicate the template to create a variant
• Delete the template if you no longer need it

Quick reference: keyboard shortcuts

Shortcut	Action
I	Add a new image layer
T	Add a new text layer
Shift + drag	Resize while keeping proportions

What to try next

Now that you have your first template, here are some ideas to explore:

• Add a second text layer for the product price
• Try a different canvas preset like Instagram Story for vertical content
• Experiment with blend modes to create visual effects between layers
• Add an SVG layer for icons or decorative elements

Next steps

Dive deeper into the template editor with these guides:

Working with layers Learn about all layer types, ordering, blend modes, and effects

Text and branding Master text styling, fonts, shadows, and brand consistency

Dynamic variables Make your templates dynamic by swapping images and text at render time