Forum portalu Fan-Strefa.pl
Dla webmastera => Tutoriale => Wątek zaczęty 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 :)
-
super instrukcja! ;D na pewno skorzystam 8) plus leci!
-
Efekt ciekawy. Szkoda, że nie spróbuje bo mi mam IE na komputerze.
-
Super! Dzięki za instrukcje!
Dałabym plusa, lecz jeszcze nie mogę : <
-
fajna :D
-
Dzięki. Niedługo wstawię tutorial z kodem do rozbudowanego działu z dodatkami, gdzie znajdziecie połączenie Icon Center z innymi podstronami.
-
przepraszam, ale wie ktoś gdzie można ściągnąć VirtualDub? :)
-
przepraszam, ale wie ktoś gdzie można ściągnąć VirtualDub? :)
http://www.virtualdub.org/download.html
-
a wie ktoś może gdzie mogę pobrać Image Ready ? bo szukałam wczoraj z pare godzin i nie znalazłam
-
Ja też nigdzie nie znalazłem pełnej wersji tylko Portable.
-
dziękuję PA_BLO ;D niestety nie wiem gdzie się podziały plusy, ale jak je znajdę to na pewno ci dam :)
-
super : > bardzo mi pomogło ;)
-
Najlepszy sposób na animacje :) oraz do robienia elementów na layoucie !
-
Dzięki, przydało się ;)
-
Przeko... coś tam ale, takie coś się wyświetla:
http://e-fotek.pl/images/75761693620247045431.png
-
Aga ściągnij wersje portable
http://portableapps.com/apps/music_video/virtualdub_portable
-
Nadal to samo :/
-
Wychodzi na to, że nie masz kodeku FMP4
Musisz go pobrać i zainstalować.
-
Który pobrać?
Bo jest kilka:
http://pobierz.pl/szukaj,kodek-fmp4.html
-
Poczytaj o tym tutaj
http://www.moviecodec.com/video-codecs/fmp4-codec-with-virtualdub-45814/