Dodatek3. Grafika wektorowa

Prace studenckie

Dodatek3. Grafika wektorowa

Istota grafiki wektorowej i jej zastosowanie

w projektach komercyjnych

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

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.

Atrybuty obiektów

ej jako przykład podany był punkt z okre

lonymi współrz

dnymi i wielko

. 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

dowolna inna ilo

ść

atrybutów

w zale

ci od przyj

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

na np. mie

zdefiniowany

obiekt b

cy jakim

człowiekiem, który ma okre

lon

wysoko

ść

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

ść

ramion, długo

ść

palców...

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

Ró

nica polega tylko na tym,

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

lej - przypisaniu mu pewnego

gradientu), tutaj przy powi

kszaniu osi

gnie si

coraz wi

ksz

dokładno

ść

przej

cia mi

dzy kolorami

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

widoczne coraz wi

ksze obszary o jednolitym

zabarwieniu.

Przekształcenia obrazu

Dostosowywanie wielko

W przeciwie

stwie do grafiki rastrowej - grafika wektorowa jest grafik

w pełni skalowaln

, co

oznacza, i

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

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

one

widoczne zawsze w maksymalnej dost

pnej rozdzielczo

ci.

Inne przekształcenia

Opis matematyczny/ideowy jest główn

zalet

grafiki wektorowej ujawniaj

przy wszelkich

przekształceniach obrazu. W zwi

zku z niedokładno

oblicze

komputera mo

e si

zdarzy

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.

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

e by

dalece niezadowalaj

ca.

Prace studenckie

Zastosowania grafiki wektorowej

Fonty

Ze wzgl

du na konieczno

ść

skalowania fontów po

żą

dany jest ich zapis w formacie wektorowym.

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

je w dowolny sposób modyfikowa

na swoje potrzeby.

Grafika trójwymiarowa

W obecnych czasach poj

cie grafiki trójwymiarowej i wektorowej jest

le powi

zane. Dzi

zwi

kszeniu mocy obliczeniowej komputerów mo

na coraz dokładniej okre

rzeczywisto

ść

i tworzy

dokładniejsze modele, które komputer b

dzie w stanie przetworzy

. Nale

y tu pami

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

ść

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

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

równie

ksze animacje tzw. Intro, które s

ksze jednak s

poprzedzane preloaderami.

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

redni

prezentacj

Prace studenckie

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.

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

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

poszarpane czy nie b

idealnie proste. Wszystkie

wymiary s

zawarte w wektorach. Dzi

ki temu rozwi

zaniu mo

na projektowa

z ogromn

dokładno

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

z ka

dej strony, dowolnie skalowa

, obraca

bez utraty swoich

pierwotnych proporcjonalnych parametrów.

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

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

kompilacj

swf,

jest on w praktyce formatem wewn

trznym dla

rodowiska Adobe (dawniej Macromedia). Mniej

popularne formaty: AI, CDR, WMF.

Programy u

ywane do tworzenia grafiki wektorowej

•

Adobe Illustrator,

•

Adobe Flash,

•

AutoCAD,

•

CorelDRAW,

•

Inkscape (patrz SVG),

Prace studenckie

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

, 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

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

o obci

ąż

eniu procesora,

na szybko

ść

którego nie mamy wpływu umieszczaj

c animacj

w Internecie – u

ytkownik mo

dysponowa

ró

nym sprz

tem.

Prace studenckie

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

nowym, je

li zajdzie taka potrzeba, bez konieczno

ci wymiany tego elementu w ka

dej cz

ęś

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

le trzyma

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

Warto

ci kolorów napisane w modelu RGB mo

na wprowadza

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

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

zyk

słu

żą

cy do opisu formy prezentacji (wy

wietlania)

stron

WWW

. CSS został opracowany przez organizacj

W3C

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

wietlana przez

przegl

dark

internetow

zawarto

ść

wybranego elementu (lub elementów) (

)

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

okna przegl

darki.

Wykorzystanie arkuszy stylów daje znacznie wi

ksze mo

liwo

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

zmiany w renderowaniu strony w zale

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

wspólne dla wielu dokumentów.}

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

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