4.6 Vektorgrafikk og illustrasjon
Lær forskjellen mellom raster- og vektorgrafikk, og bruk vektorverktøy til å lage logoer, ikoner og illustrasjoner.
55 min
6 oppgaver
Raster vs. vektorBezier-kurver og stierLogodesignIkondesignSVG-formatet
Din fremgang i kapitlet
0 / 6 oppgaver
Vektorgrafikk og illustrasjon
Mens fotografier er piksler, er vektorgrafikk matematikk. En vektor defineres av punkter, linjer og kurver som kan skaleres uendelig uten kvalitetstap. Logoer, ikoner og illustrasjoner lages ofte som vektorgrafikk fordi de må fungere i alt fra et lite ikon på en mobilskjerm til en stor plakat på en bygning.
I dette kapittelet skal du lære:
- Forskjellen mellom raster- og vektorgrafikk
- Grunnleggende vektorverktøy som Bezier-kurver og stier
- Prinsipper for logodesign og ikondesign
- SVG-formatet for nett
Vektorgrafikk
Vektorgrafikk er bilder definert av matematiske formler som beskriver punkter, linjer og kurver. I motsetning til rastergrafikk (piksler) kan vektorgrafikk skaleres til enhver størrelse uten tap av kvalitet.
Raster vs. vektor
Rastergrafikk (bitmap):
- Består av et rutenett av piksler
- Hvert piksel har en definert farge
- Blir uskarpt ved oppskalering
- Filformater: JPEG, PNG, GIF, WebP
- Best for: Fotografier og komplekse bilder med mange fargenyanser
Vektorgrafikk:
- Består av matematiske formler
- Defineres av ankerpunkter, linjer og kurver
- Kan skaleres uendelig uten kvalitetstap
- Filformater: SVG, AI, EPS, PDF
- Best for: Logoer, ikoner, illustrasjoner, typografi
Når velge hva?
Tommelregel: Hvis bildet ble tatt med et kamera, er det raster. Hvis det ble tegnet eller designet, bør det ofte være vektor.
Bezier-kurver og stier
Grunnlaget for vektorgrafikk er Bezier-kurver, oppkalt etter den franske ingeniøren Pierre Bezier.
Ankerpunkter: Punkter som definerer formen. Du kan ha hjørnepunkter (skarpe hjørner) eller kurvepunkter (myke kurver).
Kontrollhåndtak: Usynlige linjer som strekker seg ut fra ankerpunktene og bestemmer kurvens retning og styrke.
Stier er sekvenser av ankerpunkter forbundet med linjer eller kurver:
- Åpen sti: Start- og sluttpunkt er ikke forbundet (en linje)
- Lukket sti: Start- og sluttpunkt møtes (en form som kan fylles med farge)
Tips for å jobbe med Bezier-kurver:
- Bruk så få ankerpunkter som mulig for rene kurver
- Plasser ankerpunkter der kurven endrer retning
- Hold kontrollhåndtakene parallelle for jevne kurver
- Øv mye - Bezier-kurver krever praksis
Logodesign
En god logo er enkel, gjenkjennelig og fungerer i alle størrelser.
Prinsipper for logodesign:
- Enkelhet: De mest kjente logoene er enkle (Apple, Nike, IKEA)
- Skalerbarhet: Må fungere fra favicon (16px) til storformat
- Tidløshet: Unngå trender som gjør logoen utdatert
- Allsidighet: Må fungere i farger, svart-hvitt, på mørk og lys bakgrunn
- Relevans: Bør kommunisere virksomhetens verdier
Ikondesign
Ikoner er små, forenklede symboler som kommuniserer en handling eller et konsept.
Prinsipper:
- Bruk et konsistent grid (f.eks. 24x24 piksler)
- Hold linjene jevne og optisk justerte
- Test i faktisk bruksstørrelse (ofte 16-32px)
- Sørg for at ikonet er forståelig uten tekst
SVG-formatet
SVG (Scalable Vector Graphics) er standardformatet for vektorgrafikk på nett.
- XML-basert: Kan redigeres med kode
- Skalerbart: Skarpt i alle størrelser
- Liten filstørrelse for enkel grafikk
- Interaktivt: Kan animeres med CSS og JavaScript
- Tilgjengelig: Kan inneholde tekst som skjermlesere kan lese
✏️Lage et enkelt ikon
La oss tenke gjennom prosessen for å lage et e-postikon:
1. Grid: Start med et 24x24 pikslers rutenett.
2. Grunnform: Tegn et rektangel som representerer konvolutten.
3. Detaljer: Legg til to diagonale linjer fra øvre hjørner som møtes i midten for å skape "klaffen".
4. Stiltilpasning: Velg linjestørrelse (vanligvis 2px) og avrundede eller skarpe hjørner for å matche designsystemet.
5. Testing: Sjekk at ikonet er gjenkjennelig i 16px størrelse.
6. Eksport: Lagre som SVG for nettbruk.
Det ferdige ikonet bruker bare et rektangel og to linjer - enkelhet er nøkkelen.
Oppsummering
- Rastergrafikk (piksler) egner seg for fotografier, vektorgrafikk (matematiske formler) for logoer og ikoner.
- Vektorfiler kan skaleres uendelig uten kvalitetstap.
- Bezier-kurver og stier er grunnlaget for vektortegning.
- Logodesign krever enkelhet, gjenkjennelighet og funksjon i alle størrelser.
- SVG-formatet brukes for vektorgrafikk på nettsider og kan styles med CSS.
- Illustrator, Inkscape og Figma er vanlige verktøy for vektorarbeid.
📝Oppgave 1
Hva er hovedforskjellen mellom raster- og vektorgrafikk?
📝Oppgave 2
Forklar hva Bezier-kurver er, og hvorfor de er viktige i vektorgrafikk.
📝Oppgave 3
Hva er SVG?
📝Oppgave 4
Nevn minst fire prinsipper for god logodesign, og forklar hvorfor hvert prinsipp er viktig.
📝Oppgave 5
Hvilke typer bilder egner seg best som vektorgrafikk?
📝Oppgave 6
Skisser en enkel logo for en fiktiv bedrift. Beskriv designvalgene dine med referanse til prinsippene for logodesign og bruk av vektorgrafikk.