--- title: "Create image projects" canonical_url: https://docs.zvid.io/docs/editor/image-projects/ source: docs/editor/image-projects.md content_revision: 5e30c731f37d8167 --- # Create image projects Build a still composition from images, text, shapes, and designs, then render it as PNG, JPG, or WebP. Use image projects for product cards, social graphics, covers, and reusable image templates. ## Before you begin Save or export the composition currently open before choosing **New**. A new image project starts an empty composition rather than converting the current video. You can arrange a design before signing in. Account uploads, cloud saving, and hosted rendering require sign-in. Each hosted image render costs **1 credit**, including another render after a revision. Preparing the composition and opening the render dialog do not submit it. ## How to create an image project 1. Click **New** in the upper toolbar, then choose **Image project**. 2. Enter a descriptive **Project name**, such as **Northstar Coffee Card**. 3. Choose the intended resolution from the preset selector at the left of the second toolbar row. A new image project starts at **instagram-post · 1080×1080**, with a white background and **png** output. 4. Click the background-color swatch immediately before the output-format selector, or keep white while arranging the composition. 5. Add an image from **Images**, then add a heading from **Text**. Use **Shape** or **Design** if you need additional graphics. 6. Click each visual on the canvas to open its **Design** properties and [Layout](https://docs.zvid.io/docs/editor/canvas/#how-to-position-and-resize-an-element). > **On a phone or narrow window** Tap the vertical three-dot button (**⋮**) at the left of the second toolbar row, then **New → Image project**. The gear beside that button opens **Project settings** for the resolution and background. Content tools are in the horizontally scrolling strip at the bottom. To undo a composition edit, open the same three-dot menu and choose **Undo**. **Result:** The toolbar shows **IMAGE**, and **Layers** replaces the video's structural timeline. There are no video duration or frame-rate controls. Click the curved left-arrow button (**Undo**) immediately after **Learn** in the upper toolbar to reverse a composition edit, and [Save](https://docs.zvid.io/docs/editor/projects/) when the design is ready. ## How to arrange and replace layers 1. Open **Layers** in the tool rail. 2. Click a row to select the element. The top of the list is the front of the image. 3. Drag the dotted grip at the far left of a layer row to reorder it. Selecting a row reveals action buttons on its right: the up chevron is **Bring forward**, and the down chevron is **Send backward**. 4. For an image layer, click the landscape-picture button after the two chevrons. Its tooltip is **Replace image (keeps size, position and effects)**. Select a new source from **Images**. 5. The overlapping-squares button immediately before the trash icon is **Duplicate**; the trash-can button at the far right is **Delete layer**. Use **Undo** if a change was accidental. > **On a phone or narrow window** Open **Layers** from the horizontally scrolling bottom tool strip. The bottom sheet shows the same row grip and action icons after you select a layer. Tap **Done** at its upper right to return to the canvas. To edit a visible element, tap it on the canvas; its settings open in the bottom **Properties** sheet. [![Mobile Layers sheet with the selected coffee image's reorder, replace, duplicate, and delete icons at the right of its row.](https://cdn.zvid.io/library/docs/editor-guide/mobile-image-layers.png)](https://cdn.zvid.io/library/docs/editor-guide/mobile-image-layers.png) [![Desktop Northstar Coffee image project with the selected photo's layer action icons visible to the right of its row and the heading above it in Layers.](https://cdn.zvid.io/library/docs/editor-guide/desktop-image-layer-actions.png)](https://cdn.zvid.io/library/docs/editor-guide/desktop-image-layer-actions.png) Click a visual on the canvas to open its editing controls. For a layer hidden behind another element, double-click its row in **Layers** to open its properties. The top layer appears in front. This two-layer example keeps the white heading visible over a darkened photo. Replacing an image preserves its layout and effects, including the crop. Inspect the new source when its dimensions differ. Deleting a layer removes that use from the composition; it does not delete a file from **Your uploads**. ## What changes in image mode | Area | Image-project behavior | | --- | --- | | Media tools | Add still images; **Videos**, **Audio**, and **GIFs** are hidden | | Structure | Use **Layers**; there is no timeline or scene sequence | | Text and graphics | Text, SVG shapes, and Design Studio compositions remain editable | | Element timing | Elements are part of the still composition; the **Timing** tab is hidden | | Effects | Supported appearance controls remain; video enter/exit animation controls are hidden | | Variables | Use defaults and template bindings for reusable image compositions | | Export | **Export → Download JSON** saves the editable project definition | | Render | **Render image** creates the finished image file | Image mode is not a video-frame extraction tool. For advanced JSON conversion, see [Converting a video composition](https://docs.zvid.io/docs/rendering-images/#converting-a-video-composition); merely changing the filename extension does not create a valid image project. ## How to capture an animated design as a still Some designs and canvas presets contain animation code even though the final output is a still image. 1. Add the animated design or preset to the image project. 2. Open **Layers**, then click uncovered background inside the output frame to open the **PROJECT** inspector. Clicking the checkerboard outside the frame does not open it; clicking a visual selects that visual. 3. Find **Snapshot time → Capture at (seconds)**. This section appears only when at least one visual has custom animation CSS, JavaScript, or an animation duration. 4. Keep the field unset for the settled animation state, or enter a nonnegative time, such as `0.5`, to capture a chosen moment of supported animated content. 5. Render and inspect the downloaded image before reusing the setting in a template. > **On a phone or narrow window** Open **Layers** from the bottom tool strip, then tap uncovered background inside the output frame above the sheet. The bottom **Properties** sheet changes to **PROJECT**. **Snapshot time** is below **Overview**; scroll the sheet if needed, then tap **Done** at its upper right when finished. [![Mobile PROJECT properties showing Snapshot time below Overview and Capture at with the settled default placeholder.](https://cdn.zvid.io/library/docs/editor-guide/mobile-image-snapshot.png)](https://cdn.zvid.io/library/docs/editor-guide/mobile-image-snapshot.png) [![Desktop image PROJECT inspector with Snapshot time expanded and Capture at shown beside a title-only composition with uncovered frame background.](https://cdn.zvid.io/library/docs/editor-guide/desktop-image-snapshot.png)](https://cdn.zvid.io/library/docs/editor-guide/desktop-image-snapshot.png) The background-click route needs an uncovered part of the output frame. Set snapshot time while that background is accessible. A full-frame visual blocks the route, and Escape returns to the library instead of opening **PROJECT**. Use **Undo** to reverse an unwanted snapshot-time change. The stage plays its animation preview live; setting **Capture at** does not freeze the stage at that time. The setting applies to the rendered image. Static images and text do not gain motion from this field, and it does not enable video or GIF sources in image mode. ## How to render PNG, JPG, or WebP 1. Click **Render**. Sign in if prompted and address any validation errors shown. 2. In **Render image**, choose **Format**. 3. For JPG or WebP, choose **Quality**. The control starts at `90` and supports `1`–`100`; PNG is lossless and disables it. 4. For PNG or WebP, enable **Transparent background** if you want the canvas background to be transparent. JPG does not support transparency. 5. Check the output filename, dimensions, and available credit balance. **Start render spends 1 credit for one image.** [![Render image dialog with PNG selected, Quality disabled, Transparent background unchecked, the output dimensions and available balance, and the one-credit-per-image notice below Start render.](https://cdn.zvid.io/library/docs/editor-guide/image-render-options.png)](https://cdn.zvid.io/library/docs/editor-guide/image-render-options.png) 6. Click **Start render** once and wait through the queue and rendering states. 7. Inspect the completed image, then click **Download**. Open the downloaded file and check its dimensions, framing, typography, and background. 8. Save the editable project separately. Download a copy of the finished image before the output expiry date shown by Zvid. [![Completed square Northstar Coffee image render with a Download button and an output-expiry notice.](https://cdn.zvid.io/library/docs/editor-guide/image-render-complete.png)](https://cdn.zvid.io/library/docs/editor-guide/image-render-complete.png) | Format | Quality control | Transparent background | | --- | --- | --- | | **png** | Disabled; lossless | Available | | **jpg** | `1`–`100` | Unavailable | | **webp** | `1`–`100` | Available | Use **Format** inside the render dialog when switching an image that already has quality or transparency configured. It clears options the new format cannot use. A transparent canvas background does not remove opaque pixels from an uploaded photo or from a full-frame design layer. ## Example: a square Northstar Coffee card 1. Create **Northstar Coffee image** as an **Image project** and keep **instagram-post · 1080×1080**. Set **Background color** to `#0b0d12`. 2. Add the [supplied Northstar Coffee photo](https://docs.zvid.io/docs/editor/media/#example-prepare-northstar-coffee-media) from **Images → Add image by URL**. Uploading a replacement photograph is optional. 3. Choose **cover**, use **center-center** positioning, and set **Opacity** to `0.45` to darken the full-frame photo against the background. 4. Add a **Northstar Coffee** heading at **center-center**, with white text, a `64` px font size, and font weight `800`. 5. Open **Layers** and keep the heading above the photo. Inspect the square frame and confirm the text remains readable. 6. Save the editable project and download its JSON for a portable copy. Render a PNG with **Transparent background** off for a complete square card. 7. Open the downloaded PNG and check the text at its intended display size. After this first version, an optional second heading such as **Freshly roasted** can extend the design. ## Troubleshooting | Symptom | Likely cause | Recovery | | --- | --- | --- | | The timeline, audio, or scene tools are missing | The current project is an image | Use **Layers** for the still; start a separate video project if you need motion and audio | | Text is hidden behind the photo | The photo is in front of the text | Move the text toward the top of **Layers** | | The PNG has no Quality setting | PNG uses lossless encoding | Keep PNG, or select JPG/WebP when adjustable compression is needed | | Transparency is unavailable | JPG is selected | Choose PNG or WebP in **Render → Format** | | The output still has an opaque background | A visual layer covers the transparent canvas | Inspect full-frame images, shapes, and designs; transparency does not erase their pixels | | Snapshot time has no effect on the stage | The control applies to rendering | Inspect the completed image; use a static design if no animated state is needed | | The image render fails | A source, field, or account requirement failed validation | Read the render error before retrying and follow [render troubleshooting](https://docs.zvid.io/docs/editor/export/#troubleshooting) | ## Related documentation - [Project settings](https://docs.zvid.io/docs/editor/project-settings/) - [Canvas positioning and layers](https://docs.zvid.io/docs/editor/canvas/) - [Images and crop controls](https://docs.zvid.io/docs/editor/images/) - [Design Studio](https://docs.zvid.io/docs/editor/text-and-design/) - [Variables and templates](https://docs.zvid.io/docs/editor/templates/) - [Rendering images through the API](https://docs.zvid.io/docs/rendering-images/)