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:
- 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.
- Select Image or video from the drop-down menu.
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:
-
Content panel : In this panel, elements of the creative are presented in a grid format. This is the default view.
- Layers panel: In this panel, elements of the creative are presented as layers. To access the layers view, click on the 'layers panel' icon at the top right of the content panel.
This is how the elements look in layers view
You can switch between views by clicking the content panel/layer panel 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).
From here, you can set;
- Background color, using either hex code or choosing a shade from the color palette & background opacity can also be changed using the slider below the color palette.
Note: The gradient feature is available at the bottom of the color palette in old version &
gradients are available above the color palette in new version
#2 Adding and styling text
- To add a new text to your creative,
- Old version : Click on the '+' icon on the content panel, and select text. A text box ('Enter your text') should appear in your preview window
- New version : Click on the 'Add text' icon on the content panel
- Old version : Click on the '+' icon on the content panel, and select text. A text box ('Enter your text') should appear in your preview window
- Add the desired caption (text) in the text box of the content panel and set the text element to an appropriate position.
- Old version
- New version
- Old version
- You can also style the text element for different parameters ( alignment, size & position, typography, layer, text background, font color & effects) from the styling panel.
- Old version
- New version
- Old version
#3 Adding and styling images
This section will discuss how to add images and style them using Rocketium's powerful design tools.
To add media :- Old version : 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.
- New version : Click on “Add media” in the content panel.
The pop up that opens can be used to choose a media from the pre-existing corpus of media or a new media can also be uploaded from your device.
Note : Filter through the types of supported media and select the relevant type by clicking on the search field.
Sample from old version : We have selected a Galaxy product, Night cream, from media library.
- Select the media to use from the displayed list and click choose.The media should display on the editor now. The selected media can be styled by using the styling panel after selecting the relevant media.
- Old version
- New version
Now choose from the array of styling options to get your desired results.
- Old version
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.
- To add shapes:
- Old version : After clicking the '+' icon, then select Shape.
- New version : Click on 'Add media' icon on the content panel, as shown below
Select a shape of your choice from the modal or upload a shape of choice from your device.
- Adjust the styling properties of the shape to achieve the desired result
- Old version
- New version
- Old version
Note: By default, the color of the shapes is #32A3DD(in old version) & #C4C4C4(in new version) and the body is positioned at the front. You can edit these two (along with the other changes available) in the style panel.
3. Save and export the creative using buttons above the control panel
-
- New version :
- New version :