Forum portalu Fan-Strefa.pl

Dla webmastera => Tutoriale => Wątek zaczęty przez: PA_BLO w 26 Lipiec 2011, 18:35:14

Tytuł: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: PA_BLO w 26 Lipiec 2011, 18:35:14
Jaki sprzęt?
Do zrobienia takiej animacji potrzebujesz:
- VirtualDub
- Photoshop
- Image Ready
- Internet Explorer (do pobrania stworzonego GIF'a)

Wybierz filmik.
Podstawą jest wybranie odpowiedniego filmiku. W tym celu używamy wcześniej pobranego nagrania w formacie AVI. Jeżeli zależy Ci na stworzeniu animacji z filmiku z YouTube, polecam stronę http://benderconverter.com/ na której wystarczy wkleić adres do wyszukanego nagrania a strona prze konwertuje owe wideo na format AVI.

Wybieranie klatek.
Teraz wchodzimy w program VirtualDub. Wczytujesz nasze nagranie (Ctrl+O) Po wczytaniu filmiku, ustawiasz suwaki na wybranej scenie, którą chcesz umieścić na animacji (Zobacz Screen01 (http://www.upload.fan-strefa.pl/x/851956s.jpg)). Teraz musisz pobrac klatki z tej sceny. w tym celu wchodzisz kolejno w FILE > EXPORT > IMAGE SEQUENCE. Następnie określasz jakośc i miejsce zapisania klatek (Zobacz Screen02 (http://www.upload.fan-strefa.pl/x/747224s.jpg)). Zatwierdzasz i od tej pory klatki z wybranej sceny znajdują się w folderze, który został zadeklarowany w poprzednim kroku.

Tworzenie dodatkowej grafiki.
Przechodzisz do programu Photoshop. Wczytujesz folder z klatkami PLIK > SKRYPTY > WCZYTAJ PLIKI DO STOSU. z listy "Użyj" wybierasz FOLDER a następnie opcją "Przeglądaj" wskazujesz dany folder z klatkami. Na koniec zatwierdzasz OK. Teraz musisz poczekać, aby wszystkie klatki ułożyły się w warstwy jednego dokumentu. Czas wgrywania zależy od ilości i rozdzielczości wgrywanych klatek. Gdy zdjęcia wgrają się stwórz grupę w której umieścisz wszystkie warstwy z klatkami - ułatwi Ci to późniejsze przesuwanie wszystkich warstw z klatkami w odpowiednie miejsce na animacji. w tym celu z w oknie warstw wybierasz na dole ikonkę "Utwórz nową grupę" - nadajesz jej nazwę np. Screeny. Teraz przytrzymując Shift zaznacz pierwszą i ostatnią warstwę tak aby wszystkie zdjęcia zostały zaznaczone. Następnie przesuwasz zaznaczone klatki do utworzonej grupy. Teraz pora na tworzenie grafiki. Utwórz dwie dodatkowe grupy "Up" oraz "Down" identycznie jak poprzednią grupę. Ułóż foldery z grupami w oknie tak, aby kolejność od dołu była "Down"; "Screeny"; "Up". Jeżeli uważasz, że utworzone klatki są zbyt duże, możesz je wykadrować lub po prostu zmienić ich rozmiar na mniejszy. Etap tworzenia górnej i dolnej warstwy animacji zależy od Ciebie. Pamiętaj, że to co chcesz umieścić na przodzie animacji musisz tworzyć w grupie "Up", zaś tło itp. tworzysz w grupie "Down". (Zobacz screen03 (http://www.upload.fan-strefa.pl/x/377702s.jpg)). Gdy zakończysz prace nad tworzeniem grafiki, zapisz dokument w formacie PSD - pozwoli to na wczytanie go w programie ImageReady.

Prace w ImageReady.
Przyszedł czas abyś uaktywnił wszystkie warstwy. Wchodzisz do programu ImageReady i wczytujesz plik PSD, który uprzednio utworzyłeś w Photoshopie (Ctrl+O). Od teraz Twoja rola będzie skupiać się głównie na dwóch okienkach: oknie animacji i oknie warstw (pracując w grupie "Screeny"). Teraz musisz kolejno powielać warstwę i odznaczać widoczność kolejnych warstw z grupy w której są klatki. (Zobacz screen04 (http://www.upload.fan-strefa.pl/x/123373s.jpg)). Czynność powtarzasz do momentu gdy masz odpowiednia liczbę powielonych warstw w oknie animacji oraz kolejno odznaczane warstwy. Dla sprawdzenia możesz kliknąć przycisk "Play" w nawigacji okna animacji. Jeżeli animacja przepływa płynnie, możesz przejść do jej zapisania.

Zapisywanie efektu końcowego.
Po co bawić się w optymalizację. Wystarczy, że klikniesz ikonę "Internet Explorer", która znajduje się w programie ImageReady a otworzy Ci się okno wyszukiwarki z gotowa animacją. Zapisz ją opcją "Zapisz obrazek jako". Gotowe!

Oto efekt.
(http://www.upload.fan-strefa.pl/x/914966i.gif)

Mam nadzieję, że instrukcja jest czytelna i zrozumiała. Życzę miłej zabawy oraz mnóstwa inspiracji w procesie tworzenia :)
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: kejtlin w 26 Lipiec 2011, 18:47:04
super instrukcja!  ;D na pewno skorzystam  8) plus leci!
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: Kalleye w 26 Lipiec 2011, 19:20:50
Efekt ciekawy. Szkoda, że nie spróbuje bo mi mam IE na komputerze.
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: Blair w 28 Lipiec 2011, 15:57:32
Super! Dzięki za instrukcje!
Dałabym plusa, lecz jeszcze nie mogę : <
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: V w 28 Lipiec 2011, 17:39:44
fajna :D
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: PA_BLO w 29 Lipiec 2011, 13:34:09
Dzięki. Niedługo wstawię tutorial z kodem do rozbudowanego działu z dodatkami, gdzie znajdziecie połączenie Icon Center z innymi podstronami.
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: Scarlett ♥ w 30 Lipiec 2011, 16:00:48
przepraszam, ale wie ktoś gdzie można ściągnąć VirtualDub? :)
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: PA_BLO w 30 Lipiec 2011, 18:46:45
przepraszam, ale wie ktoś gdzie można ściągnąć VirtualDub? :)
http://www.virtualdub.org/download.html
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: kejtlin w 30 Lipiec 2011, 19:45:40
a wie ktoś może gdzie mogę pobrać Image Ready ? bo szukałam wczoraj z pare godzin i nie znalazłam
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: PA_BLO w 30 Lipiec 2011, 19:47:31
Ja też nigdzie nie znalazłem pełnej wersji tylko Portable.
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: Scarlett ♥ w 30 Lipiec 2011, 21:01:10
dziękuję PA_BLO ;D niestety nie wiem gdzie się podziały plusy, ale jak je znajdę to na pewno ci dam :)
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: Carrie w 03 Październik 2011, 13:29:43
super : > bardzo mi pomogło  ;)
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: Santana w 13 Styczeń 2013, 16:06:22
Najlepszy sposób na animacje :) oraz do robienia elementów na layoucie !
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: Miquela w 19 Styczeń 2013, 15:01:24
Dzięki, przydało się ;)
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: Aga w 27 Styczeń 2013, 17:55:54
Przeko... coś tam ale, takie coś się wyświetla:

http://e-fotek.pl/images/75761693620247045431.png
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: Santana w 27 Styczeń 2013, 18:36:02
Aga ściągnij wersje portable
http://portableapps.com/apps/music_video/virtualdub_portable
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: Aga w 29 Styczeń 2013, 17:17:01
Nadal to samo :/
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: PA_BLO w 29 Styczeń 2013, 20:13:48
Wychodzi na to, że nie masz kodeku FMP4
Musisz go pobrać i zainstalować.
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: Aga w 30 Styczeń 2013, 18:16:57
Który pobrać?
Bo jest kilka:
http://pobierz.pl/szukaj,kodek-fmp4.html
Tytuł: Odp: Animacja - instukcja PA_BLO
Wiadomość wysłana przez: PA_BLO w 30 Styczeń 2013, 18:34:47
Poczytaj o tym tutaj
http://www.moviecodec.com/video-codecs/fmp4-codec-with-virtualdub-45814/