3 sposoby na tworzenie animowanych zrzutów ekranu GIF z prac projektowych dla twojego portfolio

Po zakończeniu ostatniego projektu projektowania stron internetowych nadszedł czas, aby się nim pochwalić i dodać do swojego portfolio. Odwiedzający Twoją witrynę (i potencjalni klienci!) będą chcieli zobaczyć Twoją niesamowitą pracę w akcji. Wspaniałe obrazy są kluczowe, aw przestrzeni cyfrowej będą chwile, kiedy będziesz chciał zilustrować funkcjonalność projektu. Pokazywanie jej za pomocą animowanych zrzutów ekranu może być idealnym rozwiązaniem.

Jestem pewien, że widziałeś fajne, proste animowane zrzuty ekranu, które pokazują nam, jak działają aplikacje lub strony internetowe. GIF-y zrzutów ekranu dają użytkownikowi lepsze wyobrażenie o tym, jak wykonywane są określone zadania, a także pokazują, jakie funkcje są dostępne. Wideo jest z pewnością opcją i zdecydowanie zajmuje ważne miejsce w sieci. Dogłębne filmy produktowe lub studia przypadków zdecydowanie zyskują na formacie wideo. Jednak prostszy, bardziej świadomy wybór rozmiaru pliku, taki jak animowany zrzut ekranu GIF, może być właśnie tym, czego szukasz.

Dlaczego animowane zrzuty ekranu są ważne dla Twojego portfolio

Niezależnie od tego, czy wymawiasz je „GIF”, czy „JIF”, ważne jest, aby pamiętać, że GIF-y mogą być czymś więcej niż tylko śmiesznymi kotami i klipami filmowymi ze sprytnym sloganem. Animowane pliki GIF Twoich projektów powinny przyciągać wzrok i być starannie zaplanowane, aby pokazać funkcjonalność projektu. Animowanie elementów interfejsu jest zarówno celem funkcjonalnym, jak i estetycznym, więc pokazuje to plik GIF. Co powiesz na zademonstrowanie menu i opcji prezentowanych w Twojej pracy? Co powiesz na pokazanie, jak działa przewijanie? Pokazywanie funkcji pomaga użytkownikowi wyraźnie zobaczyć, w jaki sposób aplikacja lub witryna może mu pomóc.

Narzędzia do tworzenia GIF-ów

Nie ma lepszego sposobu na zademonstrowanie swojej ciężkiej pracy niż za pomocą jednego z poniższych narzędzi do tworzenia GIF-ów. Poniższe przykłady pokazują, jak to wygląda, gdy użytkownik klika opcję, wyświetla więcej szczegółów, a następnie przewija, aby zobaczyć więcej treści.

Uwaga : w tym samouczku nie będzie żadnych instrukcji projektowania wizualnego; te wskazówki zakładają, że projekt strony internetowej lub aplikacji dla twojego projektu portfolio jest już gotowy.

Jak tworzyć animowane zrzuty ekranu GIF w Adobe Photoshop

Moim zdaniem Adobe Photoshop i Adobe After Effects to najlepsze narzędzia do tego zadania. Oba pozwalają na dużą kontrolę nad produktem końcowym. Osobiście lubię Photoshopa do robienia zrzutów ekranu w formacie GIF (i większość projektantów jest z nim bardzo zaznajomiona), więc tak zostanie zbudowany poniższy przykład. Zacznijmy!

Pokazuję funkcję przewijania

Ten projekt został wykonany w Adobe XD, ale następnie wyeksportowany do Photoshopa z odpowiednio nazwanymi warstwami. Przykład ma warstwę o nazwie „Lista lokalizacji MinTour” dla strony listy, „Sculpture Garden Listing” dla strony szczegółów, a część, która jest poza początkowym widokiem przewijania, nosi nazwę „Sculpture Garden Listing Overflow”.

Część pierwsza

1. Konfiguracja osi czasu i lista lokalizacji

Do tworzenia różnych ekranów produktu końcowego użyjemy funkcji osi czasu. Upewnij się, że panel osi czasu jest otwarty, przechodząc do opcji Okno > Oś czasu .

Oto strona aukcji; użytkownik zaczyna tutaj, klika lokalizację i dociera do strony szczegółów, gdzie może przewinąć, aby zobaczyć więcej szczegółów.

Zobaczysz, że została już ustanowiona pierwsza klatka kluczowa. Upewnij się, że wyświetlane są prawidłowe warstwy, aby w klatce kluczowej był wyświetlany prawidłowy widok.

Opcjonalnie: jeśli chcesz pokazać, gdzie użytkownik klika, czasami jest to oznaczone kropką. Aby to zrobić, dodaj dodatkową ramkę z obszarem kropki.

2. Indywidualne szczegóły lokalizacji

Możliwość organizowania za pomocą warstw jest ogromną zaletą i pomoże zachować wszystko w porządku podczas tworzenia obrazu GIF z przechwytywaniem ekranu. Przejdź do opcji w panelu Oś czasu i wybierz „Nowa ramka”. To samo tutaj – upewnij się, że właściwe warstwy są ukryte/pokazane. W tym przypadku musiałem wyświetlić indywidualną listę, więc warstwa listy lokalizacji jest ukryta.

3. Poszczególne szczegóły lokalizacji przewijaj zawartość

Indywidualna strona aukcji Ogrodu Rzeźby ma więcej treści, więc obszar przewijania powinien być widoczny dla użytkownika. To było na osobnej warstwie, więc stworzyłem nową ramkę, aby pokazać tę przepełnioną zawartość.

4. Wybierz czas trwania

Może to wymagać trochę eksperymentów, ale wybór czasu trwania każdej klatki jest ważny. Chcesz, aby użytkownik miał wystarczająco dużo czasu, aby zobaczyć każdą klatkę, ale także nie powinien czekać zbyt długo, zanim zobaczy kolejną.

Wprowadzam wartości dla każdej klatki, łącznie pięć sekund na całą animację.

5. Podgląd

Warto przyjrzeć się temu, co się do tej pory dzieje. W dolnym rzędzie panelu Oś czasu znajduje się przycisk odtwarzania. Wypróbuj różne rzeczy i zobacz, czy jest coś, co można poprawić.

(Opcjonalnie) kontrola animacji

Rzeczy są uporządkowane poprawnie, ale wydają się trochę nerwowe. Animacje zrzutów ekranu można dostosować, aby wyglądały trochę płynniej. W opcjach osi czasu dostępna jest opcja „Tween”. Aby automatycznie utworzyć płynną animację między bieżącą a poprzednią klatką, można automatycznie wstawić więcej klatek.

Od listy do przepełnienia listy, dodano Tween, aby wyglądało bardziej na akcję przewijania. Te nowe klatki zostały ustawione na bardzo krótki czas trwania 0,05 s (przewijanie w aplikacji odbywa się stosunkowo szybko).

Jeśli chcesz, aby to było zapętlone w Photoshopie, upewnij się, że wybrana jest opcja „Na zawsze”. Jeśli istnieje określona liczba pętli, można wprowadzić tę wartość.

6. Zapisywanie zrzutu ekranu GIF (tylko przepływ ekranu)

Jeśli chcesz uwzględnić to jako animowany przepływ ekranu, zapisywanie będzie ostatnim krokiem. W tym momencie tworzona jest animacja zrzutu ekranu, wystarczy ją zapisać w odpowiednim formacie GIF. Możesz być przyzwyczajony do zapisywania statycznego obrazu, ale zapisywanie sekwencji obrazów jest inne. Przejdź do Plik > Zapisz dla Internetu , aby zapisać ten plik GIF.

Tutaj zobaczysz wszystkie ustawienia potrzebne do swojego GIF-a. Pamiętaj, że jesteś ograniczony do liczby kolorów, więc przed eksportem sprawimy, że rzeczy będą wyglądały jak najlepiej. 256 to najprawdopodobniej najlepsza opcja, ponieważ strony internetowe i aplikacje mają zwykle szeroki zakres kolorów, ale jeśli Twój projekt na to pozwala, możesz to uprościć (co zmniejsza rozmiar pliku).

W prawym dolnym rogu znajdują się również ustawienia „Animacji”; możesz wybrać Looping, jeśli chcesz, aby to było zapętlone w nieskończoność. Możesz także zapętlić określoną liczbę razy, jeśli chcesz. Zapisz go w wybranej lokalizacji i gotowe!

Część druga: Warstwowe ekrany na urządzeniu

Jeśli zdecydujesz się kontynuować, musisz wykonać kilka dodatkowych kroków, aby go ułożyć, aby wyglądał bardziej realistycznie na telefonie. Z panelu Oś czasu wybierz opcję „Spłaszcz klatki w warstwy”. Każda klatka zostanie przekonwertowana na płaską warstwę, która ostatecznie będzie miała 26 klatek (a więc jest 26 warstw).

Po zapisaniu obraz telefonu będzie musiał zostać dodany do pliku. Aby to uwzględnić, trzeba będzie dokonać pewnej zmiany rozmiaru obrazu.

1. Dostosuj rozmiar płótna do animowanego zrzutu ekranu

Obraz tła ma wymiary 1300 X 920, więc rozmiar płótna należy dostosować, aby dokładnie go dopasować. Przejdź do Obraz > Rozmiar płótna i wprowadź odpowiednie wymiary.

2. Przygotuj warstwy do umieszczenia na ekranie telefonu

Następnie utwórz nową warstwę dla obrazu tła, aby animacja mogła być nałożona na wierzch. Tutaj przydadzą się warstwy ramek „Zaznacz wszystko”.

3. Podwójne sprawdzanie ramek

To dobry moment, aby upewnić się, że ramki są nadal takie, jak zaplanowałeś. Jeśli odtworzysz animację z panelu Oś czasu, zobaczysz animowaną sekwencję.

4. Pochyl ekrany

Ważne jest, aby wszystkie warstwy ekranu były wybrane, aby można je było jednocześnie przekrzywić i zachować jednolitość. Edycja > Przekształć > Skew to miejsce, w którym to się robi.

Trzeba trochę poeksperymentować, ale dostosuj rogi tak, aby pokrywały się z granicami ekranu, dając złudzenie, że ekran jest oświetlony animacją.

5. Regulacja obrazu i zapisywanie zrzutu ekranu GIF

Teraz nadszedł czas na wszelkie poprawki. Kolor, kontrast lub inne ostateczne poprawki należy wykonać przed zapisaniem. Zapisywanie animacji przebiega tak samo, jak w części pierwszej, krok 6.

W tym przykładzie tło zostało zgaszone, a kontrast został zwiększony, aby animacja naprawdę się wyróżniała. Teraz wydaje się, że jest na prawdziwym urządzeniu!

Giphy

Jeśli Photoshop nie jest Twoim preferowanym narzędziem, istnieje bezpłatne i łatwe w obsłudze narzędzie o nazwie Giphy. (Oprócz użytku profesjonalnego możesz też zrobić wiele śmiesznych GIF-ów!)

Jeśli wybierzesz „Pokaz slajdów”, jest to dobra opcja do tworzenia zrzutu ekranu animacji. Aby z tego skorzystać, będziesz musiał mieć zapisane poszczególne pliki ekranów. Następnie przeciągasz i upuszczasz nieruchome obrazy, a proces się rozpocznie.

Po przesłaniu plików wybierz „Utwórz pokaz slajdów”. Po zakończeniu łączenia obrazów możesz pobrać plik. To takie proste!

Nagraj to

Ta aplikacja jest dość prosta; rejestruje akcję, która ma miejsce na ekranie komputera i przesyła nagranie do witryny Recordit.io i tworzy łącze do udostępniania z opcją pobrania GIF.

Po zainstalowaniu Recordit na twoim komputerze, na pasku zadań pojawi się ikona. Po wybraniu możesz przeciągnąć i wybrać obszar ekranu, który chcesz nagrać. To było idealne, gdy przeszedłem do trybu podglądu w Adobe XD i mogłem użyć prototypu do demonstracji.

Po wybraniu obszaru, który zostanie uwzględniony, pojawi się przycisk nagrywania. Kiedy naciśniesz „Nagraj”, Recordit nagrywa wszystko, co dzieje się na ekranie, w granicach, które utworzyłeś. Po zakończeniu nagrywania po prostu wybierz „Zatrzymaj”.

Zajmie to kilka sekund, ale po zatrzymaniu nagrywania pojawi się wyskakujące okienko z linkiem, który przeniesie Cię do nagrania, które znajduje się na stronie Recordit.io.

Animowane pliki GIF zrzutów ekranu to świetny sposób na pokazanie przepływu użytkownika i sposobu działania projektów. Wideo też ma swoje miejsce, ale GIF-y można tworzyć bardzo szybko i łatwo je dodać do swojego internetowego portfolio.

Bezpłatny arkusz roboczy: Grupa docelowa i osobowość klienta

Szukasz praktycznego przewodnika, który pomoże Ci zachować relację z treścią i sprawić, że będzie ona interesująca? Ten trzystronicowy interaktywny plik PDF pomoże Ci znaleźć odbiorców, przeprowadzić audyt treści i stworzyć plan gry na rzecz rozwoju Twojej firmy.

Jeśli podobał Ci się ten artykuł, możesz również cieszyć się tymi:

• Jak tworzyć animacje SVG za pomocą CSS
• Jak stworzyć galerię wideo WordPress
• Jak korzystać z linków do pomijania, aby Twoja witryna WordPress była bardziej dostępna?