Toolbar

Table of content:

• Exit,
• Design view,
• Input Fields view,
• Zoom,
• Add image,
• Add shape,
• Add text,
• Add path,
• Grid,
• Color pipette,
• Add mask,
• Align objects,
• Edit mode,
• Fonts manager,
• Project settings,
• Template preview,
• Save,
• Publish.

This article explains each tool in the toolbar. Many tools also have individual articles with more in-depth explanations.

Exit

Exit the project editor and return to the project gallery.

Design view

The design view is the default view of the project editor. Here, you can design your template by adding and editing objects like images, shapes, text, and more. In the design view, you can access the layers panel and, when an object is selected, the properties panel.

Input Fields view

In the input fields view, you can access and manage the fields of your template's input form. Here, you can change the order of the fields, adjust field parameters, set field titles, and group or delete fields. The properties and layers panels are hidden in this view, many toolbar tools are locked, and objects on the canvas cannot be moved or selected.

Zoom

The zoom tool allows you to quickly zoom in or out of the canvas.

Add image

You have to select an image from your account's personal image library to add it to the canvas.

To upload a new image to your image cloud, click on the image tool and then on "Upload".

Once you have selected an image from your image cloud, simply click and drag it across the canvas.

Add shape

You can either add a rectangle or a circle object. To add the shape, simply select the tool and then click and drag the new shape across the canvas.

Add text

To add a new text object, simply select the text tool and then click and drag the new text across the canvas.

Add path

To add a new path object, click the path tool and then click on the canvas to add path anchors.

Grid

Click the grid toggle to display or hide the grid.

Color pipette

Select the color pipette tool and then click at any spot in the canvas to copy the color of that spot to your clipcode as a hexcode. You can paste the hexcode from your clipboard with CTRL+V (Windows) or COMMAND+V (MacOS).

Add mask

To create a mask you need to select at least two objects and then click the mask button. The first object you select will be the masking object and the second will be the masked object.

Align objects

You have two options when aligning objects:

• Align a single object relative to the canvas. To do this, select one object and then use one of the alignment options.
• Align multiple objects relative to each other. To do this, select multiple objects and then use one of the alignment options. The selected objects will be aligned relative to the object you selected last.

Edit mode

Edit mode can be toggled on or off. You can also use the Enter key as a shortcut. When Edit mode is enabled, you can adjust the width and height of an object via drag and drop.

Fonts manager

Select the fonts manager tool to open the fonts manager. Here you can upload and manage custom fonts.

Project settings

Click to open the project settings. Here you can manage settings like the canvas size, your template's name, category and more.

Template preview

Click on "Preview" to open a sandbox template editor with the current draft version of your project's template. Here, you can test each input field. Any inputs you make in the sandbox will not be saved. You can use the preview to explore your template's behavior with edge case inputs.

Save

Bluepic STUDIO does not yet support autosaving. Any changes to your project must be saved manually. Make sure to click "Save" frequently while working on your project to avoid losing progress if you accidentally close the web browser.

Publish

After saving your project you can click "Publish" to convert your current draft into a published version of your project. Publishing a project will not automatically share your template with any users. Publishing and sharing are two different steps. The current published version of your project is the one that users can access once you have already shared the template.