VEKTORIGRAFIIKAN KÄYTTÖ WEB- SUUNNITTELUSSA LAHDEN AMMATTIKORKEAKOULU Tekniikan ala Mediatekniikan koulutusohjelma Tekninen visualisointi Opinnäytetyö Kevät 2015 Johanna Koivuniemi Lahden ammattikorkeakoulu Mediatekniikan koulutusohjelma KOIVUNIEMI, JOHANNA: Vektorigrafiikan käyttö web- suunnittelussa Teknisen visualisoinnin opinnäytetyö, 66 sivua, 3 liitesivua Kevät 2015 TIIVISTELMÄ Opinnäytetyössä tarkastellaan vektorigrafiikkaa web-graafikon näkökulmasta. Tarkastelu lähtee muodostamalla yleinen käsitys vektorigrafiikasta sekä sen hyödyistä ja rajoitteista. Opinnäytetyössä käydään läpi erilaisia vektorigrafiikassa käytettyjä tiedostomuotoja sekä tutustutaan vektorigrafiikan käyttöön web-sivus- toilla. Erityisesti keskitytään SVG-formaatin käyttöön. Myös selaintuki on otettu huomioon. Lopuksi käydään läpi muutamia vektorigrafiikan ohjelmistoja ja niiden eroavaisuuksia. Case-osiossa käydään web-grafiikan toteuttamista käytännössä. Casen tarkoituksena oli selvittää, millaisia vaatimuksia vektorigrafiikkaohjelmiston suhteen todellisuudessa on, kun sitä käytetää web-grafiikan tuottamiseen. Työssä tutkittiin myös millaisia mahdollisuuksia ja rajoitteita on vektorigrafiikan käytössä web-grafiikassa. Casessa toteutettu web-sivusto tehtiin Lahden Seudun Kehitys LADEC Oy:lle. Vektorigrafiikkaohjelmistot muistuttavat käyttöliittymältään paljon toisiaan, mutta niiden käyttö on kuitenkin melko erilaista. Lisäksi käyttöjärjestelmä asettaa rajoit- teita. Myös ohjelmien helppokäyttöisyydessä löytyy eroja. Kaupalliset ohjelmistot ovat ominaisuuksiltaan paljon monipuolisempia ja kehittyvät nopeammin. Web- grafiikan tuottamiseen ei kuitenkaan ole välttämätöntä hankkia kaupallista ohjel- mistoa, sillä tarvittavat ominaisuudet löytyvät pitkälti ilmaisohjelmistoistakin. Asiasanat: vektorigrafiikka, SVG, Inkscape, Adobe Illustrator, Serif DrawPlus SE, CorelDraw, resoluutio, web-suunnittelu Lahti University of Applied Sciences Degree Programme in Media Technology KOIVUNIEMI, JOHANNA: The use of vector graphics in web design Bachelor’s Thesis in Visualization Engineering, 66 pages, 3 pages of appendices Spring 2015 ABSTRACT This Bachelor’s thesis deals with vector graphics from the web graphic designer’s point of view. The study starts with a general introduction to vector graphics, as well as its benefits and limitations. The thesis goes through a variety of file for- mats, as well as the use of vector graphics in web sites. The use of SVG is particu- larly highlighted. Browser support is also taken into account. Finally, a few vector graphics programs are reviewed and compared. The case section describes the implementation of web graphics in practice. The purpose of the case was to find out what kind of requirements there are in vector graphics programs, when they are used in producing web graphics. The study also examines the opportunities and constraints in the use of vector graphics as web graphics. The web site in the case section was made for Lahden Seudun Kehitys LADEC Oy. The user interfaces of vector graphics programs are very similar to each other, but their use is quite different. Furthermore, the operating system sets some limita- tions. Also, from the point of the ease of use, there can be found differences bet- ween the programs. Commercial programs are much more versatile and evolve more rapidly. Even so, there is necessarily no need to buy commercial software, because most of the required features can be found in free software. Key words: vector graphics, SVG, Inkscape, Adobe Illustrator, Serif DrawPlus SE, CorelDraw, resolution, web design SISÄLLYS 1 JOHDANTO 1 2 VEKTORIGRAFIIKKA 2 2.1 Vektorigrafiikan esittely 2 2.2 Tiedostomuodot 4 2.2.1 SVG 5 2.2.2 AI 7 2.2.3 EPS 8 2.2.4 PDF 9 2.2.5 PostScript 10 2.2.6 PNG 12 2.3 Käyttökohteet 13 2.3.1 Vektorigrafiikka web-suunnittelussa 14 2.3.2 Selaintuki 18 2.3.3 SVG:n sisällyttäminen HTML-dokumenttiin 19 3 OHJELMISTOT 26 3.1 Ilmaisohjelmistot 26 3.1.1 Inkscape 27 3.1.2 Serif DrawPlus Starter Edition 35 3.2 Maksulliset ohjelmistot 38 3.2.1 Adobe Illustrator CC 38 3.2.2 CorelDraw 50 3.3 Ohjelmistojen eroavaisuudet 60 4 CASE 62 4.1 Lähtötilanne ja ideoiminen 62 4.2 Suunnittelu ja toteutus 62 4.3 Lopputulos 65 5 YHTEENVETO 66 LÄHTEET 67 LIITTEET 75 1 JOHDANTO Ihmisten liikkuminen internetissä lisääntyy koko ajan, ja se minkälaisella päätelaitteella internetissä liikutaan, on yhä monipuolisempaa. Internetin selaaminen ei enää rajoitu pelkkiin pöytäkoneisiin, vaan älypuhelinten ja tablettien käyttö on koko ajan kasvussa. Www-sivujen ilmeet ovat koko ajan visuaalisempia, ja käyttäjät odottavat näiltä enemmän. On suositeltavaa kiinnittää huomiota sivujen erottuvuuteen ja siihen minkälaisen mielikuvan sivut antavat surffailijalle. Web-sivujen ilmekin on paljon vapaamuotoisempaa, kun tavoittellaan massasta erottumista. Erilaisten grafiikoiden käyttäminen on tehokas ja visuaalisesti miellyttävä tapa tuottaa positiivista imagoa yrityksestä. Päätelaitteiden kasvavat näyttöresoluutiot tuovat haasteita nykypäivän grafiikalle. Vektorigrafiikan mahdollisuudet ja pieni tiedostokoko tekevät siitä ihanteellista grafiikaa web-sivujen tarpeita ajatellen. Vaikka SVG-tiedostomuoto julkaistiin jo vuonna 2001, on sen käyttö web-sivuilla alkanut vasta viime vuosina yleistymään. Lisääntyneen selaintuen myötä voidaan vektorigrafiikkaa käyttää jonkin verran sellaisenaan ilman tarvittavaa selainlaajennusta. Tällöin päästään hyödyntämään sen todelliset mahdollisuudet eikä grafiikkaa välttämättä tarvitse muuntaa bittikarttakuvaksi. Vektoripohjaisen web-grafiikan luontiin sopivia ohjelmia löytyy monen tyyppisiä, jotkin hieman edistyneempiä kuin toiset. Suuri osa näistä ovat kaupallisten yritys- ten tarjoamia ohjelmistoja, jotka voivat maksaa jopa satoja euroja. Monet silti suosivat kaupallisia ohjelmistoja, kuten Adobe Illustrator, ja niitä pidetään enem- män ammattilaiselle soveltuvana. Saatavilla on myös suhteellisen kykeneviä vek- torigrafiikan ilmaisohjelmia, joilla on mahdollista luoda yhtä tasokasta grafiikkaa kuin kaupallisilla ohjelmistoilla. Näitä ohjelmia tarkastelemalla selviää, kuinka paljon nämä todellisuudessa eroavat. Opinnäytetyössä keskitytään vektorigrafiikan käyttöön web-grafiikassa sekä grafiikan luomiseen käytettyjä vektorigrafiikan piirto-ohjelmia. Case osiossa keskitytään ohjelmiston ominaisuuksien käytännönvaatimuksiin web-grafiikan luonnissa. Case on toteutettu Lahden Seudun Kehitys LADEC Oy:lle. 2 2 VEKTORIGRAFIIKKA 2.1 Vektorigrafiikan esittely Vektorigrafiikka on toinen kahdesta yleisimmästä grafiikkatyypistä. Näistä ylei- sempi on bittikarttagrafiikka, jota edustavat muun muassa valokuvat. Vektorigrafiikka muodostuu erilaisten geometristen objektien avulla, toisin kuin pikselimatriisilla muodostuva bittikarttagrafiikka. Tästä syystä näiden kahden grafiikkatyypin keskeisin ero piilee kuvan tarkkuudessa. Kuvaa suurennettaessa vektoreista muodostuva kuva ei menetä tarkkuuttaan, kun taas bittikarttakuva muuttuu rosoiseksi (kuva 1). (Nykänen 2007, 12.) KUVA 1. Vektorigrafiikan ja bittikarttagrafiikan ero suurennettaessa (Paget, I. 2012.) Vektorigrafiikan suurin etu on sen resoluutiosta riippumattomuus. Tällaista kuvaa on mahdollista suurentaa lähes rajattomasti. Kuitenkin kuvan mahdolliset pienet virheet saattavat tulla näkyviin, kun kuvaa suurennetaan liikaa. Myös kuvaa liikaa pienennettäessä ohuet viivat saattavat kadota näkyvistä. (Leurs 2014a.) Vektorigrafiikkassa objekteja luodaan määrittelemällä tukipisteitä koordinaatti- pinnalle. Tukipisteillä ei ole ulkonäöllisiä ominaisuuksia, vaan nämä ohjaavat polun muotoa ja suuntaa tangenttien avulla. Objekti saadaan näkyviin määritte- lemällä tälle muotoa rajaavalle polulle ominaisuuksia, kuten väri ja paksuus. 3 (Korkeila 2013, 18.) Polku on viiva, jolla on alku- ja loppupiste. Se ei ole rajoittunut suoraan muotoon. Polut voivat olla minkä muotoisia ja kokoisia tahan- sa, ja ne voivat sisältää määrättömästi käyriä. Näitä yhdistettäessä muodostuu ku- via, diagrammeja ja jopa erilaisia fontteja. (Hiitola 2012, 8.) Yksi vektoriobjektin olennaisista ominaisuuksista on täyttöväri, joka voidaan määritellä, vaikkei polku olisikaan suljettu (Korkeila 2013, 18). Vektorikuvan muodostumistavalla on vaikutus myös kuvatiedoston käyttämään muistitilaan. Vektorikuvien määrittelemät abstraktit tehosteet vaativat useimmiten melko vähän muistia. Kuvan koolla ei ole vaikutusta muistinkulutukseen, koska tämä määräytyy yksityiskohtien lukumäärällä. Toisaalta vektorikuva vaatii lasken- taa riippuen yksityiskohtien ja tehosteiden määrästä. Tämä on suositeltavaa ottaa huomioon vektorikuvan monimutkaisuudessa, suunniteltaessa kuvaa laskentateho- ltaan vaatimattomaan laitteeseen. (Nykänen 2007, 12.) Piirtotoiminnot toimivat useimmiten kätevämmin ja tarkemmin vektorigrafiikassa. Yksi vektorikuvien eduista on myös se, että ne eivät ole rajoittuneita omaan muotoonsa ja paikkaansa niin kuin pikselikuvat, vaan vektoriobjekteja voi vapaasti sijoitella päällekkäin toistensa kanssa vaikuttamatta toiseen objektiin. Nämä objektit yhdessä muodostavat vektorikuvan. Vektorigrafiikka on voimakas osa graafista suunnittelua. Vektorit toimivat parhai- ten, kun halutaan luoda yksityiskohtaista, tarkkaa ja puhdasta kuvaa, kuten ikoneja painotuotantoon tai digitaaliseen muotoon. Resoluutiosta riippumaton vektorigra- fiikka sopii myös esimerkiksi logoihin tai kuviin, joita tarvitaan monen kokoisina. Samaa kuvaa voidaan käyttää pienestä käyntikortista suureen mainostauluun. Ani- maatioita luotaessa esimerkiksi Adobe Flash- ja Adobe After Effects -ohjelmissa kannattaa myös suosia vektorikuvia.