Prace studenckie

1

Dodatek3. Grafika wektorowa

Istota grafiki wektorowej i jej zastosowanie

w projektach komercyjnych

1.

Wyja

ś

nienie poj

ę

cia grafiki wektorowej

Grafika wektorowa - jeden z dwóch podstawowych rodzajów grafiki komputerowej - obok grafiki

rastrowej zwanej czasem „bitmapow

ą

”. Ró

ż

nica mi

ę

dzy tymi dwoma polega na tym,

ż

e w pierwszym

opisywane jest co ma by

ć

wy

ś

wietlone, a w grafice rastrowej opisywane s

ą

szczegółowo

poszczególne piksele.

W grafice wektorowej wszelkie obrazy tworzone s

ą

za pomoc

ą

prymitywów, czyli prostych figur

geometrycznych. Figury te opisane s

ą

za pomoc

ą

parametrów, które tworz

ą

wektor - st

ą

d nazwa

grafika wektorowa. Obraz generowany jest przez komputer na podstawie takiego wła

ś

nie opisu

danego przedmiotu (rysuj

ą

c np. koło o okre

ś

lonym promieniu i poło

ż

eniu). St

ą

d grafik

ę

wektorow

ą

nazywa si

ę

równie

ż

grafik

ą

obiektow

ą

, gdy

ż

obraz w tej grafice składa si

ę

z obiektów o okre

ś

lonych

atrybutach.

Najprostszym obrazem wektorowym mo

ż

e by

ć

pojedynczy punkt o okre

ś

lonym poło

ż

eniu.

W przestrzeni dwuwymiarowej wystarcz

ą

wtedy dwa atrybuty okre

ś

laj

ą

c poło

ż

enie w pionie

i w poziomie. Jednak aby komputer mógł narysowa

ć

punkt musi nada

ć

mu pewn

ą

grubo

ść

,

a dokładniej promie

ń

, bo punkt jest w praktyce rysowany cz

ę

sto jako kółko o niewielkim (w stosunku

do wielko

ś

ci pozostałych obiektów) promieniu.

2.

Atrybuty obiektów

Wy

ż

ej jako przykład podany był punkt z okre

ś

lonymi współrz

ę

dnymi i wielko

ś

ci

ą

. Inne atrybuty, to np.

kolor rysowania (kolor kreski lub obramowania), a tak

ż

e kolor wypełnienia (np. dla wn

ę

trza koła), czy

stopie

ń

prze

ź

roczysto

ś

ci obiektu (tzw. kanał alfa). Mo

ż

e istnie

ć

te

ż

dowolna inna ilo

ść

atrybutów

w zale

ż

no

ś

ci od przyj

ę

tych standardów, czy skomplikowania obiektów. Mo

ż

na np. mie

ć

zdefiniowany

obiekt b

ę

d

ą

cy jakim

ś

człowiekiem, który ma okre

ś

lon

ą

wysoko

ść

, kolor oczu, kolor włosów, długo

ść

ramion, długo

ść

palców...

Cz

ę

sto spotykanym dodatkiem jest mo

ż

liwo

ść

wypełniania niejednolitego podobnego jak

w programach od edycji bitmap, czyli wypełnianie gradientem, czy jakimi

ś

wzorkami (ang.: pattern).

Prace studenckie

2

Ró

ż

nica polega tylko na tym,

ż

e po wypełnieniu np. koła gradientem (

ś

ci

ś

lej - przypisaniu mu pewnego

gradientu), tutaj przy powi

ę

kszaniu osi

ą

gnie si

ę

coraz wi

ę

ksz

ą

dokładno

ść

przej

ś

cia mi

ę

dzy kolorami

(a

ż

do mo

ż

liwo

ś

ci komputera pod wzgl

ę

dem ilo

ś

ci kolorów). Natomiast w wypadku grafiki rastrowej,

po powi

ę

kszeniu nic si

ę

nie zmieni, czyli b

ę

d

ą

widoczne coraz wi

ę

ksze obszary o jednolitym

zabarwieniu.

3.

Przekształcenia obrazu

Dostosowywanie wielko

ś

ci

W przeciwie

ń

stwie do grafiki rastrowej - grafika wektorowa jest grafik

ą

w pełni skalowaln

ą

, co

oznacza, i

ż

mo

ż

na obrazy wektorowe powi

ę

ksza

ć

oraz zmienia

ć

ich proporcje bez uszczerbku dla

jako

ś

ci odbioru. Sama jako

ść

obrazu zale

ż

y w praktyce wył

ą

cznie od tego jak

ś

ci

ś

le zostanie ona

okre

ś

lona. Mo

ż

na np. włosy przedstawi

ć

jako pewien obszar ograniczony krzyw

ą

, a mo

ż

na ka

ż

dy włos

opisa

ć

odpowiedni

ą

krzyw

ą

. Tak czy inaczej dzi

ę

ki matematycznemu opisowi elementów b

ę

d

ą

one

widoczne zawsze w maksymalnej dost

ę

pnej rozdzielczo

ś

ci.

Inne przekształcenia

Opis matematyczny/ideowy jest główn

ą

zalet

ą

grafiki wektorowej ujawniaj

ą

c

ą

si

ę

przy wszelkich

przekształceniach obrazu. W zwi

ą

zku z niedokładno

ś

ci

ą

oblicze

ń

komputera mo

ż

e si

ę

zdarzy

ć

,

ż

e

parokrotny obrót obrazu rastrowego zniekształci go nieodwracalnie, nawet je

ś

li powróci do pozycji

pierwotnej (szczególnie widoczne przy obrocie obrazu o k

ą

t ró

ż

ny od wielokrotno

ś

ci 90 stopni).

Problem ten w ogóle nie dotyczy grafiki wektorowej, bo sam opis obrazu pozostaje niezmieniony -

zmienia si

ę

tylko stosowane na nim przekształcenie. Powy

ż

szy efekt jest niwelowany w niektórych

programach do grafiki rastrowej zapami

ę

tuj

ą

c pierwotny obraz, w istocie jednak jest to podej

ś

cie

wektorowe.

4.

Przetwarzanie do grafiki rastrowej

Obrazy w grafice wektorowej mo

ż

na łatwo przetwarza

ć

w obrazy bitmapowe podaj

ą

c jedynie

docelow

ą

rozdzielczo

ść

obrazu. Tak naprawd

ę

za ka

ż

dym razem tak

ą

operacj

ę

wykonuje komputer

przed wy

ś

wietleniem takiego obrazu na ekranie. W drug

ą

stron

ę

- operacja przetworzenia „bitmapy”

w "wektor" (wektoryzacja, trasowanie) jest bardzo trudna, wymagaj

ą

ca cz

ę

sto stosowania technik

z dziedziny sztucznej inteligencji. Dodatkowo przy bardziej skomplikowanych obrazach jako

ść

przetwarzania na grafik

ę

wektorow

ą

mo

ż

e by

ć

dalece niezadowalaj

ą

ca.

Prace studenckie

3

5.

Zastosowania grafiki wektorowej

Fonty

Ze wzgl

ę

du na konieczno

ść

skalowania fontów po

żą

dany jest ich zapis w formacie wektorowym.

Wi

ę

kszo

ść

obecnie powstaj

ą

cych fontów nie jest ju

ż

zwykłymi bitmapami wstawianymi zamiast

odpowiedniego kodu, tylko s

ą

opisane za pomoc

ą

krzywych Beziera i podobnych. Dzi

ę

ki temu mo

ż

ne

je w dowolny sposób modyfikowa

ć

na swoje potrzeby.

Grafika trójwymiarowa

W obecnych czasach poj

ę

cie grafiki trójwymiarowej i wektorowej jest

ś

ci

ś

le powi

ą

zane. Dzi

ę

ki

zwi

ę

kszeniu mocy obliczeniowej komputerów mo

ż

na coraz dokładniej okre

ś

la

ć

rzeczywisto

ść

i tworzy

ć

dokładniejsze modele, które komputer b

ę

dzie w stanie przetworzy

ć

. Nale

ż

y tu pami

ę

ta

ć

,

ż

e

tak czy inaczej na ekranie wy

ś

wietlany jest obraz dwuwymiarowy, st

ą

d opis wektorowy musi zosta

ć

odpowiednio przetworzony (np. sprawdzi

ć

, który obiekt zasłania który i wy

ś

wietli

ć

tylko ten na

pierwszym planie).

Strony internetowe

Obecnie na stronach WWW coraz wi

ę

cej jest widocznych animacji wykonanych w technologii Flash,

która to jest oparta na wektorach. Dzi

ę

ki temu rozwi

ą

zaniu przy odpowiednim i wła

ś

ciwym

zaprojektowaniu animacji nie musimy si

ę

martwi

ć

o jej rozmiar. U

ż

ytkownik zawsze zobaczy animacje

w doskonałej jako

ś

ci, wystarczy ze ustawi parametry takie jak wielko

ść

wy

ś

wietlanego obrazka oraz

jego jako

ść

. W projektowaniu stron WWW wa

ż

ny jest rozmiar dokumentu pobieranego z serwera.

Poniewa

ż

animacje Flash s

ą

wektorami wiec projektanci animacji jak i stron nie musz

ą

si

ę

martwi

ć

o to aby animacje szybko si

ę

wczytywały z serwera i mało zajmowały – maj

ą

c na my

ś

li bannery

internetowe – z racji swojej wektorowo

ś

ci s

ą

małe i szybko si

ę

ładuj

ą

. Oczy na stronach znajduj

ą

si

ę

równie

ż

wi

ę

ksze animacje tzw. Intro, które s

ą

wi

ę

ksze jednak s

ą

poprzedzane preloaderami.

Preloader to skrypt, który pobiera cały plik (animacje) z serwera przed jej bezpo

ś

redni

ą

prezentacj

ą

.

Prace studenckie

4

Druk

Poniewa

ż

grafika wektorowa jest grafik

ą

bezstratn

ą

, ma szerokie zastosowanie w druku. Raz

zaprojektowan

ą

grafika wektorowa mo

ż

na wykorzysta

ć

wielokrotnie do ró

ż

norodnych rzeczy.

Na przykład logotyp firmowy. Jest on umieszczany w ró

ż

nych miejscach, w ró

ż

nych wielko

ś

ciach – na

wizytówkach, papierze firmowym, kopertach do korespondencji, na materiałach biurowych, na

okleinach samochodach. W wy

ż

ej wymienionych przypadkach grafika jest drukowana i/lub wycinana

przy pomocy specjalnych urz

ą

dze

ń

zwanych ploterem. Ów urz

ą

dzenie odczytuje warto

ś

ci zwi

ą

zane

z wektorem (długo

ść

, szeroko

ść

, kolor) z pliku

ź

ródłowego, nast

ę

pnie wykonuje odpowiednie

obliczenia matematyczne tak aby dostosowa

ć

parametry do po

żą

danych.

Odzie

ż

Grafika wektorowa ma równie

ż

zastosowanie w projektowaniu odzie

ż

y. Projektant projektuj

ą

c dany

krój ubrania (koszulki, spodni, czapki, butów) przekazuje go do plotera tn

ą

cego, który wycina

z materiału gotowe elementy według wzorów zawartych w pliku z grafik

ą

wektorow

ą

. Kolejnym

zastosowaniem grafiki wektorowej w odzie

ż

y s

ą

wszelkiego rodzaju hafty ozdobne, loga i wzorki.

Je

ż

eli projektant ubioru zaprojektował odpowiednio cały ubiór (kolorystyk

ę

, umieszczenie wzorów,

krój) ów plik mo

ż

na dostarczy

ć

do kolejnej maszyny gdzie wykonywana jest matryca wzoru i nast

ę

puje

proces haftowania b

ą

d

ź

druku tak zwanego ‘sita’. Drukowanie sitem polega na wykorzystaniu

krzywych wektorowych do utworzenia warstw w kształtach krzywych wektorowych i wypełnienia nich

kolorem. Nast

ę

pnie matryca drukuj

ą

ca nanosi warstwy koloru jedn

ą

na drug

ą

i tym sposobem

powstaje kolorowy nadruk na ubraniu. W odró

ż

nieniu od haftu który ingeruje w struktur

ę

materiału,

druk sitowy pozostaje na powierzchni materiału. Zalet

ą

haftu jest jego odporno

ść

na ciepło,

w przeciwie

ń

stwie do sita, które pod wpływem ciepła si

ę

topi.

Budownictwo, architektura, projektowanie wn

ę

trz

Podczas projektowania ró

ż

nych elementów architektonicznych wykorzystywana jest grafika

wektorowa ze wzgl

ę

du na swoj

ą

dokładno

ść

i bezstratno

ść

. Nie ma obawy,

ż

e podczas

kompresowania grafiki brzegi elementu stan

ą

si

ę

poszarpane czy nie b

ę

d

ą

idealnie proste. Wszystkie

wymiary s

ą

zawarte w wektorach. Dzi

ę

ki temu rozwi

ą

zaniu mo

ż

na projektowa

ć

z ogromn

ą

dokładno

ś

ci

ą

poszczególne elementy wn

ę

trza a nast

ę

pnie wprowadzi

ć

wszystko do specjalnych

maszyn, które odlej

ą

, wytn

ą

żą

dane elementy. Grafika wektorowa wykorzystywana tutaj do budowy

elementów. Elementy mo

ż

na ogl

ą

da

ć

z ka

ż

dej strony, dowolnie skalowa

ć

, obraca

ć

bez utraty swoich

pierwotnych proporcjonalnych parametrów.

6.

Formaty zapisu grafiki wektorowej

Wiele programów ma wewn

ę

trzne formaty zapisu grafiki wektorowej, brak jest jednak powszechnych

standardów u

ż

ywanych i otwieranych przez liczne aplikacje, jak to ma miejsce w wypadku grafik

Prace studenckie

5

rastrowych. Do niedawna najbardziej uniwersalne były takie formaty jak EPS, czy PDF. Obecnie

popularno

ść

zdobywa promowany przez W3C, oparty na XML format SVG. SVG nie ma by

ć

jednak

tylko prostym opisem grafiki, ale ma tak

ż

e umo

ż

liwia

ć

zakodowanie animacji oraz interakcji

z u

ż

ytkownikiem poprzez u

ż

ycie wewn

ę

trznych skryptów takich jak np. JavaScript. Podobne

wła

ś

ciwo

ś

ci ma dost

ę

pny ju

ż

od 10 lat format SWF, jednak ze wzgl

ę

du na wst

ę

pn

ą

kompilacj

ę

swf,

jest on w praktyce formatem wewn

ę

trznym dla

ś

rodowiska Adobe (dawniej Macromedia). Mniej

popularne formaty: AI, CDR, WMF.

7.

Programy u

ż

ywane do tworzenia grafiki wektorowej

•

Adobe Illustrator,

•

Adobe Flash,

•

AutoCAD,

•

CorelDRAW,

•

Inkscape (patrz SVG),

Prace studenckie

6

8.

Zastosowania grafiki wektorowej w projektach internetowych na przykładzie programu

Adobe Flash 8 Professional

Profesjonalnym narz

ę

dziem do tworzenia grafiki wektorowej na potrzeby Internetu jest program firmy

Adobe Flash. Przedstawimy krótk

ą

charakterystyk

ę

jego mo

ż

liwo

ś

ci na przykładzie wersji

Flash 8 Professional.

Program jest doskonałym narz

ę

dziem do tworzenia animacji oraz grafiki w technice wektorowej.

Poniewa

ż

przepustowo

ść

ł

ą

cz jest ró

ż

na i jej wielko

ść

zale

ż

y od u

ż

ytkownika, rozwi

ą

zania technologii

Flash doskonale sprawdzaj

ą

si

ę

, poniewa

ż

nie wymagaj

ą

zbyt du

ż

ej ilo

ś

ci pami

ę

ci jak to jest

w przypadku grafiki rastrowej. Interfejs programu wygl

ą

da nast

ę

puj

ą

co:

Za pomoc

ą

dost

ę

pnych narz

ę

dzi mo

ż

emy tworzy

ć

ró

ż

norodn

ą

grafik

ę

wektorow

ą

. Flash posiada

tak

ż

e mo

ż

liwo

ść

umieszczania obrazków bitmapowych i korzystanie z nich podczas tworzenia

animacji. Nic jednak nie zast

ą

pi lekko

ś

ci i skalowalno

ś

ci obrazów wektorowych.

Prace studenckie

7

Przybornik narz

ę

dziowy posiada wiele przydatnych funkcji, dzi

ę

ki którym mo

ż

na tworzy

ć

grafik

ę

–

np. Pen Tool tworz

ą

cy krzywe Beziera.

Tworzenie animacji umo

ż

liwia tzw. Timeline, na którym umieszczone s

ą

klatki filmu. Istnieje wiele

sposobów zarz

ą

dzania tworzonymi sekwencjami. Wszystko odbywa si

ę

w sposób bardzo intuicyjny.

Istotna jest ilo

ść

klatek wy

ś

wietlanych w ci

ą

gu 1 sekundy – okre

ś

la to parametr fps (frames per

second). Zaleca si

ę

stosowanie 24fps wzwy

ż

, ale nale

ż

y równie

ż

pami

ę

ta

ć

o obci

ąż

eniu procesora,

na szybko

ść

którego nie mamy wpływu umieszczaj

ą

c animacj

ę

w Internecie – u

ż

ytkownik mo

ż

e

dysponowa

ć

ró

ż

nym sprz

ę

tem.

Prace studenckie

8

U

ż

yte obrazki oraz grafiki wektorowe u

ż

ywane podczas animacji trafiaj

ą

do Library – podr

ę

cznej

biblioteki plików. Dzi

ę

ki temu narz

ę

dziu bardzo łatwo mo

ż

na wymieni

ć

dany element i zast

ą

pi

ć

go

nowym, je

ś

li zajdzie taka potrzeba, bez konieczno

ś

ci wymiany tego elementu w ka

ż

dej cz

ęś

ci

animacji.

Istotnym elementem wpływaj

ą

cym na efektowno

ść

tworzonych animacji jest odpowiedni wybór

kolorów. Tworz

ą

c materiały reklamowe dla konkretnego klienta (firmy) nale

ż

y

ś

ci

ś

le trzyma

ć

si

ę

wytycznych zebranych w Ksi

ę

dze Identyfikacji Wizualnej – Corporate Identity.

Do wyboru kolorów słu

ż

y paleta barw. Mo

ż

emy tworzy

ć

wypełnienia jednolite, gradientowe, radialne

lub bitmapowe.

Prace studenckie

9

Warto

ś

ci kolorów napisane w modelu RGB mo

ż

na wprowadza

ć

r

ę

cznie. Dost

ę

pny jest te

ż

model

kolorów poprzedzony znakiem # stosowanym w j

ę

zyku HTML.

W projektach internetowych aby zachowa

ć

spójno

ść

animacji z pozostałymi elementami grafiki mo

ż

na

przenosi warto

ś

ci kolorów z pliku CSS prosto do programu Adobe Flash 8 Professional.

{Kaskadowe arkusze stylów (

ang.

Cascading Style Sheets, CSS) to

j

ę

zyk

słu

żą

cy do opisu formy prezentacji (wy

ś

wietlania)

stron

WWW

. CSS został opracowany przez organizacj

ę

W3C

w

1996 r.

jako potomek j

ę

zyka

DSSSL

przeznaczony do u

ż

ywania

w poł

ą

czeniu z

SGML

-em. Pierwszy szkic CSS zaproponował w

1994 r.

Håkon Wium Lie[1]

.

Arkusz stylów CSS to lista dyrektyw (tzw. reguł) ustalaj

ą

cych w jaki sposób ma zosta

ć

wy

ś

wietlana przez

przegl

ą

dark

ę

internetow

ą

zawarto

ść

wybranego elementu (lub elementów) (

X

)

HTML

lub

XML

. Mo

ż

na w ten sposób opisa

ć

wszystkie poj

ę

cia

odpowiedzialne za prezentacj

ę

elementów dokumentów internetowych, takie jak rodzina czcionek, kolor tekstu,

marginesy

,

odst

ę

p mi

ę

dzywierszowy lub nawet pozycja danego elementu wzgl

ę

dem innych elementów b

ą

d

ź

okna przegl

ą

darki.

Wykorzystanie arkuszy stylów daje znacznie wi

ę

ksze mo

ż

liwo

ś

ci

pozycjonowania

elementów na stronie, ni

ż

oferuje sam

(X)HTML.
CSS został stworzony w celu odseparowania struktury dokumentu od formy jego prezentacji. Separacja ta zwi

ę

ksza zakres

dost

ę

pno

ś

ci witryny, zmniejsza zawiło

ść

dokumentu, ułatwia wprowadzanie zmian w strukturze dokumentu. CSS ułatwia tak

ż

e

zmiany w renderowaniu strony w zale

ż

no

ś

ci od obsługiwanego medium (ekran, palmtop, dokument w druku, czytnik ekranowy).

Stosowanie zewn

ę

trznych arkuszy CSS daje mo

ż

liwo

ść

zmiany wygl

ą

du wielu stron naraz bez ingerowania w sam kod

(X)HTML, poniewa

ż

arkusze mog

ą

by

ć

wspólne dla wielu dokumentów.}

9.

Zastosowania technologii Flash

Technologia Flash wykorzystywana jest w Internecie do prezentacji du

ż

ych grafik wektorowych –

np. map. Sztandarowym przykładem realizacji jest Google Maps.

Prace studenckie

10

Istnieje wiele odpowiedników – polskich i zagranicznych wykorzystuj

ą

cych t

ę

technologi

ę

.

Program Adobe Flash 8 Professional umo

ż

liwia równie

ż

tworzenie całych stron internetowych w tej

technologii. Strony taki s

ą

zazwyczaj maja charakter promocyjny – efektownie przedstawiaj

ą

produkt.

Coraz cz

ęś

ciej stosowane jest na stronie video – klipy, muzyka itp. Wynika to z faktu powi

ę

kszenia si

ę

liczby u

ż

ytkowników stosuj

ą

cych ł

ą

cza szerokopasmowe w Polsce i na

ś

wiecie.

Przykładowych realizacje webowe we flashu:

Carlsberg.pl

Prace studenckie

11

Tissot.pl