czwartek, 20 marca 2014

Tworzenie prezentacji z gifem

Sposobów jest kilka. Są prostsze i trudniejsze.
Dzisiejsza instrukcja pokazuje jak zrobić prezentację w Gimpie z gifem.

Na początek potrzebujemy gifu. Możecie go znaleźć na wielu stronach. Na blogu znajdziecie różne animacje, które mogą Wam się przydać.
Do przygotowania instrukcji użyłam tej animacji:

Czyli po kolei co i jak:
1. Otwieramy plik graficzny (w moim wypadku jest to czyste tło).
2. Jako że nie da się edytować animacji w gimpie, przeciągam ją z miejsca zapisania na prezentację.
3. Usuwam prawie wszystkie kadry, które zostały utworzone w poprzednim punkcie. Zostawiam tylko 1.
4. Ustawiam obrazek w miejscu gdzie ma być umieszczona animacja.
5. Zajmuję się resztą prezentacji, czyli tworzę ramki, napisy itp. Jak to zrobić przeczytasz TU i TU.
6. Gdy już mamy "załatwione" wszystkie elementy wymienione w poprzednim punkcie, przychodzi pora na zrobienie ramki wokół animacji.W tym celu wybieram zaznaczenie prostokątne i zaznaczam obszar obrazka. Musi on być troszkę większy niż animacja, aby ramka była widoczna.
Wybieramy Edytuj, a następnie Rysuj wzdłuż zaznaczenia. W ten sposób tworzymy ramkę.
7. Gdy skończymy naszą prezentacją, należy zapisać ją tak jak najzwyklejszą prezentację. Nie będzie ona oczywiście się ruszać. Kolejnym krokiem jest stworzenie odpowiedniego kodu HTML, co może być utrudnieniem dla niektórych.
8. Potrzebujemy o 1 ramkę więcej niż mamy ramek do pisania. Dodatkową ramkę lokujemy w miejscu animacji. Powinna ona być lekko większa niż animacja, aby nie pojawiał się nigdzie suwak.
9. Kopiujemy link do naszej animacji i wstawiamy go do kodu na obrazek po czym w ramkę, tak aby nachodził na obrazek z prezentacji.

I to wszystko.
Jeśli chcecie zobaczyć efekt końcowy, to wklejcie poniższy kod do TESTERA HTML.



Oczywiście poniższy kod jest poprawnie uzupełnionym kodem do prezentacji, więc jeśli ktoś jest ciekawy co i jak to proszę :)
mugi-chan

10 komentarzy:

  1. Anonimowy21 marca 2014 12:29

    Super instrukcja! Dzięki i faktycznie działa w testerze

    OdpowiedzUsuń
  2. Anonimowy22 marca 2014 20:45

    A to w ten sposób się robi!

    Sprytne ;)

    OdpowiedzUsuń
  3. Anonimowy2 sierpnia 2014 21:32

    IRYTUJĄCE. Irytujące na potęgę. I nie jestem głupia, ale to co tu piszą... nie jest zrozumiałe dla 100 % społeczeństwa. Lepiej by było, gdyby podali < chodzi mi np. o zmianę kursora > żeby napisali przykład jak ma wyglądać końcowo ten cały HTML. ~ Heksa

    OdpowiedzUsuń
    Odpowiedzi
    1. mugi-chan3 sierpnia 2014 08:50

      Czemu piszesz o kodzie na zmianę kursora pod postem o prezentacji z Gifem? Zapraszam do odpowiedniego postu.
      Nie da się stworzyć kodu który będzie Ci pasował do każdego Gifu. To dlatego instrukcja jest tak sformułowana, a nie inaczej.

      Usuń
    2. Anonimowy5 sierpnia 2014 20:42

      serio ciężko ogarnąć, że inaczej roi się kursor, a inaczej prezkę? To tak, jakby piekąc szarlotkę chcialoby się uzyskać nie wiem.... roladę z mielonego?

      Usuń
  4. Anonimowy5 sierpnia 2014 09:41

    A taką ramkę, w któej jest kod, da się wstawić na prezce na howrse?

    OdpowiedzUsuń
  5. Anonimowy1 stycznia 2015 20:51

    O jacie dzieki !!!! Super poradnik!!!! ^^

    OdpowiedzUsuń
  6. Anonimowy7 stycznia 2016 23:20

    Nie zrozumiałe w 100%.

    OdpowiedzUsuń
  7. Anonimowy12 marca 2016 18:41

    O co tutaj chodzi "Kopiujemy link do naszej animacji i wstawiamy go do kodu na obrazek" bo nie rozumiem.

    OdpowiedzUsuń
  8. Anonimowy30 sierpnia 2016 22:02

    Jeju, nie wiem o co wam chodzi! Proste, jeśli nie umiecie grafiki czy HTML, to zacznijcie od podstaw, nie czepiajcie się dziewczyny! Tacy z was wielcy graficy, a nie rozumiecie poradnika i próbujecie na siłę wytknąć jej błąd czy złe tłumaczenie... Po prostu żenada, jak dla mnie sam kod można zrobić bez patrzenia, jeśli zna się podstawowe znaczki, a jak widać koleżanki i koledzy wyżej ich nie znają, a biorą się za takie rzeczy :)

    OdpowiedzUsuń

Subskrybuj: Komentarze do posta (Atom)