Layout Structure in OpenCart: Creating a promotional banner

In this recipe, we will see how to create a banner quite easily with GIMP for our store. We are going to see a step-by-step guide for it.

1. Getting started

We are going to place a banner image in the welcome message area. First, we will create the banner and then in the next recipe, we will place it using the admin panel.

2. How to do it

First of all, we need to measure the size of the welcome message area in order to have the image For this, click the Firebug icon:

It will open up Firebug; now click on the ﬁrebug inspector icon:

And click on the welcome message area on the browser You’ll see the following image:

If we click on the layout option on the right side of the Firebug option, we can ﬁnd the dimension of the selected area:

Actually, we have got only the width of our banner image from this We will adjust the height accordingly.
Now open Press Ctrl+N to create a new image. Set the dimension as 558×150. We use the width and make a height according to our need.

We will give a background colour to our banner Select the color tool from the toolbox.

You can choose your favourite colour from this colour We choose #7c1313 for this recipe.

Now, click the Bucket Tool from the toolbox:

Now, pour your selected colour on the banner image I have chosen the following color (maroon):

We are going to write some promotional text on our banner Select the Text Tool from the toolbox:

We will select our font style from the bottom text dialog box of You can choose font styles by clicking on the Font button at the dialog box:

There are a wide range of font So, you can choose your favourite one from there. We will choose Lucida Bright Semi-Bold Italic for now.

And set the size to 30px:

Choose the font colour #ffffff.

We write our text as left So, select justify option as left aligned:

We leave indentation to 0px:

The line height of our text will be 1px:

And letter spacing will be 5px:

Now, select the rectangular area in your image that you want to write A new window might have opened for writing the texts. We can write our texts there.

We can set our text as left aligned or right After writing, click the close button.
You can see a rectangular area around our By clicking the corners, you can adjust the dimension of the rectangular text area. At the moment, our banner becomes like the following:

Now, we write a subtext below the above text in our We will use a different font style to write this. But you can use the same style if you wish.
You can see currently our text selection area covers most of the right side of the To write a subtext, we need to shorten the height of the text area.
Click and drag the corner boxes of the bottom area This will reduce the height. See the following image:

Here, we reduce the

Now, for subtext, we will change our font style to Lucida Sans:

We need to change the font size We will change it to 20px:

We right aligned our So, change the justify option to right aligned:

Now, select an area below the current text on the banner to write Our banner image will become like the following:

We will use different brushes to create some First, go to Windows | Docable dialogs | Layers:

We will see that the following layers window opens:

We have three layers for our We will use brushes on the background layer. So, we hide the other layers by clicking the eye icon. Now, we have only the background layer visible.
Click on the brush icon on the toolbox:

It will open up the paintbrush properties
Let’s discuss the properties of the paintbrush tool:
- Mode: We select the mode for our paintbrush from the
- Opacity: The opacity of the paint brush can be controlled from this sliding
- Brush: There are a wide range of brushes Also, you can create your own or you can download and install a new brush.
- Scale: We can scale our brush with this sliding
- Brush Dynamics: There are many more options under this We will see them one by one here.

- Pressure, velocity, randomness: we can make a combination of these values with opacity, hardness, size and
- Fade out: by selecting the check box, there will be a sliding option to select the The brush will be faded out after the selected length.
- Apply jitter: we can control jitter amount with this
- Use color from gradient: we can choose the color of our brush from some We set the length and repeat type.

We will select our brush from the brush dialog We select the brush Circle Fuzzy (17) brush:

Under the brush dynamics, you can see many different You can use them according to your need. We choose the following gradient for our brush:

With the selected gradient, we can draw something on the background using the We have made the following banner image up to this stage:

Now, if we show the other two text layers, then we see the banner as:

Our banner has left-side We will place an image on the left side. We can search the Internet for an appropriate image.
First, we will add a new layer to our Click on the new layer button at the bottom of the layer dialog: