Inkscape

Inkscape to darmowy i otwarty program do edycji grafiki wektorowej, często porównywany do Adobe Illustrator czy CorelDRAW.

W poniższym kursie pracować będziemy z programem Inkscape w wersji 1.3.2.

Format plików

Inkscape głównie operuje na formacie SVG (Scalable Vector Graphics), który jest standardowym formatem plików wykorzystywanych na stronach internetowych. Format SVG jest dobrze wspierany w przeglądarkach internetowych i idealnie nadaje się do tworzenia grafik, które mogą być skalowane dla różnych urządzeń.

Narzędzia i funkcje

Inkscape oferuje szeroką gamę narzędzi do rysowania i edycji, w tym narzędzia do tworzenia kształtów, ścieżek, tekstów, markerów, klonowania, edycji węzłów, przekształceń i wielu innych.

Wieloplatformowość

Program jest dostępny na różne systemy operacyjne, w tym MS Windows, macOS i różne dystrybucje Linuksa.

Jako projekt open‑source, Inkscape jest rozwijany i wspierany przez społeczność użytkowników i programistów, którzy stale pracują nad ulepszeniami i nowymi funkcjami.

Inkscape jest popularnym wyborem wśród grafików, projektantów, twórców ilustracji oraz hobbystów, oferując potężne narzędzia do tworzenia zaawansowanych grafik wektorowych bez kosztów związanych z komercyjnym oprogramowaniem.

Pierwsze kroki w programie Inkscape

Pierwszym oknem, które wyświetla się po uruchomieniu programu Inkscape (zaraz po jego instalacji, w tym przypadku wersji 1.3), jest zaprezentowany niżej panel ustawień preferencji dotyczących interface. Można w nim także wybrać parametry obszaru roboczego. Jest to centralna część interfejsu, gdzie faktycznie tworzysz i edytujesz swoje grafiki. Możesz manipulować obiektami bezpośrednio na tym obszarze.

R19fVVJ5cqg7Z
Ustawianie obszaru roboczego.
Źródło: Contentplus.pl Sp. z o.o., licencja: CC BY-SA 3.0.
R1ACzH5ep16TB
Ustawianie obszaru roboczego w Inkscape. 
Źródło: Contentplus.pl Sp. z o.o., licencja: CC BY-SA 3.0.

Dostosowanie i rozszerzenia

Inkscape pozwala na dostosowanie interfejsu i dodawanie rozszerzeń, co zwiększa jego funkcjonalność. Społeczność Inkscape regularnie tworzy i udostępnia nowe rozszerzenia.

RtZeJfkRwE6te
W oknie programu, które pojawia się zaraz po uruchomieniu, obok ustawień obszaru roboczego, znajdują się opcje wyboru motywu interface (ciemny i jasny). W naszych e‑materiałach wykorzystujemy zarówno zrzuty ekranu z programu z motywem jasnym, jak i ciemnym.
Źródło: Contentplus.pl Sp. z o.o., licencja: CC BY-SA 3.0.
R1P42KmftCfKW
W oknie programu, które pojawia się zaraz po uruchomieniu, obok ustawień obszaru roboczego, znajdują się opcje wyboru motywu interface (ciemny i jasny). W naszych e‑materiałach wykorzystujemy zarówno zrzuty ekranu z programu z motywem jasnym, jak i ciemnym.
Źródło: Contentplus.pl Sp. z o.o., licencja: CC BY-SA 3.0.
R1UuhIbpbmnWS
W oknie programu, które pojawia się zaraz po uruchomieniu, znajdziemy szereg ustawień obszaru roboczego.
Źródło: Contentplus.pl Sp. z o.o., licencja: CC BY-SA 3.0.
ReDOR4X4cK0UM
W oknie programu, które pojawia się zaraz po uruchomieniu, znajdziemy szereg ustawień interface, w tym szablony zmieniające wygląd całej aplikacji.
Źródło: Contentplus.pl Sp. z o.o., licencja: CC BY-SA 3.0.

Okno programu

Z lewej strony okna znajdują się narzędzia (2). Po wybraniu jednego z nich bezpośrednio nad obszarem roboczym wyświetlone zostają jego właściwości (4).

1
R1FTRi7YyOYQE1
Wersja alternatywna wyświetla się w trybie dostępności.
Kliknij numer na zrzucie ekranu, aby zobaczyć dodatkową informację.
Źródło: Contentplus.pl Sp. z o.o., licencja: CC BY-SA 3.0.

Ilustracja interaktywna przedstawia okno programu Inkscape. Głównymi elementami okna, jest obszar na którym znajdują się edytowane obiekty. Z prawej strony znajduje się lista warstw oraz obiektów, na górze okna swoje miejsce ma pasek narzędzi.

Na ilustracji znajdują się punkty interaktywne, po kliknięciu w które pojawia się ramka z tekstem. W punktach przedstawiono elementy znajdujące się w oknie programu.

  1. Pasek narzędzi.Na górze okna znajduje się pasek narzędzi, który zawiera standardowe opcje plików (takie jak Nowy, Otwórz, Zapisz), a także opcje do edytowania (takie jak Wytnij, Kopiuj, Wklej) i kontrolę widoku (powiększanie, dopasowanie do okna).

  2. Przybornik (toolbox). Pasek z narzędziami do rysowania i edycji, takimi jak narzędzia do tworzenia kształtów (prostokąty, elipsy, gwiazdy, spirale), narzędzie do rysowania ścieżek, narzędzie tekstu oraz narzędzia do manipulacji i transformacji obiektów.

  3. Panel warstw i obiektów oraz panel właściwości zaznaczonych obiektów. Znajdujący się po prawej stronie panel pozwala na zarządzanie warstwami i obiektami w dokumencie. Użytkownicy mogą dodawać, usuwać, ukrywać i blokować warstwy oraz wybierać, grupować i sortować obiekty.

  4. Pasek opcji narzędzia. Pod paskiem menu, a nad obszarem roboczym, znajduje się pasek opcji narzędzia, który wyświetla opcje specyficzne dla aktualnie wybranego narzędzia. Na przykład, przy wyborze narzędzia do rysowania ścieżek, pasek ten pozwala na dostosowanie atrybutów ścieżki, takich jak grubość linii, styl i kolor.

  5. Obszar roboczy. Centralna część okna to obszar roboczy, gdzie użytkownik tworzy i edytuje swoje projekty. Obszar ten można dostosować, zmieniając jego rozmiar i skalę.

  6. Pasek statusu. Na samym dole okna znajduje się pasek statusu, który wyświetla pomocne informacje, takie jak opis aktualnie wybranego narzędzia, wskazówki dotyczące jego używania oraz informacje o aktualnym obiekcie, takie jak jego wymiary.

Z prawej strony okna umieszczono pasek kontroli przyciągania. Dzięki niemu możemy ustalić, czy obiekty mają być przyciągane do innych obiektów, siatki lub prowadnicy.

Największy obszar to obszar roboczy. Możemy rysować na całej białej powierzchni. Jednak obszar dokumentu to wyznaczona kartka papieru i w pliku docelowym domyślnie znajdą się tylko te obiekty, które mieszczą się na kartce. Jeśli zależy nam na tym, aby wyeksportować tylko niektóre lub wszystkie elementy, bez względu na to, czy znajdują się na kartce, czy poza nią, możemy zmodyfikować ustawienia domyślne.

Wreszcie na dole okna dostępna jest paleta kolorów oraz pasek stanu, na którym pojawiają się takie informacje, jak zastosowany kolor wypełnienia, bieżąca operacja, a także skala wyświetlania dokumentu.

Pracując w Inkscapie często zdarzają się sytuacje, w których niektóre elementy, takie jak pasek stanu czy przyborniki, wydają się nam zbędne. Możemy je ukryć, natomiast te, które już są ukryte, a akurat ich potrzebujemy, wyświetlić. W tym celu klikamy w menu kolejno [Widok]|[Wyświetl/Ukryj] i zaznaczamy właściwe elementy.

Pomimo różnic w interfejsie oraz nazwach niektórych narzędzi, zarówni Iknscape, jak i Adobe Ilustrator działają bardzo podobnie. Zwykle o wyborze któregoś z nich decyduje budżet oraz to, który układ wydaje nam się wygodniejszy. Jeśli natomiast chodzi o pliki wynikowe, oba programy dają takie same możliwości.

Ustawienia dokumentu

Po uruchomieniu Inkscape’a automatycznie tworzony jest nowy dokument o domyślnych właściwościach. Jeżeli przypadkiem go zamkniemy, można utworzyć nowy, korzystając ze skrótu [Ctrl]+[N] lub wybrać z menu [Plik]|[Nowy]. Za każdym razem pojawia się kartka w rozmiarze A4.

Oczywiście rozmiar oraz orientację kartki można w każdej chwili zmodyfikować. W tym celu wybieramy z menu [Plik]|[Właściwości dokumentu]. Przygotowując plik do publikacji w internecie, zwykle jako jednostki miary używamy pikseli. Jeśli natomiast dokument ma być drukowany, stosujemy się milimetry. W zakładce Wyświetlanie jednostki pojawiają się dwukrotnie: Strona czołowa oraz Wyświetlanie.

W podmenu Strona czołowa możemy wybrać Format obrazu, np. A4 oraz jednostki miary. Dodatkowo możemy ustalić orientację dokumentu oraz inne parametry.
Po prawej stronie w podmenu Wyświetlanie możemy zmienić jednostki, które będą wyświetlane podczas pracy w programie.

Jednostki warto ujednolicić, ponieważ przygotowując plik np. do druku, musimy pamiętać, aby zachować bezpieczny odstęp od krawędzi papieru oraz dodać spady drukarskie (spady to dodatkowy obszar na grafice do wydruku, który jest następnie obcinany). Jeśli zostawimy dwie różne jednostki, może się okazać, że kartka ma co prawda prawidłowy format, lecz na miarkach pojawia się inna jednostka i błędnie ustawimy odstępy i spady.

W tym samym oknie możemy też zmienić orientację kartki z domyślnej pionowej na poziomą. Zmiany są wprowadzane automatycznie, nie wymagają zatwierdzenia.

R1dvhUT2ZxlRk
Źródło: Contentplus.pl Sp. z o.o., licencja: CC BY-SA 3.0.
R1IUbZBc4kYR51
Źródło: Contentplus.pl Sp. z o.o., licencja: CC BY-SA 3.0.

Przy niedużych rozmiarach dokumentu jego skala wyświetlania to 100%. Po zmianie rozmiarów na większe Inkscape automatycznie dopasowuje skalę wyświetlania tak, aby cała kartka zmieściła się w oknie. Detale są wówczas słabo widoczne, trudno więc je modyfikować. W prawym dolnym rogu okna, na pasku stanu widoczna jest bieżąca skala. Można ją odpowiednio dopasować.

Druga możliwość to wybranie z przybornika lupy. Każde kliknięcie lewym przyciskiem myszy powoduje powiększenie skali, natomiast użycie prawego przycisku myszy zmniejsza ją.

Ostatnia opcja, z której korzysta się najczęściej i która wydaje się najbardziej intuicyjna, to użycie klawisza [Ctrl] oraz scrolla. Jeżeli naciśniemy [Ctrl] i jednocześnie przesuniemy scroll od siebie, skala powinna się zwiększyć. Aby ją zmniejszyć, nadal przytrzymujemy [Ctrl] i przesuwamy rolkę do siebie.

Należy oczywiście pamiętać, aby co jakiś czas zapisywać plik [Plik]|[Zapisz] (lub Zapisz jako, jeżeli chcemy zmienić nazwę). Domyślnym formatem Inkscape’a jest SVG (ang. *Scalable Vector Graphics *).

Pierwszy rysunek

Aby narysować okrąg lub prostokąt wybieramy z przybornika Okrąg lub Prostokąt, naciskamy lewy przycisk myszy i przeciągamy kursor wzdłuż przekątnej ekranu.

RVSL5q4WC9bm3
Film przedstawiający rysowanie kształtu bez wciśniętego klawisza kontrol.

Obraz wektorowy powstaje przy użyciu matematycznych obiektów geometrycznych, zwanych prymitywamiprymitywyprymitywami. Są to np. linie, krzywe i proste kształty, reprezentowane za pomocą punktów, ścieżek i węzłów. Stąd edycja obiektów w programie wektorowym polega najczęściej na zmianie położenia tworzących go punktów, węzłów albo zmianie kształtu ścieżek.

R11nsZt3tixdd
Ilustracja przedstawiająca linie i figury geometryczne. W lewym górnym rogu 1) ukośna linia przerywana i pozioma linia prosta, w prawym górnym rogu 2) linia falowana, w lewym dolnym rogu 3) kwadrat i nachodzący na niego trójkąt z obrysem przerywaną linią, w prawym dolnym rogu 4) koło i elipsa z obrysem. Ilustracja interaktywna 1. odcinki , 2. krzywe , 3. wielokąty , 4. koła i elipsy
Źródło: Contentplus.pl Sp. z o.o., licencja: CC BY-SA 3.0.

Ilustracja interaktywna przedstawia cztery rodzaje elementów.

Na ilustracji znajdują się punkty interaktywne, po kliknięciu w której pojawia się ramka z tekstem.

  1. Odcinki. Są to obustronnie ograniczone proste. Na ilustracji pokazany został odcinek narysowany linią ciągłą i odcinek narysowany linią przerywaną.

  2. Krzywe. Na ilustracji znajduje się krzywa przypominająca wykrzywione dwie parabole.

  3. Wielokąty. Na ilustracji znajduje się kwadrat oraz trójkąt. Obwiednia trójkąta została narysowana linią przerywaną.

  4. Koła i elipsy. Na ilustracji znajduje się zielone koło i niebieska elipsa z różową obwiednią.

Krzywe są złożone z co najmniej dwóch połączonych ze sobą węzłów.

R1cr3iPFnhRoz
Ilustracja przedstawiająca falowaną linię, na której przedstawiono jej elementy. Na początku linii 1) węzeł w postaci kropki. Z węzła wychodzi strzałka w górę przechylona wprawo, która jest 2) uchwytem (manipulatorem). Dalej kolejny 3) węzeł z dwoma 4) 5) manipulatorami po obu jego stronach. Na końcu linii 6) węzeł z 7) uchwytem skierowanym w dół. Ilustracja interaktywna 1. węzeł , 2. uchwyt (manipulator) , 3. węzeł , 4. uchwyt (manipulator) , 5. uchwyt (manipulator) , 6. węzeł , 7. uchwyt (manipulator)
Źródło: Contentplus.pl Sp. z o.o., licencja: CC BY-SA 3.0.

Ilustracja interaktywna przedstawia krzywą. Na krzywej znajdują się trzy punkty. Pierwszy na początku, drugi na środku, trzeci na końcu krzywej. Z pierwszego i trzeciego punktu biegnie wektor styczny do krzywej. Z drugiego punktu biegną dwa wektory styczne do krzywej.

Na ilustracji znajdują się punkty interaktywne, po kliknięciu w której pojawia się ramka z tekstem.

Wszystkie punkty znajdujące się na krzywej podpisane zostały jako węzły, a wszystkie wektory jako uchwyty, czyli manipulatory.

Węzły umieszczone na końcach krzywych zawsze mają taki sam typ. Natomiast wszystkie węzły znajdujące się między nimi mogą reprezentować inne rodzaje. Typy węzłów można modyfikować na każdym etapie pracy.

R1FeKxavwbCxV
Ilustracja przedstawiająca krzywą, na której zaprezentowano typy węzłów. 1) Węzeł ostry – na węźle utworzono kąt ostry, linia z każdej strony węzła ma inną krzywiznę, uchwyty skierowane są w dół. 2) Węzeł gładki – gładkie przejście między segmentami linii, linia z każdej strony węzła ma inną krzywiznę, dwa uchwyty różnej długości naprzeciwko siebie. 3) Węzeł symetryczny – gładkie przejście między segmentami linii, linia po obu stronach węzła ma taką samą krzywiznę, uchwyty znajdują się naprzeciwko siebie i mają takie same długości. Ilustracja interaktywna 1. węzeł ostry , 2. węzeł gładki , 3. węzeł symetryczny
Źródło: Contentplus.pl Sp. z o.o., licencja: CC BY-SA 3.0.

Ilustracja przedstawiająca krzywą, na której zaprezentowano typy węzłów.

1) Węzeł ostry – na węźle utworzono kąt ostry, linia z każdej strony węzła ma inną krzywiznę, uchwyty skierowane są w dół.

2) Węzeł gładki – gładkie przejście między segmentami linii, linia z każdej strony węzła ma inną krzywiznę, dwa uchwyty różnej długości naprzeciwko siebie.

3) Węzeł symetryczny – gładkie przejście między segmentami linii, linia po obu stronach węzła ma taką samą krzywiznę, uchwyty znajdują się naprzeciwko siebie i mają takie same długości.

Grafiki wektorowe można wzbogacić o opcję obrotu czy efekt 3D. Przekształcenia geometryczne są nie tylko przydatne w precyzyjnych projektach architektonicznych czy modelarskich, to także ciekawy zabieg na stronach internetowych i w reklamie. Typowe zastosowania grafiki wektorowej: tworzenie logotypów, ikon, clipartów, infografik, czcionek, gier komputerowych, e‑reklam, schematów i rysunków technicznych (między innymi w oprogramowaniu CAD).

Słownik

grafika wektorowa
grafika wektorowa

dwuwymiarowa grafika komputerowa, w której obraz jest złożony z figur geometrycznych (np. odcinków, krzywych, okręgów, wielokątów), nazywanych elementami prymitywnymi

prymitywy
prymitywy

proste elementy, np. odcinek, krzywa, elipsa, wielokąt, z których buduje się obiekty