Start template creation

A key visual is the key design that is adapted across different mediums, such as print materials, digital platforms, social media, etc. Adaptations may involve resizing, reformatting, or adjusting elements to suit the specific requirements of each platform while maintaining the core visual identity.

In Rocketium, 'Templates' is the section where you setup your key visuals. You can either Import a PSD or set it up manually here. Below are the steps for a manual setup:

  1. We will start the process by creating a new template. First, open your workspace and click on Templates.  After that, click on New Template at the top right. 

    I1-2
  2. Select Image or video from the drop-down menu.

    image-png-Feb-26-2024-09-25-17-8456-AM
         screencapture-rocketium-advertising-campaign-template-65645708f10da8141f2b5909-Website-Banner-2023-12-04-23_03_11

Content Panel

You can add content elements such as text, shapes, images, and presets to your canvas.

There are two ways to work with the content panel:

  1. Grid view: elements of the creative are presented in a grid format. This is the default view

    FireShot Capture 043 - Rocketium - rocketium.com-Jan-01-2024-02-15-02-8717-PM

  2. Layers view:  elements of the creative are presented as layers. To access the layers view, click on the 'layers-view' icon at the top right of the content panel. 



    This is how the elements look in layers view

    layers view mode

    You can switch between views by clicking the grid/layers icon.

    Add elements in the Grid/layers view;

    To add elements to your creative, simply click on the icons at the top labelled 'Text', 'Media', 'Shape', and 'Preset'. These icons allow you to incorporate different elements into your design easily.


Below is a brief overview of the design and styles in templates. For more details refer to:

#1 Styling Background

You can style the background using the styling panel (on the right-hand side). 

setting up the background

From here, you can set;

  1. Background color using either hex code or choosing a shade from the color palette; the hex code for our background is #FDE1AE.
    New color palette
    Note: The gradient feature is available at the bottom of the color palette.
  2. You can also choose the background texture; here, the texture is selected as 'none.'
    background texture

The below picture shows how our background looks presently.

Background color result

#2 Adding and styling text

 

  1. To add a new text to your creative, click on the '+' icon on the content panel, and select text. A text box ('Enter your text') should appear in your preview window.
    screencapture-rocketium-advertising-campaign-template-65645708f10da8141f2b5909-Website-Banner-2023-12-04-23_03_11
  2. Add the desired caption (text) in the text box of the content panel and set the text element to an appropriate position.screencapture-rocketium-advertising-campaign-template-65645708f10da8141f2b5909-Website-Banner-2023-12-04-23_11_41
  3. You can also style the text element for different parameters (change font, size, color, alignment, shape, to name a few) from the styling panel.screencapture-rocketium-advertising-campaign-template-65645708f10da8141f2b5909-Website-Banner-2023-12-04-23_11_41-1


#3 Adding and styling images

This section will discuss how to add images and style them using Rocketium's powerful design tools.

  1. Click on the '+' icon on the content panel (on the left-hand side) and select image; a window should pop up with all possible ways to upload/add an image in your creative.
  2. We have selected a Galaxy product, Night cream, from our media library.Upload image windowHand cream product
  3. After uploading an image, select that image in the preview window or in the content panel to enable the styling panel (highlighted-yellow).screencapture-rocketium-advertising-campaign-template-65645708f10da8141f2b5909-Website-Banner-2023-12-04-23_20_33
    Now choose from the array of styling options to get your desired results.

Additionally, you can also copy .svg files from design tools such as Adobe Illustrator or Figma, and paste them directly on the canvas. 

#4 Adding and styling shapes

Shapes are 2D elements (such as circles, squares, etc.). They are usually used to give dramatic background effects to other elements. 

They are present in the content panel along with other elements.

  1. After clicking the '+' icon, then select Shape. 
  2. Select a shape of your choice from the modal. We've selected a circle 
  3. Adjust the styling properties of the shape to achieve the desired result 
  4. The final creative should look like the one shown at the beginning of this article


    screencapture-rocketium-advertising-campaign-template-65645708f10da8141f2b5909-Website-Banner-2023-12-04-23_20_33-1

Note: By default, the color of the shapes is blue with hex code: #32A3DD and the body is positioned at the front. You can edit these two (along with the other changes available) in the style panel.