Denne guide udforsker, hvad vektorgrafik er, og hvordan designere og illustratorer bruger det til at forbedre deres webdesign.
Ændring af billedstørrelse resulterer ofte i slørede, pixelerede ændringer – men ikke med vektorgrafik.
Vektorgrafik gør det muligt for grafiske designere og billedkunstnere at manipulere og skalere billeder uden at miste opløsning. Det er den matematisk baserede løsning på det gamle designproblem: lav kvalitet efter ændring af størrelsen.
Hvad er vektorgrafik?
Vektorbilleder skabes ved hjælp af matematiske algoritmer indlejret i softwareprogrammer, der etablerer punkter på et gitter, der kan skaleres op eller ned. Designere bruger vektorfiler til at skabe vektorgrafik og illustrationer, såsom reklamer, videospil og statiske billeder. De kan modificere, ændre størrelse og skalere disse vektorbilleder uden tab af opløsning. Dette står i kontrast til vektorkunstens forgænger, rastergrafik, som brugte farvede pixels og havde en fast størrelse, hvilket gjorde dem mindre alsidige på tværs af medier.
I en tid med smartphones og deling på sociale medier drager webdesignere og forbrugere fordel af sømløst skalerbar kunst. Der er intet tab af kvalitet med vektorkunst, og billeder overføres mellem forskellige enheder, så brugerne får en bedre og mere sammenhængende oplevelse. Vektorkunstens høje opløsning og skalerbarhed reducerer også afvisningsprocenten fra besøgende, der søger billeder af højere kvalitet eller med hurtigere indlæsning.
Før vi dykker ned i de typer programmer, der bruges til at skabe vektorkunst – og de filtyper, der understøtter det – er det nyttigt at forstå, hvordan designere og illustratorer arbejder med det.
Hvad bruges vektorgrafik til?
Grafikere, illustratorer og designere bruger vektorgrafik af en række forskellige årsager, herunder følgende:
- Skalerbarhed. Vektorformater er gode til projekter, der kræver skalerbar grafik, herunder skalerbar type og tekst. For eksempel vises firma- og brandlogoer i forskellige størrelser; de dukker op i hjørnet af en mobilapplikation eller på et billboard langs vejen. Et logo skabt med vektorgrafik kan skaleres op eller ned uden tab af kvalitet eller skabelse af en stor fil.
Det var vektorgrafikkens skalerbarhed, der gjorde, at den vendte tilbage, efter at rastergrafikken var faldet i unåde i 1980’erne. Vektorgrafik blev oprindeligt brugt i computerskærme i 1960’erne og 1970’erne. World Wide Web Consortium arbejdede på Vector Markup Language, som udviklede sig til open source-sproget Scalable Vector Graphics, der indeholder vektor- og rasterelementer.
- App- og webudvikling. Vektorgrafik er nyttig i applikations- og webudvikling, fordi webapps og den grafik, de indeholder, skal fungere med forskellige skærmstørrelser og enhedstyper. For eksempel er Amazon WorkLink en mobilapp, der muliggør en fuldt interaktiv repræsentation af virksomhedsdata på en medarbejders mobile enhed.
- Animation. Animerede billeder oprettes også normalt som vektorfiler, hvilket giver renere og glattere billeder.
- Computerstøttet design (CAD). CAD-programmer bruger ofte vektorfiler til produktion, teknik og design på grund af deres skalerbarhed og lethed, når det gælder redigering af de matematiske formler.
De mest anvendte vektorfilformater
Forskellige filtyper bruges til forskellige opgaver. AI-filer bruges f.eks. ofte i trykte medier og digital grafik. EPS-filer kan være både raster- og vektorfiler. De indeholder typisk et mindre designelement, som kan indlejres i et større design. Det gør dem velegnede til at sende logoer, som ofte indarbejdes i større designs. Her de syv mest brugte filtyper til vektorgrafik:
- EPS (Encapsulated PostScript) er det mest almindeligt anvendte vektorfilformat. Designere bruger det til at skabe billeder i høj kvalitet til print, såsom billboards, printannoncer og marketingmaterialer.
- SVG (Scalable Vector Graphics) er populært til illustrationer og grafik på hjemmesider. Det er også et af de vektorgrafikformater, der er accepteret af World Wide Web Consortium (W3C) som en grafisk webstandard.
- AI (Adobe Illustrator) er specifikke for Adobe Illustrator og er standardeksportformatet fra programmet. Det er som regel rå kunstfiler, der i sidste ende gemmes i en anden form, såsom EPS eller SVG. Illustrator tillader lagdeling, gennemsigtighed og specifikke skrifttyper, når man laver grafik.
- PDF (Portable Document Format) er utroligt alsidige og åbnes ofte af Adobe Acrobat. Selvom det ikke er et vektorgrafikformat, kan PDF-filer udveksle dokumenter på tværs af operativsystemer og enheder. Ved at gemme et billede som en PDF-fil kan man nemt overføre det, samtidig med at man bevarer vektorgrafikkens responsivitet.
- CDR (CorelDRAW) er gode til marketingmaterialer som brochurer, nyhedsbreve og visitkort, fordi de er optimeret til trykte reklamer.
- FH (FreeHand MX) var et Adobe-program (udgået i 2003), der blev brugt til kreativt design, storyboarding, dokumentproduktion og redigering. Designere plejede at lave vektorkunst, der blev gemt under et FH-filformat til Flash-animationsprojekter.
- EMF (Enhanced Metafile) gemmer store sæt af grafiske dataspecifikationer for andre filer. Disse metafiler indeholder normalt digital grafik, for det meste vektorkunst. EMF-filer giver enhedsuafhængighed ved at lade brugerne overføre billeder, mens de originale specifikationer bevares.
Sådan laver du vektorgrafik
For at forstå, hvordan man laver vektorgrafik, skal man lære at bruge den designsoftware, der skaber den. At kende algoritmerne er valgfrit, takket være programmer, der udfører den komplekse matematik bag kulisserne.
Her er et par af de mest almindelige grafiske designprogrammer, der kan hjælpe dig med at skabe dynamisk vektorgrafik:
- Adobe Illustrator er et brugervenligt værktøj til at skabe digital kunst med mange kreative muligheder for vektorbaseret billedmanipulation.
- Sketch er en vektorgrafikeditor til Apples macOS, som mest bruges til UX/UI-design til mobil- og webapps. Filformatet gemmer i proprietære filer til brug i Adobe Illustrator.
- Quark, eller QuarkXPress, kører i Windows- og macOS WYSIWYG-miljøer (What You See Is What You Get). Det bruges primært til desktop publishing.
- CorelDRAW er en ren vektorgrafikeditor, der bruges som grafisk designsoftware til at skabe professionelle vektorillustrationer, layouts, fotoredigeringer, typografi og skabelonværktøjer.
- Affinity Designer ligner Adobe Illustrator og giver designere mulighed for at skabe dynamisk vektorkunst ved hjælp af værktøjer som gradienter, effekter, transformationer og kurveredigering i realtid.
- Inkscape er en gratis og open source editor til vektorgrafik. Den eksporterer til SVG og er primært et illustrationsværktøj.
Vektor vs. raster
Et rastergrafikbillede mapper bits direkte til et displayområde, også kaldet et bitmap. Rastergrafik består af et fast antal pixels, hvilket gør den mindre skalerbar end vektorgrafik. På et tidspunkt, når rasterbilledet er forstørret nok, bliver kanterne flossede, og det ser pixeleret ud – dvs. når pixels bliver synlige. Rastergrafik kan ikke skaleres op uden at gå på kompromis med billedkvaliteten.
Vektor- og rasterbilleder kan se forskellige ud. Det skyldes, at vektorgrafik skal have en separat form for hver farvenuance, mens rasterbilleder kan have hver pixel i en anden farve, hvilket viser subtile farvegradueringer og dybde tydeligere. Ved større størrelser bliver kanterne på rasterbilleder ujævne, og billederne pixelerer. Vektorbilleder er mere skalerbare.
Der er også et en-til-en-forhold mellem hver pixel og den hukommelse, rastergrafik optager på en computer. Computere skal gemme information for hver pixel i et rasterbillede, mens vektorbilleder kun gemmer de serier af punkter, der skal forbindes med linjer, kurver osv. Derfor er vektorfiler normalt mindre end rasterfiler. Vektorbilledfiler er af denne grund lettere at ændre end rasterbilledfiler.
Vektor- og rasterbilleder kan konverteres til hinanden med den rette software. Adobe Illustrator og Adobe Photoshop er eksempler på software, der gør det muligt at konvertere det ene billedformat til det andet.
Rasterfiler er særligt gode til at skildre farvedybde, da hver pixel kan have en anden farve. Og der er flere pixels, der kan være unikke farver, end vektorer, der kan være unikke farver. Det gør rasterfilformater gode til redigering af digitale fotografier.
Vil du vide mere om vektorgrafik samt forskellen mellem vektor og raster? Så læs også: Vector eller raster: Hvad er forskellen?
