Opret enkle illustrationer til internettet

Jan 27, 2026

hvordan

Jeg satte mig ned, spillede lidt musik, dæmpede lysene og åbnede min bærbare computer. Jeg havde masser at gøre. I et forsøg på at indkalde inspiration begyndte jeg at tegne Doodle Art. linjer fra et hjørne af skærmen til den anden, da jeg så en kometform. "Hmm," startede min hjerne langsomt, "hvad hvis jeg forbinder dem og tilføjer nogle planeter?"

Et par timer senere havde jeg min mest populære Dribble Illustration. Jeg husker stadig, hvordan det skete, men efter nogle grave gennem min hjerne opdagede jeg min indre algoritme for at skabe en illustration - ikke bare denne, men nogen anden jeg har gjort. Det er sjovt, jeg forventede, at det er mere komplekst. Åh, godt ...

Illustration Style.

Før jeg begynder at arbejde på en illustration, sørger jeg for, at jeg forstår sit formål og konteksten, hvor det kommer til at leve. Er det in-app eller hjemmeside eller tapet? Vil der være tekst på det, og det kommer til at være placeret i et travlt miljø? Skal det symbolisere en handling, eller er det lige der for at afgive en bestemt stemning?

Hvis illustrationen skal relæere en klar ide, eller for at symbolisere et bestemt objekt eller handling, så vælger jeg en simpel udførelse, hvor al opmærksomhed er fokuseret på den vigtige del. Hvis jeg imidlertid specifikt går til en 'Silent' baggrundsillustration, vælger jeg en mønsterlignende tilgang, eller sørg for, at der ikke er indlysende opmærksomhedsgreb, for at minimere muligheden for, at folk overfortolkning af det . For in-app-illustrationer forsøger jeg at holde tingene tamme, for at undgå at virke opmærksomhed fra funktionaliteten.

Æstetiske regler

Min hjerne kan lide at skabe alle disse underlige regler. De er som latterlige udfordringer, som jeg ikke kan stå for at passere over: Hvad hvis jeg kun tegner et menneske ved hjælp af cirkler? Hvad hvis jeg illustrerer en solnedgang, der kun bruger en farve?

Geometriske regler, logiske progressioner, symmetri. Der er noget meget tiltalende med at have strenge matematiske regler anvendt til kunst. Det føles som omvendt engineering magi; Det strimler væk det mystiske element i kunst, så det er næsten som at afsløre videnskaben bag den.

Kompleks illustration; Enkel farvepaletten

A city illustration with a complex level of detail, which has been combined with a simple, analogous colour palette — En by illustration med et komplekst niveau af detaljer, som er blevet kombineret med en simpel, analog farvepaletten (Billedkredit: nina geometrieva)

Som det viser sig, er min hjerne ret doven, når det kommer til at vælge farve, så det har to generelle typer farvepaletter, det vælger fra: en til komplekse illustrationer; en anden for enkle.

Komplekse illustrationer har højt granularitetsniveau, med mange former / objekter og en masse detaljer. Disse er normalt mønster-lignende af naturen og har ikke et klart fokuspunkt. Min hjerne har besluttet, at disse typer af illustrationer fungerer godt med monokromatiske eller analoge farvepaletter. Eller i bredere vilkår - færre farver og mindre farvekontrast.

Alt dette koger ned til visuel balance; Hvis formerne er vanvittige, skal farverne være intetsigende. En undtagelse er i en sag, hvor jeg vil lægge vægt på et bestemt objekt, der ellers ikke ville skille sig ud. Dette kan opnås ved at bruge en stærkt kontrasterende farve, mens alt andet holdes monokromatisk og tamme. Den perfekte visuelle balance er et sted mellem overstimulering (høje farver, komplekse former, en masse detaljer, alt skriger i dit ansigt) og understimulation (den dårlige type minimal, kedeligt, intet nyt eller interessant foregår).

Monokromatiske paletter

Analogous or monochrome palettes work effectively when there is a visual progression or repetition of elements — Analoge eller monokrome paletter arbejder effektivt, når der er en visuel progression eller gentagelse af elementer (Billedkredit: nina geometrieva)

En monokromatisk farvepalet består af toner eller nuancer af en farve. Tints sker, når en farve er gradvist blandet med hvid; nuancer sker, når det gradvist blandes med sort. Et problem, jeg altid har haft med monokromatiske paletter, er, at toner og nuancer gradvist taber livsstil, på grund af arten af at blande en farve med hvid eller sort, hvoraf begge har nul procent mætning.

For at undgå denne gradvise dulling bruger jeg en simpel snyde: såvel som at tilføje hvid eller sort, skifter jeg gradvist nuinen en smule. Dette er i det væsentlige en subtil analog palette i stedet for en monokromatisk palette. For eksempel, hvis jeg vil skabe røde monokromatiske farver, vil jeg skifte nuance mod orange. Hvis jeg vil skabe røde monokromatiske nuancer, vil jeg skifte nuance mod Magenta, da det mørkes. Hvis jeg vil få lettere tints af blå, skifter jeg mod cyan; For mørke nuancer af blå skifter jeg i den anden retning mod lilla.

Dette resulterer i en palette, der stadig føles noget monokromatisk, men er meget mere levende og har absolut spark. Da jeg opdagede dette, har jeg aldrig lavet en sand monokromatisk palette igen.

Enkel illustration; Kompleks farvepaletten

Illustrationer med lavere kompleksitet har normalt et klart fokuspunkt og objekthierarki. Formerne har tendens til at være mere ligetil, så farvevalgene kan være vild. Jeg tænker på højkontrastende farver af enhver art - komplementær, triadisk, tetradisk - så længe det er en iøjnefaldende, stimulerende palette.

Der er et helt univers mellem hvad jeg beskrev som komplekse og enkle illustrationer. Men min hjerne er ikke alt for bekymret over alt det spektrum - det foretrækker at mærke enhver illustration som enten kompleks eller enkle.

Højkontrastfarvepaletter er ikke så enkle som at vælge de modsatte farver på et farvehjul. Farvehjulet er et godt udgangspunkt, men det er på ingen måde slutningen af processen. For eksempel, når du vælger en god orange og blå kombination, er jeg opmærksom på et par ting: Opfattet luminans, og hvordan accentfarver arbejder med standardfarver.

Opfattede luminans.

Hvis begge farver har samme opfattede luminans, finder hjernen det svært at skelne mellem grænsen mellem dem - så ser på billedet føles ubehageligt. Medmindre farverne aldrig skal røre hinanden, er det værd at sikre, at de ikke har den samme opfattede luminans.

Åh, og hvis du er nysgerrig, hvorfor jeg bruger ordet 'opfattet', kig op ad Helmholtz-Kohlrausch-effekten, som viser, at farver med samme luminans kan opfattes for at have forskellige værdier. Da orange har højere opfattet luminans end blå, for eksempel er det nemt at øge forskellen mellem de to farver ved at bruge en lysere orange og en mørkere blå.

Accent versus standardfarver

An illustration for the Zopim homepage. Blue shades are dominant, with orange providing the accents — En illustration til Zopims hjemmeside. Blå nuancer er dominerende, med orange, der leverer accenterne (Billedkredit: nina geometrieva)

Hvis brugen af hver farve er langt anderledes, justerer jeg farveværdierne i overensstemmelse hermed. At være modig med accentfarver og spille det sikkert med standardfarver er min go-to-tilgang.

I det orange-blå eksempel ovenfor vil jeg bruge blå som en beroligende farve til at fylde større områder, til baggrunde og store elementer og nogle vilde orange til knapper, ikoner og andre små elementer. I forbindelse med illustration ville jeg have blå nuancer som grundlag, og igen orange som accentet - måske ved at understrege en interessant detalje eller et vigtigt element.

Visuel balance check.

Uanset hvilken illustration du ender med ved at følge ovenstående guider, skal du sørge for at tage et skridt tilbage og kontrollere, om alt det giver mening sammen. Der er så mange undtagelser fra regler i illustration, at det ville være umuligt at oplyse alle kombinationer, der fødte en fantastisk illustration. Prøv altid tingene, der synes interessant, og når noget overrasker dig, skal du sørge for at forstå det, så du kan fortsætte med at forbedre din intuition.

Denne artikel optrådte oprindeligt i Net Magazine. Udgave 286; Køb det her !

Relaterede artikler

7 Web Design DOS og DON'TS
6 af de bedste freelance porteføljer af 2016
De 6 bedste Photoshop værktøjer til webdesignere

Opret enkle illustrationer til internettet

Illustration Style.

Æstetiske regler

Kompleks illustration; Enkel farvepaletten

Monokromatiske paletter

Enkel illustration; Kompleks farvepaletten

Opfattede luminans.

Accent versus standardfarver

Visuel balance check.

hvordan - Mest populære artikler

Sådan tegner du en nakke og skuldre

Sådan laver du en foto collage i Photoshop CC

Kom i gang med Redux Thunk

Sådan bruger du smarte lag i Photoshop

Maling rippling vand i olier

Tegn en figur på under fem minutter

Vækker planter i Houdini

Byg en kortbaseret UI med fundament

Kategorier