Brandfolder custom templates step 1: configure projects

The integration currently supports digital, and print assets. These configurations are available if your organization is utilizing advanced templating. The features outlined below are not available in basic templating.

This article covers step 1 of creating templates which is configuring projects in preparation for creating templates. The steps it takes to create a Brandfolder template include:

1. Configuring projects

2. Locking projects

3. Saving a project and generating a template

Brandfolder custom templates words to know

Aprojectis a working file for any template that is created from it.

Atemplateis end user-facing and is created from the project. End users can customize elements within the template including text, images, backgrounds, and shapes. These are all defined and are either locked or unlocked for editing by either the admin or collaborator.

Canvassizeis the size of the Project and the resulting template. Canvas sizes are often known based on the channel the asset will be used in. For example, the default Instagram post size is 1080px by 1080px.

Creating a new asset

To create a new asset:

1. Within the section that you want the Template to live in, click on theCreate New AssetButton.Do note:a template can only be created in a file type section.

2. A new modal will appear. Select the type of project you want the template to be.

• Digital design:used for social media ads and websites using pixel-based dimensions.
• Print design:for projects that are high quality with bleed and CMYK using inches-based dimensions.

Creating a new project

Once you select the project type a new modal will need to appear.

1. Name your project.

2. Choose one of the following:

• A specific canvas size.This will reveal multiple pre-defined options such as commonly used social posts (Instagram, Facebook, Pinterest, etc.)
• Upload an image。这将默认项目到画布上ize of the image uploaded.
• Create from an existing template。这将默认项目到画布上ize of the selected template.

3. SelectCreate Projectin the bottom right-hand corner of the modal.

Building out a new project

Admins and collaborators have the ability to add and adjust text, images, background, and shapes by clicking on the buttons on the left-hand side of the project navigation area. New pages can also be added and pages can also be cloned.

• Text:add text (headers, subheadings, lines of text, bullet points) and select from a variety of fonts, colors, sizes, and alignments. The font file types that can be uploaded to Brandfolder Custom Templates are: .OTF, .TTF, .WOFF.
  • Text can be hyperlinkedfor a PDF file exported from your account. This is a valuable option if you wish to navigate the reader to a webpage. To hyperlink text in your Project, follow these steps:
    1. Click on the text box you would like to hyperlink
    2. In the left menu locate the Hyperlink option
    3. Add the web address to the page you would like to hyperlink to
  • Do notethat you cannot hyperlink a text box partially. The full text box must be hyperlinked.

• Images:upload from your computer, Brandfolder, Unsplash, Pexels, and Iconfinder. There are certain file types that you can upload to Brandfolder Custom Templates, these file types are: .JPG, .PNG, .SVG, .TIFF, .HEIC. There is also a default size limit of 25 MB.
  The first time you upload from Brandfolder you will need to inputyour API key。

• Background:add background images or colors as well as adjust the size.

• Shapes:add shapes to the template using either Iconfinder or basic preloaded shapes. Images can also be inserted into the shapes.

• Adding and cloning pages:click on theAdd New Pagebutton below your project preview to make the project multi-page. Clone a page (make a copy) by clicking on theClone Pagebutton. Or you can also expand the menu on the right-hand side and select Pages > Add.

Zones

Zones are square or rectangular areas that you can designate on the template for your user to place a design element (image, video, or SVG) in. Zones allow you to control whether the design element will be masked or fit fully within the area. This feature is great for logos, headshots, headers, and more.

How to add a zone

There are two ways to create zones in the editor.

The first option is to:

1. Click theImagesbutton on the left menu
2. Click theZoneoption creating an empty zone (a placeholder icon will appear)

The second way you can do this is to:

1. Add an image, video, or square/rectangle shape to the editor
2. Select theConvert to Zoneoption in the left menu

Configuring a zone

Once the zone is added there are a few properties you need to set.

1. Choose the element position to be eitherFitorMask。
   1. Fit: The image or SVG will be placed in the zone but can be resized or repositioned anywhere within the designated space. Elements will not be cropped.
   2. Mask: The image will take up the entire space leaving no margin. Elements that don’t fit the zone exactly will be cropped.
2. Select theDefaultOrientation(sets where an element placed will be within the Zone). *If you chose Mask on Step 1, you will skip steps 3 & 4.
3. Select theDefaultMargin。This will set how much space the element will have between the edges of the zone and the borders of the element.
4. Select theRotation。This will set the angle at which the element will be placed.
5. Select the ability toconstrain resize proportions。
6. Selectarrangement and alignment。

你会注意到有一个配置模式allows you to preview the default placement and position for example elements of different aspect ratios given the options listed above. Turn on configuration mode to generate a preview within the zone for you to visualize.

Next steps

After you have created a new asset and have configured your project you will want to setuplocking configurations。