How to Update Text / Copy
for GAP HTML5 Banners

BEFORE WE BEGIN

In this tutorial, we are going to teach you how to update the text/copy in the HTML5 banners provided in your GAP Packaged Files. In the first section we’ll explain how to use Photoshop to update the text in the designs and in the second section we will explain how to export the new copy from Photoshop to update the HTML5 banner builds.

If you are a graphic designer, you could skip to the second section after the introduction, but if you are new or unfamiliar with Photoshop we recommend you follow along all the way through.

Let’s go through some reasons you might want to update the copy. The most obvious reason is that your HTML5 banners & Static templates were provided in English, and you need to translate them to a different language. You might also need to update price points, legal copy, or product descriptions. So if you need to do any of those things, this is the tutorial for you!

IMPORTANT NOTICES

Before you explore the content below, ensure that you’ve already watched the Intro to the GAP Programme and the short explanation of what’s included in your GAP files video.

Also, it’s important to note that updating copy is different than adding copy. If you have received an HTML5 banner without a price point, product shot, or legal line and you would like those components added to your banners, that is not covered in this tutorial. You will need to contact your partnership rep at The Bannermen, or contact us via our website, and we can help you out!

Finally, if you are updating any assets in your HTML5 banners – you will also need to update the backup images and properly package the HTML5 files before you supply the banners to your media agency for trafficking.

BEFORE WE BEGIN

If you are a graphic designer, you could skip to the second section after the introduction, but if you are new or unfamiliar with Photoshop we recommend you follow along all the way through.

IMPORTANT NOTICES

Before you explore the content below, ensure that you’ve already watched the Intro to the GAP Programme and the short explanation of what’s included in your GAP files video.

What You Will Need:

Packaged GAP Files
Access to Photoshop—if you don’t have access to Photoshop, please contact your TBM rep, and they can provide access to Figma files in lieu.
Wherever possible, we recommend that design updates, including copy/text changes, be done by a graphic designer.

STEP 1: Upload Fonts

Before you start editing the files, you need to ensure you have the proper fonts.

In some cases, you might find the necessary fonts in the packaged files, and in
other cases, you might need to request fonts from your brand representatives.

STEP 1: Upload Fonts

Before you start editing the files, you need to ensure you have the proper fonts.

In some cases, you might find the necessary fonts in the packaged files, and in other cases, you might need to request fonts from your brand representatives.

STEP 2 & 3: Find & Open HTML5 Designs Using Adobe Photoshop

Find the HTML5 design

You might want to duplicate the Photoshop file and make your changes in the duplicated file only. In doing this, you will always have the original to refer to if you make a mistake.

Double-click on the PSD file, and it should open in Photoshop
Be sure you have the appropriate fonts installed
If you have the appropriate fonts installed, you should be able to open the PSD normally
If not, you will receive a warning that indicates what fonts you are missing
If you have been provided with the fonts in your packaged files, you will need to upload those fonts to the font book on your machine
We recommend that you get assistance from a graphic designer, if possible

adobe photoshop beauty product ad mock ups

STEP 2 & 3: Find & Open HTML5 Designs Using Adobe Photoshop:

Find the HTML5 design
You might want to duplicate the photoshop file and make your changes in the duplicated file only.
That way, if you make any mistakes, you always have the original to refer to.

Double-click on the PSD file, and it should open in photoshop
Be sure you have the appropriate fonts installed
If you have the appropriate fonts installed, you should be able to open the PSD normally.
If not, you will receive a warning that describes what fonts you are missing.
If you have been provided with the fonts in your packaged files, you will need to upload those fonts to the font whatever on your machine.

TBM is not responsible for the licensing of fonts—if you are unsure whether you have the appropriate online licensing to use a font, you should check with your branding team.

STEP 4: Working with Retina Designs

Inside you will see “artboards” with each banner size and inside those artboards, you will find all the assets organized by frame.

Using the eye icon, you can go through the frames one at a time to visualize the animations in the final HTML5 banner.

A keen observer might also notice that the pixel size of the designs is double the pixel size of the HTML5 banners. So, for example, the designs labeled 300×600 might actually be 600×1200 pixels. This is called “retina” designs and it is an important feature in creating high-resolution designs in HTML5.

STEP 4: Working with Retina Designs

Inside you will see “artboards” with each banner size, and inside those artboards, you will find all the assets organized by frame.

Using the eye icon, you can go through the frames one at a time to visualize the animations in the final HTML5 banner.

A keen observer might also notice that the pixel size of the designs is double the pixel size of the HTML5 banners. So, for example, the designs labeled 300×600 might actually be 600×1200 pixels. This is called “retina” designs, and it is an important feature in creating high-resolution designs in HTML5.

STEP 5,6,7: Select the Copy Using Text Tool

In Photoshop, select the text tool from the side column bar.

Using the text tool, click on the text you would like to update.

Like any good word processing tool, the text tool in Photoshop allows you to copy and delete or you could select and copy and paste from a Word document.

STEP 5, 6, 7: SELECT COPY USING TEXT TOOL

In Photoshop, select the text tool from the side column bar.

Using the text tool, click on the text you would like to update.

Like any good word processing tool, the text tool in Photoshop allows you to copy and delete or you could select and copy and paste from a Word document.

STEP 8: Update Text & Adjust to Fit

GAP assets are designed in such a way that you should be able to replace the copy without needing to adjust the font size or layout in any way. However, if you’ve replaced the copy and it does not fit or look right in the required space, you can adjust the font size or the positioning of the copy in Photoshop.

We recommend that font changes or layout changes be reviewed by a trained graphic designer. If you would like any advice on how to layout the new text, please contact your partnership rep or get in touch with us.

At this point you should save your work. You can then go through steps 5 to 8 for all the frames in this size as well as all the frames in the other the banner sizes to get all the copy updated.

STEP 8: Update Text and Adjust to Fit

At this point you should save your work. You can then go through steps 5 to 8 for all the frames in this size as well as all the frames in the other the banner sizes to get all the copy updated.

STEP 1 & 2: Review HTML5 Animations

Now that you’ve updated all the copy, let’s talk through exporting the assets themselves to the HTML5 banners!

Find the HTML5 build you need to update and just like the PSD files, it might be a good idea to duplicate the HTML5 banner files and make the changes to the duplicated files. This way, if you make any mistakes, you always have the original to refer to.

Also, remember to double click on the index HTML5 file to review the animations and confirm everything is displaying correctly.

STEP 1 & 2: Review HTML5 Animations

Now that you’ve updated all the copy, let’s talk through exporting the assets themselves to the HTML5 banners!

Also, remember to double click on the index HTML5 file to review the animations and confirm everything is displaying correctly.

STEP 3 & 4: Review HTML5 Image Assets

Before you start replacing any images, it’s important to review the images in the image folder so you understand what each asset is called.

Something you will notice about the copy/image asses in this folder is that even though the copy takes up a small amount of space on the screen, the actual PNGin the image folder is the exact same size of the banner. This is because we save out each line of copy as a PNG with a transparent background at the full size of the banner and we do this for a couple of different reasons.

STEP 3 & 4: Review HTML5 Image Assets

Before you start replacing any images, it’s important to review the images in the image folder so you understand what each asset is called.

1

The first reason is fonts can be very heavy from a file size perspective. That means that if we were to load in some brand fonts, this would take the banner way over file size. Saving the copy as PNG images means that we can use these fonts without having to load the fonts themselves.

2

Another reason is fonts can naturally display really differently on various browsers. When we save them as an image, we guarantee that the copy looks exactly the same no matter what browser you’re viewing it in.

3

Finally and probably most importantly, saving out the asset at the full size of the banner with a transparent background guarantees that the text will be placed pixel-perfect to match your designs without needing to make any adjustments to the code. This way of doing things means that you do not need to hire a developer or additional design resources to update your HTML5 banners, and this is one of the central aspects of TBM’s Global Asset Partnership Programme.

IMPORTANT TO NOTE: Image files in the HTML5 banners have the exact same name regardless of what size banner they are for. When working with exporting new images, pay close attention to the pixel size in the folder name throughout this process.

STEP 5 & 6: Isolate Text Layer & Replace Copy

Locate the layer with the corresponding text that you would like to replace. We’re starting with copy 01 in this example.

Then hide all the other layers from the banner by toggling the little eye icon next to the folders so that only the copy/asset that you are going to export is visible on the screen. Be sure that only the necessary layer is visible; otherwise you might accidentally save a copy asset with, for example, an extra logo.

STEP 5 & 6: Isolate Text Layer & Replace Copy

Locate the layer with the corresponding text you would like to replace. We’re starting with copy 01 in this example.

Then hide all the other layers from the banner by toggling the little eye icon next to the folders so that only the copy/asset you are going to export is visible on the screen. Again, ensure only the necessary layer is visible; otherwise, you might accidentally save a copy asset with, for example, an extra logo.

STEP 7, 8: Export PNG/Save for Web

After you have hidden all the extra layers as well as all the extra frames, you should be left with the single frame displaying the single copy asset on your screen.

From here, you have two options on how you can export these assets to the banner files:

Go to File>Export>Save For Web

This opens up Photoshop’s asset exporter and you can see that we’ve been left with the text empty on a full-sized blank PNG background.

Right click the copy layer from your menu and select QUICK EXPORT AS PNG.

You can export this way without hiding the other frames and some people find that preferable.

For both options above you should be exporting the text at RETINA size on a blank PNG background.

STEP 7, 8: Export PNG/Save for Web

After you have hidden all the extra layers as well as all the extra frames, you should be left with the single frame displaying the single copy asset on your screen.

From here, you have two options on how you can export these assets to the banner files:

Go to File> Export> Save For Web
This opens up Photoshop’s asset exporter and you can see that we’ve been left with the text empty on a full-sized blank PNG background.
Right click the copy layer from your menu and select QUICK EXPORT AS PNG.
You can export this way without hiding the other frames and some people find that preferable.

For both options above you should be exporting the text at RETINA size on a blank PNG background.

STEP 9: Replace Image Asset

Finally, hit save and navigate to the image folder and click on the copy01.png so we can overwrite it and then click Save.

At this point, you should double click on the index file and you’ll see that the copy has now been updated! It really is that simple to update the copy in the banner for all your other updates.

Repeat steps 4 to 9 and you can go through and update the copy on all of your banners.

Just a quick reminder that before you supply your banners to your media agency, you will need to also update the backup images and package the banners properly.

naming your files when saving on photoshop

STEP 9: Replace Image Assets

Finally, hit save and navigate to the image folder and click on the copy01.png so we can overwrite it and then click Save.

At this point, you should double click on the index file and you’ll see that the copy has now been updated! It really is that simple to update the copy in the banner for all your other updates.

Repeat steps 4 to 9 and you can go through and update the copy on all of your banners.

Just a quick reminder that before you supply your banners to your media agency, you will need to also update the backup images and package the banners properly.

Not convinced? Let Our Work speak for itself?

Why Choose The Bannermen

we’re open 24 hours

no consultation fees

our experience delivers

we offer fixed prices

we focus on banners

we train your team

more about us

See some of our work

Johnnie Walker

Johnnie Walker our work Standard Media Adverts Exceptional and Unparalleled Johnnie Walker is one of those brands to whom we could pen a love letter. Their briefs range from elegant builds with subtle animation to chipper and quick frame transitions with bright colours, to builds that feature rich colours paired with smooth and captivating animation. [...]

Diet Coke

Diet Coke our work Standard Media Adverts Oh yes, we can What’s better than an animated banner ad? Probably nothing—except maybe a glittery animated banner ad! And that’s exactly the creative brief that Diet Coke came to us with. We were only too happy to help glitter-fy the screens of Diet Coke’s audience with these [...]

Heineken Social

Heineken Social UEFA Champions League our work Social Facebook Instagram Global campaign in 6 hours or less Heineken came to us in 2018 with some lofty social media goals as they wanted to make their brand synonymous with UEFA Champions League games. To do so, they proposed creating Instagram posts, Instagram Stories, YouTube videos, and [...]

Nike

Nike our work Rich Media Adverts Find your Unlimited Potential Nike approached us with a killer banner ad campaign concept—desktop-only video ads that featured various Nike athletes, almost no text aside from a tagline, and multiple product shots in action. Which is exactly what we created! Just try and tell us these aren’t the slickest [...]

Heineken Rich

Heineken our work Rich Media Adverts Raise a Heineken to Video & HTML5 Integration Heineken is one of our favourite brands to work with, both because they have such great creatives and because they have such high standards. For this rich media campaign, we were commissioned to seamlessly integrate HTML5 with video. A quick word [...]

Gatorade

Gatorade our work Standard Media Adverts Client Direct Gatorade is one of our most important direct-to-client relationships. While more and more companies are looking to in-house some or all of the production process, our professionalism and expertise really starts to shine. Deploying (on average) two or three campaigns a year, it was not financially viable [...]

EON

E.ON our work Rich Media Adverts Dynamic Media Programmatic Display Guardians of the Brand Galaxy E.ON is an international, privately owned energy supplier based in Essen, Germany, and has around 43,000 employees. As with any global powerhouse, E.ON delivers only the highest quality in everything they do, and digital display media is no exception. The [...]

McDonald’s Wraps

McDonald's Wraps our work Standard Media Adverts Campaign Consistency We know it feels like it's been a long time since McDonald's launched it's wraps, but when they did, we were right there with them! To get this campaign out the door, we produced a series of video and HTML5 units. This campaign was actually launched [...]

McDonald’s GTA

McDonald's GTA our work Rich Media Adverts Dynamic Media Parallax Plunge When McDonald's comes knocking at your door, you answer. So when we were brought in to help introduce the flavours of America to a British audience, we were thrilled! The beauty of these banners is found in their simplicity. As anyone who works with [...]

Destination BC

Destination BC our work Standard Media Ads Rich Media Ads Programmatic Ads Go Wilder Explore BC is an initiative to get BC residents to experience different aspects of their province during the fall, winter and spring months. It also includes a global ski campaign which help to advertise BC ski resorts, which account for almost [...]

Lotto Max

Lotto Max Millions our work Rich Media Adverts Dynamic Display Programmatic Display Retargeting Undercover This campaign for Lotto Max Millions was perhaps one of the most challenging projects we have undertaken. Take a minute to consider that every single banner you see on this page is in fact the exact same banner with minor adjustments [...]

Amazon Prime

Amazon Prime our work Standard Media Adverts Fall in Love with Amazon Prime This great set of banners was designed to accompany a campaign that saw shoppers falling in love not only with an Amazon product, but with the version of themselves who made the purchase. In the television spot associated with these banners, shoppers [...]

Evo

Evo our work Rich Media Adverts It's a BC Thing Evo is a carsharing service in the Greater Vancouver area, created by the British Columbia Automobile Association. When Evo approached us to re-create their visually stunning TV spot in HTML5 it was not a simple task because at the time, the digital sphere was undergoing [...]

Google Assistant

Google Assistant our work Standard Media Adverts The Tightest of Deadlines Working with an international powerhouse brand like Google is always exciting and this campaign for Google Assistant was nothing if not that. The biggest challenge facing our team on this project was the tight deadlines. The client had less than a week to produce [...]

Bulb

Bulb our work Standard Media Adverts Greener. Brighter. Better. Working with Bulb was simply electric! Pun intended! But seriously, getting this campaign in and out the door was a lot of fun. Firstly, Bulb has such an undeniably cool style and we were very excited to bring the hand drawing to life. As with most [...]

Get in touch

We’re ready to take your animations to the highest heights! From amped up illustrations to subtle, elegant pans and fades, we’re here to help make your animation dreams a reality.

London

Vancouver

How to Update Text / Copy for GAP HTML5 Banners

Updating Text/Copy in GAP HTML5 Banners

Updating Text/Copy in GAP HTML5 Banners

BEFORE WE BEGIN

BEFORE WE BEGIN

What You Will Need:

STEP 1: Upload Fonts

STEP 1: Upload Fonts

STEP 2 & 3: Find & Open HTML5 Designs Using Adobe Photoshop

STEP 2 & 3: Find & Open HTML5 Designs Using Adobe Photoshop:

STEP 4: Working with Retina Designs

STEP 4: Working with Retina Designs

STEP 5,6,7: Select the Copy Using Text Tool

STEP 5, 6, 7: SELECT COPY USING TEXT TOOL

STEP 8: Update Text & Adjust to Fit

STEP 8: Update Text and Adjust to Fit

Part 2 Exporting Assets

Part 2 – Exporting Assets

STEP 1 & 2: Review HTML5 Animations

STEP 1 & 2: Review HTML5 Animations

STEP 3 & 4: Review HTML5 Image Assets

STEP 3 & 4: Review HTML5 Image Assets

1

2

3

STEP 5 & 6: Isolate Text Layer & Replace Copy

STEP 5 & 6: Isolate Text Layer & Replace Copy

STEP 7, 8: Export PNG/Save for Web

STEP 7, 8: Export PNG/Save for Web

STEP 9: Replace Image Asset

STEP 9: Replace Image Assets

Why Choose The Bannermen

See some of our work

Johnnie Walker

Diet Coke

Heineken Social

Nike

Heineken Rich

Gatorade

EON

McDonald’s Wraps

McDonald’s GTA

Destination BC

Lotto Max

Amazon Prime

Evo

Google Assistant

Bulb

Get in touch

How to Update Text / Copy
for GAP HTML5 Banners

Updating Text/Copy
in GAP HTML5 Banners