Adobe Animate ile hazırlanan HTML5 Banner Nasıl Google AdWords'a Uygun Hale Gelir?

Ben HTML5 banner için tasarımımı Adobe Photoshop ile hazırlamayı tercih ediyorum. [Bkz: Görsel]

Animasyonumdaki tüm sahneler PSD dosyamda yer alacak. Genellikle aşağıdaki katmandan (layer) yukarı doğru animasyonumun başlangıç ve bitiş ögeleri yer alıyor.

Çalışmayı mutlaka katmanlar hâlinde hazırlarsanız, Adobe Animate ile kolaylıkla animasyonları yapabilirsiniz.
En azından bana bu şekilde daha kolay geliyor.

Banner çalışmanızda verdiğiniz isimlerde Türkçe karakter ve boşluk kullanmayın.

HTML5 banner için tasarımımı tamamladıktan sonra Adobe Animate'yi açıyorum ve hazırladığım PSD dosyasını katmanlı olarak içe aktarıyorum (import). [Bkz: Görsel] Böylece katmanlarım aynı şekilde ayrı ayrı yükleniyor. [Bkz: Görsel]

Aynı Flash'ta animasyon yaptığımız şekilde animasyonumu hazırlıyorum.
Animasyonumuzun uzunluğu 30 saniyeyi geçmemeli [Bkz: Görsel].

Animasyonumuzu HTML5 banner olarak yayınlarken yapmamız gereken bir ayar var.

Yayınlama (publish) penceresindeki Spritesheet sekmesindeki "Combine image assets into spritesheets" ifadesinin kutucuğu işaretli ise kaldırmalısınız. [Bkz: Görsel] Çünkü JSON dosyası AdWords tarafından kabul edilmiyor.

HTML5 banner çıktımızı aldığımızda elimizde

• images klasörü içinde çalışmamızda yer alan görseller,
• çalışma dosyamızla aynı isimde 1 HTML ve
• 1 JS

dosyası olacak.

Şimdi HTML dosyamızı açıyoruz ve HEAD etiketleri arasına banner ebadımızı ifade eden şeklinde bir meta etiketi ve hemen altına bir javascript kodu ekliyoruz. Benim hazırladığım bannerın ebatları 336x280px olduğu için aşağıdaki kodda bu ebatları göreceksiniz. Siz her ölçü için bunu değiştirmelisiniz.

Son olarak BODY etiketimizin içinde yer alan canvas etiketimizin sonuna aşağıdaki gibi onclick="javascript:window.open(window.clickTag)" ekliyoruz.

Bu aşamadan sonra images klasöründeki görselleri https://tinypng.com/ sitesinde ufaltmanızda fayda var.

TinyPNG gerçekten iyi boyut (size) ufaltma işlemi yapan bir site.

Görsellerinizi de ufalttıktan sonra images, HTML ve JS dosyanızı zipleyin. İsmi Türkçe olmamak üzere istediğiniz ismi verebilirsiniz. İçinde ne olduğunu size anımsatırsa iyi olur.

Zip dosyamız da hazırsa https://h5validator.appspot.com/dcm sitesinden doğrulama yapalım. [Bkz: Görsel] [Bkz: Görsel]
Ve her şey yolunda ise (anlattıklarımı yaptıysanız işlem tamamdır) artık HTML5 bannerımız AdWord hesabımıza yüklenmeye hazır.

Sorularınız ya da eklemeleriniz olursa lütfen yorum yazarak ekleyin.

Faydalı olması dileğiyle.

Teşekkürler.