Grafika wektorowa złożona jest z obiektów zapisanych matematycznie. Dlatego grafikę tę nazywa się również obiektową. Najprostszymi obiektami są prymitywy, czyli figury geometryczne typu koło, kwadrat, trójkąt. Nie jest to obraz złożony z pikseli. Obiekty nakładają się na siebie w określonej kolejności, którą można zmienić. Każdy z obiektów można osobno modyfikować. Powiększenie obrazu nie powoduje pogorszenia jakości. Dlatego mówi się, że jest to grafika, którą można skalować (powiększać lub pomniejszać) bez straty jakości obrazu. Jest ona projektowana przez użytkownika, nie ma bezpośredniego przełożenia na obraz rzeczywisty. Grafika wektorowa może być odwzorowaniem otaczającego nas świata. Istnieje możliwość przetworzenia obrazu rastrowegoP1FSvxFyLobrazu rastrowego na wektorowy. Proces ten nazywa się wektoryzacją lub trasowaniem. W przypadku fotografiiPnp0sLUaQfotografii efekt znacząco różni się od oryginału. Fotografia traci swoją niepowtarzalną głębię barw.
Poniżej znajdziesz galerię przykładowych grafik wektorowych.
R1RLTDXXw0gaR
Na zdjęciu przedstawiony jest animowany jednokondygnacyjny domek wykonany jako grafika wektorowa. Po lewej stronie domu znajduje się drzewo.
Grafika wektorowa - domek
Źródło: Anna Koludo, Katarzyna Koludo-Durkiewicz, licencja: CC BY 3.0.
R18BTrhO7FU7z
Na zdjęciu przedstawiono ozdobną warstwę zdjęcia przypominającą rozgwiazdę. Poza krawędziami gwiazdy zdjęcie jest przyciemnione. W środku gwiazdy widać łodygi na których znajdują się muszle ślimaków.
Grafika wektorowa - ozdobna warstwa
Źródło: Anna Koludo, Katarzyna Koludo-Durkiewicz, licencja: CC BY 3.0.
R6xiacSjaHPKp
Na zdjęciu przedstawiono grafikę wektorową w formie ozdobnej warstwy zdjęcia przypominające rozgwiazdę. Poza centralną częścią grafiki, obramowanie jest znacznie przyciemnione i rozmazane. W środku zdjęcie jest ostre. Na zdjęciu widać kosy zboża na tle zachodu słońca.
Grafika wektorowa - ozdobna warstwa
Źródło: Pexels, GroMar, licencja: CC BY 3.0.
RdwFlq8rvWdCX
Na zdjęciu przedstawiono grafikę wektorową na której widać cień psa. Cień jest widoczny z boku.
Grafika wektorowa - pies
Źródło: Anna Koludo, Katarzyna Koludo-Durkiewicz, licencja: CC BY 3.0.
R1WoCbA9TO2SH
Na zdjęciu przedstawiono grafikę wektorową na której widać dzieci lepiące pierogi z jagodami. Dzieci stoją przy stole. Wycinają szklankami ciasto i sklejają pierogi. Pierogi wypełniają jagodami. W prawym górnym rogu grafiki znajduje się napis: Pierogi z jagodami. W prawym dolnym rogu widoczny jest tekst: warsztaty pierogarskie zapraszamy dzieci małe i duże w każdą środę i czwartek o godzinie szesnastej.
Grafika wektorowa - pierogi z jagodami
Źródło: Anna Koludo, Katarzyna Koludo-Durkiewicz, licencja: CC BY 3.0.
R198zYERDZrIh
Na zdjęciu przedstawiono grafikę wektorową na której widać trzy znaki drogowe. Pierwszy znak jest to znak ustęp pierwszeństw przejazdu. Drugi znak jest to oznaczenie drogi jednokierunkowej. Trzeci znak określa zakazu wjazdu.
Grafika wektorowa - znaki drogowe
Źródło: Anna Koludo, Katarzyna Koludo-Durkiewicz, licencja: CC BY 3.0.
Najczęściej wykorzystywanymi programami do tworzenia grafiki wektorowej są: Adobe Illustrator, CorelDRAW, Inkscape, Xara, 3D Studio Max, AutoCAD. Grafikę wektorową można zapisać w formatach zewnętrznych – odczytywalnych przez różne programy, np. w formacie EPS, PDF, SVG, a także w formatach odczytywanych tylko przez konkretne programy do grafiki wektorowej, np. w CDR (Corel Draw), DWG (AutoCAD). Istnieje możliwość eksportu plików obrazów wektorowych do formatów plików grafiki rastrowejPckIlQmcDformatów plików grafiki rastrowej, np. TIFF, JPG lub GIF.
Proponujemy ci zapoznanie się z programem Inkscape. Jest to program darmowy, posiadający bogatą funkcjonalność. Za jego pomocą możesz:
wstawiać i edytować różnego rodzaju kształty,
wstawiać i edytować bryły,
powlekać kształty różnymi kolorami, wzorami,
tworzyć i edytować krzywe,
edytować i formatować tekst,
wykorzystać dużą liczbę filtrów do zmodyfikowania wstawionych obiektów,
grupować obiekty,
pracować na warstwach.
Aby wprowadzić cię w tajniki projektowania grafiki wektorowej, proponujemy ci wykonanie kilku zadań.
Aby wprowadzić cię w podstawy projektowania grafiki wektorowej, proponujemy ci wykonanie kilku zadań. Ćwiczenia są wykonywane w programie Inkscape, możesz pobrać go ze strony https://inkscape.org/release/inkscape-1.2.2/.
Ćwiczenie 1
Nałóż ozdobną warstwę na wybrane przez siebie zdjęcie. Forma, kształt, struktura tej warstwy powinna być twoją twórczą inwencją.
Jeśli nie posiadasz odpowiedniej fotografii, skorzystaj ze zdjęcia załączonego poniżej.
Jeżeli napotkasz problemy z wykonaniem tego zadania, przeczytaj podpowiedź, w jaki sposób można je wykonać, wykorzystując program do grafiki wektorowej.
Przykładową ilustrację z ozdobną warstwą znajdziesz w galerii na początku materiału.
Aby zaprojektować ozdobną warstwę do wybranego zdjęcia, postępuj zgodnie z poniższą instrukcją.
Otwórz nowy dokument w wybranym edytorze grafiki wektorowej.
Wstaw wybrane zdjęcie, dla którego zaprojektujesz ozdobną warstwę.
Warstwę ze zdjęciem nazwij Tło.
Skopiuj warstwę ze zdjęciem i nazwij ją Ramka.
Narysuj na warstwie Ramka wybrany kształt, a następnie dopasuj go do rozmiarów fotografii.
Przytnij zdjęcie w warstwie Ramka do narysowanego kształtu, wykorzystując odpowiednie narzędzia programu.
Zdjęcie w warstwie Tło rozmyj za pomocą wybranego filtra i zmodyfikuj tak, aby wyraźnie odznaczał się od przyciętego zdjęcia w warstwie Ramka.
Grafikę wyeksportuj do formatu PNG i zapisz na swoim komputerze w wybranej lokalizacji.
Zapoznaj się z poniższym filmem prezentujący dodawanie ozdobnej warstwy do zdjęcia w programie Inkscape 1.2.
R1PrGyhV8cSnS
Film prezentujący rysowanie ramki do zdjęcia w programie Inkscape.
Film prezentujący rysowanie ramki do zdjęcia w programie Inkscape.
Film prezentujący rysowanie ramki do zdjęcia w programie Inkscape
Źródło: Anna Koludo, Katarzyna Koludo-Durkiewicz, licencja: CC BY 3.0.
Film prezentujący rysowanie ramki do zdjęcia w programie Inkscape
Źródło: Anna Koludo, Katarzyna Koludo-Durkiewicz, licencja: CC BY 3.0.
Film prezentujący rysowanie ramki do zdjęcia w programie Inkscape.
1
Ćwiczenie 2
Utwórz kształt wektorowy na podstawie zdjęcia rastrowego przedstawiającego wybrane zwierzę. Aby wykonać to zadanie pobierz plik z wybranym zwierzęciem lub wykorzystaj zdjęcie ze swoich zasobów.
Dokonaj importu wybranej fotografii do edytora grafiki wektorowej. Na kolejnej warstwie obrysuj kształt zwierzęcia. W tym celu skorzystaj z krzywych Béziera. Rysunek utworzy grafikę wektorową, którą dalej możesz przekształcać lub wypełniać kolorem.
R1NY2npJrRKzo
Plik do pobrania zawierający zdjęcia biegnącego psa z patykiem.
Plik do pobrania zawierający zdjęcia biegnącego psa z patykiem
Źródło: Anna Koludo, Katarzyna Koludo-Durkiewicz, licencja: CC BY 3.0.
Plik PNG o rozmiarze 6.84 MB w języku polskim
Jeżeli napotkasz problemy z wykonaniem tego zadania, przeczytaj podpowiedź, w jaki sposób można je wykonać, wykorzystując program do grafiki wektorowej.
Przykładową ilustrację przedstawiającą kształt zwierzęcia znajdziesz w galerii na początku materiału.
Aby zaprojektować kształt zwierzaka, postępuj zgodnie z następującą instrukcją:
Otwórz nowy dokument w wybranym edytorze grafiki wektorowej.
Wstaw wybrane zdjęcie zwierzątka, dla którego zaprojektujesz kształt.
Warstwę ze zdjęciem nazwij Tło.
Dodaj nową warstwę i nazwij ją Kształt.
Za pomocą narzędzia Pióro lub analogicznego, w trybie krzywych BézieraKrzywe Bezierakrzywych Béziera , obrysuj, na warstwie Kształt, widoczne zwierzę. Pamiętaj, aby zamknąć krzywą, tzn. zakończyć ją, klikając w pierwszy jej punkt.
Wypełnij narysowany kształt wybranym kolorem.
Zmniejsz krycie warstwy Kształt na 50% i sprawdź, czy narysowany kształt zwierzątka dokładnie pokrywa jego zdjęcie. Jeśli nie, dokonaj korekty, przesuwając, usuwając, dodając lub modyfikując węzły krzywej narzędziem do ich edycji.
Usuń warstwę Tło ze zdjęciem zwierzątka.
Grafikę zapisz w formacie SVG na swoim komputerze w wybranej lokalizacji.
Zapoznaj się z poniższym filmem prezentującym stworzenie przykładowego kształtu zwierzęcia w programie Inkscape 1.2. Jeżeli skorzystasz z własnego zdjęcia, wyglądać ono będzie zupełnie inaczej.
R13R2gA0KJz5l
Film przedstawiający rysowanie kształtu zwierzątka w programie Inkscape.
Film przedstawiający rysowanie kształtu zwierzątka w programie Inkscape.
Film prezentujący rysowanie kształtu zwierzątka w programie Inkscape
Źródło: Anna Koludo, Katarzyna Koludo-Durkiewicz, licencja: CC BY 3.0.
Film prezentujący rysowanie kształtu zwierzątka w programie Inkscape
Źródło: Anna Koludo, Katarzyna Koludo-Durkiewicz, licencja: CC BY 3.0.
Film przedstawiający rysowanie kształtu zwierzątka w programie Inkscape.
1
Ćwiczenie 3
Wykorzystując możliwości grafiki wektorowej, zaprojektuj ulotkę promującą warsztaty pierogarskie organizowane dla dzieci. Odpowiednie napisy i kształty umieść na tle fotografii.
Dokonaj importu wybranej fotografii do edytora grafiki wektorowej. Na kolejnych warstwach umieść kształty w wybranych kolorach pobranych z fotografii oraz teksty.
W celu wykonania zadania pobierz plik zamieszczony poniżej lub wykorzystaj własne zdjęcie.
RJrwjBvtZi9YZ
Plik do pobrania zawierający zdjęcie dzieci lepiących pierogi z jagodami.
Plik do pobrania zawierający zdjęcie dzieci lepiących pierogi z jagodami
Źródło: Anna Koludo, Katarzyna Koludo-Durkiewicz, licencja: CC BY 3.0.
Plik PNG o rozmiarze 5.61 MB w języku polskim
Jeżeli napotkasz problemy z wykonaniem tego zadania, przeczytaj podpowiedź, w jaki sposób można je wykonać, wykorzystując program do grafiki wektorowej.
Przykładową ulotkę znajdziesz w galerii na początku materiału.
Aby zaprojektować ulotkę, postępuj zgodnie z poniższą instrukcją.
Otwórz nowy dokument w wybranym edytorze grafiki wektorowej.
Ustaw wymiary dokumentu, dostosowując je do wymiarów wybranej fotografii.
Wstaw wybrane zdjęcie , które stanowić będzie tło ulotki.
Warstwę ze zdjęciem nazwij Tło.
Dodaj nową warstwę i nazwij ją Kształt.
Na warstwie Kształt dodaj kształty, w obrębie których zaprojektujesz informacje tekstowe. Kolorystykę kształtu pobierz z wybranego obszaru zdjęcia za pomocą narzędzia, np. Próbnik koloru i wypełnij kształty wybranym kolorem.
Wstaw i sformatuj tekst zapraszający na warsztaty pierogarskie.
Wyróżnij tekst tytułowy swojej pracy za pomocą filtrów.
Grafikę wyeksportuj do formatu PNG i zapisz na swoim komputerze w wybranej lokalizacji.
Zapoznaj się z poniższym filmem prezentującym stworzenie przykładowej ulotki w programie Inkscape 1.2.
R14RRLs1zqylE
Film prezentujący projektowanie ulotki w programie Inkscape.
Film prezentujący projektowanie ulotki w programie Inkscape.
Film prezentujący projektowanie ulotki w programie Inkscape
Źródło: Anna Koludo, Katarzyna Koludo-Durkiewicz, licencja: CC BY 3.0.
Film prezentujący projektowanie ulotki w programie Inkscape
Źródło: Anna Koludo, Katarzyna Koludo-Durkiewicz, licencja: CC BY 3.0.
Film prezentujący projektowanie ulotki w programie Inkscape.
1
Ćwiczenie 4
Wykorzystując proste kształty, zaprojektuj zestaw znanych ci znaków drogowych, takich jak: ustąp pierwszeństwa przejazdu, droga jednokierunkowa, zakaz wjazdu. Jeśli nie pamiętasz, jak wyglądają, wyszukaj je w zasobach sieci internet. Każdy element graficzny znaku wykonaj w innej warstwie.
Do wykonania tego zadania wykorzystaj możliwość rysowania obiektów prostych. W dostępnych narzędziach wyszukaj odpowiednie kształty, za pomocą których narysujesz znaki drogowe. Wykorzystaj również paletę kolorów, aby zastosować właściwą kolorystykę znaków.
Jeżeli napotkasz problemy z wykonaniem tego zadania, przeczytaj podpowiedź, w jaki sposób można je wykonać, wykorzystując program do grafiki wektorowej.
Przykładową ilustrację znaków drogowych znajdziesz w galerii na początku materiału.
Aby narysować znaki drogowe, postępuj według poniższej instrukcji.
Otwórz nowy dokument w wybranym edytorze grafiki wektorowej.
Pokaż siatkę, która pomoże ci poprawnie rozplanować przestrzeń rysunku.
Wprowadź tytuł rysunku, korzystając z funkcji Tekst.
Utwórz nową warstwę.
Narysuj pierwszy znak drogowy, stosując wybrane narzędzia spośród dostępnych w wybranym programie, np.: Prostokąt, Elipsa, Wielokąt lub inne. W rysunku zastosuj odpowiednie kolory, stosując funkcje wypełniania kolorem kształtów lub koloru obramowań. Dostosuj grubość linii krawędzi, korzystając z odpowiednich narzędzi programu.
W kolejnych warstwach wykonaj rysunki kolejnych znaków drogowych.
Rozmieść znaki, aby nie nachodziły na siebie.
Grafikę zapisz w formacie SVG na swoim komputerze w wybranej lokalizacji lub wyeksportuj do formatu PNG.
Zapoznaj się z poniższym filmem prezentującym stworzenie przykładowego zestawu znaków drogowych w programie Inkscape 1.2.
R1aOKEJ9S6otE
Film prezentujący rysowanie znaków drogowych w programie Inkscape.
Film prezentujący rysowanie znaków drogowych w programie Inkscape.
Film prezentujący rysowanie znaków drogowych w programie Inkscape
Źródło: Anna Koludo, Katarzyna Koludo-Durkiewicz, licencja: CC BY 3.0.
Film prezentujący rysowanie znaków drogowych w programie Inkscape
Źródło: Anna Koludo, Katarzyna Koludo-Durkiewicz, licencja: CC BY 3.0.
Film prezentujący rysowanie znaków drogowych w programie Inkscape.
Jeśli udało Ci się wykonać ćwiczenia i chcesz spróbować swoich sił w trudniejszych zadaniach - wykonaj poniższe polecenia.
2
Polecenie 1
Zaprojektuj ulotkę informującą o zbiórce nieużywanych już zabawek dla dzieci z domu dziecka. Na ulotce przedstaw pluszowego przyjaciela. Jego rysunek wykonaj za pomocą krzywych Béziera. Dodaj tekst i elementy graficzne podkreślające treść ulotki. Możesz wykorzystać dodatkowe efekty utrzymujące twoją pracę w określonym stylu. Pamiętaj, aby nie przeładować tego projektu niepotrzebnymi elementami zakłócającymi jego główną treść. Pracę wykonaj, wykorzystując układ wielu warstw.
2
Polecenie 2
Zaprojektuj plakat związany z akcją „Sprzątanie Ziemi”. Zachęć nim uczniów swojej szkoły do udziału w tej akcji. Do plakatu dodaj zdjęcia (elementy grafiki rastrowej) prezentujące piękno przyrody. Plakat zaprojektuj, wykorzystując układ wielu warstw.
Wykorzystaj poniższy dzienniczek do zapisania swoich notatek lub przemyśleń.
R1Y6t3IgUlB9i
Wersja alternatywna: (Uzupełnij).
Źródło: GroMar, licencja: CC BY 3.0.
Zapamiętaj!
Grafika wektorowa składa się z obiektów zapisanych matematycznie. Jest skalowalna, czyli nie ma strat jakości obrazu w wyniku jej powiększania i pomniejszania. Nie posiada struktury bitmapowej charakterystycznej dla zdjęć wykonywanych aparatami cyfrowymi. Do tworzenia grafiki wektorowej stosowane są odpowiednie programy.
Krzywe Beziera1
Krzywe Beziera
Są obiektem wektorowym składającym się z węzłów i łączących je segmentów. Segmenty są łukami o różnej krzywiźnie. Można dokonać edycji krzywej - zmienić krzywiznę segmentu, przesuwając punkty kontrolne węzłów.
