Poradniki Graficzne: Prezentacja z gifem

Cześć! Przychodzę do Was z niesamowicie prostym patentem na prezentację z ulubionym gifem. Nie trzeba męczyć się z klatkami, łączeniem w dół i wszystkimi innymi pierdołami - ci co wiedzą o co chodzi, to wiedzą też, że jest to jedna z najbardziej męczących rzeczy, które zgotował nam Gimp. Nie przedłużając już - zapraszam!

Etap I - grafika

Krok 1
Otwieramy nowy plik w gimpie o własnych wymiarach, wybieramy gif, tworzymy tło we własnym zakresie.

Krok 2
Kiedy tło jest już gotowe, kopiujemy z przeglądarki nasz gif i wklejamy jako warstwy.

Okej, mamy klatkę gifa na naszym tle. Posłuży nam ona tylko jako pomoc, aby odpowiednio przystosować tło - zrobić puste miejsce na gifa, którego później wkleimy kodem.

Krok 3

Warstwę z gifem dajemy pod warstwę z tłem. Bierzemy gumkę o największej miękkości, ustawiamy jej rozmiar według uznania (ja ustawiłam na około 330 - pamiętajcie, że im większy rozmiar, tym ładniejszy efekt zlewania się, ale też mniejsza precyzyjność) i gumkujemy tło, aby spod niego ładnie wyłonił nam się gif. Zanim zaczniemy gumkować, możemy dodać sobie dla ułatwienia jeszcze jedną, białą warstwę na sam dół. Dzięki temu będziemy widzieć, gdzie wygumkowaliśmy za dużo i wyraźnie widać granicę gifa, która będzie widoczna w ostatecznym stanie naszej prezentacji, jak tutaj:

A tak wygląda poprawnie wygumkowane tło:

Krok 6

Usuwamy warstwę z białym tłem, a warstwę z gifem ustawiamy na niewidoczną. Zostaje nam jedna warstwa z tłem właściwym, z wygumkowanym miejscem na gif. Teraz możemy zrobić napisy, cytaty, ramki, kwiatki, wianki, co nam się podoba. Po zrobieniu wszystkiego eksportujemy nasz obrazek w formacie .png (jest to ważne, w innym przypadku "dziura" nie będzie przezroczysta, tylko biała) i hostingujemy. Pełna dowolność, ja używam do tego tinypica.

Okna z grafiką nie zamykamy, przyda nam się w drugim etapie.

Tym krokiem kończymy etap graficzny. Pora wziąć się za HTML!

Etap II - HTML

Polecam robić wszystko na tej stronie - od razu widać, jak coś jest nie tak w kodzie. :')

Kod na wstawienie gifa

<div style="background-image: url(link do gifa); width: {szerokość gifa}px; height: {wysokość gifa}px; margin-top: {odległość gifa od góry}px; margin-left: {odległość gifa od boku} px;"></div>

Link, szerokość i wysokość wypełniamy zgodnie z właściwościami gifa. Następnie wchodzimy ponownie w nasz plik w gimpie, włączamy widoczność naszej klatki i klikamy zaznaczeniem kwadratowym w lewy róg obrazka. W ramce wyskoczą nam obydwie wartości - odległości od góry i od boku.

Wpisujemy je w nasz kod w odwrotnej kolejności i usuwamy nawiasy z dzióbkiem.

Tak wygląda mój kod na gif po wypełnieniu:

Kod na tło

<div style="background-image: url(link do grafiki); width: {szerokość grafiki}px; height: {wysokość grafiki}px; margin-top: {odległość grafiki od góry}px; margin-left: 0px;"></div>

Tak samo jak poprzednio, link, szerokość i wysokość wypełniamy odpowiednio do właściwości naszego tła. Odległość od góry będzie tutaj minusowa. Dlaczego? Ponieważ kod bierze pod uwagę odległość od wcześniejszego elementu, a więc od dolnej krawędzi naszego gifa. W takim razie, by wprowadzić odpowiednią wartość, dodajemy do siebie wysokość gifa oraz jego odległość od górnej krawędzi - w moim przypadku będzie to 264px + 5px = 269px. Moja wartość będzie zatem wynosiła -269px.

Tak wygląda mój kod po wypełnieniu

<div style="background-image: url(http://oi63.tinypic.com/2u9747p.jpg); width: 550px; height: 500px; margin-top: -269px; margin-left: 0px;"></div>

Okej, mamy cały kod i grafikę z ruszającym się gifem. Teraz czas na ramkę tekstową czyli coś, co wszyscy dobrze znacie. :)

Ramka tekstowa

<div style="width: {szerokość ramki}; height: {wysokość ramki}; overflow: auto; margin-top: {odległość od górnej krawędzi}; margin-left:{odległość od lewej krawędzi}; text-shadow: 0px 0px 0px;">Używaj strzałki w dół jako ENTER Tekst </div></div>

Wysokość, szerokość i odległość od lewej krawędzi wypełniamy standardowo według własnych upodobań, wartości czerpiąc z gimpa. Odległość od góry będzie znowu ujemna. Tym razem od wysokości tła odejmujemy odległość ramki od górnej krawędzi. W praktyce - jeśli wysokość mojego tła wynosi 500px, a odległość ramki od górnej krawędzi 263px(dane wyczytane takim samym sposobem, jak przy ustalaniu ustawienia gifa) to w takim razie 500px - 263px = 237px. Moja wartość będzie zatem wynosiła -237px.

Resztę - czyli czcionkę, jej kolor, rozmiar, cienie ustawiamy według upodobania.

Tak wygląda nasz gotowy kod:

<div style="background-image: url(http://oi63.tinypic.com/2u9747p.jpg); width: 550px; height: 500px; margin-top: -269px; margin-left: 0px;"></div>

<div style="width: 476px; height: 201px; overflow: auto; margin-top: -237px; margin-left:36px; text-shadow: 0px 0px 0px;">Używaj strzałki w dół jako ENTER Tekst </div></div>

A tak wygląda on po wklejeniu w tryb HTML:

Używaj strzałki w dół jako ENTER

Tekst

Zostaje nam tylko cieszyć się nową prezentacją :')
Mam nadzieję, że wszystko zostało wyjaśnione w miarę jasno i sensem - jeśli coś Wam nie działa, czegoś nie rozumiecie - piszcie, piszcie i jeszcze raz piszcie. Z chęcią udzielę wszelkiej pomocy. :)

Dzięki za uwagę i pozdrawiam,

Utopia

Strony

Poradniki Graficzne

Na czasie

Wielki powrót Poradników!

Prezentacja z gifem

2 komentarze: