Tekst powstał w ramach niewspieranej już inicjatywy internetteam.pl
Zróbmy baner, najlepiej animowany, o tak! żeby się ruszało, strzałka skakała i jeszcze trochę bajerów, ogień ma się palić w kominku – powiedział klient.
Łapiesz się za głowę utwierdzając się w przekonaniu że to niemożliwe… html i tak dalej, ja przecież nie umiem programować, płomyków mu się zachciało…
Jeżeli jeszcze nie spotkała Cię taka sytuacja to wszystko co najlepsze przed Tobą 🙂
Wpisem tym rozpoczynam cykl praktycznych porad jak tworzyć banery, również te animowane w oparciu o Adobe Animate.
Postaram się nie powielać kolejnego podręcznika, a skupić przede wszystkim na procesie tworzenia i przydatnych rozwiązaniach.
Rozdział 1 – Krok po kroku
Rozmowa z klientem – ustalenie faktów:
- co ma się znajdować na banerze, jaki tekst i grafika – tu ważne aby od razu mieć na uwadze jego czytelność, zazwyczaj klient pragnie umieścić za dużo wszystkiego
- czy otrzymamy materiały źródłowe i w jakiej postaci eps, corel i inne wynalazki, jest to istotne z uwagi na to ile czasu zabierze nam przygotowanie grafiki pod późniejszą animację, tu spodziewać się można w najlepszym przypadku pliku psd na tysiącu warstwach
- gdzie banery będą się świecić czyli na jakich portalach będą publikowane, tutaj będzie potrzebna wiedza: wielkość (piksele) waga(kilobajty) zarówno dla baneru statycznego, czy animowanego (html+javascript+grafika)
Tworzenie grafiki:
- jeżeli tworzymy baner pod kilka, kilkanaście różnych formatów, nader istotne jest zastanowienie się nad uniwersalnością naszej kreacji. Zakładamy, że na wszystkich banerach mamy ten sam przekaz. Grafika i tekst musi wpasowywać się zarówno w pionowe, kwadratowe czy horyzontalne warianty. Najlepiej od razu informować klienta o zaistniałej potrzebie np. dostarczenia innego zdjęcia lub konieczności odmiennego tekstu dla desktopu i mobile
- wybór oprogramowania do stworzenia grafiki, tutaj każdy musi wypracować własną ścieżkę – czasami pod konkretnego klienta. Ale jak to? przecież w Animate można tworzyć grafikę, po co mi inny program? – z własnego doświadczenia mogę zdecydowanie odradzić takie postępowanie. Jak sama nazwa wskazuje jest to program do animacji 🙂 Dla mnie numerem jeden jeżeli chodzi o prędkość działania pozostaje Adobe Indesign. Co? ten program od składania książek? Tak, jest to absolutny król składu czegokolwiek – tu banerów. Jest w pełni przystosowany do działań webowych. Dowolna ilość formatów i wielkość w jednym dokumencie, stuprocentowa kompatybilność z pozostałymi produktami Adobe. Czyli po bożemu adobiemu, bitmapy edytujemy w photoshopie, wektory w ilustratorze, składamy całość w indesignie. Aha nie wspomniałem o corelu, pewnie dlatego, że ostatnio pracowałem na nim w 2005 roku. Nadmienię jeszcze o programie Fireworks którego byłem wielkim fanem, niestety to program odchodzący do lamusa przez politykę Adobe
- komponując grafikę myśl nad animacją, co możemy wprawić w ruch, a co nie i dlaczego oraz poinformuj klienta o zaistniałych ograniczeniach np. związanych z limitem wagi pliku. Cały czas mamy z tyłu głowy uniwersalność kreacji.
- Co możemy animować? Najlepiej wektory – dowolnie, nie zajmują dużo miejsca lub bitmapy – najczęściej pozycja x,y, czy skalowanie
Animujemy:
- na wstępie zaznaczę, że typ dokumentu w Animate to oczywiście HTML5 canvas
- uporaliśmy się już z grafiką, teraz należy ją wyeksportować i zaimportować do Animate – najlepiej użyć formatu ai, gdyż pozwoli to zachować wszystkie wektory i bitmapy w niezmienionej formie, może się zdarzyć że pewne elementy wymagają korekty w ilustratorze przed importem. Tak, życie grafika nie jest usłane różami
- jeżeli po zaimportowaniu grafiki, wszystkie elementy znajdują się na jednej warstwie, niesamowicie pomocną funkcją jest Distribute to layers. Mając wszystkie elementy na poszczególnych warstwach tworzymy symbole (klipy filmowe, grafiki, przyciski)
- następny etap to animacja klatek kluczowych, jeżeli stawiasz dopiero pierwsze kroki w animacji podglądaj to co robią inni, ruch powinien być naturalny, płynny bez szarpań, ze smakiem. Bycie grafikiem nie czyni Cię z marszu dobrym animatorem, tutaj jak wszędzie trzeba zdobywać doświadczenie w kolejnych projektach
- stale kontroluj wagę wyeksportowanych plików, jeżeli masz limit 100kb, a zamieściłeś animowane grafiki png z przezroczystościami natychmiast powinna w twojej głowie wyć syrena alarmowa
- tworząc wiele formatów, najczęściej otwieram na raz wszystkie pliki i animuję je symultanicznie, tzn. najpierw jeden element na wszystkich formatach potem kolejny itd., dzięki temu według mnie łatwiej i szybciej postępują prace, chociaż dużo zależy od projektu.
Akceptacja:
- do akceptacji najlepiej przedstawić komplet banerów statycznych i skrajne wersje animowane np. jedną poziomą, jedną pionową. Unikniemy w tej sytuacji nadmiernych poprawek w Animate. Dopiero po zaakceptowaniu animacji ruszamy pełną parą do pracy nad kolejnymi formatami. Często poprawki w animacji trwają dłużej niż zrobienie jej od nowa. Natomiast wersje statyczne są zazwyczaj wymagane przez wydawców jako zaślepki do banerów animowanych – więc praca nie idzie tutaj na marne.
Eksport plików:
- ustawienia publikacji, powinny być zgodne z wytycznymi np. czy kreacja ma być responsywna, jaki typ bitmap chcemy użyć itd.
- uf nareszcie koniec, naciskamy publikuj i… niestety to jeszcze nie koniec, jak pamiętamy waga pliku musi się zgadzać z wymaganiami i najczęściej wyeksportowane bitmapy należy jeszcze zoptymalizować
- następnie tworzymy archiwum zip z naszych plików html, javascript i bitmap, i o ile jest taka możliwość testujemy animację
- tworząc dla gdn, adwords możemy posłużyć się narzędziami googla: https://h5validator.appspot.com/adwords/asset https://h5validator.appspot.com/dbm/asset, w przypadku innych wydawców pozostaje wysłać pliki i czekać na testową stronę zawierającą nasz baner
Zgłodniałem, a kot chrapie mi na ramieniu, to znak żeby kończyć – jednak za jakiś czas postaram się przedstawić zagadnienia związane z przyciskami, clicktagiem, obramowaniem baneru czy zarządzaniem timeline używając javascript. Powodzenia!