Wikiprojekt:Projekt Grafiki

Projekt ten ma na celu określenie zaleceń dotyczących grafik, w celu wypracowania jednolitego standardu tworzenia schematów, rysunków, map, wykresów, itp. dla poszczególnych zagadnień tak, aby zapewnić ich najwyższy poziom.

Zalecane formaty

• Zdjęcia najlepiej umieszczać w formacie JPEG, ponieważ ich charakter pozwala na dobrą statystyczną kompresję stratną (format ten jest stworzony do tego typu zastosowań), nie nadaje się natomiast do grafik zawierających obszary o jednolitej barwie, jak zrzuty ekranu czy grafiki wektorowe.
• Rysunki, schematy, mapy i plany najlepiej wykonywać w programach do grafiki wektorowej i następnie zapisać wynik pracy w pliku Plain SVG, od niedawna format SVG jest obsługiwany natywnie przez silnik Wikipedii.
• Zrzuty ekranu należy zapisywać w tym formacie PNG i w miarę możliwości przeprowadzić redukcję liczby kolorów, tak aby zmniejszyć rozmiar pliku.
• Animacje należy wykonać w formacie GIF, z użyciem ograniczonej, indeksowanej palety barw, ponieważ jest to jedyny, obecnie, dopuszczany na wiki format obsługujący animacje, w innych zastosowaniach należy unikać tego formatu. Grafiki w nim zapisane mają ograniczoną możliwość oddawania dużej dynamiki zmian barw i w takich sytuacjach format ten się nie sprawdza. Silnik Wikipedii nie potrafi także odpowiednio skalować kolejnych klatek animacji, stąd rozmiar grafiki musi być w docelowym rozmiarze w jakim ma znaleźć się w artykule.
  

Do obróbki grafik bitmapowych można wykorzystać m.in. darmowy program GIMP (tylko propozycja), bądź inny (jeżeli już jakiegoś używasz), patrz też wzory chemiczne.

grafika wektorowa

Do wektorówek można wykorzystać darmowy program Inkscape, zapisujący wyniki w uniwersalnym formacie SVG, bądź programy komercyjne takie, jak Adobe Illustrator, czy Corel Draw, lub jeszcze inne, które również potrafią obsługiwać format SVG (Corel od wersji 10).
Krótki kurs pracy z programem do grafiki wektorowej (na przykładzie Inkscape) można znaleźć pod tym linkiem.

obsługa SVG

Engine Wikipedii obsługuje renderowanie i umieszczanie na commons plików graficznych w formacie SVG, stąd nie ma już potrzeby tworzenia w programach do wektorówek, eksportów do PNG. Robi to za nas silnik Wiki. Jednocześnie grafiki SVG umieszczane są w postaci plików, stąd tak jak w przypadku innych plików ładowanych na serwery Wikipedii można określić rodzaj licencji, wybierając go z listy podczas ładowania grafiki na serwer.
Zachęca się osoby, które utworzyły grafiki wstępnie w formacie wektorowym a potem na Wiki umieściły renderingi w postaci plików PNG, z racji wcześniejszych ograniczeń mechanizmu Wikipedii, o w miarę możliwości podmianę na pliki wektorowe w formacie SVG.

• Należy tylko pamiętać, iż jeżeli do grafiki wektorowej w programie dodaliśmy podkład z grafiką bitmapową, to ten podkład nie jest dołączany do pliku SVG, więc wtedy na Wikipedii efekt będzie taki jakby tego podkładu nie było.
• Pliki SVG przed umieszczeniem na serwerze należy zapisać w "czystym" pliku SVG (programy graficzne często dodają swoje własne rozszerzenia SVG i silnik Wiki może ich nie zrozumieć, stąd trzeba wskazać na standardowy format SVG, w programie Inkscape jest to Plain SVG, robimy to przez wybór z menu File>Save As..> tu wybieramy z listy format "Plain SVG") i taki to plik dopiero umieszczamy na serwerze.
• Pliki w formacie Compressed SVG SVGZ nie są obsługiwane i serwer ich nie przyjmuje!
• Warto także każdy napis przekształcić w krzywą (w Inkscape zaznaczamy napis i wybieramy z menu Path: "Object to Path") w pliku przygotowanym do wysłania, utrudni to późniejszą reedycję napisu (stąd warto zapisać wcześniej oryginał pod inną nazwą), ale da to pewność, że zostanie on poprawnie wyświetlony, nawet jeżeli oglądający nie będzie miał stosownej czcionki.
  • Od pewnego czasu proponuje się podmianę wszystkich grafik umieszczonych w formacie bitmapowym, a utworzonych w sposób wektorowy, aby konwertować je do formatu "Plain SVG" (w Inkscape), bądź do innego SVG udostępnianego (ale takiego, który nie dodaje rozszerzeń specyficznych dla danego programu) przez dany program (Corel ma chyba trzy tryby - trzeba wybrać ten bez arkusza stylów i zewnętrznych dodatków, najbardziej prymitywny i najlepiej potem otworzyć taki plik w Inkscape, aby zobaczyć, czy rzeczywiście jest to ogólnie otwieralny poprawnie SVG). Dlaczego to podnoszę, ponieważ od pewnego czasu na commons ścigają mnie i kolejne moje ilustracje każą mi umieszczać w SVG usuwając odnośniki do tych w formacie PNG. Jest z tym trochę dużo pracy, bo kolekcję mam nie małą, więc to tak na przyszłość radzę, bo po fakcie poprawiać wszystkie odwołania do PNG na SVG, to zabawa, która zabiera dużo czasu, więc skoro są już możliwości warto umieszczać wektorówki.

eksport do PNG

Grafiki rysowane wektorowo można też, jak już, eksportować do formatu PNG, ponieważ zawierają one obszary o jednolitej barwie, ładnie i silnie dające się kompresować w tym formacie bezstratnej kompresji plików graficznych. Jednak ze względu na to iż Wikipedia obsługuje już domyślnie format wektorowy SVG nie zaleca sie eksportowania do PNG a umieszczanie plików w formacie SVG.

Umieszczanie grafiki

Aby grafika mogła być dodana do zasobów Wikipedii (i później, aby nikt jej nie skasował) należy ją udostępnić na otwartej licencji, która pozwala ją kopiować bez ograniczeń (nawet do celów komercyjnych) oraz pozwala na dokonywanie zmian.

Dodając do projektu grafikę należy ją: podpisać, opisać oraz wstawić oznaczenie licencji.

Grafiki najlepiej umieszczać we wspólnym, dla wszystkich projektów WikiMedia, repozytorium multimediów na Commons. Należy założyć sobie tam konto, potem w menu po lewo będzie pozycja "Upload file", pozwalająca dodać akceptowalne przez Wikipedię plik.
Umieszczając tam plik sprawiasz, że jest on "widoczny" na wszystkich lokalnych Wiki, innych narodowości, a nie tylko na polskiej.
W polach formularza podajemy plik który chcemy umieścić, następnie nazwę pod jaką ma być umieszczony plik (domyślnie taka sama jak ładowanego pliku), W dużym polu podajemy opis grafiki i następnie z listy poniżej wybieramy stosowną licencję na które udostępniany jest dany plik. Na koniec klikamy przycisk wysłania.

Do artykułu taką grafikę wstawia się, jakby była lokalnie w polskich zasobach.
Jeżeli masz problemy z angielskim, to na samej górze strony, po zalogowaniu na Commons, jest link: preferences, a następnie pole: Interface language: zmień sobie na polski, potem przycisk Save preferences i wejdź na dowolną nową stronę na Commons i już interfejs jest po polsku.

Opisywanie grafiki

Proponuje się wstawianie przynajmniej takiej struktury w pole opisu:

'''Author/autor:''' Imię Nazwisko, [http://link.do.obrazek.pl źródło] lub ~~~ '''Creation date/Data utworzenia:''' ~~~~~ / lub wpisać, gdy inna niż aktualna ==Description / Opis== {| ||{{pl}} ||{{en}} |- ||Opis po polsku ||Opis po angielsku |}

Zdjęcia

Schematy

• Zalecana grafika wektorowa, format SVG;
• Rysunki zgodne z zasadami rysunku technicznego lub innymi zgodnymi z dziedziną;
• Wielkość grafiki, uzależniona od czcionki użytej do opisów (w kółkach);
• Obiekty zaznaczać przez symbol litery bądź cyfry w kole, stosować symbole tak, aby rysunek był uniwersalny (do zastosowania na obcojęzycznych Wikipediach). Wielkość czcionki w kółkach opisowych (symbolach) podana w pikselach ....., wtedy to uzależni jak duży ma być obrazek, bo wymusi to, aby pomieściły się oznaczenia o takiej a nie innej wielkości???;
• Nie umieszczać na grafice opisów symboli; opisy te powinny znaleźć się w formie tekstowej obok licencji i danych o obrazku (dla zapewnienia uniwersalności językowej);
• Napisy czcionką bezszeryfową, np. Arial.

Biologia

• Zalecana grafika wektorowa, format SVG.

Kolorystyka poszczególnych układów w schematach ogólnych:

1. układ pokarmowy- odcienie zieleni (aby móc wyróżnić poszczególne odcinki układu),
2. układ nerwowy- (do strunowców- niebieski, od strunowców- żółty),
3. układ krwionośny- czerwień buraczana,
4. układ oddechowy- (do strunowców- szary, od strunowców- różowy),
5. układ kostny/chrzęstny - odcienie beżowo-pomarańczowobiały,
6. układ rozrodczy- brąz,
7. mięśnie- czerwień jaskrawa z białymi ścięgnami,
8. narządy wydzielnicze - jaskrawy pomarańcz
   

Będzie problem z człowiekiem, bo tu dokładność rysunków, wymusi używanie dużej palety barw nawet w obrębie jednego narządu, czy jego fragmentu. Stąd powyższe dotyczyć będą jedynie przekrojowych, poglądowych schematów ogólnych.

Chyba trzeba zrobić tabelkę i podać parametry barw w postaci kodów hex.

Rzuty konstrukcji lotniczych

rys.5.2.1 Przykład 4 rzutów konstrukcji lotniczej

rys.5.2.2 Przykład 3 rzutów konstrukcji lotniczej

• Zalecana grafika wektorowa, format SVG.
• Najlepiej cztery rzuty: z góry, z dołu, z boku (jeżeli duże różnice w symetrii z lewej i z prawej to oba boki), z przodu -rys.3.2.1. Opcjonalnie można dodać rzut z tyłu i ewentualnie w przypadku idealnej symetrii płatowca rzuty z góry i z dołu mogą być przedstawione razem, jak na rys.5.2.2
• Umieszczenie pełnej nazwy z wyróżnikami wersji.
• Umieszczenie paska podziałki ze skalą porównawczą, raczej unikać podawania poszczególnych wymiarów w celu nie zaciemniania obrazu.

Rysunki konstrukcji technicznych

• Zalecana grafika wektorowa, format SVG lub grafika bitmapowa w formacie PNG wyprodukowany z rysunku utworzonego na bazie typowego programu CAD.
• Rysunki zgodne z zasadami rysunku technicznego lub innymi zgodnymi z dziedziną.
• Umieszczenie paska podziałki ze skalą porównawczą, jak np. na rys. 5.2.1 i 5.2.2.

Schematy układów elektronicznych i instalacji elektrycznych/energetycznych

• Zalecana grafika wektorowa, format SVG lub ostatecznie grafika bitmapowa w formacie PNG najlepiej z programów branżowych (np. PSpice, Eagle).
• Rysunki zgodne z zasadami rysowania schematów elektronicznych, bądź instalacji energetycznych.

Mapy i plany

rys. 6.1. Wzorzec elementów do planów miast, w formacie SVG

rys. 6.2. Plan Jasnej Góry

• Zalecana grafika wektorowa, format SVG;
• Każdą mapę należy zaopatrzyć w ramkę z legendą;
• Na mapach sytuacyjnych i planach należy zaznaczyć kierunek północy, tak jak np. na tym planie Jasnej Góry;
• Wielkość grafiki, uzależniona od czcionki bazowej i obszaru terenu. jedna składowa długości minimum 800px;
• Opisy czcionką proporcjonalną, zgodnie z hierarchią ogólności (im ogólniejsza nazwa, tym większa czcionka, ...% wielkości czcionki nazwy bazowej), czcionka bazowa (minimalna ... w px);
• Wielkość czcionki w kółkach opisowych (symbolach) w pikselach .... ;
• Umieszczenie paska podziałki ze skalą porównawczą, jak np. na tym planie Jasnej Góry;
• Napisy czcionką bezszeryfową, np. Arial;

Plany miast

• Dobierając kolorystykę planu należy orientować się na istniejącą w polskiej i środkowoeuropejskiej tradycji paletę kolorów:
  • zabudowa mieszkaniowa przyjmuje kolor brązowy, tło zabudowy (lub teren zabudowany, jeśli nie przedstawiamy budynków) - mniej intensywny brąz lub beż.
  • budynki zabytkowe lub w jakiś sposób wyjątkowe - czerwień
  • zabudowa przemysłowa, składowa i kolejowa, tereny wojskowe - szary lub szarofioletowy
  • grunty orne itp., tereny bez określonej funkcji - jasny żółty, budyń, taki jak tło dyskusji
  • lasy, parki, zieleńce i ogrody działkowe - odcienie zieleni (od najciemniejszego)
  • Linie tramwajowe oznaczamy linią czerwoną ciągłą. Linie autobusowe ciągłą linią niebieską - za granicą częściej: czerwoną przerywaną. Linie szybkich kolei miejskich i metra czerwoną kropkową - za granicą: grubą ciągłą niebieską lub podwójną niebieską z naprzemiennym wypełnieniem białym i niebieskim, jeśli w tunelu. Linie kolejowe grubą ciągłą linią czarną lub podwójną czarną z naprzemiennym wypełnieniem czarnym i białym.
• Wszystkie ulice muszą być opisane, tu gdzie nie mieści się nazwa ulicy należy oznaczyć numerkami i opisać je w legendzie mapy.
  • Ulice w miarę możliwości opisywać pełną nazwą, tj. np. JÓZEFA HALLERA a nie HALLERA, jeśli mamy do czynienia z aleją podpisujemy AL. JÓZEFA HALLERA. Skrótu UL. nie piszemy.
  • Niektóre króciutkie uliczki osiedlowe jeżeli nie mają nazw, a adresy domów są przypisane do sąsiedniej "dużej" ulicy mogą pozostać nieopisane (warto jednak wstawić na niej znaczek i w legendzie opisać znaczek nazwą głównej ulicy). Tam duże dziury, bo całe fragmenty np. osiedla są przypisane do ulic jednej ulicy warto nałożyć na/pod dany teren półprzezroczysty lub pokryty szrarufą obszar, który wskazywałby, że jest on pod wspólną nazwą.
• Jeżeli zgodnie z jakąś tradycją numeracja domów i porządek ulic przypomina w paru miejscach "sen wariata", warto poumieszczać większe budynki wraz z ich numeracją, często denerwująca jest sytuacja, jak kupuje się plan a w nim nie podano, jaki jest sposób numeracji domów a ulica ciągnie się przez ~3km.
• Kościoły i cerkwie należy orientować, tzn. górny koniec krzyża należy umieścić w kierunku w którym znajduje się ołtarz główny (czyli np. jeżeli ołtarz główny (a tak jest najczęściej) jest we wschodniej części budynku, to krzyż "kładziemy" poziomo; jeżeli ołtarz jest w części północnej to krzyż stoi pionowo, jeżeli ołtarz jest w kierunku południowym to krzyż umieszczamy do góry nogami, itd.), nie dotyczy to zborów protestanckich i kapliczek, chyba że posiadają klarowną formę budowli orientowanej.
• Przykładowy prawie idealny plan umieszczony jest na rysunku 6.4 (jest on na Wiki w postaci pliku wektorowego SVG stąd można go sobie ściągnąć i użyć gotowych elementów we własnym planie) lub tu gotowy przykładowy plan.
• Na planie należy używać oznaczeń z rys. 6.1. (na Wiki umieszczony jest plik w formacie wektorowym SVG, co pozwala na użycie poszczególnych elementów podczas tworzenia planów (rendering widoczny na rys. 6.1. nie pokazuje wszystkich elementów, należy pobrać plik SVG, aby uzyskać dostęp do wszystkich elementów)).

Geograficznohistoryczne (mapy krain)

Zasady ogólne:

rys. 6.3. Wzorzec elementów w formacie SVG

• Umieszczanie skali w jakiej wykonana jest mapa jest niepraktyczne, bo grafiki ulegają skalowaniu w artykułach, stąd należy umieszczać zamiast tego pasek z podziałką kilometrową;
• Granice jak na wzorcu z rys.6.3;
• Wszystkie elementy jak na rys. 6.3;
• Szerokość rzek zależna od wielkości i zmieniana kolejno przez mnożenie szerokości w stosunku do najmniejszej z rzek.
• Szerokość dróg podobnie jak w przypadku rzek uzależniona od typu drogi, np.: wojewódzkie 2 px, krajowe 4 px, dwujezdniowe 6 px;
• Szerokość linii kolejowych zależna od liczby torów i ważności danej magistrali;
• Stolica danej ziemi - podkreślona.

Polityczne

rys. 6.4. Wzorzec planu miasta w formacie SVG

Plany obiektów i kompleksów architektonicznych

• obiekty zaznaczać przez symbol litery bądź cyfry w kole, stosować symbole tak, aby był uniwersalny (do zastosowania na obcojęzycznych Wikipediach).
• nie umieszczać na grafice opisów symboli; opisy te powinny znaleźć się w formie tekstowej obok licencji i danych o obrazku (dla zapewnienia uniwersalności językowej).
• w miarę możliwości przedstawiać obiekty tak, aby kierunek północy wskazywał górę rysunku.

Zrzuty ekranu

• Format zapisu PNG.
• Można umieszczać jedynie zrzuty z programów Open Source, zrzuty programów komercyjnych i freeware są grafikami fair use, ten typ grafiki nie jest już akceptowany na Wikipedii.

Herby i godła

• Zalecana grafika wektorowa, format SVG;
• Dłuższa krawędź minimum 800 pikseli.
  

Zasady tworzenia ujednoliconego wyglądu znaków heraldycznych, herbów i godeł znajdują sie w Projekcie: Herby.

Animacje

rys. 9.1. Oryginał

rys. 9.2. Pomniejszenie

• Zalecany format GIF
• Należy pamiętać, iż silnik Wiki nie potrafi skalować poprawnie plików animowanych GIF (przy zmianie rozmiaru wszystko się rozkłada). Stąd należy wykonać animację w rozsądnym rozmiarze np. 200px na 200px. Nie może być za duża ani za mała, tak aby było widać istotę zagadnienia. Zobacz na przykład: oryginał (rys.9.1) i poobserwuj pomniejszenie (rys.9.2).

Wzory chemiczne

• Proste liniowe typu np: C₂H₅OH - najprościej robić pisząc zwykły tekst C₂H₅OH z zastosowaniem tagu "sub" i "sup".
• Wzory strukturalne:
  • Format pliku PNG
  • Wykonać w którymś ze specjalizowanych programów do tworzenia tego rodzaju wzorów (Zalecane bezpłatne programy: ISIS DRAW pod Windows lub xDrawChem pod Linuksa) i wyeksportować jako PNG z maksymalną rozdzielczością na jaką pozwala program.
  • Do symboli pierwiastków w tych wzorach stosować czcionkę pogrubioną Arial, Helvetica lub podobną inną bezszeryfową, podobną do liternictwa stosowanego w rysunku technicznym o rozmiarze 12 punktów. Stosować kreski o standardowej długości dla wiązań chemicznych w danym programie z grubością 1px. Tło białe - litery i kreski czarne - chyba, że istnieje potrzeba wyróżnienia kolorem jakiegoś fragmentu wzoru.

Szablony

Diagramy szachowe

	a	b	c	d	e	f	g	h
8									8
7									7
6									6
5									5
4									4
3									3
2									2
1									1
	a	b	c	d	e	f	g	h

Gambit królewski

Przykład użycia szablonu diagramu szachowego. Dokładny opis: Dyskusja szablonu:SzachyDiagram.

{{Szachownica
| tright
| 
<!--  a  b  c  d  e  f  g  h
8 -->|rd|nd|bd|qd|kd|bd|nd|rd<!-- 8
7 -->|pd|pd|pd|pd|  |pd|pd|pd<!-- 7
6 -->|  |  |  |  |  |  |  |  <!-- 6
5 -->|  |  |  |  |pd|  |  |  <!-- 5
4 -->|  |  |  |  |pl|pl|  |  <!-- 4
3 -->|  |  |  |  |  |  |  |  <!-- 3
2 -->|pl|pl|pl|pl|  |  |pl|pl<!-- 2
1 -->|rl|nl|bl|ql|kl|bl|nl|rl<!-- 1
      a  b  c  d  e  f  g  h -->
| Gambit królewski
}}

Szablon uniwersalny: 8x8

Przykład użycia szablonu uniwersalnego dla gier 8x8 oraz sposoby jego rozwinięcia opisuje instrukcja na stronie: Dyskusja szablonu:8x8.

Diagram 8x8 dla szachów

	a	b	c	d	e	f	g	h
8									8
7									7
6									6
5									5
4									4
3									3
2									2
1									1
	a	b	c	d	e	f	g	h

{{Szachownica
| tright
| Diagram 8x8 dla szachów
<!--  a  b  c  d  e  f  g  h
8 -->|rd|nd|bd|qd|kd|bd|nd|rd<!-- 8
7 -->|pd|pd|pd|pd|  |pd|pd|pd<!-- 7
6 -->|  |  |  |  |  |  |  |  <!-- 6
5 -->|  |  |  |  |pd|  |  |  <!-- 5
4 -->|  |  |  |  |pl|pl|  |  <!-- 4
3 -->|  |  |  |  |  |  |  |  <!-- 3
2 -->|pl|pl|pl|pl|  |  |pl|pl<!-- 2
1 -->|rl|nl|bl|ql|kl|bl|nl|rl<!-- 1
      a  b  c  d  e  f  g  h -->
| 
}}

Diagram 8x8 dla reversi

	a	b	c	d	e	f	g	h
8									8
7									7
6									6
5									5
4									4
3									3
2									2
1									1
	a	b	c	d	e	f	g	h

Zaraz rozpoczniemy grę.

{{Szachownica
|game = reversi
| tright
| Diagram 8x8 dla reversi
<!--  a  b  c  d  e  f  g  h
8 -->|  |  |  |  |  |  |  |  <!-- 8
7 -->|  |  |  |  |  |  |  |  <!-- 7
6 -->|  |  |  |  |  |  |  |  <!-- 6
5 -->|  |  |  |OO|XX|  |  |  <!-- 5
4 -->|  |  |  |XX|OO|  |  |  <!-- 4
3 -->|  |  |  |  |  |  |  |  <!-- 3
2 -->|  |  |  |  |  |  |  |  <!-- 2
1 -->|  |  |  |  |  |  |  |  <!-- 1
      a  b  c  d  e  f  g  h -->
| Zaraz rozpoczniemy grę.
}}

Diagram 8x8 dla Warcabów

	a	b	c	d	e	f	g	h
8									8
7									7
6									6
5									5
4									4
3									3
2									2
1									1
	a	b	c	d	e	f	g	h

Tu chyba wygram ja.

{{Szachownica
|game = draughts
| tright
| Diagram 8x8 dla Warcabów
<!--  a  b  c  d  e  f  g  h
8 -->|  |kl|  |md|  |md|  |md<!-- 8
7 -->|  |  |  |  |md|  |md|  <!-- 7
6 -->|  |  |  |  |  |  |  |  <!-- 6
5 -->|md|  |  |  |md|  |  |  <!-- 5
4 -->|  |  |  |  |  |  |  |ml<!-- 4
3 -->|ml|  |  |  |ml|  |  |  <!-- 3
2 -->|  |  |  |ml|  |  |  |  <!-- 2
1 -->|ml|  |  |  |ml|  |kd|  <!-- 1
      a  b  c  d  e  f  g  h -->
| Tu chyba wygram ja.
}}

Oznaczania licencjonowania

• Szczegóły licencjonowania grafik dostępne na stronie omawiającej szablony.

Zobacz też

• Wikiprojekt:Grafiki wektorowe
• Jak robią to na angielskiej Wikipedii
• Tutoriale po angielsku
• Wskazówki na commons
• commons:Commons:Graphic Lab