Animacja Sober Lover powstała jako rozwinięcie logo przygotowanego dla debiutanckiej kolekcji marki. Znak nie miał zostać tylko statycznym elementem w headerze czy nadrukiem na odzieży. Chcieliśmy, żeby pojawił się też w formie ruchomego, lekko surowego materiału, który od razu buduje klimat strony.
Animacja została użyta w hero sklepu internetowego Sober Lover i stała się jednym z pierwszych elementów, które użytkownik widzi po wejściu na stronę.
Zobacz też: Sober Lover – logo
Zobacz też: Sober Lover – sklep
WIDEO: animacja Sober Lover
Animacja zbudowana z logo
Punktem wyjścia było logo Sober Lover. Zamiast projektować osobną grafikę, wykorzystaliśmy znak jako główny materiał do pracy.
Logo zostało przygotowane jako plik PNG, a następnie przekształcone w zapętloną animację przypominającą GIF. Chodziło o to, żeby uzyskać coś bardziej cyfrowego, trochę oldschoolowego i mniej „wygładzonego” niż typowy motion design robiony pod kampanię reklamową.
SCREEN: statyczne logo użyte jako punkt wyjścia
Efekt znaleziony w narzędziach, nie w ciężkim procesie
Animacja powstała w dość nietypowy sposób. W sieci istnieje dużo generatorów GIF-ów, filtrów i prostych narzędzi do tworzenia efektów wizualnych. Często są trochę starodawne, czasem wyglądają jak z innej epoki internetu, ale właśnie w tym jest ich urok.
Zamiast budować animację od zera w klasycznym programie do motion designu, potraktowaliśmy logo jak materiał do cyfrowego przetworzenia. Na bazowy GIF zostało nałożonych wiele filtrów, deformacji i efektów, aż powstał finalny loop użyty na stronie.
Nie wszystkie efekty da się łatwo nazwać albo odtworzyć jeden do jednego. To był bardziej proces szukania niż realizacja według gotowego przepisu: testowanie, nakładanie filtrów, sprawdzanie, co działa, usuwanie tego, co było zbyt przypadkowe, i zostawianie momentów, które pasowały do charakteru marki.
Cyfrowy, lekko brudny charakter
Efekt końcowy miał pasować do Sober Lover jako marki merchowej związanej ze światem streamingu, internetu i YFL. Dlatego animacja nie jest czysta i przesadnie dopracowana. Ma w sobie trochę cyfrowego szumu, trochę glitchu i trochę estetyki starych internetowych narzędzi.
To dobrze zagrało ze sklepem. Minimalistyczny layout dostał mocny, ruchomy element na wejściu, a samo logo zaczęło działać nie tylko jako znak, ale też jako nośnik klimatu.
Bez ciężkiego zaplecza animacyjnego
Jednym z ciekawszych elementów tej realizacji jest to, że taki efekt można uzyskać bez rozbudowanego procesu animacyjnego i bez klasycznego programu do motion designu.
Nie zawsze trzeba zaczynać od timeline’u, keyframe’ów i dużej produkcji. Czasem wystarczy prosty plik, kilka dobrze dobranych narzędzi, trochę prób i wyczucie, kiedy efekt zaczyna działać.
W przyszłości chcemy opisać ten proces szerzej w formie poradnika – jak tworzyć tego typu animacje bez posiadania profesjonalnego programu do animowania.
Animacja jako część całego systemu
Ta animacja nie była osobnym dodatkiem wrzuconym na stronę dla efektu. Była połączona z logo, nadrukami i sklepem internetowym.
Zobacz też: Sober Lover – logo
Zobacz też: Sober Lover – sklep
Logo pojawiło się na odzieży, w headerze sklepu i w animowanym hero. Dzięki temu całość działała spójnie: użytkownik widział ten sam znak w różnych miejscach, ale za każdym razem w trochę innej formie.
Co finalnie powstało?
W ramach tej realizacji przygotowaliśmy animację logo Sober Lover wykorzystaną w hero sklepu internetowego.
Zakres obejmował:
- wykorzystanie logo Sober Lover jako punktu wyjścia,
- przygotowanie materiału w formie zapętlonego GIF-a,
- przetworzenie znaku przez filtry i efekty cyfrowe,
- uzyskanie oldschoolowego, lekko glitchowego charakteru,
- dopasowanie animacji do hero sklepu,
- połączenie animacji z identyfikacją i nadrukami marki,
- przygotowanie ruchomego elementu wspierającego klimat pierwszego dropu.
To był mały, ale ważny element całej realizacji. Animacja nie musiała tłumaczyć marki. Miała zrobić atmosferę na wejściu – trochę cyfrową, trochę brudną, trochę dziwną. I dokładnie o to chodziło.
