Jak zrobić animowany GIF w Photoshopie [Samouczek]

Animowane pliki GIF to świetne dodatki do Twojego marketingu. Są łatwe do spożycia, zapewniają nowy sposób na przyciągnięcie uwagi widzów i mogą mieć poważny wpływ emocjonalny.

Najlepsze w GIF-ach jest to, że nie są one zbyt trudne do zrobienia. Jeśli masz dostęp do Photoshopa i kilka minut wolnego czasu, możesz błyskawicznie stworzyć animowany GIF.

W poniższym samouczku dotyczącym tworzenia animowanych GIF-ów używam programu Photoshop w wersji Creative Cloud 2015, ale kroki powinny być podobne w innych wersjach.

Jak stworzyć animowany GIF w Photoshopie

Jeśli już wiesz, jak tworzyć GIF-y, przejdź do sekcji o tym, jak używać GIF-ów w swoich materiałach marketingowych.

Oto przykład animowanego GIF-a, który możesz utworzyć, korzystając z tego samouczka:

Dobrze, zaczynajmy.

Krok 1: Prześlij swoje obrazy do Photoshopa.

Jeśli masz już utworzone obrazy…

Zbierz żądane obrazy w osobnym folderze. Aby przesłać je do programu Photoshop, kliknij opcję Plik > Skrypty > Załaduj pliki do stosu.

Następnie wybierz Przeglądaj i wybierz pliki, których chcesz użyć w swoim GIF-ie. Następnie kliknij OK.

Photoshop utworzy wtedy osobną warstwę dla każdego wybranego obrazu. Gdy to zrobisz, przejdź do kroku drugiego.

Jeśli nie masz jeszcze utworzonej serii obrazów…

Utwórz każdą klatkę animowanego GIF-a jako inną warstwę programu Photoshop. Aby dodać nową warstwę, wybierz Warstwa > Nowa > Warstwa.

Pamiętaj, aby nazwać swoje warstwy, aby móc je łatwo śledzić podczas tworzenia GIF-a. Aby nazwać warstwę, przejdź do panelu Warstwy w prawym dolnym rogu ekranu, kliknij dwukrotnie domyślną nazwę warstwy i wpisz nazwę, na którą chcesz ją zmienić. Po zakończeniu naciśnij Enter .

Gdy masz już swoje warstwy i nazwałeś je wszystkie, jesteś gotowy do kroku drugiego.

Wskazówka dla profesjonalistów: Jeśli chcesz połączyć warstwy, aby pojawiły się w jednej klatce w twoim GIF-ie, włącz widoczność dla warstw, które chcesz scalić (klikając „oko” po lewej stronie nazwy każdej warstwy, aby tylko oczy były warstwy, które chcesz scalić, są otwarte). Następnie naciśnij Shift + Command + Option + E (Mac) lub Shift + Ctrl + Alt + E (Windows). Photoshop utworzy nową warstwę zawierającą scaloną zawartość, której nazwę również należy zmienić.

Krok 2: Otwórz okno Oś czasu.

Aby otworzyć Oś czasu, przejdź do górnej nawigacji, wybierz Okno > Oś czasu . Oś czasu umożliwia włączanie i wyłączanie różnych warstw przez różne okresy czasu, zmieniając w ten sposób statyczny obraz w GIF.

U dołu ekranu pojawi się okno Oś czasu. Oto jak to wygląda:

Krok 3: W oknie Oś czasu kliknij „Utwórz animację klatki”.

Jeśli nie jest wybrany automatycznie, wybierz go z menu rozwijanego — ale pamiętaj, aby go kliknąć, w przeciwnym razie opcje animacji klatek nie pojawią się.

Teraz Twoja oś czasu powinna wyglądać mniej więcej tak:

Krok 4: Utwórz nową warstwę dla każdej nowej klatki.

Aby to zrobić, najpierw zaznacz wszystkie warstwy, przechodząc do górnego menu nawigacyjnego i wybierając opcję Wybierz > Wszystkie warstwy.

Następnie kliknij ikonę menu po prawej stronie ekranu osi czasu.

Z wyświetlonego menu rozwijanego wybierz Utwórz nową warstwę dla każdej nowej klatki.

Krok 5: Otwórz tę samą ikonę menu po prawej stronie i wybierz „Utwórz ramki z warstw”.

Dzięki temu każda warstwa będzie klatką twojego GIF-a.

Krok 6: Pod każdą klatką wybierz, jak długo ma się pojawiać, zanim przełączysz się na następną klatkę.

Aby to zrobić, kliknij czas pod każdą klatką i wybierz, jak długo ma się pojawiać. W naszym przypadku wybraliśmy 0,5 sekundy na klatkę.

Krok 7: Na dole paska narzędzi wybierz, ile razy chcesz zapętlić.

Domyślnie będzie to Once , ale możesz to zapętlić tyle razy, ile chcesz, w tym na zawsze. Kliknij Inne , jeśli chcesz określić niestandardową liczbę powtórzeń.

Krok 8: Wyświetl podgląd swojego GIF-a, naciskając ikonę odtwarzania.

Krok 9: Zapisz i wyeksportuj swój GIF

Zadowolony ze swojego GIF-a? Zapisz go, aby użyć online, przechodząc do górnego paska nawigacyjnego i klikając Plik > Eksportuj > Zapisz dla Internetu (starsze)…

Następnie wybierz typ pliku GIF, który chcesz zapisać, jak w menu rozwijanym Preset . Jeśli masz plik GIF z gradientami, wybierz GIF -y z rozmyciem, aby zapobiec tworzeniu się pasków kolorów. Jeśli twój obraz zawiera dużo jednolitych kolorów, możesz zdecydować się na brak ditheringu.

Liczba obok pliku GIF określa, jak duże (i jak dokładnie) kolory GIF będą porównywane z oryginalnymi plikami JPEG lub PNG. Według Adobe wyższy procent ditheringu przekłada się na pojawienie się większej liczby kolorów i szczegółów — ale zwiększa rozmiar pliku.

Kliknij Zapisz na dole, aby zapisać plik na swoim komputerze. Teraz możesz przesłać ten GIF, aby wykorzystać go w swoich działaniach marketingowych!

Prześlij plik GIF do dowolnego miejsca online, w którym umieścisz obraz, i powinien on odtwarzać się bezproblemowo. Oto jak może wyglądać finalny produkt:

Jak używać GIF-ów w marketingu

1. W mediach społecznościowych.

Pinterest jako pierwszy udostępnił animowane GIF-y, a następnie Twitter. A latem 2015 roku Facebook również wskoczył na modę GIF. Następnie Instagram zmienił grę dzięki Boomerangowi, który pozwala użytkownikom filmować i udostępniać własne GIF-y. W każdym z tych kanałów społecznościowych animowane pliki GIF mogą być świetnym sposobem na wyróżnienie się w zatłoczonym kanale.

Na przykład sprawdź, jak Calm użył GIF-a z rysunkiem serca w tym cytacie Samuela Becketta, aby dodać animację do ciężkiego tekstu posta na Instagramie:

2. W twoich e-mailach.

Animowane pliki GIF wyświetlają się w wiadomościach e-mail w taki sam sposób, jak zwykły obraz. Dlaczego więc nie urozmaicić swojego e-mail marketingu, zastępując nieruchome obrazy animowanymi?

Może to nie tylko pomóc przyciągnąć uwagę odbiorców samą nowością, ale może również mieć bezpośredni wpływ na wyniki finansowe.

W przypadku niektórych marek umieszczenie animowanego GIF-a w wiadomościach e-mail wiązało się nawet ze 109% wzrostem przychodów. Korzystanie z bezpłatnego oprogramowania do e-mail marketingu HubSpot to łatwy sposób na osiągnięcie tego rodzaju wzrostu we własnej witrynie.

Korzystaj z GIF-ów, prezentując produkty, ogłaszając wydarzenia lub w inny sposób zachęcając czytelników. Sprawdź poniższy GIF z The Hustle, który przedstawia różne nagrody, które subskrybenci e-mail mogą wygrać, polecając Hustle znajomym:

3. Na stronach internetowych i w postach na blogu.

Na koniec rozważ moc używania GIF-ów na stronach internetowych w celu przyciągnięcia uwagi widza do określonego obszaru lub zaangażowania widza w post z dużą ilością tekstu.

Zobacz, jak Bloomberg używa animowanych GIF-ów z postaciami ludzików w tym artykule na temat Zimowych Igrzysk Olimpijskich w Pekinie:

Teraz, gdy nauczyłeś się tworzyć GIF-y, rozważ wykorzystanie nowo zdobytej wiedzy do dodania animacji do swojej witryny lub portfolio.

Jeśli go nie masz, spójrz na 12 najlepszych portfolio projektów graficznych, jakie kiedykolwiek widzieliśmy, i jak założyć własne.

Uwaga redaktora: Ten post został pierwotnie opublikowany we wrześniu 2013 r. i został zaktualizowany pod kątem aktualności, dokładności i kompletności.