keskiviikko 24. kesäkuuta 2015

Vektoria webbiin

Printtisuunnittelijat ovat tottuneet kinuamaan vektorilogoja ja korkearesoluutioisia kuvia, mutta webbisuunnittelijat ovat päässeet helpommalla. Verkkoon kun on kelvannut vaatimattomampikin pikselikasa. Ajat kuitenkin muuttuvat, näyttöjen tarkkuudet paranevat ja responsiivisuus asettaa omat vaatimuksensa.

Kaukana ovat ne ajat, kun piti ottaa huomioon vain muutama resoluutio ja näyttöjen pikselitiheydet olivat onnettomia. Nykyään parhaissa kännyköissä voi olla jopa yli 400 pikseliä per tuuma ja tietokoneissakin mennään kohti hyvälaatuisen painotuotteen tarkkuuksia (bittikartoissa on tapana käyttää 300 dpi -tarkkuutta).

Näyttöjen koot vaihtelevat muutaman tuuman mobiililaitteesta 30 tuuman jättiläisruutuihin. Saman kuvan on venyttävä monenlaisiin olosuhteisiin ja jos ei halua laadun kärsivän, täytyy olla tarkkana.

Asiakkailla on tapana pyytää webbilaatuinen versio materiaaleista. Printtilaatuinen on helppo, vektorit vektoreina ja bittikartat riittävän isoina (valokuvia ei tarvitse pienennellä). Kuvasta ei kuitenkaan tule webbiversiota asettamalla Photoshopissa resoluutioksi 72 dpi (millä ei ole oikeasti mitään tekemistä webbikuvien kanssa, vaan se on käytännössä sitkeästi istuva harhaluulo).

Printtitöissä kuvan kuvan kokoa säädetään taitossa, mutta verkkosivulle on turha ladata 500 x 500 pikselin kokoista kuvaa jos se näytetään 100 x 100 px koossa. Toki firman omat tekijät osaavat yleensä pyytää materiaalin tarkassa koossa, mutta kun asiakas haluaa logon isommaksi, niin sitten tehdään uusi versio.

Printtisuunnittelija ei ymmärrä, miksi vektorimatskua veivataan eri kokoisiksi bittikartoiksi, kun se voisi olla nettisivullakin vektoria ja aina oikean kokoisena sekä tarkkana ja terävänä. Nettisivuillekin voi laittaa svg-muotoista vektorimateriaalia. Nykyselaimet, jopa Internet Explorer, tukevat hyvin svg:tä.

Olen yrittänyt kysellä, että miksi svg:tä ei käytetä, mutta en ole saanut mitään kunnollista vastausta, mitään jyrkkää ei:tä sille ei ole kuitenkaan tullut. Lienee siis enemmän tottumuskysymys. Webbisuunnittelijat käyttävät myös usein Photoshoppia, jolla ei vektoreita synny. Pitäisi siis hylätä vanhat tottumukset.

Svg-grafiikkaa openclipartista

Vektoreiden käytöstä webbisuunnittelussa olisi muutakin etua, kuin täysin skaalautuva materiaali. Kun printtisuunnittelija piirtelee jonkun kikkareen ja asiakas haluaa sen nettisivulle, webbiversio syntyy käden käänteessä juuri haluttuun tiedostomuotoon ja kokoon.

Mutta kun webbileiskassa oleva härpätin pitäisi saada vaikka kaksimetriseen rolluppiin, pitää se käytännössä tehdä uudestaan. Eli tehdään sama työ kaksi kertaa ja se ei yleensä ole kovin kannattavaa.

Toki fotarilla on helpompi tehdä tiettyjä asioita, mutta etevissä käsissä vektorigrafiikalla syntyy mitä uskomattomampia teoksia. Toisaalta flätti design on muotia, joten mitään suurempaa tarvetta fotarikikkailuille ei välttämättä edes ole.

Jokainen toki käyttää mitä tykkää, mutta koitan tässä sanoa sitä, että vektorigrafiikan käyttö olisi järkevää, sillä se toimii pikkuiselta kännykän ruudulta pakettiauton teippauksiin. Ilmeisesti mitään teknisiä esteitä ole (jos on, niin joku voisi valaista), muutos pitäisi siis tehdä asennetasolla.

Itsekin juuri muuten kirjoittelen tätä hi-dpi -näytöllä varustetulla koneella, eli normaalit nettisivut skaalataan 2 kertaa isommiksi. Se tekee bittikartoista pehmeitä (mikäli asiaa ei ole otettu sivua tehdessä huomioon). Työkaveri sai juuri 4K-näytöt (ja tulee huomaamaan, että fotaria pitää käyttää 200 % suurennoksella...).

openclipart.org on muuten ihan näppärä paikka jos tarvitsee äkkiä jotakin vektorimatskua. Tarjonta vaihtelee hyvästä hyvin huonoon, mutta kaikki on ilmaista. Ja usein löytyy ainakin käyttökelpoinen aihio.

Lisää lukemista:

Why Aren’t You Using SVG?
20 examples of SVG that will make your jaw drop
The Art Of The SVG Filter And Why It Is Awesome

Lisähuomautuksena täytyy todeta, että Blogger ei tue svg:tä kunnolla. Tosin ilmaisella blogialustalla sen ehkä kestää, suurin osa käyttäjistä ei moista ominaisuutta tarvitse.

Ei kommentteja:

Lähetä kommentti

Jätä toki kommentti tai kysymys.