Footer Address

London

3rd Floor, 86-90 Paul Street, London, EC2A 4NE

+44 (0)797 3368191

Vancouver

Unit 290, 1275 Venables St, Vancouver, BC, V6A 2C9

(+1) 604 290-2609

How to Update Images/Products
for GAP HTML5 Banners

Updating Images/Products
in GAP HTML5 Banners

Updating Images/Products in GAP HTML5 Banners

BEFORE WE BEGIN

In this tutorial, I am going to teach you how to update the pack-shots or images in the HTML5 banners provided in your GAP Packaged Files. In the first section I will explain how to use photoshop to update the images/products in the designs and in the second section I will explain how to export those images from photoshop to update the HTML5 banner builds.

If you are a graphic designer, I would recommend skipping to the second section after the introduction, but if you are new or unfamiliar with photoshop I recommend you follow along all the way through.

Let’s go through some reasons why you might want to update a pack-shot or other images. The most obvious reason is that pack-shots can be different in different countries.For example, product artwork and language on the product might be different for different markets. Or, if the banner is announcing a sale, it is possible that different markets include different products in the sale. It also might be required that you update a logo to the local version or perhaps maybe the banners have a background image that needs to be updated to local imagery. If you need to do any of those things, this is the tutorial for you.

If you are looking to change the copy or text in you banner, please see the tutorial on updating text

IMPORTANT NOTICES

I’m assuming that you’ve already watched the intro to the gap programme and the short explanation what’s included in your gap files video, if you haven’t had a chance to watch them yet there are links below to those videos or you can find them on the gap program website.

Also, It’s important to note that updating an image is different than adding a new image. For example, if the HTML5 banners you received have 2 products or pack-shots in the animation and you would like there to be three separate products or pack-shots on different frames, that is not the kind of update covered in this tutorial and you will need to contact your Partnership rep at The Bannermen, or contact us via our website, and we can help you out.

BEFORE WE BEGIN

Let’s go through some reasons why you might want to update a pack-shot or other images. The most obvious reason is that pack-shots can be different in different countries.For example, product artwork and language on the product might be different for different markets. Or, if the banner is announcing a sale, it is possible that different markets include different products in the sale. It also might be required that you update a logo to the local version or perhaps maybe the banners have a background image that needs to be updated to local imagery. If you need to do any of those things, this is the tutorial for you.

If you are looking to change the copy or text in you banner, please see the tutorial on updating text in the link below or on our website.

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, but 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

I’m assuming that you’ve already watched the intro to the GAP Programme and the short explanation of what’s included in your GAP files video. If you haven’t had a chance to watch them yet, there are links below to those videos, or you can find them on the GAP Program website.

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 are not covered in this tutorial, you will need to contact your Partnership Rep at The Bannermen, or contact us via our website, and they 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.

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.
  • Wherever possible, we recommend that design updates, including copy/text changes, be done by a graphic designer

STEP 1,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.
    • If you are having any issues, we recommend that you get help from a graphic designer.
adobe photoshop beauty product ad mock ups

STEP 1,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.
    • If you are having any issues, we recommend that you get help from a graphic designer.
adobe photoshop beauty product ad mock ups

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 little 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.

close up of amend ad on photoshop

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 little 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.

close up of amend ad on photoshop

STEP 5,6,7: Select Image Layer

  • Locate the layer that contains the image that you need to update and select that layer
    • if the product is included in multiple frames of the animation, you will only need to replace it once as the same image will most likely be used on all frames
  • Using the pointer tool, click on the frame where you would like to update the image.
    • In some cases, your brand head office might have provided appropriate pack-shots for individual markets to us in the design phase of production. If that is the case, you might find multiple layers each named for a different market. In this case, you will not need to insert a new image and you can skip to the export section of this tutorial.
bannermen beauty product variations

STEP 5,6,7: SELECT IMAGE LAYER

  • Locate the layer that contains the image that you need to update and select that layer
    • if the product is included in multiple frames of the animation, you will only need to replace it once as the same image will most likely be used on all frames
  • Using the pointer tool, click on the frame where you would like to update the image.
    • In some cases, your brand head office might have provided appropriate packshots for individual markets to us in the design phase of production. If that is the case, you might find multiple layers each named for a different market. In this case, you will not need to insert a new image and you can skip to the export section of this tutorial.
bannermen beauty product variations

STEP 8: Add New Image and Adjust to fit

  • drag and drop that image from your computer/server directly into the PSD file
    • It is ok if that image looks too larger at first, we will be resizing it to fit in the next step
  • Select transform or use the keyboard shortcut COMMAND T and you will see a square appear around your asset.
    • Click on the corner of your asset and resize the product until it is roughly the same size as the product you are replacing
    • Photoshop is usually configured to keep the ratio of initial assets when you resize them; however, if you find that when you are shrinking the image it is stretching or squishing in weird ways, try holding shift while you resize
    • It is sometimes helpful if you leave the image of the previous packshot visible during this process so you can more easily match the size of the original

For the most part, GAP assets are designed in such a way that you should be able to replace images without needing to adjust the layout in anyway

If you have replaced the image and it does not fit or look right in the required space, you can try making either the product image or other assets (text, logos) smaller or move them subtlety.

swapping an image on photoshop

STEP 9,10: Save & Repeat

  • Save your work
  • Repeat steps 6-10 for all banner sizes

STEP 8: Add New Image and Adjust to Fit

  • drag and drop that image from your computer/server directly into the PSD file
    • It is ok if that image looks too larger at first, we will be resizing it to fit in the next step
  • Select transform or use the keyboard shortcut COMMAND T and you will see a square appear around your asset.
    • Click on the corner of your asset and resize the product until it is roughly the same size as the product you are replacing
    • Photoshop is usually configured to keep the ratio of initial assets when you resize them; however, if you find that when you are shrinking the image it is stretching or squishing in weird ways, try holding shift while you resize
    • It is sometimes helpful if you leave the image of the previous packshot visible during this process so you can more easily match the size of the original

For the most part, GAP assets are designed in such a way that you should be able to replace images without needing to adjust the layout in anyway

If you have replaced the image and it does not fit or look right in the required space, you can try making either the product image or other assets (text, logos) smaller or move them subtlety.

swapping an image on photoshop

IMPORTANT TO NOTE: Any assets changed in the PSD will need to be replaced in the HTML5 banners. For example, if you nudge the logo to fit your product during this process, you will need to replace the product shot AND the logo in the next phase. We also recommend that font changes or layout changes be reviewed by a trained graphic designer.If you would like advice on how to layout your new image – please contact your partnership rep.

STEP 9: Save & Repeat

  • Repeat steps 6-10 for all banner sizes
  • Save your work

Part 2 Exporting Assets

Part 2 – Exporting Assets

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 duplicate 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

html code for banner ads

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 duplicate 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.

html code for banner ads

STEP 3 & 4: Review HTML5 Image Assets

  • You should notice that even though each image takes up a unique amount of space on your screen, all of the image in the image folder are the exact same size – the full pixel size of the banner
  • For example, this product is maybe only taking up 100×200 pixels on the screen, but the actual size of the asset is the full size of the banner. That is because we save out each asset as PNGs with transparent backgrounds at the full pixel size of the banner.
    • The reason we do this is saving out assets at full size (with transparent backgrounds) guarantees that your image will be place in a perfect pixel perfect match to your designs WITHOUT NEEDING TO MAKE ANY ADJUSTMENTS TO THE CODE. This way of doing things means that you do not need to hire developers to update your HTML5 banners and is one of the central aspects of the TBMs Global Assets.
an example html code format

STEP 3 & 4: Review HTML5 Image Assets

  • You should notice that even though each image takes up a unique amount of space on your screen, all of the image in the image folder are the exact same size – the full pixel size of the banner
  • For example, this product is maybe only taking up 100×200 pixels on the screen, but the actual size of the asset is the full size of the banner. That is because we save out each asset as PNGs with transparent backgrounds at the full pixel size of the banner.
    • The reason we do this is saving out assets at full size (with transparent backgrounds) guarantees that your image will be place in a perfect pixel perfect match to your designs WITHOUT NEEDING TO MAKE ANY ADJUSTMENTS TO THE CODE. This way of doing things means that you do not need to hire developers to update your HTML5 banners and is one of the central aspects of the TBMs Global Assets.
an example html code format

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, so pay close attention to the pixel size in the folder name throughout this process.

STEP 5, 6,7: Isolate Image Layer & Save for Web

Locate the layer with the corresponding text that you would like to replace we’re starting with the product in this example.

Then hide all the other layers from the banner by toggling the little eye icon next to the folders for 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 product image with an extra logo for example.

After you have hidden all the extra layers AS WELL AS all the extra frames so you are only left with the single frame displaying the single image on your screen

Go to File>Export>Save For Web

where to go to export and save file

STEP 5, 6, 7: Isolate Image Layer & Save for Web

Locate the layer with the corresponding text that you would like to replace we’re starting with the product image in this example.

Then hide all the other layers from the banner by toggling the little eye icon next to the folders for 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 the product image with an extra logo.

After you have hidden all the extra layers AS WELL AS all the extra frames so you are only left with the single frame displaying the single image on your screen

Go to File> Export> Save For Web

where to go to export and save file

STEP 8: Export / Save for Web Settings

Decided if you need to export a PNG or a JPEG

When working with GAP assets, you need to match the file type to the assets in the HTML5 banner files. PNGs should only replace PNGs and JPGs should only replace JPGs

image amendments on photoshop

STEP 7, 8: Export/Save for Web Settings

Decided if you need to export a PNG or a JPEG

When working with GAP assets, you need to match the file type to the assets in the HTML5 banner files. PNGs should only replace PNGs and JPGs should only replace JPGs

image amendments on photoshop

IMPORTANT TO NOTE: In cases you might have to save out the image as a JPEG rather than a PNG you should pay careful attention to the file size of the image. File size in banners is very important and many banners need to be kept under 150KB . When extracting JPGs you should adjust the quality of the image to roughly match the size of the original image.

STEP 9: Replace Image Asset

Finally, hit save and navigate to the image folder and click on the copy one PNG so we can overwrite it and then click save

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

Repeat steps 4 to 9 and you can go through an 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 so you can 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

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

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. [...]

Read more
diet-coke

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 [...]

Read more
Heineken Social Media Ads

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 [...]

Read more
Nike Animated Banner

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 [...]

Read more
Heineken Rich Media Adverts

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 [...]

Read more
Gatorade Animated Web Ads

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 [...]

Read more
EON MPU Ad

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 [...]

Read more
McDonald's Rich Media Adverts

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 [...]

Read more
McDonald's Rich Media Banner Ads

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 [...]

Read more
Rich Media Agency

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 [...]

Read more
Lotto Rich Media Banner

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 [...]

Read more
Amazon Programmatic Banners

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 [...]

Read more
EVO Responsive Banner Ads

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 [...]

Read more
Google Rich Media Adverts

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 [...]

Read more
Bulb Responsive Banner Design

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 [...]

Read more

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.

Contact us