Animacja logo to proces wprowadzania ruchu lub zmian w elementach wizualnych logo, aby uczynić go bardziej dynamicznym i atrakcyjnym. Można go zastosować do różnych części logo, takich jak tekst, obrazy, kolory i kształty, i może mieć różny stopień złożoności, od prostych animacji, takich jak miganie tekstu lub zanikanie kolorów, po złożone animacje obejmujące poruszające się lub interaktywne obiekty efekty.
Animacja logo staje się coraz popularniejsza. Pomijając smartfony i ogólny rozwój technologii internetowej, logo jest obecnie znacznie bardziej powszechne w przestrzeni cyfrowej, co otwiera drzwi do efektów wizualnych, takich jak animacja, które nie są możliwe w przypadku produktów fizycznych. Oczywiście rosnąca popularność animacji logo oznacza, że coraz więcej marek będzie jej potrzebować, aby zachować konkurencyjność. Zatem nauka animacji logo może być cenną umiejętnością, która przeniesie Twoje logo na wyższy poziom.
Jednocześnie oprogramowanie do animacji stało się bardziej wszechobecne, usprawnione i intuicyjne, aby wspierać tę rosnącą bazę użytkowników. Zatem niezależnie od tego, jak techniczna i złożona może się wydawać animacja logo, nawet początkujący mogą teraz tworzyć proste, ale skuteczne animacje.
Animacja logo w After Effects -
Krok 1. Przygotuj plik logo.
Właściwie rozpoczniemy nasz samouczek dotyczący animacji logo w programie Adobe Illustrator (lub podobnym oprogramowaniu do projektowania logo). Jest to konieczne, aby mieć pewność, że nasz plik logo skonfigurowane do animacji.
Chociaż samo oprogramowanie do animacji jest rastrowe, oryginalne pliki logo muszą być w formacie wektorowym. Dzięki temu możesz je zmieniać bez szkoda dla jakości obrazu (np. powiększenie logo rastrowego powoduje pikselację), co przyda się później podczas pracy z warstwami kształtów.
Upewnij się, że Twoje logo jest podzielone na warstwy, korzystając z panelu Warstwy.
Logo powinno być również wielowarstwowe, a nie zgrupowane w jeden obiekt. Ułatwia to tworzenie bardziej złożonych animacji poprzez animowanie poszczególnych części logo. Możesz tworzyć nowe warstwy za pomocą przycisku „ Dodaj nową warstwę” na dole panelu Warstwy, a następnie skopiuj i wklej do nich części swojego logo.
Wreszcie, ponieważ animacja ma charakter cyfrowy, pracujemy również z kolorami RGB. Jeśli plik programu Illustrator jest ustawiony na CMYK, możesz to zmienić, wybierając swoje logo i przechodząc do opcji Edycja > Edytuj kolory > Konwertuj na RGB.
Kiedy będziesz gotowy, wyeksportuj swoje logo jako w pełni warstwowy plik wektorowy. Ponieważ typy plików After Effects należą do rodziny oprogramowania Adobe, zamierzam zapisać utworzone przez siebie logo jako plik AI (Adobe Illustrator), ale jeśli używasz innego oprogramowania, możesz wybierać spośród kilku różnych typów plików wektorowych.
Krok 2: Zaimportuj swoje logo do After Effects. Animacja logo
Otwórz After Effects. Interfejs może na pierwszy rzut oka wydawać się skomplikowany, więc omówmy podstawy:
- Pasek narzędzi : tutaj możesz uzyskać dostęp do pliku main narzędzia graficznetakie jak narzędzie Pióro, narzędzie Tekst itp.
- Panel projektowy : tutaj zarządzasz i organizujesz pliki multimedialne całego projektu.
- Okno kompozycji : To jest okno podglądu wideo, w którym możesz zobaczyć animację bieżącej kompozycji (często nazywanej kompozycją), nad którą pracujesz. Kompozycje to zasadniczo sceny, każda z oddzielnymi osiami czasowymi animacji. Kompozycje omówimy bardziej szczegółowo w następnej sekcji.
- Oś czasu : Tutaj utworzysz animację. Składa się zarówno z osi czasu po prawej stronie (w której skonfigurujesz zdarzenia animacji, które mają być uruchamiane na osi czasu), jak i obszaru układu po lewej stronie (w którym możesz nakładać i edytować atrybuty zasobów multimedialnych).
- Panel sterowania : Tutaj możesz uzyskać dostęp do różnych funkcji pomocniczych, takich jak informacje o multimediach, opcje akapitów i wyrównania, a także gotowe biblioteki animacji i efektów wizualnych wbudowane w After Effects.
Jeśli nie masz pewności co do narzędzia lub przycisku, najechanie myszką na nie spowoduje wyświetlenie opisu.
Aby zaimportować plik logo, po prostu przeciągnij go do panelu Projekt lub wybierz Plik" > " Import" > " Plik" . W następnym oknie dialogowym wybierz opcję Importuj multimedia jako materiał filmowy i połączone warstwy .
Krok 3: Skonfiguruj kompozycję. Animacja logo.
Kompozycja (kompozycja) to kontener umożliwiający komponowanie, edytowanie i stosowanie animacji do plików multimedialnych. Większa produkcja, np. film, będzie zawierać wiele utworów zorganizowanych w panelu projektu. Możesz więc myśleć o utworach jak o pojedynczej scenie w filmie, a każdy utwór będzie miał własną, oddzielną oś czasu. W naszym przypadku animacja logo trwająca krócej niż pięć sekund wymaga bardzo niewielu kompozycji.
Aby dostosować kompozycję, przeciągnij pliki multimedialne na lewą stronę panelu osi czasu.
Zacznijmy od prostego tła. Kliknij prawym przyciskiem myszy panel układu i wybierz „ Tworzyć" > " Solidny" . Ponieważ moje logo jest białe, wybrałem jednolite kolor czarny, ale możesz wybrać dowolny kolor. W kolejnym oknie nazwij bryłę (w moim przypadku „BG”), kliknij przycisk „ Zrób rozmiar komputer” i wybierz „ OK" . Teraz przeciągnij plik logo z panelu Projekt do panelu Oś czasu. Powinieneś zobaczyć podgląd swojego logo w oknie kompozycji. Jeśli nie, pamiętaj o zmianie układu warstw, przeciągając jednolite tło pod plik logo.
Kliknij prawym przyciskiem myszy plik logo w panelu układu i wybierz Tworzyć" > " Konwertuj na kompozycję wielowarstwową” . Spowoduje to zmianę kompozycji Twojego pliku logo (zobaczysz, że ikona się zmieniła). Dwukrotne kliknięcie pliku logo otworzy teraz nową kartę i przeniesie Cię do nowej kompozycji zawierającej wszystkie indywidualne warstwy skonfigurowane w programie Illustrator. Teraz możesz zobaczyć, jak działają kompilacje: zasadniczo przypominają podfoldery.
Animacja logo
Jeśli chcesz, możesz przekształcić każdą z tych warstw w osobne kompozycje, klikając prawym przyciskiem myszy i wybierając Wstępny skład” . Dzięki temu ta warstwa będzie miała własną oś czasu animacji, zagnieżdżoną w poprzedniej kompozycji. A jeśli chcesz animować całe logo na raz, warto zastosować oś czasu powiązaną z główną kompozycją.
Pomijając to, przyjrzyjmy się, jak te osie czasu działają w przypadku animacji.
Krok 4: Animuj logo za pomocą klatek kluczowych
After Effects (i większość programów do animacji) działa przy użyciu klatek kluczowych. Klatki kluczowe to zasadniczo znaczniki, które można ustawić na osi czasu, aby określić, kiedy powinien nastąpić stan początkowy i końcowy animacji.
Na przykład zacznijmy od bardzo prostej animacji: zanikania. Do obiektu przypisane są różne atrybuty, a atrybuty zmieniające się w określonym czasie to w zasadzie animacja. Aby zobaczyć te atrybuty, kliknij ikonę Rozwiń obok logo, a następnie właściwość „Konwertuj” .
Utwórz klatki kluczowe, klikając ikonę stopera obok opcji Właściwości w panelu Oś czasu.
W przypadku animacji zanikania należy pracować z atrybutem mierzącym widoczność obiektu: nieprzezroczystością. Krycie jest ustawione na 100%, ponieważ domyślnie logo jest w pełni widoczne.
Kliknij ikonę stopera obok opcji Krycie, a zobaczysz romb w miejscu ustawienia znacznika głowicy odtwarzania (słaba niebieska linia przecinająca oś czasu). Jest to klatka kluczowa, czyli w zasadzie migawka bieżącej wartości określonego atrybutu. Przesuń klatkę kluczową, klikając i przeciągając ją do znaku 2 sekund na osi czasu. Przeciągnij suwak z powrotem do znaku 0 sekundy, następnie utwórz kolejną klatkę kluczową i ustaw krycie na 0%. Naciśnij spację, aby wyświetlić animację w oknie kompozycji.
Po efektach
Zobaczysz, że utworzyłeś płynną animację pojawiania się, zmieniając krycie z 0% na 100% w ciągu 2 sekund za pomocą tylko dwóch klatek kluczowych. W ten sposób wykonuje się wszystkie animacje w After Effects. Możesz utworzyć początkową i końcową klatkę kluczową w różnych odstępach czasu na osi czasu, a After Effects automatycznie oblicza przejścia klatek niezbędne do przejścia z punktu A do punktu B (tradycyjnie zwane klatkami animacji w branży animacji).
Prosta, płynna animacja jest tworzona przy użyciu dwóch klatek kluczowych dla właściwości Krycie.
Jak widać, istnieje wiele atrybutów, z którymi można pracować Przekształcenie majątku, co tutaj pokrótce wyjaśnimy. Możesz eksperymentować z klatkami kluczowymi i modyfikować każdą z nich, aby poznać ich możliwości animacji:
- Pozycja : Ten atrybut opisuje położenie logo w przestrzeni X, Y na ekranie układu i umożliwia animację ruchu liniowego.
- Skala : ten atrybut opisuje rozmiar logo (jako procent pełnego rozmiaru oryginalnego pliku) i umożliwia tworzenie animacji powiększania lub zmniejszania.
- Rotacja : Ten atrybut opisuje orientację w stopniach i umożliwia tworzenie animacji obrotu.
Porada od profesjonalisty :
Jeśli chodzi o animację logo, warto pracować wstecz (tak jak zrobiliśmy to w przypadku pojawiania się obrazu), ponieważ animacja powinna kończyć się na gotowym, kompletnym logo. Oznacza to, że musisz utworzyć klatki kluczowe, zanim cokolwiek zmienisz, aby mieć migawki wartości atrybutów w stanie domyślnym. Następnie możesz przenieść te klatki kluczowe do żądanego punktu końcowego na osi czasu (niezależnie od tego, jak długo ma trwać animacja) i utworzyć nowe klatki kluczowe dla zmian na początku osi czasu.
Krok 5. Animuj logo za pomocą warstw kształtów.
Przejdźmy teraz do ciekawszych technik animacji z wykorzystaniem warstw kształtów. Warstwy kształtów to obiekty zawierające informacje o ścieżce, takie jak punkty kontrolne i linie łączników (podobnie jak w programach wektorowych), a manipulowanie nimi otwiera drzwi do całej gamy możliwości animacji wykraczających poza Przekształć właściwości .
Jak wybrać odpowiedni kolor logo?
Najpierw przekonwertujemy logo na warstwę kształtu. W panelu Kompozycja warstwowa (warstwy utworzone w kroku 3) zaznacz wszystkie warstwy, kliknij prawym przyciskiem myszy i wybierz „ Tworzyć" > " Twórz kształty z warstwy wektorowej” . Zobaczysz, że każda warstwa jest zduplikowana, a obok niej znajduje się gwiazda - jest to warstwa kształtu. Zagnieżdżone pod warstwą kształtu, znajdziesz Właściwość treści oprócz Przekształć nieruchomość . Na prawo od Właściwości treści zobaczysz także przycisk „ Dodać" , co pozwoli Ci wybrać jeszcze więcej atrybutów do animacji.
Warstwy kształtów zawierają przycisk Dodaj (po prawej stronie właściwości Zawartość), który umożliwia dodawanie wszelkiego rodzaju animowanych właściwości, takich jak ścieżki przycinające.
Skalowanie obiektu w programie Adobe Illustrator
Przytnij ścieżki
W przypadku mojego logo użyłem dość popularnej i przydatnej animacji wykorzystującej właściwość Trim Paths. Aby to zrobić, dodałem „Ścieżki przycinania” za pomocą przycisku „ Dodać" do warstw kształtu dla każdej litery, ustaw klatkę kluczową atrybutu End na 0% na początku osi czasu i 100% po około 1 sekundzie. Jak widać, zarys liter wydaje się być rysowany przez niewidzialną rękę w czasie rzeczywistym.
Użycie właściwości Trim Paths pozwala animować linie, tak aby rysowały się same w czasie rzeczywistym.
Dodatkowo chciałem dodać do tła jakąś animację akcentującą. Ponieważ pracuję w czerni i bieli, wybrałem efekt zapętlonego tunelu przypominający Strefę Mroku. Aby to zrobić, użyłem narzędzia Wielokąt w panelu Narzędzia, aby narysować kształt na środku mojej kompozycji, tworząc nową warstwę kształtu.
Następnie dodałem właściwość Repeater, wyśrodkowałem pozycję i zwiększyłem liczbę kopii. To powiela kształt, tworząc pozornie niekończący się tunel. Dostosowanie skali zwiększa odstęp między każdą kopią, a zmiana obrotu powoduje zorientowanie kopii w różnych kierunkach ze względu na atrakcyjność wizualną.
Na koniec, dla urozmaicenia, na początku osi czasu ustawiłem przesunięcie kluczowe o wartości 0, a później ustawiłem je na wartość ujemną na osi czasu.
Korzystając z warstwy kształtu wielokątnego i właściwości Repeater, udało mi się stworzyć animowane tło.
Prawdopodobnie zgadłeś, że istnieje wiele opcji warstw kształtów. To prawda: w Internecie dostępne są kompletne kursy online na ten temat i warto poświęcić czas na eksperymentowanie, praktykę i naukę.
Nie mogę też powiedzieć, jaki styl animacji będzie Ci odpowiadał logo lub jakie konkretne narzędzia animacje potrzebne do osiągnięcia tego stylu. Mogę jednak dać Ci radę, jak odkryć to samemu. Poszukaj inspiracji w innych animowanych logo, takich jak logo konkurencji, marki, które podziwiasz i/lub strony takie jak Pinterest czy Dribbble – tak samo jak podczas tworzenia logo.
Przekonasz się, że gdy zaczniesz je analizować, wykorzystując nową wiedzę na temat animacji logo, wiele z nich opiera się na prostych manipulacje z kształtami i przekształceniami (nawet tymi, które są wyraźnie nałożone zaawansowanymi efektami stylizowanymi). Gdy znajdziesz kilka, które Ci się podobają, możesz cofnąć się w programie After Effects i spróbować odtworzyć te animacje w celach praktycznych.
Krok 6: Ustaw czas.
Porozmawiajmy o czasie, który opisuje tempo klatek animacji w trakcie animacji. Wizualną reprezentację czasu można zobaczyć w Edytorze wykresów. Aby to zrobić, kliknij ikonę wykresu (oznaczoną jako Edytor wykresów po najechaniu na nią) u góry panelu osi czasu, co spowoduje zmianę osi czasu na wykres liniowy.
Jeśli klikniesz jeden z atrybutów klatki kluczowej, zobaczysz linię prostą od jednej klatki kluczowej do następnej. W tej chwili, ponieważ kluczowe były tylko punkty początkowe i końcowe, opuściliśmy After Effects, aby zająć się synchronizacją. Bez kierunku After Effects przesuwa każdą klatkę animacji równomiernie, tworząc idealnie prostą linię.
Edytor wykresów pokazuje taktowanie klatek kluczowych, jak pokazano na wykresie liniowym.
Jednak celowa zmiana czasu nadaje animacji poczucie realizmu. Na przykład w animacji odbijającej się piłki piłka porusza się wolniej na wysokości odbicia i szybciej, gdy zbliża się do ziemi, ze względu na pęd i grawitację. Innymi słowy, nie porusza się z tą samą prędkością przez całą animację, a gdyby tak było, wyróżniałby się jako robot.
Narzędzia Beziera, znajdujące się na dole edytora wykresów, pozwalają dostosować krzywiznę linii wykresu.
Konwertuj klatki kluczowe na Auto Bezier
Edytor wykresów pozwala dostosować czas własnej animacji za pomocą tzw. uchwytów Beziera, które przekształcają linię wykresu w krzywą. W prawym dolnym rogu edytora wykresów zobaczysz ikony kwadratowych kropek dołączone do linii — są to narzędzia Beziera.
Kliknij jedną z klatek kluczowych i najedź kursorem na narzędzia Beziera, aż znajdziesz tę oznaczoną „ Konwertuj klatki kluczowe na Auto Bezier” . Po kliknięciu na wykresie pojawi się żółty znacznik. Przeciągnięcie tego uchwytu spowoduje wygięcie linii, co zmieni czas animacji. Tam, gdzie krzywa jest bardziej wyraźna, klatki będą odtwarzane szybciej, a tam, gdzie krzywa jest gładsza, klatki będą odtwarzane wolniej.
Ostrzejsza krzywa odpowiada szybszej synchronizacji, a gładsza krzywa odpowiada wolniejszej synchronizacji.
Prawdziwe zrozumienie niuansów związanych z dostosowywaniem własnego taktowania wymaga doświadczenia w animacji, dlatego ręczne dostosowywanie krzywych Beziera jest bardziej zaawansowanym tematem. W tym przewodniku dla początkujących polecam użycie narzędzia Bezier Łatwa łatwość (który stosuje automatyczną krzywą do wybranej klatki kluczowej) dla wszystkich przedziałów czasu animacji. Możesz aplikować Łatwa łatwość do klatki kluczowej poza edytorem diagramów, zaznaczając klatkę kluczową i klikając prawym przyciskiem myszy.
Krok 7: Eksportuj swoje logo.
Kiedy będziesz gotowy do wyeksportowania gotowego animowanego logo, wybierz „ Plik" > " Eksport" > " Dodaj program Adobe Media Encoder do kolejki” . Domyślnie eksportuje After Effects plik w formacie mp4, który nadaje się do odtwarzania wideo. Ponieważ chcemy utworzyć plik obrazu naszego logo, który można by udostępniać, wyeksportujemy go jako animowany GIF. W oknie Media Encoder kliknij strzałkę obok podświetlonej niebieskiej linii tekstu pod słowem „Format” i wybierz „ Animowany gif" . Możesz także ustawić folder docelowy dla gotowego pliku, klikając niebieski tekst pod słowami „Plik wyjściowy”.
Aby wyeksportować plik, przejdź do opcji Plik > Eksportuj > Dodaj do kolejki Adobe Media Encoder i wybierz opcję Animowany gif z listy rozwijanej w kolumnie Format.
Kliknij dwukrotnie podświetlony niebieski tekst poniżej ustawienia wstępnego, aby otworzyć okno Opcje eksportu. Jest kilka opcji, które warto sprawdzić, aby zmniejszyć rozmiar pliku: Jakość (ustawiam na 20), Liczba klatek na sekundę (ustawiam na 10, chociaż w przypadku wideo zalecane są wyższe szybkości klatek (fps)) i Czas trwania, czyli niebieski pasek pod podglądem (skróciłem do 4 sekund). Wybierać OK, aby zamknąć to okno.
Kiedy skończysz, wybierz zieloną ikonę Odtwórz w prawym górnym rogu Media Encoder, a Twój plik zostanie wyświetlony w wybranym folderze docelowym. To wszystko: gotowa animacja logo!
Ożyw swoją markę dzięki animacji logo.
-
Animacja logo to coś więcej niż tylko popularny trend, do którego zmuszone są podążać marki. Animacja logo ma także niezaprzeczalną magię i jest świetnym sposobem na stworzenie chwili wizualnej przyjemności każdemu, kto wchodzi w interakcję z Twoją marką. Na szczęście oprogramowanie do animacji ewoluowało w taki sposób, że prawie każdy, niezależnie od umiejętności, może dodać odrobinę tej magii do własnego logo.
Mając to na uwadze, chociaż ten samouczek ma na celu wprowadzenie Cię w podstawy animacji logo, potrzeba wielu prób i błędów, ćwiczeń i eksperymentów, aby uzyskać coś więcej niż podstawową animację. Jeśli chcesz naprawdę wyjątkowej animacji logo, warto zainwestować w profesjonalnego animatora logo.
Definicje i terminy dotyczące projektowania stron internetowych
Zostaw komentarz