› ekspertavimas › mddb › informacinės... · rastrinė ir vektorinė grafika2012-05-30 ·...

Klaipėdos „Aitvaro“ gimnazija

Rastrinė ir vektorinė grafika

interneto svetainių dizainui

Rengė informacinės technologijos

mokytoja metodininkė Julija Šerstobitova

Klaipėda

2

Turinys

ĮVADAS ........................................................................................................................... 3

RASTRINĖ GRAFIKA ..................................................................................................... 4

Pagrindiniai vaizdo parametrai ................................................................................................... 4

Spalviniai modeliai ...................................................................................................................... 4

Vaizdo dydis ir skiriamoji geba ................................................................................................... 7

Paveikslėlio spalvos gylis ............................................................................................................ 8

Rastrinės grafikos formatai .......................................................................................................... 9

Grafikos optimizavimas .............................................................................................................. 12

VEKTORINĖ GRAFIKA ................................................................................................ 14

Bendros žinios .............................................................................................................................. 14

Macromedia Flash galimybės ..................................................................................................... 14

SVETAINĖS PROJEKTAVIMAS .................................................................................. 16

Svetainės paskirtis, tikslas .......................................................................................................... 16

Svetainės struktūrinė schema .................................................................................................... 17

Svetainės dizaino parengimas ..................................................................................................... 18

Svetainės navigacija .................................................................................................................. 18

Spalvų gama .............................................................................................................................. 18

Pakopinių stilių šablonų panaudojimas ..................................................................................... 18

Grafikos įterpimas į tinklalapį ................................................................................................... 19

Paruošimas publikavimui, testavimas, priežiūra, perspektyvos ............................................. 19

PRAKTINĖS UŽDUOTYS ............................................................................................. 20

Photoshop ..................................................................................................................................... 20

Flash .............................................................................................................................................. 34

IŠVADOS ...................................................................................................................... 38

LITERATŪROS IR ŠALTINIŲ SĄRAŠAS .................................................................... 39

PRIEDAS ...................................................................................................................... 41

3

ĮVADAS

Šiuolaikinė elektroninė technika suteikia mums nuostabias galimybes gauti ir analizuoti

informaciją. Internetas dabartiniu metu — visuomenės informavimo priemonė, o žiniatinklis su

daugybe jų sudarančių tinklapių yra pagrindinis būdas plačiai skelbti informaciją elektroninėse

sistemose. Nekvalifikuotai parengus ir įterpus grafiką į tinklapį, atsiranda sunkumų, perduodant

informaciją ir vartotojas nesulankęs krovimosi, palieka tokius tinklapius. Be to, žmogus,

dirbantis su informacija, turėtų patirti ne tik emocinį pasitenkinimą, bet ir estetinį pasigėrėjimą.

Būtent todėl šiuolaikinėje informacinėje visuomenėje didelį vaidmenį, perduodant informaciją,

vaidina kompiuterinis dizainas. Kad publikavimas būtų sėkmingas, o dizainas efektyvus, būtina

išmanyti teoriją ir mokėti praktiškai naudotis turimomis žiniomis.

Darbo tikslas — sukurti svetainę, kuri padėtų informatikos mokytojams, žingeidiems

mokiniams mokytis grafinės rengyklės, kvalifikuotai optimizuoti grafiką ir sukurti patogius

vartotojui tinklapius.

Siekiant tikslo, reikia įvykdyti šiuos uždavinius:

Atskleisti pagrindinius vaizdo parametrus: spalvinį modelį, vaizdo dydį ir

skiriamąją gebą, paveikslėlio spalvos gylį.

Išaiškinti vektorinės ir rastrinės grafikos trūkumus ir privalumus.

Parengti praktinius uždavinius darbui su konkrečiomis grafinėmis

rengyklėmis (Macromedia Flash, Adobe Photoshop).

Išnagrinėti šiuolaikinius grafikos optimizavimo metodus Web-puslapui.

Parengti svetainės dizainą.

Paruošti medžiagą publikavimui internete.

Praktinio darbo reikšmė – ne tik išnagrinėti ir apžvelgti jau žinomą medžiagą apie

kodavimo ir optimizavimo grafiką, bet ir ugdyti mokinių meninį skonį ir lavinti kūrybiškumą.

Pateiktas šiame darbe praktines užduotis galima naudoti informatikos pamokose, mokant

„Informacinės technologijos“ bendro kurso ir nagrinėjant modulį „Multimedia“ (išplėstinis

kursas), papildomo ugdymo pamokose ir mokantis savarankiškai.

Tikiuosi, kad parengtas darbas padės padidinti mokymosi motyvaciją, t.y. suteiks

galimybes ne tik dirbti ir mokyti taip, kad būtų įdomu ir mokiniams, ir mokytojui, bet padės

ugdyti moksleivio informacinę kultūrą.

4

3 pav. Papildomos

spalvos

RASTRINĖ GRAFIKA

Pagrindiniai vaizdo parametrai

Visi grafinių failų formatai skirstomi dvi dideles grupes: rastrinius (taškinius) ir

vektorinius vaizdus.

Kiekvienas rastrinis vaizdas aprašomas trimis pagrindiniais parametrais:

spalvinis modelis,

vaizdo dydis,

paveikslėlio spalvos gylis.

Spalviniai modeliai

Daugeliui žmonių spalva pritraukia dėmesį prie

objekto arba, atvirkščiai, blaško dėmesį. Svetainės lankytojai,

norėdami to ar ne, reaguoja į spalvas ir kitus vizualinius

elementus nesąmoningai.

Norint parinkti svetainei harmoningas spalvas,

koreguoti spalvotus vaizdus ir suprasti darbo su spalvomis

principus, būtina suprasti spalvinį skritulį (žr. 1 pav.). Jis

plačiai naudojamos dizaine ir

programose darbui su grafika.

Raudona, žalia ir mėlyna

spalva yra pagrindinė

(žr. 2 pav.), nes būtent jos atsako už reikalingos spalvos susidarymą

vaizduoklio ekrane. Spalviniame skritulyje šios spalvos vienodai

nutolusios viena nuo kitos ir sudaro 120 kampą.

Pagrindinės spalvos įeina į adityvinių spalvų modelį (iš add –

sudėti), kuriam esant, sudėjus visas tris spalvas, susidaro balta spalva.

Tokiam modeliui priskiriamos ir RGB. Spalvos, kurios

priešpastatomos pagrindinėms, vadinasi papildomos (žr. 3 pav.).

Joms priklauso geltona, žydra ir purpurinė. Šios spalvos labai svarbios

spalviniam modeliui, kuriam esant spalva susidaro dėl dalinio

sugėrimo ir šviesos atsispindėjimo nuo objekto. Tokiam modeliui

priklauso CMYK.

Kontrastuojančios spalvos yra atskirtos viena spalva (raudona

ir žalia yra kontrastuojančios spalvos). Kontrastuojančios spalvos

beveik visada atrodo gerai tinklalapiui apipavidalinti. Besikertančios

2 pav. Pagrindinės

spalvos

1 pav. Spalvinis skritulys

5

spalvos skritulyje yra viena priešais kitą (raudona ir žydra, žalia ir purpurinė)1.

Pavyzdžiui, jeigu nuotraukoje yra žalios spalvos perteklius, tai šitą efektą galima

pakoreguoti, pridėjus atitinkamą besikertančią spalvą — purpurinę (mišinį raudonos ir mėlynos

atitinkančios RGB modelį). Ir priešingai, galima sustiprinti raudoną spalvą, jei sumažintume

mėlyną (mišinys žalios ir žydros pagal RGB modelį).

Spalvinis modelis – tai spalvos parametrų aprašymo būdas. Objektas, turintis kokią nors

spalvą, gali ją atspindėti arba sugerti. Paprastas pavyzdys: tamsiame kambaryje puikiai matoma

viskas, kas pavaizduota vaizduoklio ekrane, bet nesimato nieko, atspausdinus popieriaus lapą.

Priežastis ta, kad vaizduoklis yra šviesos šaltinis, jis spinduliuoja elektromagnetines bangas, o

popieriaus lapas — ar su vaizdu, ar be jo — šviesos neatspindi.

Tokiems objektams aprašyti naudojami skirtingi spalvų modeliai.

RGB spalvų modelis

RGB (red, green, blue — raudona, žalia, mėlyna) spalvinis modelis (žr. 4 pav.). Šis

modelis naudojamas prietaisuose, kurie spinduliuoja šviesą, pavyzdžiui, televizoriuose,

vaizduokliuose. Sumaišius visas tris

spalvas skirtingomis proporcijomis,

galima gauti visą atspalvių įvairovę. Visų

trijų spalvų 100% mišinys duoda baltą

spalvą, o mišinys 0% visų trijų spalvų –

juodą.

Šį spalvinį modelį galima

įsivaizduoti kaip trimatę koordinačių

sistemą. Kiekvieną spalvą, kurią mes

matome vaizduoklyje, atitinka taškas

kubo viduryje. Koordinačių pradžioje

(0,0,0) — juoda spalva, o tašką labiausiai

nutolusį nuo koordinačių pradžios,

atitinka balta spalva (1,1,1).

Spalvinės komponentės (pagrindinės spalvos) dar vadinamos spalviniais kanalais. RGB

yra trijų kanalų spalvinis modelis.

CMYK spalvų modelis

CMYK (cyan, magenta, yellow – žydra, purpurinė ir geltona) modelis, (žr. 5 pav.)

naudojamas poligrafijos pramonėje, pagrįstas rašalo sugėrimo savybėmis. Šis modelis tinka

1 Skaitmeninės leidybos kursų moduliai, Multimedijos mokytojai hhttttpp::////mmmm..mmcchh..mmiiii..lltt//mmoodduulliiaaii..hhttmm

B

G

R

Black

(Juoda)

Blue

(Mėlyna)

Cyan

(Žydra)

White

(Balta)

Green

(Žalia)

Magenta

(Purpurinė) Red

(Raudona)

Yellow

(Geltona)

4 pav. RGB modelio koordinačių

sistema

http://mm.mch.mii.lt/moduliai.htm

6

aprašyti daiktams, kurie nespinduliuoja šviesos. Pagrindinės CMYK modelio spalvos gaunamos

iš baltos spalvos atėmus pagrindines RGB modelio (adityvines) spalvas. Taigi vėl gauname tris

pagrindines spalvas: žydrą (balta minus

raudona), purpurinę (balta minus žalia)

ir geltoną (balta minus mėlyna). Trys

pagrindinės modelio RGB spalvos

maišant sudaro baltą spalvą, o trys

pagrindinės CMY modelio spalvos –

juodą spalvą. Tačiau poligrafijoje norint

gauti juodą spalvą, mėlynos, purpurines

ir geltonos spalvos dažiklių nemaišoma

dėl šių trijų priežasčių:

1. Sunku sukurti idealiai gryną

spalvą. Todėl, vietoj juodos

spalvos atsiranda pilka su

atspalviu.

2. Kuriant juodą spalvą išnaudojama daug dažų.

3. Spalviniai dažikliai brangūs.

Taigi prie trijų pagrindinių spalvų pridedama juoda spalva (K-blaK) ir modelis

vadinasi CMYK.

HSL spalvų modelis

Šis modelis pagrįstas ne fizinėmis šviesos savybėmis, o žmogaus suvokimu. Koreguoti

paveikslėlio spalvas naudojant tik RGB spalvų modelį labai sudėtinga ir beveik neįmanoma

intuityviai nuspėti, kaip pasikeis spalva, pakeitus RGB dedamųjų reikšmes. Todėl dažnai

pasitelkiamas HSL spalvų modelis (angl. Hue – spalvingumas arba spalvos spektras;

Saturation – spalvos sodrumas; Lightness – šviesumas). Taip koduojant spalvas paaiškėja, kokią

įtaką vaizdui turi kiekviena dedamoji. Pavyzdžiui, norint išrinkti mėlyną spalvą, reikia spalvų

spektro paletėje (Hue) surasti šią spalvą. Spalvos sodrumas arba intensyvumas parodo, kiek ši

spalva yra purvina (pilka). Esama kelių HSL modifikacijų: HSB, HSV.

Lab spalvų modelis

Spalvų modelis pagrįstas tuo, kaip žmogaus akis suvokia paveikslėlius. Jos panaudojimas

daro tinkamesnes daugybę operacijų. Vizualiai, gryna mėlyna spalva ne tokia ryški, kaip gryna

žalia ar raudona. Tokiu būdu, modeliuose CMYK ir RGB taškų ryškumas susijęs su jos spalva.

Modelyje Lab ryškumas atskirtas į atskirą komponentą L. Spalvos informacija laikoma kituose

dviejuose komponentuose:

C

Y

M Black

(Juoda)

Blue

(Mėlyna)

Cyan

(Žydra)

White

(Balta)

Green

(Žalia)

Red

(Raudona)

Yellow

(Geltona)

5 pav. CMY modelio koordinačių

sistema

Magenta

(Purpurinė)

7

a. Taško padėtis tarp grynos raudonos ir grynos žalios

b. Taško padėtis tarp grynos mėlynos ir grynos geltonos

Grafikos rengykleje Photoshop galima nustatyti skaičių reikšmes modeliams HSB, RGB,

LAB ir CMYK (žr. 6 pav.).

Vaizdo dydis ir skiriamoji geba

Svarbus taškinio vaizdo parametras – skiriamoji geba. Ji nusakoma taškų kiekiu ilgio

vienete, dažniausiai — colyje (inch) (1 colis=2.54 cm), ir žymima (angl. ppi= pixels per inch) arba

dpi (angį. dpi=dot per inch). Rastro taškas angliškai vadinamas dviem skirtingais terminais:

skaitytuvo bei monitoriaus pixel (žodžių picture ir element sutrumpinimas), spausdintuvo – dot

(angl. dot=taškas). Monitoriaus ekrano skiriamoji geba dažniausiai būna nuo 72 iki 120 ppi.

Spausdintuvų skiriamoji geba – 300, 600, 1200 dpi. Vaizdo skiriamoji geba ir jo dydis yra susiję

parametrai. Vaizdo kokybė priklauso nuo taškų skaičiaus piešinyje, kuo daugiau taškų — tuo

tiksliau matomos piešinio detalės. Piešinys su aukšta skiriamąja geba turi daugiau taškų nei

piešinys su žema skiriamąja geba. Pvz., 1x1 colio dydžio piešinys su skiriamąja geba 72 ppi turės

5184 taškus (72x72=5184). Tas pats piešinys su 300 ppi skiriamąja geba turės 90000 taškų.

Aukštesnės skiriamosios gebos piešinys geriau atkurs vaizdo detales ir spalvinius niuansus nei

žemos skiriamosios gebos piešinys. Tačiau didinant piešinio skiriamąją gebą, didėja failo dydis,

ilgiau užtrunka jo redagavimas, ilgiau spausdinama2.

Priklausomai nuo to, kur piešinys bus naudojamas — spausdinamas ar rodomas ekrane,

ar naudojamas internete, parenkama jo skiriamoji geba. Pavyzdžiui, tinklalapiams visiškai

2 D. Ambrazienė, J.Smolinskas, Adobe PhotoShop 7, Kaunas, 2003, p.17

6 pav. Spalvų paletė Photoshop

8

pakanka skiriamosios gebos 72 dpi, aukštos kokybės lazeriniam spausdintuvui — 200 dpi.

Lentelėje pateikti pasiūlymai, kokią skiriamąją gebą reikėtų naudoti3:

Vaizdo atvaizdavimas monitoriaus ekrane priklauso ne tik nuo vaizdo išmatavimų, bet ir

nuo monitoriaus ekrano dydžio ir jo skiriamosios gebos. Pvz., 15 colių monitorius dažniausiai

atvaizduoja 800 taškų horizontaliai ir 600 vertikaliai. Piešinys, kurio vaizdo dydis yra 600x800

taškų, užpildys visą ekraną. Pakeitus monitoriaus nustatymus į 1024x768 taškų per ekraną,

vaizdas užims tik dalį ekrano.

Paveikslėlio spalvos gylis

Kiekvieno vaizdo elemento spalva yra koduojama nustatytu bitų skaičiumi.

Vaizdai, kurių pikselio spalva koduojama tik 1 bitu (20=1), būna sudaryti tik iš juodų ir

baltų taškų. Tokie vaizdai vadinami binariniais.

16 variantų (spalvų) duoda 4 bitų rezultatą (24=16) — 4 bitų spalvas. Išnagrinėjant 4 bitų

pilkos spalvos atspalvių vaizdus, gausim rezultatus, pateiktus lentelėje4:

Spalvos

numeris

Dvejetainis

skaičius (bitas) Spalva

0 0000 balta

1 0001 6% pilka

2 0010 12% pilka

… … …

14 1110 94% pilka

15 1111 juoda

3 M. B. Karbo, Skaitmeninių vaizdų apdorojimas, AB Spauda, Vilnius, 2003

4 M. B. Karbo, Tinklapiai, AB Spauda, Vilnius, 2003, p. 51

Paveikslėlio tipas Idealus variantas

(pikselių į colį)

Minimali rezoliucija

(pikselių į colį)

Spalvotas paveikslėlis žurnalui ar

profesionaliam spausdinimui

300 ppi 225 ppi

Spalvotos skaidrės 300 ppi 200 ppi

Spaudinys lazeriniam spausdintuvui 180 ppi 120 ppi

Nespalvotas vaizdas lazeriniam

spausdintuvui

120 ppi 90 ppi

Spalvoti paveikslėliai WWW

tinklalapiams

72 ppi 72 ppi

Nespalvoti paveikslėliai skelbimams,

bukletams ir pan.

180 ppi 120 ppi

9

Kai naudojame 256 skirtingas spalvas jos išreiškiamos 8 bitais, 28=256. Taigi spalvos

gylis apibrėžia, kiek duomenų bus naudojama paveikslėlyje. Kuo daugiau bitų yra 1 pikselyje,

tuo daugiau spalvų galima naudoti.

16 bitų rastriniuose vaizduose kiekviena vaizdo elemento spalva koduojama sumažintu

bitų skaičiumi. 16 bitų vaizdai gali būti dviejų tipų:

RGB555 – kiekviena spalva koduojama 5 bitais (5 3=15 bitų viename

pikselyje),

RGB565 – žalia spalva koduojama 6 bitais5 (5 2+6=16 bitų=2baitų pikselyje) .

24 bitų vaizduose kiekviena vaizdo elemento spalva (RGB) koduojama 8 bitais.

32 bitų vaizduose kiekviena vaizdo elemento spalva (RGB) koduojama 8 bitais ir 8 bitai

saugo papildomą informaciją apie kiekvieno vaizdo pikselio skaidrumą, ši informacija dar

vadinama alfa kanalu, t.p. viso 4 baitų pikselyje.

Kuo daugiau spalvos gylio, tuo daugiau atminties reikia:6

Spalvos gylis Spalvų skaičius Informacijos kiekis

pikselyje

1 bit 2 1 bitas

4bit 16 4 bitai

8 bit 256 1 baitas

16 bit 65536 2 bailai

24 bit 16 milijonų 3 baitai

32 bit 4 milijardai 4 baitai

Rastrinės grafikos formatai

Išnagrinėjame lentelė:

Vaizdo dydis Rastras (nesuglaudintas)

3820 x 2550 3820 x 2550 x 3 baitų = 28 MB

3072 x 2048 3072 x 2048 x 3 baitų = 18MB

2560x1920 2560x1920x3 baitų = 14 MB

2272x1704 2272x1704x3 baitų = 11 MB

2048x1536 2048x1536x3 baitų = 9 MB

Nesunku pastebėti, kad nesuglaudintas vaizdas (24 bitų pikselyje) kompiuterio

atmintinėje užimą 9MB arba daugiau. Tai labai neekonomiška. Dėl to, glaudinimas

(kompresija) – yra būdas sumažinti bitų kiekį, reikalingą skaitmeninei informacijai saugoti

kietame diske ar perduoti tinkle.

5 Skaitmeninės leidybos kursų moduliai, Multimedijos mokytojai <hhttttpp::////mmmm..mmcchh..mmiiii..lltt//mmoodduulliiaaii..hhttmm>



10

Failo formatas – tai informacijos išsaugojimo būdas, kuris priklauso nuo to, kur vaizdas

bus naudojamas – ar skaidrėse, ar spaudoje, ar internete.

Interneto tinklalapiose taikomi du pagrindiniai rastrinės grafikos bylų formatai — GIF ir

JPG, ir mažiau paplitęs formatas – PNG (kol kas ne visos naršyklės jį supranta, bet jis turi ir

pliusų).

JPEG

JPEG – formatas palaiko CMYK, RGB ir GRAYSCALE spalvinius režimus, išlaiko visą

spalvinę informaciją RGB vaizduose ir sumažina vaizdo failo dydį, naudodamas kompresiją “su

informacijos praradimu”

JPEG – tai organizacijos, sukūrusios šitokia santrumpa žymimą duomenų glaudinimo

algoritmą, pavadinimo pirmosios raidės: Joint Photographic Experts Group — Jungtinė

fotografijos ekspertų grupė.

Pagal JPEG, algoritme išsaugant atvaizdą įsimenama ne kiekvieno atskiro vaizdo

elementas, o jų grupės spalva. JPEG formato kokybės skalė svyruoja nuo 0 iki 10 arba nuo 0

iki 100 – tai priklauso nuo naudojamos programos. Kuo skaičius mažesnis, tuo atvaizdas užima

mažiau vietos ir tuo blogesnė jo kokybė. JPEG dar vadinamas nuostolinguoju formatu (Lossy

file formats), nes juo išsaugojant atvaizdus prarandama dalis duomenų, taigi suprastėja

atvaizdo kokybė.

JPEG formatas buvo specialiai sukurtas spalvotoms nuotraukoms ir naudoja efektyvius

suspaudimo algoritmus, leidžiančius failą suglaudinti iki 1/20 savo originalaus dydžio dalies.

JPEG suteikia galimybę naudoti nuostabias spalvas ir sudėtingus atvaizdus, pvz.,

skaitmenines nuotraukas, tačiau šis formatas nėra skirtas naudoti paprastiems paveiksliukams.

JPEG suspaudimas gali sugadinti paprastus atvaizdus, ypač jei jie yra kelių spalvų arba turi

didelius tos pačios spalvos plotus. JPEG suspaudimas yra pritaikytas sudėtingiems, didelės

gebos atvaizdams ir visiškai netinka paprastiems mažos gebos paveiksliukams.

GIF

*.gif – suspaudimas, galima nurodyti spalvų kiekį. Naudojamas nedaug spalvų

turintiems paveikslėliams, animacijai.

"CompuServe" bendrovės "Graphics Interchange Format" (GIF) yra labiausiai pripažintas

ir paplitęs grafikos formatas pasaulyje. "Internete" naudojamos dvi šio formato versijos: GIF87a

ir GIF89a. GIF87a (pirminis standartas) naudojamas nuo 1987 m. GIF89a yra patobulintas, kuris

prideda animaciją ir permatomumą. "Netscape Navigator 2.0" ir "Microsoft Internet Explorer

3.0" bei vėlesnės šių naršyklių versijos supranta abu GIF formatus.

GIF yra taškinės grafikos formatas su indeksuotomis spalvomis. Paletėje, saugant spalvos

rodiklius, o ne tikras RGB vertes ir naudojant suspaudimo būdus, GIF galima suspausti

11

santykiu 1:4. Pagrindinis GIF formato trūkumas yra 256 spalvų paprastame atvaizde limitas ir

todėl šis formatas neužtenka realistiškiems gyvenimo vaizdams perteikti (pvz. nuotraukoms).

GIF formato paveiksliukuose galima vieną spalvą padaryti permatomą. Dažniausiai

permatomas būna paveikslėlio fonas. Tai leidžia išvengti tradicinės stačiakampio formos ir

sukurti bet kokios formos paveiksliuką.

PNG

*.png – naudoja suspaudimą. PNG-8 - *.gif analogas; PNG-24 - *.jpg analogas

PNG naudoja indeksuotas spalvas, realių 48 bitų spalvų gamą, 16 bitų nespalvotus

vaizdus. Laipsniški PNG pasikrauna daug greičiau ir anksčiau įgauna pakankamai gerą kokybę

skaitymui.

Tačiau PNG privalumai neapsiriboja spalvų ir pikselių tipų palaikymu. PNG naudoja

alpha kanalų permatomumą spalvotiems ir nespalvotiems atvaizdams. Alpha kanalai leidžia

pasirinkti kiekvieno atvaizdo pikselio permatomumo laipsnį, o tai leidžia sukurti spalvotus

atvaizdus, kurie yra iš dalies arba visiškai permatomi. Atvaizduose, kurie naudoja indeksuotas

spalvas, informacija apie permatomumą gali būti susieta su atskiromis spalvomis.

Nepaisant visų PNG privalumų, jam kol kas nepavyko pakeisti GIF ar JPEG formatų.

Populiariųjų naršyklių nesuderinamumas su PNG formatu yra pagrindinė priežastis, trukdanti

šiam formatui išpopuliarėti.7

Jei reikia keletą kartų redaguoti (atidaryti, uždaryti, išsaugoti, koreguoti) paveiksliuką,

geriau naudoti BMP formatą.

*.bmp – suspaudimo nenaudojantis formatas. Nėra informacijos praradimų.

Suformuluoju išvadas lentelėje8:

Failo formatas Komentarai

BMP Suspaudimo nenaudojantis formatas.

Naudojamas saugojant nesuglaudintą vaizdą, dėl to kad vėliau jį konvertuoti

į reikiamą formatą.

GIF Kompresija “be informacijos praradimų”. Šis formatas labiau tinka:

1. Nespalvotiems vaizdams arba spalvotiems piešinukams,

turintiems nedaug spalvų (iki 256).

2. Paveiksliukams, turintiems didelius vienos spalvos plotus

(pvz.: logotipams, animacijos kadrams).

3. Grafikos darbams (lineart).

4. Užrašams, tekstams, pabraukimams, kai reikia išsaugoti

aiškius kontūrus arba kampus.

JPEG Kompresija “su informacijos praradimu” — kuo didesnis

glaudinimo laipsnis, tuo didesni vaizdo kokybės nuostoliai. Šis formatas

labiau tinka:

7 Žurnalas Naujoji Komunikacija №48 2003 m.


12

1. Nuotraukoms, kurios turi daugiau nei 256 spalvas.

2. Realistiškiems paveikslams.

3. Vaizdams, kurie turi daugiau nei 256 pilkos spalvos

atspalvius.

PNG Mažiai paplitęs formatas, kadangi ne visos naršyklės jį supranta.

Grafikos optimizavimas

Interneto tinklalapiams labai svarbus paveikslėlių ir nuotraukų dydis. Kai grafika jau

paruošta, būtina ją optimizuoti.

Pirmasis optimizavimo etapas – išskirti nuotraukoje pagrindą, atmesti, kas nereikalinga ir

akcentuoti iliustruotus elementus. Tai pasiekiama kadravimu ir surandant ryškiausias dalis,

kurios perteikia nuotraukų vaizdą. Po šios operacijos jau galima optimizuoti vaizdą ir tada jis bus

mažiausio dydžio.

Formatai GIF ir JPG labai skiriasi ir naudoja įvairius optimizavimo metodus.

Vaizdo optimizavimas GIF formatu.

Šis formatas skirtas vaizdui išsaugoti ne daugiau kaip 256 spalvomis, išlaiko spalvų

paletę ir naudoja suspaudimą „be informacijos praradimo“.

Optimizavimo metodus galima suskirstyti į šiuos tipus:

Spalvų kiekio sumažinimas.

Vaizdo matmenų keitimas.

Išsaugojimo būdo pakeitimas – duomenų glaudinimas (interlaced naudojimas).

Spalvų kiekio sumažinimas

Daugelio vaizdų , jeigu tai nėra nuotraukos, būtinų spalvų kiekis dažniausia mažesnis

negu 256. Nereikalingas spalvas galima pašalinti iš vaizdo, sumažinus jo dydį. Tai įmanoma, nes

GIF išlaiko paletės spalvų rinkinį mažiau negu 256 spalvas. Teoriškai, mes galime išgauti bet

kokį kiekį paletės spalvų nuo 2–256, pvz., 37 spalvos arba 101. Praktiškai, spalvų kiekis vaizde

renkamas iš eilutės 2, 4, 8, 16, 32, 64, 128, 256. Tai susiję su tuo, kad renkantis spalvas visada

naudojamasi nustatytu bitų skaičiumi, o pateikti anksčiau skaičiai yra maksimalus spalvų kiekis

naudojamas nuo 1 iki 8 bitų viename pikselyje. Tuo atveju, kai yra naudojama, pavyzdžiui,

piešinyje tik 101 spalva, pikselio išsaugojimui vis tiek bus naudojami 7 bitai (27=128 spalvų).

Todėl optimizuojant spalvų kiekį, reikia kreipti dėmesį į pateiktą anksčiau skaičių eilę. Taip

gaunamas kokybiškesnis paveikslėlis.

Vaizdo dydžių iškraipymas

Šituo metodu negalima naudotis įprastiems paveiksliukams, bet jis labai tinka piešiniams,

sudarytiems iš linijų ir vienodų spalvų. Tarkim, reikalingas piešinys – kvadratas

100 100 pikselių. Norėdami sumažinti bylos dydį, reikia sukurti GIF juodos spalvos su vaizdo

13

dydžiu 1 1 pikseliu. Kaip paprastai, įterpiame į HTML-kodą, bet vaizdo dydį nurodyti tą, kuris

reikalingas (100 100). Pavyzdžiui, <IMG SRC= “1.gif” width=100 height=100 border=1>.

Failas 1.gif turi vaizdo dydį 1 1 pikselis, bet naršyklė jį „performuos“ iki 100 100ppi dydžio.

Tokiu būdu galima naudoti vieną pikselį GIF kitų spalvų, bet didžiausią naudą teikia

permatomas 1 1 GIF. Juo patogu sukurti pastraipos įtraukas, fiksuoti minimalų lentelės plotį

(aukštį) ir atlikti kitus pan. darbus.

Išsaugojimo būdo pakeitimas – duomenų glaudinimas (interlaced naudojimas)

Kai paveiksliukas saugomas paprastu būdu (non-interlaced), matoma tuo metu atsiųsta

aukštos kokybės paveiksliuko dalis. Lankytojui maloniau matyti ryškėjantį prastos kokybės

paveiksliuką negu laukti, kol bus atsiųstas visas paveiksliukas, ir matyti tik jo dalį. Ypač tuomet,

kai failai yra dideli, geriau pasirinkti saugojimo budo kaitą (interlaced).

Interlaced paveiksliukuose informacija saugoma nenuosekliai. Saugomos ne 1, 2, 3, 4, 5,

6 eilutės, kaip įprastame faile, bet 1, 4, 2, 5, 3, 6 ar pan. Kaita reiškia, kad vaizdą ekrane galima

atidaryti greitai ir visu dydžiu, nors ir blogesnės kokybės. Ekrane rodomas paveikslėlis

palaipsniui darosi vis ryškesnis. Jei lankytojo tai nedomina, galima vos pamačius kontūrus eiti į

kitą puslapį.

Vaizdo optimizavimas formatu JPG

Šis formatas naudoja suspaudimą „su informacijos praradimu“. Jis ne tiek daug turi

optimizavimo būdų, tiksliau – vieną: parinkti optimalų suspaudimo koeficientą.

Tokios operacijos atlikimas su kiekviena nuotrauka užima daug laiko. Todėl visus

vaizdus galima suskirstyti į keletą tipų (pvž.: nespalvotos nuotraukos, tonuotos nuotraukos

fotografijos, peizažais ir kt.) ir kiekvienam tipui reikia parinkti optimalų koeficientą. Vėliau

galima naudotis anksčiau rastu koeficientu visoms panašioms nuotraukoms.

JPEG formatas turi panašią savybę GIF formatą – saugojimo būdo kaitą (interlaced), tai

vadinama progresyviniu JPEG (progressiv mode). Skirtumas tas, kad kraunantis GIF kaitos

formatui, paveiksliukas vaizduojamas kas antrą taškų eilutę, o JPEG progresyvinis ryškėja taškų

kvadratėliais. Tai suteikia galimybę vartotojams iš karto įvertinti nuotrauką ir nuspręsti, ar verta

laukti jų atsiradimo. Visa tai leidžia sutaupyti truputį laiko peržiūrint puslapius.

JPEG 2000 — naujas formatas, naudojantis naują vaizdo suglaudinimo technologiją, kas

suteikia galimybę ženkliai sumažinti vaizdo dydį ir išsaugoti maksimalią kokybę. JPEG 2000

palaiko išplėstinį opcijos vaizdą su alfa kanalu ir papildomu suglaudimu „be praradimų“.

Nuo Adobe Photoshop 5.5 versijos atsirado pasirinkimas Save for Web, skirtas

paveikslėlių išsaugojimui pasaulinio voratinklio formatais: GIF, JPG, PNG. Ši paprogramė

padeda pasirinkti tinkamą kompresijos laipsnį, iš karto galima matyti iki keturių paveikslėlio

variantų su skirtingais kompresijos nustatymais.

14

VEKTORINĖ GRAFIKA

Bendros žinios

Vektorinės grafikos būdu vaizdas kuriamas iš daugybės taškų, linijų, judant spinduliui –

vektoriui, kuris sudaro stačiakampius, kvadratus, elipses, apskritimus, lankus ir kitas geometrines

figūras, kurios gali būti judinamos darbo lauke nepriklausomai viena nuo kitos. Pagrindinis

vektorinės grafikos elementas yra objektas – geometrinė figūra, turinti matematinėmis

formulėmis aprašomą kontūrą. Visas vaizdas yra sudaromas iš objektų, kurių kontūrų formulių

koeficientai saugomi atmintinėje kaip parametrai. Vektorinės grafikos vaizdų bylos yra palyginti

nedidelės, nes saugomas ne pats piešinys, turintis konkretų aukštį, bet tik būtiniausi jo

parametrai. Objektus lengva transformuoti, keisti dydį, nė kiek nepabloginant vaizdo kokybės.

Todėl vektorinė grafika labai naudinga tada, kai reikia ypač aiškių ir tikslių kontūrų, pavyzdžiui,

kuriant šriftus, logotipus, techninius brėžinius. Tačiau taikant vektorinį principą neįmanoma

sukurti tikroviškų vaizdų. Tai yra todėl, kad vektorinėj grafikoj viskas aprašoma objektais, kurie

yra didesni už pikselį. Praktiškai neįmanoma įvykdyti eksportą iš rastrinės grafikos į vektorinę,

tačiau iš vektorinės į rastrinę grafika visai tai daroma beveik automatiškai. Negalima skanuoti

iškart vektorine grafika (nėra vektorinių skanerių).

Macromedia Flash galimybės

1995 m JAV kompanija "Macromedia Inc." pristatė naują technologiją, kurią pavadino

"Macromedia Flash". Vienas ryškiausių 2002-ųjų įvykių programinės įrangos srityje yra naujos

Macromedia Flash versijos – Macromedia Flash MX – išleidimas. Oficialūs Macromedia

Flash MX reikalavimai kompiuteriui – Windows 98SE ar naujesnė OS versija, 64 MB RAM,

200 MHz ar spartesnis procesorius. Naujovės esmė – panaudoti interneto svetainėse vektorinę

grafika, kuri jau buvo plačiai paplitusi kitose, ypač poligrafinio dizaino srityse. Tačiau, norint

naudotis visais Flash technologijos teikiamais privalumais reikia turėti Flash Player, iį

nemokamai galima parsiųsti iš Macromedia svetainės www.macromedia.com. Lankytojas turi

galimybę matyti dinamiškus ir mielus akiai naujos kartos Interneto puslapius. Dažniausiai Flash

naudojama tose interneto svetainėse, kur forma ar įspūdis yra svarbiau nei turinys. Todėl neretai

animaciją naudoja reklamos ar dizaino agentūros ir panašios kompanijos, kuri pristato save ir

savo paslaugas. Interaktyvioji grafika paskutiniais metais pakeitė visą internetą: daugelis

tinklapių tapo judresni, spalvingesni ir labiau orientuoti į vartotoją. Prieš keletą metų pagrindinė

judančios grafikos varomoji jėga buvo animuota gif grafika, bet didžiausias trūkumas yra tas, jog

animuoti gif paveiksliukai užima labai daug vietos. Macromedia Flash išsprendė šią problemą,

naudojant naują veikimo principą: paprasčiausiai reikia sukurti pradinius ir galutinius kadrus, o

tarpinius kadrus sugeneruoja Flash programa, keisdama objektų dydį, spalvą, pasukimo kampą,

judėjimą. Tokios kuriamos bylos užima daug mažiau vietos. Flash programa gali kurti ir vaizdų

http://www.macromedia.com/

15

“kadras po kadro” būdu (kaip Gif animacijoje), tačiau tada prarandama galimybė sumažinti bylos

dydį. Su 4 versija Macromedia įtraukė ir skriptų klabą, kurią pavadino ActionScript. Flash 5

versija turi perdarytą ActionScript kalbą, kuri orientuota į objektinį programavimą, taip pat turi

integruotą programavimo aplinką. Tai reiškia, kad dabar Flash gali bendrauti su duomenų

bazėmis, būti dinamiška ir sukurti pilnai išbaigtas programas. Taigi Macromedia Flash –

programa, kurioje derinamas programavimas, vaizdas ir garsas, todėl ši technologija leidžia

programuotojams ir dizaineriams. Flash MX suderinama su lietuviškais rašmenimis.

Didžiausias iš visų Macromedia Flash MX trūkumų – didelė kaina. Tiesa, galima

išbandyti 30 dienų veikiančią nemokamą bandomąją versiją.

Patalpinti Flash objektą tinklalapyje galima sukuriant SWF bylą, kuri sujungia

daugialypius vaizdus ir duomenis į vieną bylą. Be to, programoje yra funkcija, kuri generuoja

Flash projekto HTML-kodą publikavimui internete (File/Publish).

16

SVETAINĖS PROJEKTAVIMAS

Svetainės paskirtis, tikslas

Tinklalapis – tai specialus tekstinis dokumentas, parašytas HTML kalba.

Svarbiausi tinklalapių kūrimo programų tipai yra du:

1. Tik tekstų redaktorius. Tai tinklalapio kūrimo būdas tiems, kurie jau moka

HTML kalbą ir gali rašyti tinklapius

2. WYSIWYG redaktorius. Veikia pagal principą: “Ką matau, tą ir gaunu” (angl.

WYSIWYG – What You See Is What You Get.

Lengviau kurti tinklalapius naudojantis specialiomis kūrimo rengiklėmis (pvž. Microsoft

FrontPage, Macromedia Dreamweaver, Netscape Composer, Home Site), kurios turi įvairių

priemonių darbui supaprastinti. Tačiau tinklalapių kūrimo kalbą HTML verta mokėti

kiekvienam, norinčiam kurti tinklalapius, nes gana dažnai prisireikia patiems daryti tai, ko

tinkamai nepadaro tinklapių rengyklės9. Kurdama savo svetainę, naudojau programėlę Notepad.

Tokiu būdu man patogiau naudotis CSS (pakopinių stilių šablonai) ir įterpti Flash

objektus.

Svetainė tikslas – padėti informatikos mokytojams, žingeidiems mokiniams mokytis

grafinės rengyklės.

Pateiktas praktines užduotis galima naudoti:

informatikos pamokose, mokant “Informacinės technologijos bendro kurso ir

nagrinėjant modulį “Multimedia” (išplėstinis kursas),

papildomo ugdymo pamokose,

ir mokantis savarankiškai.

9 V.Dagienė, Aidas Žandaris, Informacinės technologijos XI—XII klasėms, 2 dalys, TEV, Vilnius, 2003, p.204

17

Svetainės struktūrinė schema

Pagrindinis

puslapis

(Home Page)

Praktinės

užduotys

Photoshop

Flash

Naudinga

informacija

Žodynėlis

Literatūra

WebMaster

Kiekviename puslapyje

yra meniu patogiai

navigacijai į reikalingą

dalį.

Taip pat rodoma

puslapio

atnaujinimo data,

esama

data, laikas

Lietuviška

versija

18

Svetainės dizaino parengimas

Svetainės navigacija

Kiekvienas lankytojas nuo pagrindinio puslapio turi suprasti, kad svetainė sukuriamą

tiems, kurie domisi kompiuterine grafika.

Pagrindinis puslapis turi dvi nuorodos: lietuvišką ir rusišką versiją. Be to, yra

pastabų dėl geriausios rezoliucijos ir naršyklės versijos,

reikalinga nuoroda į FlashPlayer svetainei peržiūrėti.

Kiekviename puslapyje yra meniu (kairėje pusėje) patogiai navigacijai į reikalingą

svetainės dalį ir nuoroda į pagrindinį puslapį.

Spalvų gama

Įdomu, kad pirmas įspūdis apie svetainę lankytojams susiformuoja per pirmąsias

devynias sekundes10

. Reikia stengtis, kad spalvinė schema sustiprintų svetainės vaizdą, bet

neatitrauktų ir neklaidintų lankytojų.

Svetainės spalvų schemai naudojamos spalvos panašios tono atžvilgiu, bet skiriasi

sodrumu ir ryškumu. Pagrindinė spalva – žalia, charakterizuojama kaip neutrali, raminančiai

veikianti žmogų. Juodas tekstas aiškiai matomas šviesiame fone su vos pastebimu žaliu

atspalviu11

.

Nuorodų spalvos išrenkamos tokiu būdu, kad lankytojas matytų, kad tai nuoroda.

Pakopinių stilių šablonų panaudojimas

Kad sulauktų lankytojų dėmesio, dizaineriai naudoja pakopinius stilių šablonus

(Cascading Style Sheets; CSS). Stiliai vadinami pakopiniais, nes tai atitinka HTML dokumentų

apipavidalinimo principą. Naudojama daug stilių, jie veikia pagal svarbą, tarsi pakopomis.

Norint sukurti savo CSS ar HTML dokumentą, nereikia jokių ypatingų programų. Užtenka

paprasčiausios tekstų redagavimo programos ir interneto naršyklės. Naudojami trys CSS

integravimo į HTML puslapius būdai:

1. Sukuriama atskira CSS byla.

2. CSS stiliai įrašomi pačiame HTML dokumente.

3. Trečiasis būdas pritaikytas keisti atskirų HTML dokumento dalių, pvz., pastraipų,

išvaizdą.

Kuriant atskirą CSS bylą, HTML dokumente pateikiama nuoroda į ją. Šis būdas leidžia

pakeisti neriboto skaičiaus HTML dokumentų išvaizdą, redaguojant tik vieną CSS bylą. Nereikia

10

В. Дунаев, Сам себе Web-дизайнер, Петербург, 2003

11[interaktyvus] < http://graph.power.nstu.ru/shaveleva/dizain/curs/Coderj/4/1mod/tab_color.htm>

19

atskirai redaguoti kiekvieno tinklapio, todėl sutaupoma laiko. Be to, bendras svetainės dydis

gerokai sumažėja.

Savo darbe, naudojau CSS nurodytu tokius formatavimo elementus: teksto dydį, šriftą,

fono spalvą, teksto lygiavimą, slinkties juostų (scrollbar) spalvas ir sukurtą meniu stilių.

Grafikos įterpimas į tinklalapį

Ypatinga dėmesys – grafikui.

Visi rastrinės grafikos objektai, patalpinti svetainėje, preliminariai optimizuoti, naudojant

Photoshop programą. Kiekvieno puslapio bendras dydis ne daugiau 19K, tai labai tinka

publikavimui internete.

Visi vektorinės grafikos objektai (*.swf bylos) sukuriami, naudojant Macromedia Flash

programą, sugeneruojamas Html-kodas ir integruojamas į tinklalapio kodą. Didžiausias SWF

bylos dydis 11K – tai ežiukas, mūsų svetainės talismanas.

Paruošimas publikavimui, testavimas, priežiūra, perspektyvos

Dabartiniu metu parengtas svetainės lokalus variantas (lietuviška versija) publikavimui

internete. Planuojame:

jį patalpinti mūsų mokyklų svetainėse („Aitvaro“ gimnazijos ir „M. Gorkio“

mokyklos),

papildyti rusiškąją versiją,

prieš publikavimą būtiną patikrinti (testuoti) svetainę, atvėrus su įvairiomis

naršyklėmis: reikia įsitikinti, ar tinkamai rodomos spalvos, šriftai, lietuviškos

raidės,

po publikavimo darbas nesibaigia: reikia prižiūrėti ir nuolat atnaujinti informaciją,

papildyti, patikslinti,

perspektyvoje šio darbo pagrindu planuoju sukurti dinaminį Web mazgą tiems,

kurie dirba su grafika, kad pasikeistų informacija, patirtimi ir spręstų kokias nors

problemas.

20

PRAKTINĖS UŽDUOTYS

Photoshop

1 Praktinė užduotis. Žymėjimo įrankiai. Transformacijos.

Atlikę pateiktą praktinę užduotis, išmoksite įvairiais būdais pažymėti objektus, pasukti

reikiamu kampu, veidrodiškai atvaizduoti objektus, kadruoti vaizdą

1. Pasirinkite komandą FILE/OPEN ir atidarykite failus pr1_1.psd

(pagrindiniai objektai) ir rez1_1.psd (darbo rezultatas).

pr1_1.psd

rez1_1.psd

2. Failą pr1_1.psd išsaugokite kitu vardu (FILE/SAVE AS), pvz.,

darbas1.psd

21

3. Pasirinkite stačiakampės srities žymėjimo įrankį RECTANGULAR

MARQUEE ir pažymėkite objektą , tempdami nuo kairiojo kampo iki apatinio

dešiniojo kampo.

4. Pasirinkite perkėlimo įrankį ir perkelkite sritį į norimą vietą pagal pavyzdį

(rez1_1.psd).

5. Analogiškai perkelkite objektą ir pasirinkite komandą

EDIT/FREE TRANSFORM. Perkėlus žymeklį į rėmelio išorę, atsiranda dviguba rodyklė.

Sukdami ją, pasuksite objektą. Jei transformacija netenkina, paspauskite klavišą ESC, jei

tenkina - ENTER.

6. Pažymėkite sekantį objektą ir pasirinkite

EDIT/TRANSFORM/FLIP HORIZONTAL, taip pritaikysite horizontalų veidrodį.

Perkelkite objektą į norimą vietą pagal pavyzdį.

7. Pažymėkite objektą gitara ir pasirinkite

EDIT/TRANSFORM/ROTATE 90 CW.

8. Jeigu dabar perkelti gitarą, baltas fonas pralenks kitus objektus. Reikia

pažymėti tik objektą be fono.

9. Padidinkite mastelį iki 250%.

10. Pasirinkite įrankį MAGNETIC LASSO . Spragtelėkite pele ir veskite

pelės žymeklį palei kraštus. Pastebėsite, kad įrankis sukuria "pritvirtinimo" taškus ties

kraštu. Galime papildomai pridėti pritvirtinimo taškų spragtelint pele. Juos panaikinti

galite klavišu DELETE arba grįžtant pele prie ankstesnio "pritvirtinimo" taško.

11. Perkelkite išrinktą sritį pagal pavyzdį.

12. Naudodami instrumentą PAINT BUCKET , keiskite foną.

13. Pasirinkite iškirpimo įrankį CROP . Pažymėkite vaizdo dalį, kurią

norite iškirpti. Pažymėtos srities dydį galite keisti tempdami už kvadratėlių. Perkelti

pažymėtą sritį galite žymeklį nuvedę į srities vidų ir tempdami. Jei pažymėta sritis

netenkina, spragtelėkite pele už srities ribų. Jei pažymėta sritis tenkina, paspauskite

ENTER.

14. Išsaugokite piešinį FILE/SAVE.

22

2 Praktinė užduotis. Žymėjimo įrankiai (papildymas).

Atlikę pateiktą praktinę užduotis, išmoksite pritaikyti įvairius parametrus žymėjimo

įrankiui

1. Atverkite failą pr1_2.jpg arba norimą nuotrauką vinjetei sukurti .

pr1_2.jpg

2. Naudokitės elipsės formos žymėjimo įrankių . Nustatykite parametro FEATHER

reikšmę = 10.

3. Pažymėkite atvaizdą, jį nukopijuokite (EDIT/COPY).

4. Sukurkite naują dokumentą (FILE/NEW) ir įkelkite atvaizdą (EDIT/PASTE).

5. Išsaugokite darbą.

23

3 Praktinė užduotis. Veidrodžio atspindys. Filtrai.

Atlikę pateiktą praktinę užduotis, išmoksite žymėti objektus dar vienu būdu, dirbti su

sluoksniais, naudoti filtrus

1. Atverkite failą pr2_22.jpg arba norimą piešinį .

pr2_22.jpg

2. Pasirinkite SELECT/COLOR RANGE, ir nurodykite baltą spalvą.

3. Pasirinkite SELECT/INVERSE objektui pažymėti ir kopijuokite, naudodami

EDIT/COPY.

4. Sukurkite naują dokumentą 105x200 pixels (FILE/NEW).

5. Įdėkite paveiksliuką du kartus. Antrąsias kopijas reikia vertikaliai veidrodiškai atspindėti,

naudodami EDIT/TRANSFORM/FLIP VERTICAL.

6. Dabar yra 3 sluoksniai: 1.background; 2.pirmas įdėtas objektas; 3.antras įdėtas objektas.

7. Veidrodiškai atvaizduotam objektui pritaikykite filtrą FILTER/STYLIZE/WIND.


24

4 Praktinė užduotis

Montažinės grupės

Išdėstysime šuniuko vaizdą kontūro viduje.

1. Atverkite failus 4.jpg ir 4_kontur.jpg

4.jpg

4_kotur.jpg

25

2. Pasirinkite SELECT/COLOR RANGE ir pažymėkite kontūrą

3. Ant šuniuko vaizdo įrankiu MOVE uždėkite kontūrą - šitaip bus sukurtas naujas

sluoksnis.

4. Pervardykite sluoksnio vardą į Kontūras (du kartus spragtelėkite sluoksnio pavadinimą).

5. Pervardykite sluoksnį Background ir sukeiskite sluoksnius vietomis.

6. Sugrupuokite sluoksnius pasirinkę komandą LAYER/GROUP WITH PREVIOUS

(pažymėtas viršutinis sluoksnis)

7. Paslinkite šuniuko vaizdą kontūre įrankiu MOVE

8. Pasirinkite kadravimo (iškirpimo) įrankį CROP . Pažymėkite vaizdo dalį, kurią norite

iškirpti ir paspauskite ENTER.

rezultatas

26

5 Praktinė užduotis.

Šešėlis

rezultatas

1. Sukurkite naują dokumentą. Teksto įrankiu TYPE TOOL įveskite žodį informatika arba

kitą.

2. Įvestajam tekstui panaudokite LAYER/LAYER STYLE/DROP SHADOW ir nustatykite

parametrus:

OPACITY — šešėlio nepermatomumas. Kuo didesnis, tuo stipresnis efektas.

ANGLE — šešėlio kritimo kampas

DISTANCE — šešėlio atstumas nuo originalaus sluoksnio

SIZE — šešėlio dydis SPREAD - šešėlio išsklaidymas

3. Išsaugokite darbą

27

6. Praktinė užduotis. Šešėlio perspektyva

1. Atverkite failą pr_6.gif

pr_6.gif

2. Stebuklinga lazdele MAGIC WAND pažymėkite baltą foną. Žymėjimo sritį

invertuokite SELECT/INVERSE

3. Sukurkite naują RGB 170x170 pikselių dokumentą. Laukelyje CONTENTS pasirinkite

baltą spalvą (WHITE), RESOLUTION - 72 pixel/inch.

4. Pelėdą įrankių MOVE perkelkite naujo failo foną

5. Sukurtą naują sluoksnį Layer1, pervardykite į vardą Pelėda

6. Sluoksnį dubliuokite LAYER/DUBLICATE LAYER - sukurtas naujas sluoksnis Pelėda

Copy

7. Nuspauskite CTRL klavišą ir spragtelėkite dubliuotą sluoksnį - bus pažymėta pelėda

8. Nuspalvinkite pelėdą juoda spalva EDIT/FILL (USE - BLACK):

9. Perkelkite pelėdą (dubliuotu sluoksniu) truputį aukščiau ir į dešinę

10. Sluoksnius Pelėda ir Pelėda Copy sukeiskite vietomis

11. Sukurkite blankų šešėlio kontūrą FILTER/BLUR/GAUSIAN BLUR, pasirinkite spindulį,

lygų 3 pikseliams:

28

12. Šešėlio sluoksniui sumažinkite nepermatomumą (OPACITY) iki 60, — šešėlis pašviesės:


rezultatas

29

7. Praktinė užduotis.

Klonavimas

Įrankių CLONE STAMP galima nukopijuoti piešinio fragmentą.

1. Atverkite failą pr_7.jpg

pr_7.jpg

2. Sukeiskite vaizdo dydį, naudodami IMAGE/CANVAS SIZE ir nustatykite parametrus:

3. Nuspalvinkite juoda spalva visą foną, naudodami įrankį PAINT BUCKET

4. Pasirinkite įrankį CLONE STAMP . Iš pradžių nustatykite pradinį kopijavimo tašką:

reikia nuspausti klavišą ALT ir pele spragtelėti vaizde toje vietoje, iš kurios reikia

kopijuoti, geriau gėlės centre. Kopijuodami nuspauskite pelės klavišą, vesdami per

pasirinktas piešinio dalis.

30

5. Norint nustatyti naują pradinį kopijavimo tašką, reikia jį pasirinkti, paspaudus ALT

klavišą.

6. Klonuokite 2 gėles aprašytu būdu.


31

8 Praktinė užduotis.

Žvaigždė

1. Sukurkite naują dokumentą 500x500 pikselių

2. Nuspalvinkite juoda spalva visą foną, naudodami įrankį PAINT BUCKET

3. Pasirinkite VIEW/RULER

4. Maksimaliai padidinkite mastelį iki 1600%

5. Pasirinkite įrankį SINGLE ROW MARQUE ir pažymėkite 250 pikselį horizontaliai,

užpildykite jį balta spalva. Pasirinkite SELECT/DESELECT

6. Pasirinkite įrankį SINGLE COLUMN MARQUE ir pažymėkite 250 pikselį vertikaliai ir

užpildykite jį balta spalva. Pasirinkite SELECT/DESELECT

7. Dubliuokite sluoksnį LAYER1, pasirinkę LAYER/DUBLICATE LAYER arba:

32

8. Pasirinkite EDIT/FREE TRANSFORM ir nustatykite pasuko kampą 45°

9. Sugrupuokite sluoksnius CTRL+E arba LAYER/GROUP WITH PREVIOUS (pažymėtas

viršutinis sluoksnis)

10. Dubliuokite sluoksnį, pasukite kampą 22,5°, sugrupuokite sluoksniui.

11. Pakartokite 10-tą žingsnį, tik pasukite kampą 13,3°, sugrupuokite sluoksnius.

12. Pritaikykite filtrą FILTER/Filter/Distort/Twirl parametru 100°.

13. Dubliuokite sluoksnį.

14. Pasirinkite EDIT/TRANSFORM/FLIP HORIZONTAL ir sugrupuokite sluoksnius.

33


rezultatas

Šaltinis

34

Flash


Atlikę pateiktą praktinę užduotis, išmoksite pagrindinių piešimo būdų, koreguoti kontūrus

Bet kuri tiesė yra ištiesintas lankas, jei nuvedame ARROW įrankį taip, kad po ja atsirastų

mažytis lankas.

Patraukus pelytę, linija įgaus lanko formą. Tokiu būdu galima ištaisyti

bet kuriuos lankus. Lygiai taip pat galima ištaisyti kampus, linijų galus,

taškų susikirtimą.

Sukurkite tokius vaizdus:

35


Ši užduotis tiems, kas nemoka piešti

1. Sukurkite naują bylą FILE/NEW 180x340 pikselių

2. Naudodami komandą FILE/IMPORT pasirinkite bylą cat.gif

3. Nustatykite žymeklį antrame kadre laiko skalėje ir pasirinkite komandą

INSERT/BLANK KEYFRAME - įterpti naują tuščią kadrą.

4. Pasirinkite mygtuką Onion Skin (kalkė). Šis mygtukas leidžia darbalaukio turinį matyti

neaiškiai (kaip per kalkę). Jo pagalba galime maksimaliu tikslumu redaguoti animaciją.

5. Naudodami įrankį ARROW apveskite vaizdo kontūrą

6. Naudodami įrankį PAINT BUCKET užpildykite kontūrus pagal pavyzdį

7. Nustatykite žymeklį pirmame kadre ir pasirinkite komandą EDIT/CLEAR FRAMES —

pašalinkite 1 kadrą

8. Išsaugokite darbą FILE/SAVE AS arba FILE/EXPORT (jeigu reikia exportuoti į kitą

formatą)

36


1. Sukurkite naują bylą FILE/NEW 400x300 pikselių

2. Pirmame kadre laiko skalėje nupieškite skritulį, naudodami įrankį OVAL TOOL ir

klavišą SHIFT ir pasirinkite gradientą

3. Perkelkite gradiento centrą, naudodami įrankį FILL TRANSFORM TOOL

4. Perkelkite skritulį pagal pavyzdį

5. 25-me kadre pasirinkite komandą INSERT/KEYFRAME

6. Perkelkite skritulį ir gradiento centrą pagal pavyzdį

37

7. Pakartokite 3 ir 4 žingsnį 50 ir 75 ir 100 kadre

8. Pažymėkite kadrus nuo 1 iki 100 ir pasirinkite TWEEN/SHAPE. Laiko skalė bus žalios

spalvos

9. Pasirinkite komandą CONTROL/TEST MOVIE ir testuokite animaciją

Išsaugokite darbą

38

IŠVADOS

1. Kad raštingai parengtume praktines užduotis, reikėtų preliminariai suvokti teorinę

medžiagą. Todėl darbe visų pirma atskleidžiau pagrindinius vaizdo parametrus:

spalvinį modelį, vaizdo dydį ir skiriamąją geba, paveikslėlio spalvos gylį. Visų

trijų parametrų pasirinkimas priklauso nuo to, kur vaizdas bus naudojamas —

spausdinamas ar rodomas ekrane.

2. Kad būtų aišku, kada geriau panaudoti rastrinės grafikos objektus, o kada —

vektorinės grafikos objektus, išaiškinau jos trūkumus ir privalumus. Vektorinė

grafika labai naudinga tada, kai reikia ypač aiškių ir tikslių kontūrų, pavyzdžiui,

kuriant šriftus, logotipus, techninius brėžinius, o rastrinė — tikroviškiems,

fotorealistiškiems vaizdams, tačiau yra ir formatais rastrinės grafikos tinkami su

ryškių kontūrų vaizdams.

3. Parengiau praktinius uždavinius darbui su grafinėmis rengyklėmis — Adobe

Photoshop ir Macromedia Flash, kurie padės informatikos mokytojams,

žingeidiems mokiniams mokytis grafinės rengyklės.

4. Kad būtų kvalifikuotai parengta grafika tinklapiui, išnagrinėjau šiuolaikinius

grafikos optimizavimo metodus Web-puslapui. Kiekvienas formatas turį savo

optimizavimo būdus, pavyzdžiui, JPEG formatas naudoja suspaudimą “su

informacijos praradimu”, o GIF — “be informacijos praradimų”.

5. Parengiau dizainą svetainės, kurioje patalpinau savo sudarytus praktinius

uždavinius.

6. Dabartiniu metu parengtas svetainės lokalus variantas (lietuviška versija)

publikavimui internete.

39

Literatūros ir šaltinių sąrašas

1. Lietuvos bendrojo lavinimo mokyklos bendrosios programos ir bendrojo

išsilavinimo standartai XI — XII klasės, Vilnius, Švietimo plėtotės centras, 2002

2. Skaitmeninės leidybos kursų moduliai, Multimedijos mokytojai

[interaktyvus] <hhttttpp::////mmmm..mmcchh..mmiiii..lltt//mmoodduulliiaaii..hhttmm> Žurnalas Naujoji Komunikacija,

№48, 2003 m.Н. Угринович, Информатика и информационные технологии 10-11,

Москва Лаборатория базовых знаний, 2001

5. К. Мильберн, Д. Крото, Flash 5 для дизайнера, DiaSoft, 2000

6. Д. Байенс, Примочки программирования в Web, Эком, Москва 2000

7. А. Тайц, Эффективная работа в Photoshop, Питер, 2001

8. Т.Daly, Skaitmeninės fotografijos pagrindai, Alma Littera, Vilnius, 2004

9. Metodinės rekomendacijos mokyklų interneto svetainėms, Pritarta LR

švietimo ir mokslo ministro, 2004m. vasario 24d. įsakymu Nr. ISAK-251

10. Lemchenas C., Macaitis J., Rusų – lietuvių kalbų žodynas, Vilnius,

Mokslo ir enciklopedijų leidybos institutas, 1997.

11. D. Ambrazienė, J.Smolinskas, Adobe Photoshop7, Kaunas, 2003

12. Zabarauskas R., Informacinių technologijų uždavinynas pagrindinei

mokyklai. Tekstai ir iliustracijos, Kaunas, Šviesa, 2003.

13. Бурлаков М., Flash MX, Санкт-Петербург, БХВ-Петербург, 2003.

14. Кишик А., П.Галушкин, Flash MX Эффективный самоучитель,

DiaSoft, 2003

15. Миронов Д., Компьютерная графика в дизайне, Питер, 2004.

16. Горячев А., Шафрин Ю., Практикум по информационным

технологиям., Москва, 2001.

17. В. Дунаев, Сам себе Web-дизайнер, Петербург, 2003

18. M. B. Karbo, Skaitmeninių vaizdų apdorojimas, AB Spauda, Vilnius,

2003

19. M. B. Karbo, Tinklapiai, AB Spauda, Vilnius, 2003

20. [interaktyvus] <http://www.flasher.ru/>

21. [interaktyvus] <http://www.psd.ru/>

22. [interaktyvus] <http://www.1september.ru/>

23. [interaktyvus] <http://www.flash-gorod.net>

24. [interaktyvus] <http://www.maste.ru>

25. [interaktyvus] <http://www.pixel.h5.ru>

26. [interaktyvus] <http://webmascon.com>


http://www.flasher.ru/

http://www.psd.ru/

http://www.1september.ru/

http://www.flash-gorod.net/

http://www.maste.ru/

http://www.pixel.h5.ru/

http://webmascon.com/

40

27. [interaktyvus]<http://webmaster.pp.ru>

28. [interaktyvus] <http://cherry-design.ru>

29. [interaktyvus] <http://graph.power.nstu.ru/shaveleva/dizain/curs/Coderj

/4/1mod/tab_color.htm>

http://webmaster.pp.ru/

http://cherry-design.ru/

http://graph.power.nstu.ru/shaveleva/dizain/curs/Coderj%20/4/1mod/tab_color.htm

http://graph.power.nstu.ru/shaveleva/dizain/curs/Coderj%20/4/1mod/tab_color.htm

41

PRIEDAS

› ekspertavimas › mddb › informacinės... · rastrinė ir vektorinė grafika2012-05-30 ·...

Documents