Frameleaf tutorial

Crop and resize a product image with Frameleaf

A rectangular image may need a different composition before it fits a square product card. Crop the area you want to show, set the final pixel dimensions, and keep an editable copy for the next revision.

This guide uses Frameleaf, Nishvault’s free browser image editor, to make a 600 × 600 image with a short caption. The steps use its original Cedar Tea illustration, which is synthetic demonstration artwork rather than a real product photograph or advertisement. The same workflow works with your own supported artwork.

Start with the image you intend to edit

Open the Frameleaf editor. For this example, choose Load original example, then Reset edits. This restores the original 1200 × 900 illustration and removes its existing crop, color adjustments, and text. Save any work you want to keep before replacing it.

For your own artwork, choose Upload image. Frameleaf accepts PNG, JPEG, and WebP up to 8 MB and 16 megapixels, with a maximum of 12,000 pixels per side. Choose an image you have permission to use. SVG source, PSD layers, and PDF files are outside the editor’s supported import formats.

1. Crop the composition before setting its output size

Choose Draw crop to inspect the original source image. You can drag a selection or enter exact values in the Crop fields. For the reset Cedar Tea example, use these settings:

Choose Apply crop. The crop removes equal amounts from the left and right of this particular illustration. Check the composition before continuing: a centered crop may cut off an off-center product in another image, so adjust the selection to suit your artwork.

Crop values refer to the original image. Cropping happens before rotation and resizing. The operation is non-destructive within the saved project; it keeps the original embedded image so you can revise the crop later.

2. Resize the square to 600 × 600 pixels

In Resize, leave Keep aspect ratio checked, enter 600 for Width, and choose Apply size. The square crop becomes a 600 × 600 output. Check the displayed dimensions before export.

Use the dimensions required by the page where you will place the image. The 600-pixel square is a practice target, not a promise that every marketplace accepts it. Reducing a large source can be useful; enlarging a small source does not create missing detail.

The editor preview is capped at 1400 pixels on its longest side, while export uses the full output dimensions. Judge the downloaded file as well as the preview.

3. Add one short caption

Choose + Add under Text layers. For this example, enter Tea break, set Font size to 32, Color to #243d32, Align to Center, X (%) to 50, and Y (%) to 90. Choose Apply text.

Font size is measured in final-output pixels; the position uses percentages. You can also select and drag the rendered text. Inspect the caption at the final size and keep it inside the canvas. A longer caption, a different font rendering, or another crop can change how much space it needs.

Leave the reset color controls at their defaults for this example. Brightness, contrast, saturation, grayscale, and sepia change the actual output pixels when you use them. For a product photograph, review whether an adjustment still represents the item accurately.

4. Save an editable project before exporting

Set Project title to Tea square and choose Save project. This downloads a .frameleaf.json file containing the original image, crop, size, adjustments, and text layers.

Use Open project to reopen that file and confirm the caption and 600 × 600 output return. The downloaded project is your separate backup. Browser-local recovery drafts can be cleared, unavailable, or limited by storage quota.

The project contains the full original image, including areas outside the visible crop. Share a project intentionally. If someone only needs the finished picture, use an image export rather than sending the editable JSON.

5. Export the format you actually need

Choose PNG in Export settings, then choose Export image. Open the downloaded file and verify that it is 600 × 600, the desired crop is visible, and the caption is readable.

• PNG is lossless and preserves transparency when the source and edits contain it.
• JPEG places a white background behind transparent pixels. Its adjustable quality trades file size against image fidelity.
• WebP also has an adjustable quality setting. Check that your intended destination supports the format.

Encoder support depends on the browser. Frameleaf reports an unsupported encoder rather than silently substituting another format. Check the actual file type and appearance after downloading; requesting a download alone does not establish that the file was saved where you expected.

Local editing, use terms, and the next revision

The Frameleaf editor processes images locally and performs no network requests. It does not upload your artwork to an editing server. The downloaded editor runs from its app folder without an account, API key, runtime framework, CDN, or build step. Keep its files together and use your organization’s approved local opening method.

Frameleaf also provides a reusable component. The two-editor host example demonstrates independent instances and a host export button. Read the editor and embedding guide for integration details. The editor does not include AI transformations, a hosted account, or a native CMS installer.

The free-product use terms permit personal and commercial use and the sharing, embedding, or sale of outputs you create, subject to your artwork rights. Redistribution or resale of the editor/package is restricted. Optional custom integration requires a separately agreed scope; no paid checkout, recurring charge, guaranteed support, or update schedule is included.

For another version, reopen the saved JSON, change the crop, dimensions, or caption, and export a new image. Keep the project and finished file clearly named so the editable source remains easy to find.

Get Frameleaf and its editable example · Make your first square image