Ożyw swoją markę – 5 wskazówek jak animować logo
Świat internetu pełen jest pięknych animacji, dysponujemy mnóstwem łatwo dostępnych narzędzi, żeby szybko je tworzyć. Dlatego żeby zaciekawić widzów trzeba zaproponować coś więcej niż sam prosty, jednostajny ruch.
1_ Pomysł
Wszystko zaczyna się od Twojego logo. Co odróżnia je od innych, co sprawia, że jest zapamiętywalne? Właśnie to musimy podkreślić, aby animacja nabrała głębszego znaczenia. To może być drobiazg: jedna kluczowa litera, podkreślenie, albo cały symbol logo. Postaraj się wyróżnić właśnie to, a cała reszta pójdzie łatwiej.
(source: Zajno Crew)
2_ Po nitce do kłębka
Każda animacja jest podzielona na etapy. Jakoś się zaczyna, jakoś kończy i ma kilka etapów pośrednich. Dlatego potrzebujemy stworzyć storyboard, czyli wizualne określenie poszczególnych etapów. Można je przygotować w programie do grafiki, takim jak Adobe Illustrator, żeby sprawdzić, czy Twój pomysł rzeczywście zadziała, czy wszystko złoży się w logiczną całość. Storyboard przydaje się w momencie przedstawiania pomysłu klientowi – o wiele łatwiej jest mu wyobrazić sobie całą animację, kiedy zobaczy jej graficzne uproszczenie. Potem kiedy przejdziesz do After Effects, aby zająć się właściwą animacją, wiadomo już dokładnie co musisz zrobić i cały proces zajmuje mniej czasu.
(source: https://dribbble.com/shots/2357942-AIUX-Logo-Animation-Storyboard)
3_ Zapętlanie
Początek i koniec animacji są bardzo ważne, często pamiętamy je najlepiej z całej animacji. Najlepiej więc w ogóle nie kończyć animacji, żeby początek i koniec powtarzały się w nieskończoność. Szczególnie jeśli logo będzie użyte w topie strony internetowej lub w mediach społecznościowych.
(source: Owlsome studio)
Można też użyć bardzo delikatnej animacji, bez wyraźnego początku i końca. Nie jest rozpraszająca, a może być ciekawym, interesującym elementem, który dodaje delikatnego smaczku gdzieś w tle.
(source: Owlsome studio)
Jeśli planujesz zastosować animację jako intro do filmu albo innej prezentacji prawdopodobnie zależy Ci na tym, żeby na końcu logo pokazało się w całej okazałości i pozostało przez chwilę nieruchome, żeby Twoi odbiorcy mogli je lepiej zapamiętać. W tym przypadku cofanie animacji nie jest potrzebne.
(source: https://dribbble.com/shots/9878062-Wibbitz-Logo-Animation-Concept)
Dobrym pomysłem jest przedyskutowanie ogólnej formy animacji z klientem na początku waszych rozmów, ponieważ wpłynie ona nie tylko na storyboard, ale też na cały proces animacji.
4_ Włącz dźwięk!
Dżwięk jest tak samo ważny jak sama animacja, można go porównać do smaku lub zapachu: nie tylko dodaje charakteru animacji i sprawia, że jest bardziej „żywa”, ale też potęguje wszystkie nasze emocje i wzmacnia doznania. Jeśli zdecydujesz się dodać muzykę do animacji dobrym rozwiązaniem będzie rozpoczęcie właśnie od tego – tempo, atmosfera, albo specyficzny fragment utworu mogą Cię natchnąć do zastosowania jakiegoś kreatywnego pomysłu, dają Ci punkt startowy który może być świetną inspiracją.
5_ GIF czy inny format?
Ok, skończyłeś już tworzyć animację. Teraz zdecydujmy jak ją wyeksportować i gdzie umieścić. Na Instagrama najlepiej sprawdzi się format wideo (.mp4), albo wideo z przeźroczystym tłem (.mov). Można też wyeksportować GIFa. GIF składa się z wielu obrazków złożonych w jedną całość. Im większy frame rate (liczba klatek na sekundę) tym większy rozmiar pliku. Kiedy eksportujemy na potrzeby strony www, im mniejszy plik tym lepiej. Jeszcze mniejsze od GIFów są animacje SVG, które (w najprostszej wersji) możemy przygotować za darmo na tej stronie: https://www.svgator.com/
(Source: https://dribbble.com/shots/3869680-Vesterbro-Animated-Typeface)
Więcej inspiracji
(source: https://dribbble.com/shots/3604443–Logitech-Logo-animation)
(source: https://dribbble.com/shots/1954414-And-Ident)
(source: https://dribbble.com/shots/2649530-Circus-Balancing)
(source: https://dribbble.com/shots/5880822-Slack)
(source: https://dribbble.com/shots/4930815-Fiverr-logo-animation)
(source: https://dribbble.com/shots/3976511-Logo-animation-series-1)
(source: https://giphy.com/gifs/26vUL7hQASXNm53l6)
