A campaign’s visual style plays a key role in its success, whatever type of campaign it may be (instant win, sweepstake, quiz, photo or video contest, personality test, memory game, etc.) The first element to prepare is your background image, which will be the real linchpin of your campaign and be seen on all screens.
Create a background image
To define the size of your background image, make sure that the dimensions of your iframe are definitive, as they determine your image size.
- If you publish your campaign on your website, take into account the available height/width on your site when defining the iframe size. Specify this in the back office, in the ‘Look & Feel’ step.
- If you publish your campaign on your Facebook page, height varies, but the width is always 810 px.
Once the dimensions are set, open Photoshop and create a new document of the desired size. Before starting to create the visual itself, consider the different elements that will be placed on top of your visual (or conversely, certain elements such as the game zone which will depend on your visual). Allow the game zone, the background environment, and the upper area for social media buttons and menu: rules, prizes, contact info, etc. Compose your background image by setting the boundaries for the game zone in terms of height, width and margin (1), your background environment (2) and an upper area for the social media buttons (Facebook, Google+, Twitter) and for Rules, Prizes, Contact Info buttons, etc. (3). It’s now time to let your creativity shine through, as you prepare your image in Photoshop.
Add a texture
- Once your template is ready, it’s time to add a little volume and life to your background image. One solution is to add a texture.
- There are online libraries of textures that can be used directly in Photoshop. For example, http://subtlepatterns.com
- After making your choice, open the texture image in Photoshop and click on Edit > Define Pattern. It will then be added to your texture library.
- Now all you have to do is apply it to your background layer. To do this, double-click on the image in the layer, and in the box, select Pattern Overlay.
- You will be offered a variety of options to integrate your image into your background colour. You can see how it will look by ticking the “Preview” box.
add a drop shadow
- To enhance the highlighting of your game zone, you can add a shadow around it.
- This is done the same way as for background textures: double-click on the layer image and, in the Layer Style box, select Drop Shadow.
- The shadow must remain in Blend Mode > Multiply, and you can choose a colour to intensify it. The other options enable you to move the shadow farther away, make it clearer, change its direction, etc.
Create a banner
Why create a banner when we already have a background image? Because the banner is used for browsing on mobile devices. Technically, whenever the width is less than a certain value, the banner takes over from the background image in order to improve readability on mobile devices.
Your banner must of course be the same width as the iframe for your game and therefore the same width as your background image. Banner height can vary according to the amount of content you want to put in it, but it’s important to use the same elements as your background image in order to avoid any visual discontinuity between your game on screen and on mobile devices. You now have all the basic elements to ensure a high-quality look & feel for your campaign. It’s important to spend some time on it, because visual appearance is vital!