Studio overview

Bitgrain Studio at /studio is a multi-page layout canvas for posters, covers, social posts, decks and print pieces. This page covers the studio home, the editor layout, and how your work is saved.

The image editor works on one photo at a time. Studio is where you combine photos, text, shapes, vector drawings and Bitgrain effects into a finished design, across as many pages as you need. Everything is rendered in your browser, and the same settings always give the same result.

Note: Studio needs a free Bitgrain account. If you open /studio while signed out, you are sent to sign in first and then brought straight back. See accounts and saving.

The studio home

The studio home at /studio is where every project starts. While you have fewer than three projects it shows a guided welcome with two large cards. Once you have more, the same actions shrink into a row of buttons above your project grid.

Action	What it does
Blank canvas	Opens a new, empty project in the editor.
From a template	Takes you to the template browser at /templates. See templates.
Open file (or "Or open a saved .btg project file")	Opens a `.btg` project file from your computer as a new project. See saving and opening .btg files.

Your projects

Below the start actions is the Projects grid, showing a thumbnail of each design. Click a card to open it.

Search projects appears once you have six or more projects. It filters by name as you type.
The sort menu offers Recently edited, Oldest first and Name (A-Z).
Hover a card to reveal Duplicate project and, where your plan allows it, Delete project. Deleting asks you to confirm and cannot be undone.

Pro: On the free plan you can duplicate a project twice on each device. After that, duplicating opens the upgrade dialog. Pro removes the limit. See plans and pricing.

If you are on the free plan, a small note under the grid reminds you that your projects are saved on this device, and that Pro keeps them in sync across devices.

On a phone

On screens narrower than a tablet, the studio home switches to a simplified list with buttons for a blank canvas and templates, and the editor switches to a touch layout. The desktop layout described below is the full experience, and the templates page recommends a desktop for editing.

The editor layout

Opening a project takes you to /studio/edit/ followed by the project's id. The editor has five areas.

The top bar, with menus, the project name and the export button.
The left panel, with your pages, layers and templates.
The canvas in the middle, with a floating toolbar at the bottom.
The right properties panel, which changes with whatever you have selected.
The status bar along the bottom of the canvas.

The top bar

From left to right:

Back to projects (the arrow). If you have unsaved changes, Studio asks Save changes? and offers Save & Leave or Just Leave.
The File, Edit, View and Help menus, plus a Plugins menu when plugins are available.
The project name and the current page size, for example 1,080 × 1,080. Click the name to rename the project, then press Enter to keep it or Esc to cancel.
Resize to other formats, which copies the current page into new sizes. See pages and frames.
Place artwork on a photo, which opens the mockup tool.
Report a bug or request a feature, which opens a support ticket form.
The Design and Animate switch. Animate mode adds a timeline under the canvas. See animation and keyframes.
The save status: saving changes while a save is running, then all changes saved.
Kit, which opens your design kits.
Undo, Redo, and a light or dark theme switch.
Present (fullscreen), which starts presentation mode.
Export, with a small arrow beside it for Export options. See exporting.

The menus

Menu	Items
File	New project, Import image…, Adjustment layer, Back to projects, Open .btg file…, Save as .btg…, Export png, Export options…
Edit	Undo, Redo
View	25%, 50%, 75%, 100%, 150%, 200%, Fit canvas, Switch to light or Switch to dark
Help	Release notes

New project does not wipe the current design. It takes you back to the studio home (asking Go to Studio Home? first if you have unsaved changes), where you can start or open another project.

The left panel

The left panel is 280 pixels wide and has two collapsible sections.

Layers lists every page in the project, and under each page, its layers from top to bottom. The Add page button sits at the end of the list. See layers and pages and frames.
Templates lets you search and browse templates without leaving the editor. Picking one replaces the current design, so Studio asks Switch Template? first if you have unsaved work.

Click Hide left panel at the top to collapse it into a narrow rail. The rail keeps quick buttons for Add text, Add image, Add rectangle and Add page, plus Show left panel to bring it back.

The canvas

The canvas shows every page of your project side by side, each with its name above it. The page you last clicked is the active page, and new layers go onto it.

Scroll to pan around. Hold Cmd (Mac) or Ctrl (Windows) and scroll to zoom towards the pointer. Zoom runs from 10% to 400%.
Hold Space and drag, drag with the middle mouse button, or pick the Hand tool to pan.
On a touch screen, pinch to zoom and drag with two fingers to pan.
Drag on an empty part of a page to draw a selection box around several layers.
Drop image files, or images dragged from another browser tab, anywhere on the workspace to add them. Pasting an image from the clipboard works too.

The canvas background has a dot pattern by default. You can change its color and pattern from the Page panel, described in pages and frames.

The toolbar at the bottom center of the canvas holds the drawing and adding tools.

Button	What it does
Select (V)	The default pointer for selecting, moving and resizing layers.
Hand (H)	Pans the canvas. The other tools fold away while it is active.
Pen tool (P)	Draws vector paths. The small arrow beside it switches between Pen, Pencil and Brush. See shapes and vectors.
Add Text	Click or drag on a page to place a text box. See text and typography.
Add Shape	Choose a rectangle, circle or triangle, then click or drag to place it.
Add page (F)	Opens the page menu with Draw page and every size preset. See pages and frames.
Add Image	Opens the Add image dialog. See images and uploads.
Add adjustment layer	Adds an adjustment layer to the page. See effects and adjustment layers.
Generate Pattern	Opens the pattern generator. See patterns and auto layout.
Place artwork on a photo	Opens the mockup tool.

The right properties panel

The right panel is titled after what you have selected, for example Text, Image, Shape, Vector, Brush, Adjustment, Group, Pattern or Page, and shows only the controls that apply. With several layers selected it reads 2 selected (or however many) and offers align and group actions.

With a single layer selected, the Layer options menu (three dots) in the panel header offers Move layer up, Move layer down, Flip horizontal, Flip vertical and Delete layer.

With nothing selected, the panel shows the Page panel for the workspace, your design kits, and a collapsible Quick keys list.

Click Hide right panel to collapse it into a rail. When one layer is selected, the rail keeps buttons for Duplicate, Move up, Move down, Flip horizontal, Flip vertical and Delete.

Most number fields in the panel are scrub fields. Drag across one to change the value, or click it to type an exact number. While typing, Arrow Up and Arrow Down nudge the value, Enter commits and Esc cancels.

The status bar

The bar along the bottom of the canvas shows:

An Animate button that toggles animate mode.
The active page size in pixels, and the color space, sRGB, 8-bit.
Zoom controls: Zoom out and Zoom in step by 10%, and Fit canvas returns to the default 70% view.
A keyboard icon whose tooltip reminds you that Cmd + scroll zooms and Space + drag pans. The full list is on keyboard shortcuts.

Saving and autosave

You never need to press save. About a second after you stop making changes, Studio saves the project automatically, and the top bar shows saving changes and then all changes saved.

Where the project is saved depends on your plan.

On the free plan, projects are stored in your browser on this device. Clearing your browser's site data removes them, and they will not appear on another computer.
On Pro, projects are saved to your account and sync across your devices.

A thumbnail is generated with each save, so the studio home always shows the latest version.

Tip: To keep a copy that does not depend on your browser, use File then Save as .btg… from time to time. A .btg file holds every page, layer and embedded custom font, and opens on any plan. See exporting.

Recovering an unsaved session

If you open the editor without a project (the plain /studio/edit address), Studio keeps an autosaved session in your browser. The next time you open it, a Recover session? prompt offers Restore Work or Dismiss.

Leaving the editor

Leaving through Back to projects, New project or switching templates checks for unsaved changes first. Because autosave runs so quickly, you will usually see no prompt at all.