5 powodów, dla których warto uczyć się grafiki wektorowej

3. Grafika wektorowa i jej narzędzia idealnie pasują do dominującego aktualnie stylu ilustracji.

W przestrzeni komunikacji społecznej spotykamy coraz więcej ilustracji używających uproszczonych kształtów, symbolicznego odwzorowania, palety ograniczonej do kilku kolorów. Stylistyka, kojarzona jeszcze w połowie 20. wieku z komiksem i ilustracją w książkach dla dzieci, stała się uniwersalnym językiem wizualnym. 

Flat Design

W pierwszych latach 21. wieku sformułowano nowy paradygmat, nazwany Flat Design (płaski projekt). Dotyczył on pierwotnie głównie wyglądu interfejsu www, systemów, dokumentów i aplikacji. Jednak wkrótce Flat Design zaczęto odnosić również do ilustracji. Polegał on na używaniu uproszczonych kształtów i wypełnienia “płaskim kolorem”, bez gradientów. Zniknęły cieniowania, fotorealistyczna iluzja przestrzenności i materiałów. 

 W istocie, Flat Design nie jest to żaden nowy pomysł, a tylko tradycyjny styl graficzny, stosowany konsekwentnie i systemowo. Programy wektorowe, takie jak Adobe Illustrator, są narzędziami idealnie zaprojektowanymi do tworzenia takiej estetyki. Ponieważ większość ilustracji w stylu flat design jest kontynuacją stylistyki, która ukształtowała się w czasach “przedkomputerowych”, ciągle jeszcze wielu artystów cyfrowych trzyma się narzędzi tradycyjnie kojarzonych z rysowaniem i malowaniem – programów rastrowych, jak Adobe Photoshop, czy Corel Painter. Jednak, jeśli przyjrzymy się plastyce tych ilustracji, bardzo często okazuje się, że identyczną pracę można by bez trudu wykonać wektorowo. Jeżeli tylko składają się na nią głównie kształty posiadające krawędź, na pewno w programie wektorowym będzie dogodnie stworzyć chociażby wstępny etap. Z reguły wystarczy taką pracę dopracować teksturami w Adobe Photoshop, albo innym programie rastrowym, żeby przełamać wektorową “sterylność”. Prawdę mówiąc, wiele z wyglądających “analogowo” efektów, w ilustracjach można osiągnąć nie opuszczając programu do grafiki wektorowej.

4. Grafika wektorowa i jej Festiwal Gradientów.

Gradient jest jednym z rodzajów wypełnienia obiektów w grafice komputerowej. Oznacza “przepływ tonalny” – płynne przejście kolorów pomiędzy wartościami granicznymi. Gradienty są typowym elementem obrazów fotorealistycznych, np. zdjęć cyfrowych, gdzie prawie nie występują obszary literalnie jednolitego koloru. W rzeczywistości fizycznej niemal każdy centymetr kwadratowy jest oświetlony nieco innym światłem, stąd fotografia cyfrowa jest zasadniczo zbiorem przenikających się gradientów. 

Programy wektorowe posiadają rewelacyjne narzędzia do tworzenia i edycji gradientów. Łatwo jest jednak stworzyć wypełnienie gradientowe, wątpliwe pod względem estetyki, np. zbyt sztucznie, “komputerowo” wyglądające, lub bardzo niezharmonizowane kolorystycznie. Z tego powodu gradienty były przez wiele lat powszechnie krytykowanym elementem grafiki komputerowej. 

Prawdą jest, że zastosowanie gradientu np. w identyfikacji wizualnej stwarza problemy technologiczne (nie można stosować popularnych technik znakowania, jak np. wycinanie ploterem z folii samoprzylepnej, bądź innych materiałów). Uproszczona zasada zakazuje więc używania gradientów w identyfikacji wizualnej i tego typu propozycje są często krytykowane, w dużej mierze przez laików, którzy nauczyli się sztywnej zasady – gradienty = nieprofesjonalizm. Jednakże współcześnie wiele marek publikuje swoje znaki wyłącznie elektronicznie, czyli te problemy w ogóle ich nie dotyczą, gdyż wyświetlacze mają jakość fotorealistyczną.

Gradienty są elementem plastyki, który może nadać projektowi nośności albo go zepsuć, po prostu. Tak się składa, że w ostatnich latach przytomne użycie gradientów jest “trendy”. A programy wektorowe mają narzędzia do edycji gradientów o wyjątkowych możliwościach. Po raz kolejny w historii designu okazuje się, że nie ma żadnego definitywnego zakazu, tylko trzeba umieć. Ale to temat na osobny wpis.

5. Grafika wektorowa – deweloperzy platform elektronicznych kochają ją (ale ciągle nie wszyscy).

Tradycyjnie myśli się o formatach typu strona WWW, aplikacja mobilna, gra, jako o miksie obrazów rastrowych i tekstu HTML, formatowanych i rozmieszczonych na ekranie przy pomocy kodu. W większości przypadków tak jest, literalnie rzecz biorąc. Jednak ta sytuacja się zmienia w ostatnich latach, gdyż wektorowe obiekty w ekranowych multimediach wracają do łask wraz z rozwojem formatu SVG. Ponadto, programy wektorowe, takie jak Adobe Illustrator CC, dają możliwość pracy nad elementami layoutów w środowisku wektorowym, z wszystkimi jego dobrodziejstwami i wyeksportowania tychże elementów w dowolnej ilości do wszystkich wymaganych formatów, we wszystkich potrzebnych rozmiarach, za jednym zamachem.

W pionierskich czasach internetu strony WWW były projektowane głównie na dwa sposoby. Pierwszy, to zapisywanie elementów wyglądu strony bezpośrednio w kodzie html (na zasadzie – tło niebieskie, liternictwo żółte, z czerwonym cieniem, ramki, 8-bitowe animacje itp. Drugi – wyrafinowany, “profesjonalny”, polegał na utworzeniu obrazów wszystkich podstron całego site’u w Photoshopie i pocięcie tych makiet na tzw. “plasterki”, rozmieszczane w ramkach html. Dawało to możliwość tworzenia bardzo wyrafinowanego designu, bogatego w ozdobniki, fotomontaże, kolory i efekty. 

Od tamtych czasów minęło sporo czasu, dwadzieścia kilka lat. Obecnie wyglądy stron tworzy się na ogół w zupełnie innych standardach, zarówno technologicznych, jak i estetycznych i funkcjonalnych. Jako pokrewna dyscyplina wyrosło projektowanie aplikacji mobilnych, dzieląc z witrynami WWW podstawowe uwarunkowania UI i UX. Layouty formatów ekranowych są obecnie przeważnie oparte na siatkach modułowych, elementy graficzne są minimalistyczne, wspierają funkcjonalności, wizualizują architekturę informacji. Bogatsze plastycznie elementy – zdjęcia, ilustracje, mają swoje miejsce i swoją funkcję, nie są upychane gdzie się da, “dla uatrakcyjnienia”. Myślenie to jest przeniesionym na nowe media paradygmatem nowoczesnego designu publikacji z lat 50. i 60. Znakomicie zgrywa się ono z systemowym sposobem tworzenia tych form, opartych na tzw. frameworkach i hierarchicznych stylach CSS. Część projektantów wyglądów nośników ekranowych używa już od dawna narzędzi wektorowych, przynajmniej na etapie wstępnych makiet. Jest to logiczne, kiedy pracujemy z obiektami typograficznymi, prostą grafiką, (linie, boxy, piktogramy), a kluczowe dla całości projektów jest rozmieszczenie elementów i zachowanie dziesiątek spójnych reguł. Oprogramowanie wektorowe jest wręcz stworzone do takich zadań. Dokument Illustratora może odzwierciedlać wygląd docelowych “screenów” ze 100% perfekcją, jeśli odpowiednio go przygotujemy od początku. Dokładność do jednego piksela (pixel perfect precision) może być zachowana bez trudu, podobnie jak powtarzalność pewnych elementów, zarówno obiektów, jak i stylów. 

W Illustratorze zapiszemy dowolną ilość elementów jako Symbole, co oznacza, że w razie potrzeby zmiany wyglądu takiego elementu dokonujemy korekty w jednym miejscu i wszystkie “klony” tego obiektu zaktualizują się we wszystkich miejscach. Innym zaawansowanym narzędziem wspierającym projektowanie systemów wizualnych jest tzw. Eksport Zasobów. Szereg innych rozwiązań wspiera zachowanie spójności i powtarzalności elementów, ale również łatwość wariantowania, które jest kluczowym mechanizmem dochodzenia do ostatecznych wersji we współczesnej komunikacji wizualnej. Z kolei rozbudowane opcje panelu Eksport dla Ekranów, pozwalają na jednoczesne wygenerowanie wszystkich wydzielonych elementów w różnych formatach wymaganych przez różne platformy i systemy operacyjne. Tak więc, grafik nie tylko projektuje całościowy wygląd (makietę) strony WWW czy aplikacji mobilnej, ale i dostarcza osobom kodującym front-end (przeważnie za pomocą takiego czy innego CMS-a), gotowych elementów, które można umieścić w strukturze layoutu i w razie potrzeby automatycznie podmienić na poprawione. Ten proces przebiega sprawniej, niż w wypadku używania Photoshopa, angażuje też mniej mocy obliczeniowych.

SVG – wektor w HTML-u.

Wspomniany renesans obiektów wektorowych umieszczonych bezpośrednio w kodzie stron czy aplikacji, związany z rozwojem formatu SVG (również w wersji animowanej), pokazuje perspektywę nowej generacji form ekranowych, gdzie elementy mogą się skalować, zmieniać właściwości i przemieszczać swobodnie po ekranie, kierowane skryptem lub interakcją. Być może format SVG ma przed sobą podobną karierę jak wektorowy format SWF programu Flash w latach 90. i początkach 21.stulecia. Format SVG można łatwo wyeksportować z programu Adobe Illustrator CC (jak również zaimportować do niego).

Sfera grafiki wektorowej i jej różnych zastosowań jest to tematyka bardzo obszerna. Powyższy tekst jest, mam nadzieję, zarysem głównych korzyści, jakie osiągają użytkownicy korzystający z tej technologii, dla osiągnięcia różnorodnych celów.

Uzupełnieniem tego artykułu może być krótki przewodnik, opublikowany przez Quali – Szkolenia Komputerowe w grudniu 2021 w mediach społecznościowych, pod tytułem “Wektorowy Grudzień” (pobierz PDF poniżej).