4.6 Vektorgrafikk og illustrasjon

En logo i alle størrelser

Tenk på Apple-logoen. Det lille eplet finnes overalt -- som et bittelite ikon i hjørnet av telefonskjermen din, og som et gigantisk skilt på en butikkfasade flere meter høyt. Og uansett størrelse er det knivskarpt, aldri uskarpt eller kornete. Hvordan er det mulig? Hvordan kan det samme bildet være perfekt både bittelite og enormt?

Svaret ligger i en grunnleggende forskjell mellom to typer grafikk. Et vanlig fotografi er bygget av piksler -- bittesmå fargeprikker -- og forstørrer du det for mye, ser du prikkene og bildet blir uskarpt. Men en logo som Apples er bygget på noe helt annet: matematikk. Den består ikke av prikker, men av matematiske formler som beskriver linjer og kurver, og formler kan skaleres uendelig. Dette kalles vektorgrafikk.

I denne fortellingen skal vi forstå denne magien. Vi skal lære den avgjørende forskjellen mellom raster og vektor, og når man velger hva. Vi skal møte Bezier-kurvene som er selve byggesteinen i all vektortegning. Vi skal lære prinsippene bak gode logoer og ikoner. Og vi skal bli kjent med SVG, vektorenes format på nettet.

Prikker mot formler

La oss sette de to typene grafikk opp mot hverandre. Rastergrafikk, også kalt bitmap, består av et rutenett av piksler, der hver piksel har sin egen farge. Det er sånn et fotografi lagres. Styrken er at det kan gjengi uendelige fargenyanser og kompleksitet -- perfekt for fotografier. Svakheten er at når du forstørrer det, må pikslene blåses opp, og bildet blir uskarpt og «pikselete». JPEG, PNG, GIF og WebP er rasterformater.

Vektorgrafikk er noe helt annet. I stedet for prikker består den av matematiske formler -- definert av ankerpunkter, linjer og kurver. Fordi det er formler og ikke faste prikker, kan datamaskinen regne ut bildet på nytt i en hvilken som helst størrelse, helt uten kvalitetstap. Det er derfor logoen er like skarp som ikon og som fasadeskilt. Vektorformater inkluderer SVG, AI, EPS og PDF, og de egner seg for logoer, ikoner, illustrasjoner og typografi.

Så når velger du hva? Det finnes en enkel og praktisk tommelfingerregel: hvis bildet ble tatt med et kamera, er det raster -- et fotografi har for mye kompleksitet for vektor. Men hvis bildet ble tegnet eller designet -- en logo, et ikon, en illustrasjon -- bør det som regel være vektor, så det kan skaleres fritt. Kamera betyr raster; tegning betyr vektor.

Magien i Bezier-kurven

Hvordan tegner man egentlig disse matematiske formene? Grunnlaget for all vektorgrafikk er noe som heter Bezier-kurver, oppkalt etter den franske ingeniøren Pierre Bezier som utviklet dem -- opprinnelig for å designe bilkarosserier. I dag ligger de bak alt fra logoer til selve bokstavene i denne teksten.

En Bezier-kurve bygges av noen få elementer. Ankerpunkter er punktene som definerer formen -- de kan være hjørnepunkter for skarpe hjørner, eller kurvepunkter for myke svinger. Fra hvert ankerpunkt strekker det seg kontrollhåndtak -- usynlige linjer som bestemmer kurvens retning og hvor «sterk» svingen er. Ved å dra i disse håndtakene former du kurven akkurat slik du vil. Det krever litt øving, men når det sitter, kan du tegne hva som helst.

Når du kobler sammen flere ankerpunkter, får du en sti. En åpen sti har start- og sluttpunkt som ikke møtes -- det blir en linje. En lukket sti har start- og sluttpunkt som møtes -- det blir en hel form som kan fylles med farge. Noen gode råd når du jobber med Bezier-kurver: bruk så få ankerpunkter som mulig, for det gir renere og jevnere kurver. Plasser ankerpunktene der kurven faktisk endrer retning. Og hold kontrollhåndtakene parallelle for de jevneste overgangene. Det viktigste rådet av alt er likevel enkelt: øv mye. Bezier-kurver er en ferdighet som sitter i fingrene, og som blir bedre for hver gang du tegner.

Det enkles kraft: logoer og ikoner

Vektorgrafikk er det perfekte verktøyet for logoer og ikoner, og her gjelder ett overordnet prinsipp: enkelhet er konge. Tenk på de mest kjente logoene i verden -- Apple, Nike, IKEA. De er alle slående enkle. Det er ikke tilfeldig.

God logodesign hviler på noen prinsipper. Enkelhet gjør logoen lett å gjenkjenne og huske, og sørger for at den fungerer selv bitteliten. Skalerbarhet betyr at den må se bra ut fra et 16-pikslers favicon til et storformat -- nettopp derfor lages logoer som vektor. Tidløshet handler om å unngå moter og trender som raskt gjør logoen utdatert. Allsidighet krever at logoen fungerer i farger, i svart-hvitt, og mot både mørk og lys bakgrunn. Og relevans betyr at den bør si noe om virksomhetens verdier. En logo for en hageprodusent kan for eksempel kombinere et stilisert blad med en bokstav -- enkelt, men meningsfullt.

Ikoner følger samme tankegang i miniatyr. Et ikon er et lite, forenklet symbol som formidler en handling eller et konsept -- som konvolutten for e-post. Her er rådene konkrete: bygg ikonet på et fast rutenett, ofte 24 ganger 24 piksler, så alt blir konsekvent. Hold linjene jevne og visuelt balanserte. Test ikonet i den faktiske størrelsen det skal brukes i, ofte bare 16 til 32 piksler -- det som ser flott ut stort, kan bli grøt smått. Og sørg for at ikonet er forståelig uten tekst. Et e-postikon trenger bare et rektangel og to linjer som danner konvoluttens klaff -- to enkle former, og alle skjønner hva det betyr. Enkelhet er ikke mangel på arbeid; det er ofte resultatet av mye arbeid.

Vektorenes hjem på nettet

Når vektorgrafikk skal ut på nettet, har den sitt helt eget format: SVG -- Scalable Vector Graphics. Navnet sier alt: skalerbar vektorgrafikk. Det er standarden for vektorer på web, og det har noen egenskaper som gjør det ganske spesielt.

For det første er SVG XML-basert, som betyr at det egentlig er tekst -- du kan åpne en SVG-fil og lese og redigere den som kode. For det andre er det skalerbart, så det er knivskarpt i enhver størrelse, akkurat som vektor skal være. For enkel grafikk har SVG dessuten liten filstørrelse, noe som gir raske nettsider. Fordi det lever i koden, er det også interaktivt -- du kan animere SVG-grafikk med CSS og JavaScript, slik vi lærte om i webdelen. Og ikke minst er det tilgjengelig: en SVG kan inneholde tekst som skjermlesere kan lese opp, noe som er bra for universell utforming.

La oss samle alt vi har lært i en liten arbeidsprosess for å lage et e-postikon. Du starter med et rutenett på 24 ganger 24 piksler. Du tegner grunnformen -- et rektangel for konvolutten. Du legger til to diagonale linjer fra de øvre hjørnene som møtes på midten, og danner klaffen. Du tilpasser stilen -- kanskje en linjetykkelse på 2 piksler, med avrundede eller skarpe hjørner alt etter designsystemet. Du tester at det er gjenkjennelig nede i 16 piksler. Og til slutt eksporterer du det som SVG for nettbruk. Det ferdige ikonet er bare et rektangel og to linjer -- og nettopp i den enkelheten ligger styrken. Med vektorgrafikk, Bezier-kurver og SVG har du nå verktøyene til å lage skarp, skalerbar grafikk for enhver plattform. Vanlige verktøy for dette er Illustrator, gratisalternativet Inkscape, og Figma.

Oppsummering

Vi har forstått hvorfor en logo kan være skarp i alle størrelser: fordi vektorgrafikk er bygget på matematiske formler, ikke faste piksler. Vi skilte den fra rastergrafikk (piksler, best for foto) med den enkle regelen: kamera betyr raster, tegning betyr vektor.

Vi møtte Bezier-kurvene -- ankerpunkter, kontrollhåndtak og stier -- som er byggesteinen i all vektortegning, og lærte å bruke få punkter for rene kurver. Vi så prinsippene bak gode logoer (enkelhet, skalerbarhet, tidløshet, allsidighet, relevans) og ikoner (rutenett, testing i faktisk størrelse, forståelig uten tekst). Og til slutt ble vi kjent med SVG, vektorenes XML-baserte format på nettet -- skalerbart, lett, animerbart og tilgjengelig. Nå har du verktøyene til å skape skarp, skalerbar grafikk for enhver plattform.