Jak tworzyć animowane pliki GIF prototypowych makiet, takich jak te na Dribbble?

Jestem pewien, że widziałeś, jak Dribbblers przesyłają animowane makiety swoich projektów.

Oto przykład:

Mogę tworzyć makiety w Photoshopie, a nawet stosować do nich proste animacje Tween, ale nigdy nie mogę sprawić, by moje pliki GIF wyglądały jak tutaj.

Czego używają Dribbblers do tworzenia tych animacji?

Zauważ, że animacje obejmują również punkty dotykowe i doskonały ruch. Chciałbym przekonwertować moje makiety Photoshopa, aby zrobić to samo.

Jak mogę stworzyć animowany przykład moich makiet, podobny do tych stworzonych przez Dribbblers?

Rzeczy, które musisz wiedzieć, aby stworzyć coś takiego w After Effects:

Jak zrobić projekt i kompozycje

Po uruchomieniu AE możesz nacisnąć przycisk, Cmd+Naby utworzyć nowy projekt z jedną kompozycją w środku.

Jeśli masz już otwarty projekt, naciśnięcie Cmd+Ntworzy tylko nową kompozycję.

W tym projekcie wykorzystałem 2 kompozycje. GUIcomp do przechowywania GUI i jego animacji. iphonecomp do przechowywania zarówno tła, jak i GUIcomp.

Druga kompozycja z animacjami GUI powinna mieć taki sam rozmiar jak ekran lub przynajmniej mieć ten sam współczynnik kształtu. Później, gdy zamierzasz umieścić go na ekranie, może rozciągać się, by wyglądać dziwnie, jeśli proporcje obrazu są wyłączone.

Importowanie zdjęć do AE

After Effects ma całkiem niezły system do importowania plików .psd, ale nie lubię go używać, ponieważ jeśli zgubisz, przeniesiesz lub zmienisz nazwę pliku .psd, po efektach nie będzie można go znaleźć i będziesz musiał wymienić materiał dla każdego warstwa osobno.

Jeśli na przykład zaimportujesz folder obrazów do projektów. zmień nazwę folderu obrazów, wystarczy zastąpić tylko jeden obraz, a wszystkie brakujące obrazy zostaną przywrócone (o ile wszystkie brakujące obrazy znajdują się w tym samym folderze). Również w ten sposób jest mniej bałaganu.

Jak importować obrazy do projektu

Kliknij prawym przyciskiem myszy w panelu Projekt po lewej stronie i wybierz: Import > Multiple files

... lub możesz po prostu przeciągnąć pliki do tego panelu

Użyłem slicy do wyeksportowania moich zdjęć z Photoshopa.

Jakie obiekty należy zapisać jako osobne pliki obrazów

Zasadniczo będziesz chciał zapisać wszystkie ruchome obiekty osobno. Może być również konieczne osobne zapisanie kilku obiektów statycznych.

^{W tym projekcie mogłem potencjalnie zapisać nagłówek i stopkę jako jeden, ale nagłówek miał cień, który przechodzi nad pierwszym przyciskiem, więc musiałem zapisać je osobno.}

Oto rozkład sposobu, w jaki zapisałem moje pliki obrazów w Photoshopie przed zaimportowaniem ich do AE.

Animacja 101

Animacja pozycji:

1. Animacja pozycji:
   • Wybierz obiekt na liście po lewej stronie osi czasu.
   • naciśnij P
   • Kliknij ikonę stopera, która jest teraz poniżej wybranej warstwy. Spowoduje to automatyczne dodanie pierwszej klatki kluczowej, gdziekolwiek jest twój wskaźnik czasu (jest to czerwona linia na osi czasu).
   • 
   • przesuń wskaźnik czasu do przodu na osi czasu. Przeciągnij lub Cmd+{Arrow left or right}lubCmd+Shift+{Arrow left or right}
   • w przeglądarce kompozycji przeciągnij obiekt do miejsca, w którym chcesz go przenieść (możesz go również użyć Shift+arrow keys, podobnie jak w Photoshopie lub przeciągając wartości liczbowe).
   • Kolejna klatka kluczowa pojawi się na osi czasu, a teraz masz animację.
   • 
   • Możesz odtworzyć animację, naciskając space

Przesuń klatki kluczowe bliżej siebie, aby przyspieszyć animację lub dalej od siebie, aby ją spowolnić.

Kontynuacja animacji po przerwie.

scenariusz: animowałeś coś od A do B i chcesz zatrzymać się na X milisekund, a następnie przejść z B do C.

Po animacji B przejdź do przodu na osi czasu i kliknij ikonę klatki kluczowej po lewej stronie, tutaj:

Powinien wyglądać na szary, więc nie martw się. Oznacza to po prostu, że w tej pozycji nie ma klatki kluczowej

Ponieważ klatka kluczowa nr 2 i nowo utworzona transformacja klatki kluczowej nr 3 mają te same wartości, teraz jest przerwa między tymi dwiema klatkami kluczowymi. Następnie możesz kontynuować normalne animowanie, przesuwając się do przodu na osi czasu i zmieniając ponownie wartości.

Animowanie innych rzeczy, takich jak Obrót lub Krycie

Chciałem tylko poświęcić ten czas, aby powiedzieć, że wszystkie działają podobnie jak animacje pozycji (... minus przeciąganie).

Wystarczy użyć suwaków liczb, które pojawiają się po naciśnięciu poniższych skrótów klawiszowych.

Skróty klawiszowe dla różnych metod transformacji:

• P - Pozycja
• T - Krycie
• R - Obrót
• S - Skala
• A - Punkt kotwiczenia

Wystarczy wybrać obiekt (y) i nacisnąć jeden z tych skrótów klawiszowych i rozpocząć animację. Jeśli nic nie wybierzesz, ujawnia metody transformacji dla każdego obiektu w kompie.

Jak podporządkować obiekty innym obiektom

W panelu Comp zobaczysz listę rozwijaną Parent na każdym obiekcie.

Możesz go użyć do zdefiniowania obiektu nadrzędnego dla obiektu.

Jeśli następnie przesuniesz element nadrzędny, zauważysz, że element podrzędny porusza się teraz wraz z nim. To samo dotyczy animacji, które dołączasz do elementu Parent.

Jeśli animujesz obiekt nadrzędny, aby go obrócić, dziecko podąży za nim ...

Zwiększenie elastyczności animacji

Być może zauważyłeś, że animacja przycisku nie zatrzymuje się na ścianie, a zatrzymuje się w bardzo elastyczny sposób.

Aby to osiągnąć, można użyć wyrażeń After Effect (może to zrobić znacznie więcej).

Aby zastosować skrypt wyrażenia do animacji, Alt+{mouse click}stoper i wklej w skrypcie.

Wyrażenie, którego użyłem w mojej animacji przycisku

Pierwsze 3 zmienne amp, freq, decaymożna edytować, aby uzyskać różne wyniki.

Możesz zastosować ten sam skrypt do animacji opartych na ruchu. Na przykład nie ma to wpływu na animację krycia.

Można również znaleźć tutaj.

amp = .1;
freq = 1.0;
decay = 9.0;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}}
if (n == 0){ t = 0;
}else{
t = time - key(n).time;
}
if (n > 0){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value}

Łagodzenie ....

Jest to kolejna rzecz, która może sprawić, że animacja będzie wydawać się mniej liniowa, podobnie jak powyższy skrypt Expression.

Użyłem Ease Ease w tym „kółku wskaźnika dotyku”, aby wyglądał nieco bardziej jak ruch człowieka.

Możesz wybrać jedną lub wiele klatek kluczowych i kliknąć jedną z nich prawym przyciskiem myszy.

Następnie z listy: Keyframe assistant > Easy Ease

Często korzystam z Easy easy, bo jestem leniwy ...

Zdjęcia lub się nie zdarzyły ...

Oto prosta animacja pozycji pokazująca, jak łagodzenie i ten konkretny skrypt wyrażenia mogą mieć ogromny wpływ na animację.

Umieszczanie animowanego komp / materiału na ekranie

Po animacji GUI nadszedł czas, aby umieścić go na ekranie urządzenia.

1. Umieść kompozycję GUI w kompakcie iPhone'a, tak jak umieszczasz obrazy w kompozycji.
2. Kliknij dwukrotnie ikonę iPhone comp w panelu Projekt
3. Wybierz komp. GUI
4. Z górnego menu Effects > Distort > Corner pin
5. Następnie przeciągnij każdy narożnik, aby dopasować go do rogów ekranu urządzenia.

Eksportowanie do .gif

AE nie ma natywnej metody na zrobienie tego, ale nie martw się, istnieją sposoby.

Wolę to zrobić:

1. Kliknij kompozycję w Projects panel
2. Composition > Add to render queue Cmd+Ctrl+M
3. Następnie u dołu, gdzie zwykle znajduje się oś czasu, wybierasz, co chcesz wyeksportować i gdzie.
   • Zwykle eksportuję bezstratny plik .mov
   • Jeśli klikniesz „Ustawienia renderowania”, możesz wybrać ilość klatek na sekundę, w przeciwnym razie użyjesz ilości klatek na sekundę Comp
4. Następnie wystarczy nacisnąć render w prawym górnym rogu lub w tym panelu.
5. Znajdź wyeksportowany plik i otwórz go w Photoshopie.
6. Zapisz dla Internetu Cmd+Shift+Alt+S
   • Zapisz jako .gif

Szczerze mówiąc, nie jest tak źle ...

Eksportowanie jako plik wideo

Mimo że powyższa metoda pokazuje, jak wyeksportować plik bezstratny, nie jest to sposób, w jaki należy eksportować pliki wideo.

Robisz to w ten sposób:

1. Zapisz plik projektu.
2. Kliknij kompozycję w Projects panel(jeśli masz więcej niż jedną)
3. Composition > Add to adobe media encoder queue Cmd+Alt+M
4. Przeciągnij ustawienie wstępne z prawej kolumny do lewej kolumny
5. Naciśnij Graj.
6. Jeśli nie wybierzesz folderu eksportu, domyślnie będzie on znajdował się tuż obok pliku projektu.

Jak zamienić materiał filmowy

Więc AE nie może znaleźć twoich plików? Zrób to:

• Kliknij prawym przyciskiem myszy jeden z brakujących nagrań w panelu Projekt
• Z listy Replace footage > File...
• Znajdź swoje nagrania i inne rzeczy

Inne przydatne skróty

• U- Ujawnia wszystkie używane klatki kluczowe w kompie (jeśli nie masz nic zaznaczonego). Jest to bardzo przydatne, gdy na przykład chcesz przenieść wiele klatek kluczowych.
• U( Podwójne dotknięcie ) - ujawnia wszystko, co zostało zmienione.
• E( Podwójne dotknięcie ) - ujawnia wszystkie używane wyrażenia.
• J - Przejście do poprzedniej klatki kluczowej.
• K - Przechodzi do następnej klatki kluczowej.
• space - Odtwarza komp
• Ilub homeklawisz - Przenosi wskaźnik bieżącego czasu na początek na osi czasu.
• Cmd+K - Bieżące ustawienia kompozycji.
• Cmd+I - Importuj pliki.
• Alt+{Arrow keys left and right} - Wybierz klatki kluczowe i naciskaj klawisze skrótów, aby je przenosić.
• Alt+Shift+{Arrow keys left and right} - Wybierz klatki kluczowe i naciskaj klawisze skrótów, aby je przenosić.

Pliki projektu można znaleźć here.

JEST TO DARMOWY ANIMOWANY MAKS. .PSD PLIK strony przewijania dow i animacja menu całkowicie edytowana i animowana w Photoshopie śmieszna łatwa do edycji i zabawy, możesz pobrać plik za darmo tutaj , mam też film instruktażowy, w jaki sposób łatwa do edycji za darmo.

Jeśli spojrzysz na komentarze do tego konkretnego postu, facet mówi, że użył Adobe After Effects http://www.adobe.com/uk/products/aftereffects.html

Można to zrobić na dwa sposoby.

1. Odtwórz / Wykonaj makiety żądanych animacji w programie animacyjnym (w tym After Effects to jeden), a następnie wyeksportuj je jako animowany gif. Oczywiście (jak sobie uświadomiłeś) będzie to również polegało na tworzeniu „fałszywych” akcentów i innych interakcji, aby pokazać, co się dzieje.

2. Utwórz funkcjonalny prototyp, a następnie nagraj wyjście z urządzenia za pośrednictwem AppleTV lub podobnego urządzenia za pośrednictwem wyjścia HDMI przesyłanego do telewizora.

Oba są niezwykle czasochłonne, a podróż sama w sobie.

Ale opcja 2 ma OGROMNE zalety w porównaniu z opcją 1. Poza tym nauczysz się kilku podstawowych programów.

Znacznie większe jest jednak to, że dzięki niektórym bardzo podstawowym umiejętnościom programowania interaktywnego będziesz w stanie iterować odmiany i alternatywne podejścia znacznie szybciej niż ktoś korzystający z oprogramowania Animation.

I będziesz mieć coś naprawdę interaktywnego, aby zademonstrować swój projekt. Ponadto grafika została przetestowana w interaktywnym środowisku na urządzeniu, więc z pewnością będzie idealna pod względem pikseli i kolorów.

Ale czekaj, wiem. Jesteś przestraszony. Będzie ciężko, prawda?

Nie, jeśli masz iPada.

Codea to najtańszy, najszybszy sposób na tworzenie trywialnych (i BARDZO skomplikowanych) animacji i interaktywności w najprostszym, najczystszym języku skryptowym na świecie ... Lau.

http://codea.io

Jeśli nie masz iPada, zdobądź go.

Do tego czasu kontynuuj naukę processing.org, ponieważ będziesz w stanie tworzyć podobnie interesujące makiety w tym:

http://processing.org/

Przetwarzanie używa innego języka skryptowego zwanego Javascript. Jest podobnie prosty, ale nie tak elegancki jak Lua.

Możesz także utworzyć animację interfejsu użytkownika za pomocą Keynote. Jest dość prosty i idealny do tworzenia animacji interfejsu użytkownika. Następnie użyłem efektów po prostu do umieszczenia wideo w telefonie.

Krok 1: Najpierw stworzyłem animację interfejsu użytkownika na keynote i zrobiłem to: http://vimeo.com/108991829

Krok 2: Następnie umieściłem wideo w iPhonie po wykonaniu makiety efektów, które znalazłem w Internecie i zapisałem plik .mov. Postępując zgodnie z instrukcjami w tym filmie: http://youtu.be/VeZGwjVwDrc

Krok 3: Zrobiłem to za pomocą Photoshopa i postępując zgodnie z instrukcjami.

jeśli chcesz trzymać się Keynote i wyeksportować go jako format Quicktime, myślę, że próba:

GIF Brewery

Browar GIF pozwala konwertować krótkie klipy z plików wideo na pliki GIF. Niezależnie od tego, czy chcesz utworzyć najnowszy GIF dla kota, czy wyświetlić podgląd dłuższego filmu, browar GIF jest dla Ciebie.

Nie musisz już wyodrębniać klatek z filmów i majstrować przy warstwach w programie Adobe® Photoshop®. Zamiast tego pozwól, aby browar GIF wykonał dla Ciebie wszystkie żmudne prace.

Ponadto browar GIF zawiera wiele innych funkcji, które wyrażą Twoją kreatywność. Możesz dodać podpisy, aby odtworzyć dialog lub dodać wiele filtrów obrazów.

Naprawdę uwielbiam wszystkie instrukcje podane przez @Joonas.