Skip to content

Grafika


Przykładowe formaty grafiki

W swojej opowieści możesz użyć wielu różnych formatów grafiki. Jednak najczęściej będziesz miał do czynienia z:

  • JPEG (.jpg, .jpeg)
  • PNG (.png)
  • WebP (.webp)
  • SVG (.svg, .svgz)
  • GIF (.gif) np. animacja


Wstawianie grafiki

Dzięki znacznikowi <img> (z języka HTML) możesz umieścić obrazek w dowolnym miejscu. Pamiętaj jednak, że grafika którą chcesz wstawić do opowieści musi być dostępna online (musisz mieć do niej linka).

Składnia

<img src="link do obrazka" width="szerokość w % lub px" height="wyskość w % lub px" alt="Tekst alternatywny">

Z określoną szerokością i wysokością np.:
<img src="link.jpg" width="480" height="320" alt="Spadający arbuz">
<img src="link.png" width="80%" height="60%" alt="Spadający arbuz">
<img src="link.gif" width="180" height="90" alt="Pulsujące czerwone serce z łatami">

Oryginalny rozmiar grafiki (bez podania szer. i wys.) np.:
<img src="link.jpg" alt="Spadający arbuz">
<img src="link.webp" alt="Spadający arbuz">

Z określoną szerokością (wysokość ustawi się automatycznie i proporcjonalnie) np.:
<img src="link.gif" width="50%" alt="Pulsujące czerwone serce z łatami">
<img src="link.png" width="600" alt="Spadający arbuz">

Jednostki % oraz px

Jeżeli używasz jednostki % to musisz ją zapisać np. width="80%". Jest to wielkość podawana względem szerokości elementu nadrzędnego - np. w stosunku do szerokości strony.

Jeżeli używasz jednostki px (piksele) to nie musisz jej zapisywać np. width="480"

Atrybut alt="Tekst alternatywny"jest przydatny kiedy obrazek z jakiegoś powodu nie załaduje się na stronie. Dzięki niemu pojawi się w tym miejscu wybrany przez ciebie tekst, który z założenia ma opisywać to, co się na nim znajduje. Pamiętaj, że tekst alternatywny jest niesamowicie pomocny osobom niepełnosprawnym np. słabowidzącym lub niewidzącym, które korzystają z czytników stron internetowych. Wówczas taki alternatywny opis, zapewniający słowną reprezentację zawartości obrazka, pomaga im zapoznać się z naszą stroną internetową!


Przykład (bank bezpłatnych grafik: pixabay.com)

<img src="https://cdn.pixabay.com/photo/2015/03/04/07/17/parachute-658397_1280.jpg" width="60%" alt="Dwie osoby skaczące ze spadochronem z pokładu samolotu">

Już czas! – powiedział do ciebie Max. W twojej głowie szaleją myśli. 
Zastanawiasz się czy na pewno chcesz to zrobić. Skok ze spadochronem 
zawsze stanowił dla ciebie wyzwanie.

[[No to skaczę!->skok]]
[[Skaczę, ale zrobimy to razem!->skok z przyjacielem]]
[[Nic z tego. Zabierz mnie stąd!->powrót]]

Rezultat

Przykład 1 - rezultat



Przykład (AnimacjaGIF źródło: https://giphy.com/gifs/XIqCQx02E1U9W)

<center>
Pewnie zastanawiasz się jak wygląda osoba, która napisała tę opowieść.
To właśnie ja - przyłapany podczas procesu twórczego.

<img src="https://media.giphy.com/media/XIqCQx02E1U9W/giphy.gif" alt="Żaba Kermit pisząca na starej maszynie do pisania">
</center>

Rezultat - możesz przetestować:



Hosting grafiki

Hosting grafiki potrzebny jest do przechowywania grafiki na serwerze. Otrzymujemy wówczas możliwość korzystania z grafiki w wersji online (wykorzystując link). Jest to bardzo przydatne kiedy chcesz użyć własnych obrazków ze swojego komputera.

Polecam Ci: postimage.org

Najlepiej załóż bezpłatne konto. Dzięki temu w łatwy sposób będziesz mieć dostęp do wszystkich swoich grafik.

Hosting grafiki

Kopiujemy "Bezpośredni odnośnik" i wklejamy do znacznika img
<img src="https://i.postimg.cc/Hn1PvXQL/sitting-4963159-640.jpg" width="100%" alt="Opis">



Możesz sprawić, że grafika stanie się linkiem do kolejnej części opowieści, tzn. jeżeli ktoś kliknie na tę grafikę to zostanie przeniesiony do wybranego miejsca - tak jak w przypadku zwykłego linka tekstowego.

Przykład

<center>
Pewnie zastanawiasz się jak wygląda osoba, która napisała tę opowieść.
To właśnie ja - przyłapany podczas procesu twórczego.

(link: '<img src="https://i.postimg.cc/Hn1PvXQL/sitting-4963159-640.jpg">')[(goto:"skok")]

</center>

W makro (goto:"skok") podajemy nazwę już istniejącej karteczki (fragmentu opowieści).


Widok z edytora

Widok z edytora



Textcraft - generator tekstu

Możesz skorzystać z generatora tekstu w stylu gry Minecraft wchodząc na stronę: textcraft.net

Wystarczy, że wprowadzisz swój tekst (najlepiej bez polskich znaków), wygenerujesz napis, a następnie pobierzesz go w formacie PNG. W celu umieszczenia go w swoim GameBooku należy skorzystać z hostingu postimage.org oraz znacznika <img>.


Możesz również skorzystać z gotowego nagłówka GAME OF GDANSK.

<center><img src="https://gameofgdansk.eu/twine-tools/header-gog/game-of-gdansk.png" width="100%" alt="GAME OF GDANSK"></center>

Game of Gdansk



Licencja

Pamiętaj, że istnieją prawa autorskie chroniące każde dzieło. Korzystaj z własnych materiałów lub z materiałów, których autorzy zgodzili się na ich wykorzystanie np. na licencji Creative Commons.



Więcej materiałów