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. and use the dialog to select an image file.
LogoImagePrint The main logo of your company or product, intended for print-based output. This lets you select an image for the background. and use the dialog to select an image file.
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. and use the dialog to select an 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.