Grafika wektorowa, program Inkscape

Transkrypt

1 strona 1 Grafika wektorowa W grafice wektorowej wszelkie obrazy tworzone są za pomocą figur (brył) geometrycznych. Jest to grafika generowana w całości komputerowo. Inne określenia grafiki wektorowej: Grafika ilustracyjna, nazwa pochodzi od głównego zastosowania tworzenia ilustracji. Grafika obiektowa, obraz budowany jest z obiektów tzn. prostych figur geometrycznych (prymitywów). Każdy prymityw ma parametry, dla odcinka będą nimi współrzędne końców, dla okręgu współrzędne środka i długość promienia. Prymitywy mają też atrybuty (własności), typowym atrybutem dla linii (odcinka) jest grubość. Linia może mieć grubość zero, jest wtedy niewidoczna, ale może stanowić granicę dla obszaru. Typowe atrybuty dla obszarów to przezroczystość oraz sposób wypełnienia (jednolity kolor, gradient, patern mozaika powtarzających się wzorów). Często używanym prymitywem są krzywe Béziera. (Pierre Bézier był matematykiem francuskim , pracował

2 przez 42 lata w firmie Renault, opisał krzywe stosowane przy projektowaniu karoserii samochodowych.) Krzywa Béziera opisana jest przez punkty kontrolne P 0 ( x 0, y 0 ),, P n ( x n, y n ). Najczęściej stosuje się wielomianowe krzywe Béziera trzeciego stopnia. Takie krzywe mają cztery punkty kontrolne ( n = 3 ), ich równanie w postaci parametrycznej wygląda tak: strona 2 x t = 1 t 3 x 0 3t 1 t 2 x 1 3t 2 1 t x 2 t 3 x 3 y t = 1 t 3 y 0 3 t 1 t 2 y 1 3t 2 1 t y 2 t 3 y 3 t [0,1]. W grafice rastrowej przekształcenie obrazu (zmiana skali, zmiana proporcji, obrót, ) prowadzi z reguły do znacznego pogorszenia jakości.

3 strona 3 Oryginał: Po trzykrotnym powiększeniu: Możliwe (a częściowo nawet konieczne) jest konwertowanie grafiki wektorowej na rastrową i vice versa: Konwersja grafiki wektorowej na rastrową wykonywana jest zawsze przed wyświetleniem na monitorze(wydrukowaniem), konwersja uwzględnia rozmiar (rozdzielczość) tworzonego obrazu. Konwersja grafiki rastrowej na wektorową nazywana wektoryzacją jest trudna, podstawowym narzędziem jest wykrywanie krawędzi. Efekty działania niektórych algorytmów wykrywania krawędzi można zobaczyć w programie Gimp.

4 strona 4 Efekt działania filtru Różnicowe rozmycie Gaussa:

5 strona 5 Grafikę wektorową stosuje się, wtedy gdy jest stosunkowo mało szczegółów i nie jest potrzebny fotorealizm: Czcionki skalowalne, np. TrueType. Schematy naukowe i techniczne. Mapy i plany. Loga, herby, flagi i godła. Różnego typu znaki, (znaki drogowe). Część graficznej twórczości artystycznej (komiksy). Zalety grafiki wektorowej: Skalowalność, prostota opisu, możliwość łatwej modyfikacji poprzez zmianę parametrów obrazu. Dużo mniejszy rozmiar plików w przypadku zastosowań niefotorealistycznych (schematy techniczne, loga, flagi, herby, wykresy itp.), Możliwość używania ploterów zgodnie z metodą ich pracy. Bardzo dobre możliwości konwersji do grafiki rastrowej. Wady grafiki wektorowej:

6 strona 6 Ogromna złożoność pamięciowa obrazów fotorealistycznych (tzn. tworzonych komputerowo ale wyglądających jak pochodzące z rzeczywistości). Przy skomplikowanych obrazach rastrowych nieopłacalna obliczeniowo jest konwersji do postaci wektorowej. Formaty zapisywania grafiki wektorowej. Wiele programów do tworzenia grafiki wektorowej ma swój własny format, co utrudnia wymianę między aplikacjami. Uniwersalne formaty, to: EPS (Encapsulated PostScript) - podzbiór języka PostScript, służący do przechowywania pojedynczych stron grafiki wektorowej w postaci umożliwiającej osadzenie ich w w innych dokumentach. SVG (Scalable Vector Graphics) - format grafiki statycznej i animowanej, nieobwarowany licencjami i patentami, został stworzony i jest rekomendowany przez najważniejszą organizację zajmującą się standardami w internecie: W3C (World Wide Web Consortium), organizacja została utworzona w 1994 r. przez twórcę WWW i autora pierwszej przeglądarki Tima Berners-Lee.

7 W rozszerzeniu tego formatu zapisuje domyślnie pliki program Inkscape. Programy do grafiki wektorowej. Komercyjne: Adobe Illustrator (Windows i Macintosh), Adobe Flesh, można tworzyć animacje, CorelDraw, Xara Xtreme. Darmowe: Dia, Inkscape, OpenOffice Draw, XaraXtreme dla Linuksa. Program Inkscape strona 7 Program jest bezpłatny, można go pobrać np. stąd. Okno programu (wersja 0.48, wygląd domyślny) wygląda tak:

8 strona 8 Przykłady tworzenia obrazków. Flaga Szwecji. Ustalenie rozmiaru. Wg szwedzkiego prawa flaga jest prostokątem o proporcji boków 8:5. Ponadto pionowe ramię krzyża winno być między 5/16 a 7/16, poziome między 4/10 a 6/10. Żeby wyrażenia 1/ 16 szerokość oraz 1/10 wysokość nie były ułamkami, wybieram rozmiar pikseli oraz orientację poziomą. Plik => Właściwości dokumentu (Ctrl+Shift+D). Warto też skorzystać ze skrótu klawiszowego (5)

9 strona 9 lub przycisku do okna. by tworzony obrazek dopasował się Utworzenie ułatwiającej rysowanie siatki. Skrót (Ctrl+Shift+D) i zakładka Siatki. Wystarczy by linie siatki były rysowane co 20 piksli. Rysowanie tła. Korzystając z narzędzia Prostokąt rysujemy prostokąt o rozmiarach pikseli. Rysujemy, przeciągając kursor myszy od jednego wierzchołka do wierzchołka przeciwległego. Zaznaczamy narysowany prostokąt, wybieramy narzędzie Wypełnienie i

10 strona 10 kontur. Zgodnie ze szwedzkim prawem wybieramy kolor: R=0, G=90, B=173. Rysowanie krzyża. Korzystając z narzędzia Prostokąt rysujemy dwa prostokąty. Przy pomocy narzędzia Wskaźnik zaznaczamy oba prostokąty (przy zanaczaniu drugiego naciskamy klawisz Shift. Korzystając ze skrótu (Ctrl+'+') sklejamy prostokąty. Pokolorowanie krzyża. Zaznaczamy krzyż, wybieramy narzędzie Wypełnienie i kontur i wybieramy kolor:r=255, G=194, B=0.

11 strona 11 Zapisanie pliku. Dla pewnych formatów (np. SVG lub wewnętrzny format programu Inkscape) wystarczy wybrać Plik => Zapisz jako. Dla formatu PNG wybieramy Plik => Eksportuj jako bitmapę. Flaga Unii Europejskiej. Ustalenie rozmiaru i narysowanie tła. Poprawne proporcje, to 3:2. Wybieram rozmiar Kolor tła, to: R=0, G=51, B=153. Narysowanie prowadnic. Ułatwią one narysowanie gwiazdy. Umieszczamy kursor myszy na skraju obszaru rysowania i ciągniemy. Poprawić położenie prowadnicy możemy, wskazując ją narzędziem wskaźnik i otwierając (podwójnym kliknięciem) okienko dialogowe.

12 strona 12 Korzystając z narzędzia rysujemy jedną gwiazdkę w środku flagi, kolor: R=255,G=204,B=0, proporcje ramion ramion 0,382. Rysowanie ułatwi druga pozioma prowadnica, odległa od pierwszej o 10 pikseli. Klonujemy 12 razy gwiazdę (narzędzie ), klon różni się od zwykłej kopii tym, że zmiana oryginału zmienia również klon. Sklonowaną gwiazdę przesuwamy

13 Obiekt => Przekształć => Przesuń. A ściśle, to 12 razy zaznaczamy oryginalną gwiazdę, klonujemy ją i przesuwamy. Wielkość przesunięcia musimy wyliczyć, gwiazdy powinny być rozmieszczone równomiernie na okręgu o promieniu równym 1/ 3 wysokości flagi. Usuwamy centralną gwiazdę. strona 13 Dwukolorowe litery. Ustalamy rozmiar ( ) i parametry siatki (odstępy 50 pikseli, przyciągaj tylko do widocznych linii siatki. Rysujemy dwa prostokąty o wymiarach i wypełniamy je kontrastującymi kolorami.

14 strona 14 Usuwamy widoczność siatki. Korzystając z narzędzia Tekst wpisujemy jakiś tekst. Zaznaczamy tekst i korzystając z narzędzia Ścieżka => Obiekt w ścieżkę zamieniamy go w ścieżkę. Korzystając z przycisku tworzymy kopię właśnie utworzonej ścieżki w jednym miejscu rysunku są dwie identyczne ścieżki.

15 strona 15 Korzystając z edytora węzłów, dodajemy dwa węzły na granicy obszarów i usuwamy wszystkie węzły z żółtego tła. Zaznaczamy oba dodane węzły (zaznaczając drugi, trzymamy klawisz Shift) Korzystając z przycisku Split skracamy ścieżkę nową ścieżkę tworzą węzły z brązowego tła i dwa nowo dodane. W efekcie mamy pod spodem całą literę Z, na wierzchu dolną połowę litery Z. Zmieniamy kolor dolnej litery na żółty, górnej na brązowy. Puszka. Ustalamy rozmiary ( ), siatka co 10 pikseli. Korzystając z narzędzia Elipsa rysujemy dwie elipsy

16 - denka puszki. strona 16 Przekształcamy obie elipsy w ścieżki, górną kopiujemy (robimy duplikat). Z dolnej elipsy i leżącego na wierzchu duplikatu górnej elipsy usuwamy przy pomocy edytora węzłów górną półelipsę. Wybieramy edytor węzłów, zaznaczamy obie dolne półelipsy, przyciskiem łączymy skrajne lewe węzły i skrajne prawe węzły. Przyciskiem tworzymy krzywą zamkniętą złożoną z dwóch odcinków i dwóch półelips.

17 strona 17 Zaznaczamy górne denko i narzędziem Wypełnienie i kontur zmieniamy kolor (60,60,60,255). Tym samym narzędziem wybieramy dla ścianki bocznej wypełnienie gradientem. Uruchamiamy edytor gradientu pojawi się odcinek w poprzek puszki. Podwójne kliknięcie, w istniejący punkt uruchomi edytor koloru, podwójne kliknięcie pomiędzy punktami doda nowy punkt kontrolny. Wybrałem (od lewej) takie kolory: (60,60,60,255), (255,255,255,255) i (60,60,60,255).

18 strona 18