Jak zrobić prezentację z gifem?

Pewnie wiele osób marzy o wykonaniu własnej prezentacji z gifem. Oto stoi przed Wami otworem poradnik, w którym postaram się wszystko jasno wytłumaczyć. Zaczynamy od przygotowania grafiki. Zdjęcia będą pochodziły ze zrobionej przeze mnie prezentacji, którą pewnie widzieliście u mnie zaledwie dwa tygodnie temu. Bez dłuższego przeciągania - czytajcie!


1. Tak, jak już pisałam powyżej - zaczynamy od zrobienia przyzwoitej grafiki. Cały proces przebiega praktycznie bez zmian; tak samo, jak gdyby tworzylibyście zwyczajne prezentacje. Nie ma tutaj zbyt wiele do pisania, toteż punkt pierwszy pozostanie krótki. Moja jest gotowa, więc przedstawię screen zrobionej, jak ja to mówię, "podstawy".

(kliknij, by powiększyć)

2. Pewnie zauważyliście natychmiast, że na środku widnieje duży, pusty i przezroczysty plac. Cóż, jest to miejsce na nasz gif, dlatego tak ważne jest, by wyciąć odpowiednią "dziurę". Jak się zorientować, czy pozostawiony kawałek będzie odpowiedni? Nic prostszego!

Po pierwsze: sprawdzamy wymiary naszego gifu, są niezbędne.

Po drugie: zaznaczamy niewielkie pole za pomocą Zaznaczenie prostokątne (niewielki kwadrat narysowany przerywanymi kreskami, pierwszy w przyborniku), następnie zjeżdżamy niżej w opcjach tego samego narzędzia i odszukujemy napisu Rozmiar; znajdują się tam dwa okienka, w które wpisujemy odpowiednią ilość pikseli, dostosowaną do wymiarów gifa.

Wyskakuje nam prostokąt o nadanych wymiarach obrysowany poruszającymi się, przerywanymi liniami, który teraz ustawiamy w dowolnym, wybranym przez nas miejscu za pomocą narzędzia Przesunięcie (druga opcja w trzecim rzędzie, przedstawiająca cztery niebieskie strzałki złączone w krzyż).

3. Kiedy cała grafika z pustym "placem" na gif jest gotowa - możemy przejść do tworzenia kodu html. Nie jest on prosty, jednakże bardzo trudny także nie. Przedstawię jedynie kod do umieszczenia gifa i grafiki, ramki tworzycie sami.

<div style="background-image: url(TU WKLEJASZ LINK DO GIFA); width: [SZEROKOŚĆ GIFA]px; height: [WYSOKOŚĆ GIFA]px; margin-top: -1px; margin-left: [ODLEGŁOŚĆ GIFA OD LEWEJ STRONY*]px;"></div>

<div style="background-image: url(TU WKLEJASZ LINK DO GRAFIKI, CZYLI OBRAZU Z PUSTYM POLEM NA GIF); width: [SZEROKOŚĆ GRAFIKI]px; height: [WYSOKOŚĆ GRAFIKI]px; margin-top: [ODLEGŁOŚĆ GRAFIKI OD GÓRY*]px; margin-left: 0px;"></div>

* - musimy dopasować odpowiednio wymiary, a wartość NIE MOŻE być ujemna; jeżeli wpiszemy zbyt wielką liczbę - gif "odejdzie" w bok, pozostawiając w ramce na niego, w grafice, dziurę

(kliknij, by powiększyć)

** - tutaj z kolei wartość MUSI być ujemna; im mniejszą liczbę (pamiętajcie, że jako, iż są to ujemne cyfry - im większa wartość bezwzględna tym mniejsza staje się cyfra [np. jeżeli z -238 zmienimy na -280, będzie to mniejsza liczba]) wpiszemy - tym wyżej uniesie się grafika, przysłaniając gif, gdyż zostaje on ciągle w tym samym miejscu; również obraz zniknie za linią u góry, gdy "przekroczymy" jakąś liczbę, w tym liczy się chybił-trafił, pamiętajcie!

(kliknij, by powiększyć)

Jeśli informacja o wstawieniu własnego tekstu jest umieszczona w zwykłym nawiasie - ( ) - nie usuwamy go, tylko uzupełniamy wszystko w nim.

Gdy widnieje informacja o wstawieniu własnego tekstu w nawiasie kwadratowym - [ ] - uzupełniamy, usuwając go.

I TO TYLE! POWYŻSZA INSTRUKCJA POWINNA WAM POMÓC STWORZYĆ UPRAGNIONE PREZENTACJE Z GIFEM!

Przydał Wam się ten poradnik? Macie jakieś pytania?

#Auslly