Step 2: Identify the Main Branding Elements and Values of the Project

The following are branding elements that you might use in your custom project template. This list and the names are based on the built-in project templates in Flare Desktop. It’s possible that you do not need to use all these elements in your custom project template. Also, some of the built-in templates might not have all these elements.

Primary The main brand color. For example, the primary color might impact H1 headings for some templates.

Secondary Another brand color.

Lightest The lightest color (e.g., white, off-white) for ancillary purposes.

Light A light color for ancillary purposes.

Medium A medium color for ancillary purposes.

Dark A dark color for ancillary purposes.

Darkest The darkest color (e.g., black, dark gray) for ancillary purposes.

FontFamily Your main font (or font set).

LogoImage The main logo of your company or product. This lets you select an image for the background. Click and use the dialog to select an image file. The default logo is replaced with the selected logo image file. A raster image (e.g., PNG) is suitable for online output.

LogoImagePrint The main logo of your company or product, intended for print-based output. This lets you select an image for the background. Click and use the dialog to select an image file. Templates that include a PDF allow you to select a vector image (e.g., EPS, SVG), which is made up of geometric elements and provides more clarity for printed output. If you use a raster image it might appear pixelated in the output.

BigLogo The main logo of your company or product. This is used only in Flare's Brochure factory template to display a large version of the logo in one of panels. By default it is set to use a PNG file, but you can select a different file format, including a vector image.

HeroImage The main hero image shown on the home or cover page of the output. This lets you select an image for the background. Click and use the dialog to select an image file. The default banner image at the top of online output, or the large image on a PDF title page, is replaced with the selected hero image file.

Note The branding colors are designed to progress from lighter to darker shades. The colors are used for the preview and throughout the rest of the project, so use caution when changing a color from one extreme to another. For example, if you change a lighter element to a darker color, this could display dark content on top of other dark content. For the best results, adhere to the gradient progression.

This step is all about identifying the corresponding elements and values in your own project template.

Example We are setting up a project template named Balboa so that it can use the branding features in Flare Desktop. The most common colors in the stylesheets and skins in this project suggest that the following should be our default branding values:

Primary #7469B9

Secondary We don’t have a secondary brand color, so we don’t need to use it in our template.

Lightest #FFFFFF

Light #D3D3D3

Medium #7E8890

Dark #404040

Darkest #000000

Looking through our project, we found some colors that are close to one another. For example, #5A5A5A is quite close to #404040. In that case we could decide to use the Dark variable (#404040) for those elements as well, or we could just keep #5A5A5A associated directly with some elements. It’s a matter of preference.

The main font in the project is Arial, so we can use that for FontFamily.

We have a logo image named PlaceholderLogo-gray.png, so we can use that for LogoImage. However, we will rename and move it in the next step so that it is mapped to the necessary preview files. Because this project is intended to produce only online output, we'll leave out LogoImagePrint.

We have two hero images for our home page in the output. One image simply appears higher than the other on the page. We’ll use the first one, named HeroImage-1.jpg, for HeroImage. However, we will also rename and move this image file.