Graafisen lähdemateriaalin ohjeistus
Noviaria ei tee graafista suunnittelua, mutta teemme tiivistä yhteistyötä mainostoimistojen sekä graafisten suunnittelijoiden kanssa, ja yhteistyöverkostomme toimijat voivat tarpeen tullen toimittaa kattavasti sekä digitalisen graafisen ulkoasun että painomediasuunnittelut projektianne varten. Graafisen materiaalin perusteella toteutamme mm. internetsivuja, mobiiliapplikaatioita tai muita graafisia käyttöliittymiä sisältäviä sovelluksia.
Graafinen lähdemateriaali voi vaihdella hyvinkin paljon riippuen käytetyistä työtavoista ja työkaluista. Esimerkiksi painomediapuoleen tottuneet toimittajat lähettävät usein painokelpoista materiaalia, joka vaatii runsaasti jatkokäsittelyä, jotta lähdeaineisto saadaan internetselaimille sopivaan muotoon. Tämän tyylinen jatkokäsittely on usein esim. rasterointeja tai muutoksia värimaailmaan - esim. painomaailmassa yleisesti käytetty CMYK-värimaailma ei toimi luotettavasti kaikilla internetiin kytketyillä selainlaitteilla ja muunnos RGB-värimaailmaan on tuolloin välttämätöntä.
Internetsivuja ja -ohjelmistoja suunnitellessa käytetään tyypillisesti jonkinlaista prototyyppiohjelmistoa, joka mahdollistaa sekä graafisen ulkoasun suunnittelun että muodostaa sivurungon automaattisesti ulkoasun perusteella. Sivurunko koostuu tuolloin internetsivujen rakennustekniikoista tai "koodista", kuten HTML ja CSS sekä tietenkin kuvatiedostoista. Mikäli projektissanne syystä tai toisesta ei käytetä automaattista koodin luontia, voi Noviaria luoda tämän graafisen lähdemateriaalin perusteella. Tämä asettaa kuitenkin tiettyjä vaatimuksia graafiselle lähdemateriaalille, jotka erittelemme tässä artikkelissa.
Pyydämme huomioimaan, että Noviaria tekee vain kaikkein yksinkertaisimpia käsittelyitä kuva-aineistolle, kuten rajauksia tai yksinkertaisia tiedostomuotojen muunnoksia, kuten PNG -> JPEG. Käsittelemme kuvamateriaalia PC-laitteilla ja Linux-käyttöjärjestelmällä. Noviarialla ei ole mahdollisuutta hankkia Mac- tai Windows-laitteita tai -ohjelmistoja kuvamateriaalin käsittelyä varten. Noviarialla ei myöskään ole mahdollisuutta hankkia erillisiä kalibrointilaitteita näyttölaitteille eikä Noviaria tee valokuvien tai videoiden jälkikäsittelyä. Huomioittehan myös, että internetteknisistä rajoituksista johtuen on mahdotonta toteuttaa kaikille laitteille pikselintarkka esitys lähdemateriaalista.
Internetsivustojen grafiikka
Paras lopputulos saavutetaan, kun toimitettu aineisto on valmiiksi kuhunkin käyttötarkoitukseen soveltuvassa pikselikoossa ja resoluutiossa, tiedostomuodossa ja sopivan pakkaussuhteen omaavina yksittäisinä kuvina. Tämä tarkoittaa, että esimerkiksi yhtä isoa JPG, PSD- tai PDF-tiedostoa ei voida käyttää suoraan sellaisenaan internetsivuston tekoon.
Käytännössä tämä tarkoittaa esimerkiksi Adobe Photoshop-lähdemateriaalin osalta, että;
- PSD-tiedostosta on poimittu kaikki halutut layout-elementit yksittäisiksi kuviksi (esimerkki: taustakuvan päälle asetettu logo tulee olla kahtena erillisenä kuvana - logona läpinäkyvällä taustavärillä ja taustakuvana, jonka päällä ei ole muita elementtejä, kuten esim. valikkotekstejä)
- Nämä yksittäiset kuvat ovat tallennettu JPG, PNG, SVG tai GIF-tiedostomuodossa.
- Näitä yksittäisiä kuvia on tallennettu riittävän monessa pikselikoossa ja resoluutiossa, riippuen internetsivuston responsiivisuuden tasosta ja siihen käytetystä alustasta. Useimmat sisällönhallintajärjestelmät, kuten esim. Wordpress, osaavat pienentää kuvia automaattisesti, mutta kuvien suurentaminen antaa huonon lopputuloksen. Siksi on tärkeää, että lähdemateriaali on tallennettu tarpeeksi suurella resoluutiolla.
- Kuvien taustaväri on tarvittaessa läpinäkyvä
- Värimaailma on PC-yhteensopiva RGB, ei esim. painotuotteissa käytetty CMYK-värimaailma
- Tasot (layers) ovat yhdistetty
Mikäli lähdemateriaalin pilkkominen yksittäisiksi kuviksi ei ole toimittajanne puolelta mahdollista, voivat Noviarian yhteistyökumppanit toimittaa kaikki graafisen suunnittelun palvelut eri maksusta.
Mittakaava
Noviaria toteuttaa internetsivut selainten 100%:n zoom-tasoa käyttämällä. Joissain selaimissa tämä tunnetaan myös nimellä "normaali suurennos" tai "tavanomainen mittakaava". Voimme eri maksusta toteuttaa myös muiden zoom-tasojen ulkoasuja. Zoom-taso -ominaisuus on selainriippuvainen, tarkoittaen, että on monta eri tapaa miten se voi toimia - osa selaimista suurentaa vain tekstin, toiset sekä tekstin että kuvat. Selaimen zoom-ominaisuuden käyttö saattaa responsiivisesti toteutetun sivuston kohdalla aiheuttaa murtopisteen alituksen tai ylityksen, jolloin sivuston asettelu muuttuu. Internetsivutekniikalla ei kuitenkaan ole mahdollista vaikuttaa miten selain toimii tämän toiminnallisuuden osalta, mutta ulkoasuun tietyillä zoom-tasoilla voidaan vaikuttaa ohjelmallisesti.
Myös graafista lähdemateriaalia käsitellään 100% zoom-tasolla kuvankäsittely- tai prototyyppiohjelmistossa. On erittäin tärkeää, että lähdemateriaalin pikselikoko on tässä vaiheessa halutun kokoinen, koska mittakaavan muuttaminen voi myöhemmässä vaiheessa olla erittäin työlästä. Noviaria veloittaa aina erikseen mittakaavan muuttamisesta myöhemmässä vaiheessa.
Murtopisteet
Responsiivisesti toteutetun internetsivun tai -sovelluksen murtopisteet pyydetään toimittamaan listana tai taulukkona. Selvyyden vuoksi kannattaa mainita, onko ilmoitettu pikselikoko murtopisteen ylä- vai alaraja. Mikäli erillistä murtopisteluetteloa ei ole toimitettu, toteuttaa Noviaria murtopisteet seuraavien yleisesti käytettyjen murtopisteiden mukaisesti:
- Mobiili: alle 640px
- Tabletti: 640px - 1024px
- Työpöytä: yli 1024px
Lisäksi tulee olla maininta, onko sivustolla enimmäisleveyttä, ja mikäli on, mikä on sen pikselikoko. Jos sivustolla on enimmäisleveys, tulee lisäksi olla määrittely, miltä sivuston tulee näyttää laitteella, joka ylittää määritellyn enimmäisleveyden.
Vastaavasti myös vähimmäisleveys on mahdollista määritellä. Mikäli sivuston vähimmäisleveys on määritelty, tarvitsemme sen pikselikoon.
Mikäli mainintaa vähimmäis- tai enimmäisleveydestä ei ole toimitettu, toteuttaa Noviaria sivuston ilman näitä rajoituksia, jolloin sivusto pienenee ja suurenee loputtomasti. Tällöin pyydämme kuitenkin huomioimaan, että sivuston tai ohjelmiston ulkoasu äärimmäisen pienillä (esim. älykellot) tai suurilla laitteilla (esim. infonäytöt) ei välttämättä ole edustava tai käyttökelpoinen.
Typografia
Riippuen graafisen materiaalin toteutustavasta, käytettyjä kirjaintyyppejä eli fontteja, niiden värejä, kokoja ja painoja ei välttämättä pystytä suoraan toteamaan lähdemateriaalista. Siksi suosittelemme, että graafisen lähdemateriaalin yhteydessä toimitetaan erillinen typografiamäärittely.
Typografiamäärittelystä tulisi käydä ilmi, mitä fonttia, kokoa, painoa, väriä ja leikkausta on käytetty missäkin yhteydessä. Erityisen tärkeää on myös määritellä, missä yksikössä fonttien koot ovat, esim. pikseleissä tai pisteissä. Typografiamäärittely voi olla esim. seuraavanlainen taulukko:
| Fontti | Koko | Painotus | Värinäyte | Värikoodi | Käyttökohde |
|---|---|---|---|---|---|
| Arial | 16px | Normaali | #afafaf | Leipäteksti. | |
| Arial Black | 20px | Lihavoitu | #ff6600 | Kolmannen tason otsikkoteksti. | |
| Arial | 20px | 500 | #ff6600 | Väliotsikko Yhteystiedot-sivulla. |
Kirjaintyyppejä ei ole teknisistä rajoituksista johtuen mahdollista käyttää suoraan esim. kuvatiedostosta. Tarvitsemme toteutusta varten vastaavat fonttitiedostot TTF-, EOT-, SVG-, OTF- tai WOFF/WOFF2-muodossa, joista WOFF/WOFF2 ja TTF/OTF-muodot ovat toimivimmat.
Mikäli typografiamäärittelyä ei ole toimitettu, määrittelee Noviaria kirjaintyypit lähdemateriaalin optisella tekstintunnistuksella ja silmämääräisesti. Tämä menetelmä ei kuitenkaan anna tarkkaa lopputulosta, ja varsinkin fonttien koot ja painot voivat poiketa lähdemateriaalista.Värimaailma
Kirjaintyyppien värien lisäksi käytetään usein myös mm. taustavärejä, painikkeiden värejä ja linkkien värejä. Paras lopputulos saavutetaan, kun käytettyjen värien RGB-heksakoodit on poimittu valmiiksi taulukoksi esimerkiksi seuraavanlaisesti:
| Värinäyte | Värikoodi | Käyttökohde |
|---|---|---|
| #999999 | Etusivun navigaatiopalkin taustaväri ja erotinviivojen väri. | |
| #ff6600 | Virheilmoituslaatikon reunan väri. |
Mikäli erillistä värimaailmaluetteloa ei ole toimitettu, selvittää Noviaria värikoodit lähdemateriaalista näytteitä poimimalla, mutta tämä menetelmä ei välttämättä anna yhtä tarkkaa tulosta käytetystä värikoodista.
Kuvien tekstit
Parhaan lopputuloksen saavuttamiseksi suosittelemme, että kaikki kuvissa olevat tekstit toimitetaan erikseen konevertailtavissa olevassa tekstimuodossa, kuten .txt tai Markdown (.md)-tiedostomuodossa.
Mikäli erillistä tekstiaineistoa ei ole toimitettu, käyttää Noviaria optista tekstintunnistusta tekstien lukemiseksi kuvista. Tämä menetelmä muuntaa kuvissa olevan tekstin selkotekstiksi, mutta lopputulos riippuu paljon käytetystä kirjaintyypistä ja tekstin kielestä, eikä tarkka muunnos ole välttämättä mahdollinen. Optinen tekstintunnistus vaatii aina erillisen oikoluvun.