Forum portalu Fan-Strefa.pl Forum portalu Fan-Strefa.pl 

Autor Wątek: Animacja - instukcja PA_BLO  (Przeczytany 5284 razy)

PA_BLO

  • Administrator
  • Fan Strefowicz
  • *****
  • Wiadomości: 2529
  • Reputacja: 116
    • Zobacz profil
    • Degrassi Poland
Animacja - instukcja PA_BLO
« dnia: 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). 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). 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). 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). 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.


Mam nadzieję, że instrukcja jest czytelna i zrozumiała. Życzę miłej zabawy oraz mnóstwa inspiracji w procesie tworzenia :)
Do you want more?


kejtlin

  • Gość
Odp: Animacja - instukcja PA_BLO
« Odpowiedź #1 dnia: 26 Lipiec 2011, 18:47:04 »
super instrukcja!  ;D na pewno skorzystam  8) plus leci!

Kalleye

  • Gość
Odp: Animacja - instukcja PA_BLO
« Odpowiedź #2 dnia: 26 Lipiec 2011, 19:20:50 »
Efekt ciekawy. Szkoda, że nie spróbuje bo mi mam IE na komputerze.

Blair

  • Fanik
  • **
  • Wiadomości: 247
  • Reputacja: 3
    • Zobacz profil
    • Mój blog, mój świat.
Odp: Animacja - instukcja PA_BLO
« Odpowiedź #3 dnia: 28 Lipiec 2011, 15:57:32 »
Super! Dzięki za instrukcje!
Dałabym plusa, lecz jeszcze nie mogę : <


Demetria Lovato ♡

V

  • Super Fan
  • *****
  • Wiadomości: 1009
  • Reputacja: 6
    • Zobacz profil
    • little mix polska
Odp: Animacja - instukcja PA_BLO
« Odpowiedź #4 dnia: 28 Lipiec 2011, 17:39:44 »
fajna :D

PA_BLO

  • Administrator
  • Fan Strefowicz
  • *****
  • Wiadomości: 2529
  • Reputacja: 116
    • Zobacz profil
    • Degrassi Poland
Odp: Animacja - instukcja PA_BLO
« Odpowiedź #5 dnia: 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.
Do you want more?


Scarlett ♥

  • Nowicjusz
  • *
  • Wiadomości: 34
  • Reputacja: 0
    • Zobacz profil
Odp: Animacja - instukcja PA_BLO
« Odpowiedź #6 dnia: 30 Lipiec 2011, 16:00:48 »
przepraszam, ale wie ktoś gdzie można ściągnąć VirtualDub? :)


PA_BLO

  • Administrator
  • Fan Strefowicz
  • *****
  • Wiadomości: 2529
  • Reputacja: 116
    • Zobacz profil
    • Degrassi Poland
Odp: Animacja - instukcja PA_BLO
« Odpowiedź #7 dnia: 30 Lipiec 2011, 18:46:45 »
przepraszam, ale wie ktoś gdzie można ściągnąć VirtualDub? :)
http://www.virtualdub.org/download.html
Do you want more?


kejtlin

  • Gość
Odp: Animacja - instukcja PA_BLO
« Odpowiedź #8 dnia: 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

PA_BLO

  • Administrator
  • Fan Strefowicz
  • *****
  • Wiadomości: 2529
  • Reputacja: 116
    • Zobacz profil
    • Degrassi Poland
Odp: Animacja - instukcja PA_BLO
« Odpowiedź #9 dnia: 30 Lipiec 2011, 19:47:31 »
Ja też nigdzie nie znalazłem pełnej wersji tylko Portable.
Do you want more?


Scarlett ♥

  • Nowicjusz
  • *
  • Wiadomości: 34
  • Reputacja: 0
    • Zobacz profil
Odp: Animacja - instukcja PA_BLO
« Odpowiedź #10 dnia: 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 :)


Carrie

  • Nowicjusz
  • *
  • Wiadomości: 86
  • Reputacja: 1
    • Zobacz profil
Odp: Animacja - instukcja PA_BLO
« Odpowiedź #11 dnia: 03 Październik 2011, 13:29:43 »
super : > bardzo mi pomogło  ;)

Santana

  • Fanik
  • **
  • Wiadomości: 263
  • Reputacja: 0
    • Status GG
    • Zobacz profil
Odp: Animacja - instukcja PA_BLO
« Odpowiedź #12 dnia: 13 Styczeń 2013, 16:06:22 »
Najlepszy sposób na animacje :) oraz do robienia elementów na layoucie !
Being part of something special makes you special

Miquela

  • Fanik
  • **
  • Wiadomości: 151
  • Reputacja: 0
    • Status GG
    • Zobacz profil
Odp: Animacja - instukcja PA_BLO
« Odpowiedź #13 dnia: 19 Styczeń 2013, 15:01:24 »
Dzięki, przydało się ;)

Aga

  • Fan
  • ***
  • Wiadomości: 497
  • Reputacja: 1
    • Status GG
    • Zobacz profil
Odp: Animacja - instukcja PA_BLO
« Odpowiedź #14 dnia: 27 Styczeń 2013, 17:55:54 »
Przeko... coś tam ale, takie coś się wyświetla:

http://e-fotek.pl/images/75761693620247045431.png

Forum portalu Fan-Strefa.pl

Odp: Animacja - instukcja PA_BLO
« Odpowiedź #14 dnia: 27 Styczeń 2013, 17:55:54 »