Lag enkle illustrasjoner for nettet

Sep 13, 2025

hvordan

[1. 3]

Jeg satte meg ned, spilte litt musikk, dimmet lysene og åpnet min laptop. Jeg hadde mye å gjøre. I et forsøk på å ringe inspirasjon, begynte jeg å tegne Doodle Art. Linjer fra ett hjørne av skjermen til den andre, da jeg så en kometform. "Hmm," startet min hjerne sakte, "Hva om jeg kobler dem og legger til noen planeter?"

Noen timer senere hadde jeg min mest populære dribbbleillustrasjon. Jeg husker fortsatt neppe hvordan det skjedde, men etter noen graving gjennom hjernen min, oppdaget jeg min indre algoritme for å skape en illustrasjon - ikke bare denne, men noen andre jeg har gjort. Det er morsomt, jeg forventet å være mer kompleks. Jaja…

Illustrasjonsstil

Før jeg begynner å jobbe med en illustrasjon, sørger jeg for at jeg forstår sin hensikt og konteksten hvor den skal leve. Er det i-app, eller nettside eller tapet? Vil det være tekst på det, og skal det være plassert i et travelt miljø? Er det ment å symbolisere en handling, eller er det bare der for å gi av en bestemt stemning?

Hvis illustrasjonen skal videresende en klar ide, eller for å symbolisere en bestemt gjenstand eller handling, så velger jeg en enkel utførelse der all oppmerksomhet er fokusert på den viktige delen. Hvis jeg imidlertid er spesielt for en "Silent" bakgrunnsillustrasjon, velger jeg en mønsterlignende tilnærming, eller sørg for at det ikke er noen åpenbare oppmerksomhets-gripende elementer, for å minimere muligheten for at folk over tolkning . For illustrasjoner i app, prøver jeg å holde ting tamme, for å unngå å avgjøre oppmerksomhet fra funksjonaliteten.

Estetiske regler

Hjernen min liker å skape alle disse rare reglene. De er som latterlige utfordringer som jeg ikke kan stå for å passere over: Hva om jeg tegner et menneske som bare bruker sirkler? Hva om jeg illustrerer en solnedgang med bare en farge?

Geometriske regler, logiske progressjoner, symmetri. Det er noe veldig attraktivt å ha strenge matematiske regler som brukes til kunst. Det føles som omvendt ingeniør magi; Det striper bort det mystiske elementet i kunst, så det er nesten som å avsløre vitenskapen bak den.

Kompleks illustrasjon; Enkel fargepalett

A city illustration with a complex level of detail, which has been combined with a simple, analogous colour palette — En by-illustrasjon med et komplekst detaljnivå, som har blitt kombinert med en enkel, analog fargepalett (Bilde Kreditt: Nina Geometrieva)

Som det viser seg, er hjernen min ganske lat når det gjelder å velge farge, så det har to generelle typer fargepaletter det velger fra: en for komplekse illustrasjoner; en annen for enkle.

Komplekse illustrasjoner har høyt granularitetsnivå, med mange former / gjenstander og mye detaljer. Disse er vanligvis mønster-lignende av naturen og har ikke et klart fokuspunkt. Hjernen min har bestemt at disse typer illustrasjoner fungerer bra med monokromatiske eller analoge fargepaletter. Eller, i bredere vilkår - færre farger og mindre fargekontrast.

Alt dette koker ned til visuell balanse; Hvis figurene er galne, skal fargene være tørt. Ett unntak er i et tilfelle hvor jeg vil legge vekt på et bestemt objekt som ellers ikke ville skille seg ut. Dette kan oppnås ved å bruke en svært kontrasterende farge, mens alt annet holdes monokromatisk og tamme. Den perfekte synsbalansen er et sted mellom overstimulering (høye farger, komplekse former, mye detalj, alt skriker i ansiktet ditt) og understimulerer (den dårlige typen minimal, kjedelig, ingenting nytt eller interessant skjer).

Monokromatiske paletter

Analogous or monochrome palettes work effectively when there is a visual progression or repetition of elements — Analoge eller monokrome paletter fungerer effektivt når det er en visuell progresjon eller repetisjon av elementer (Bilde Kreditt: Nina Geometrieva)

En monokromatisk fargepalett består av tonene eller nyanser av en farge. Tints skje når en farge er gradvis blandet med hvitt; nyanser skje når den gradvis blandes med svart. Et problem jeg har alltid hatt med monokromatiske paletter er at toner og nyanser gradvis mister livsstil, på grunn av arten av å blande en farge med hvit eller svart, som begge har null prosentsmetning.

For å unngå denne gradvis dullingen bruker jeg en enkel juks: så vel som å legge til hvitt eller svart, skifter jeg gradvis fargen litt. Dette er i hovedsak en subtil analog palett i stedet for en monokromatisk palett. For eksempel, hvis jeg vil lage røde monokromatiske toner, vil jeg skifte fargen mot oransje. Hvis jeg vil lage røde monokromatiske nyanser, vil jeg skifte fargen mot magenta som det mørker. Hvis jeg vil få lettere farger med blå, skifter jeg mot Cyan; For mørke nyanser av blått skifter jeg i den andre retningen, mot lilla.

Dette resulterer i en palett som fortsatt føles noe monokromatisk, men er mye mer levende og definitivt har spark. Siden jeg oppdaget dette, har jeg aldri opprettet en ekte monokromatisk palett igjen.

Enkel illustrasjon; Kompleks fargepalett

Illustrasjoner med lavere kompleksitet har vanligvis et klart fokuspunkt og objekthierarki. Formene har en tendens til å være mer grei, så fargevalgene kan være villere. Jeg tenker med høy kontrastfarger av noe slag - komplementær, triadisk, tetradisk - så lenge det er en iøynefallende, stimulerende palett.

Det er et helt univers mellom det jeg beskrev som komplekse og enkle illustrasjoner. Men hjernen min er ikke altfor bekymret for alt det spekteret - det vil helst å merke noen illustrasjon som enten komplisert eller enkelt.

Høykontrastfargepaletter er ikke så enkle som å plukke de motsatte fargene på et fargehjul. Fargehjulet er et flott utgangspunkt, men det er på ingen måte slutten av prosessen. For eksempel, når jeg velger en god oransje og blå kombinasjon, tar jeg oppmerksom på noen få ting: oppfattet luminans, og hvordan aksentfarger fungerer med standardfarger.

Oppfattet luminans

Hvis begge fargene har samme oppfattet luminans, finner hjernen det vanskelig å skille grensen mellom dem - så ser på bildet føles ubehagelig. Med mindre fargene aldri skal berøre hverandre, er det verdt å sørge for at de ikke har samme oppfattet luminans.

Oh, og i tilfelle du er nysgjerrig på hvorfor jeg bruker ordet "oppfattet", slå opp Helmholtz-Kohlrausch-effekten, som demonstrerer at farger med samme luminans kan oppfattes for å ha forskjellige verdier. Siden oransje har høyere oppfattet luminans enn blå, for eksempel, er det lett å ytterligere øke forskjellen mellom de to fargene ved å bruke en lettere oransje og en mørkere blå.

Accent versus standardfarger

An illustration for the Zopim homepage. Blue shades are dominant, with orange providing the accents — En illustrasjon for Zopims hjemmeside. Blå nyanser er dominerende, med oransje som gir aksentene (Bilde Kreditt: Nina Geometrieva)

Hvis bruken av hver farge er svært forskjellig, justerer jeg fargeverdiene tilsvarende. Å være modig med aksentfarger og spille det trygt med standardfarger, er min go-to-tilnærming.

I det oransje-blåeksemplet ovenfor, ville jeg bruke blå som en beroligende farge for å fylle opp større områder, for bakgrunner og store elementer, og noen vill oransje for knapper, ikoner og andre små elementer. I sammenheng med illustrasjon har jeg blå fargetoner som grunnlag, og igjen, oransje som aksent - kanskje ved å understreke en interessant detalj eller et viktig element.

Visuell balanse sjekk

Uansett hvilken illustrasjon du ender med ved å følge de ovennevnte guider, sørg for at du tar et skritt tilbake og kontroller om alt er fornuftig sammen. Det er så mange unntak fra regler i illustrasjonen, at det ville være umulig å liste ut alle kombinasjoner som fødte en fantastisk illustrasjon. Prøv alltid ting som virker interessante, og når noe overrasker deg, sørg for at du forstår det, slik at du kan fortsette å forbedre din intuisjon.

Denne artikkelen opprinnelig dukket opp i Net Magazine. utgave 286; Kjøp det her !

Relaterte artikler

7 Webdesign DOS og DONS
6 av de beste freelance porteføljene i 2016
De 6 beste Photoshop-verktøyene for webdesignere

Lag enkle illustrasjoner for nettet

Illustrasjonsstil

Estetiske regler

Kompleks illustrasjon; Enkel fargepalett

Monokromatiske paletter

Enkel illustrasjon; Kompleks fargepalett

Oppfattet luminans

Accent versus standardfarger

Visuell balanse sjekk

hvordan - Mest populære artikler

Lag en tilpasset slakk bot

8 Amazing New Graphic Design Tutorials

Chiaroscuro Art: En trinnvis veiledning

Hvordan lage 3D Gress

Hvordan male en elven jomfru

10 Regler for å lage brukervennlige webskjemaer

Hvordan tegne fjær

Hvordan lage fargerike verdener som forteller en historie

Kategorier