Sådan bruger du digital billedmaskering til bedre design

Masker er gådefulde, fordi de skjuler og afslører visse dele af et ansigt. Konceptet er det samme med digitale billedmasker: de skjuler og viser dele af et billede, hvilket gør det mere interessant at se på.

Billedmaskering er en central funktion i digital billedredigeringssoftware som Adobe Photoshop, Illustrator og Vectornator.

At maskere et billede eller oprette en billedmaske betyder, at du overlejrer billedlaget med et detaljeret gråtonelag eller en sti, der filtrerer, hvilke dele af billedet der bliver vist.

Det lyder lidt indviklet, ikke? Lad os skære det ud i pap.

Hvad er en billedmaske?

Kort sagt er en billedmaske et filter, der er oprettet med kode. Koden bestemmer, hvor meget og på hvilke områder billedet filtreres.

Forestil dig f.eks. at du har et foto med en glasrude foran dig. Glasset er dækket af sort maling, og det lader ikke nogen del af billedet komme igennem.

Den rude er en maske.

Nu begynder du at fjerne den sorte maling på visse dele af glasset, og du kan vælge, hvilke dele af billedet du vil vise uden at skære, male eller ændre det oprindelige billede.

Glasset kan bevæges frit over billedet for at ændre, hvilke områder af billedet der bliver lukket igennem.

Du kan også bruge denne glasrude med andre billeder, og hvis du vil, kan du oprette en anden glasrudemaske og placere den over det maskerede billede.

Ret sejt, ikke sandt!?

Foto af Pavel Danilyuk via Pexels

Sådan fungerer det i digital billedmaskering:

1. Numeriske værdier tildeles de enkelte pixels i et billede
2. Disse pixelværdier kan læses binært, typisk med 0 som sort og 1 som hvid (disse værdier kaldes binære intensitetsværdier).
3. Pixelværdierne kan også læses som gråtoneskalaer, hvor 0 er sort og 255 er hvid.
4. Disse pixelværdier kan derefter bruges til at indstille opaciteten af de forskellige områder af maskelaget, typisk med 0 (sort) som dækkende og 255 (hvid) som gennemsigtig.
5. Gråskala-pixelintensitetsværdierne mellem 0 og 255 angiver forskellige gennemsigtighedsniveauer, der styrer, hvor stor en procentdel af det originale billede under masken der vises

På denne måde kan du bruge en billedmaske til at manipulere det originale billede uden at redigere selve billedet.

Masken og billedet fungerer også som en enhed, så du kan frit flytte det rundt på tegnebrættet og redigere det, når du har brug for det.

Hvad er forskellen mellem billedmaskering og klipning?

Med standard billedmaskering (eller lagmaskering) kan du oprette et dynamisk maskebillede over det foto eller design, du redigerer. Det er som at kradse i den sorte maling på ruden.

Billedbeskæring er en form for maskering, der bruger en vektorform til at skjule dele af billedet. Alle dele af billedet, der falder uden for vektorformen, vises ikke, og vektorformen kan til enhver tid redigeres. Dette svarer mere til at sætte billedet i en brugerdefineret ramme.

Læs videre for at få en dybdegående forståelse af, hvad billedmasker bruges til, og de forskellige typer af billedmaskering.

Hvad bruges billedmasker til? (med eksempler)

Den virkelige magi ved billedmaskering er, at du kan skabe alt, hvad du kan forestille dig.

En solnedgang i rummet, Eiffeltårnet i ørkenen, havfruer med et teselskab - din eneste begrænsning er din fantasi og de billedredigeringsværktøjer, du har til rådighed.

Design med billedmasker er ikke-destruktivt, hvilket betyder, at det originale billede bevares, og du mister ikke en eneste pixel.

Med billedmasker har du mere kontrol over at skjule og vise bestemte dele af billedet, og du kan bruge en lang række værktøjer og effekter i dit billedredigeringsprogram.

Nedenfor har vi listet nogle af de mest populære måder at bruge billedmasker på i grafisk design.

Oprettelse af brugerdefinerede rammer

Et standardbillede har en rektangulær form. Du kan gøre billederne mere interessante ved at bruge enhver brugerdefineret form, du ønsker, til ikke-destruktiv beskæring af dem.

Brugerdefinerede indramninger er særligt nyttige til kreative marketingdesigns, der kombinerer billeder med illustrationer.

Se eksemplet nedenfor, hvor kunstneren har brugt en interessant buet vektorform til at beskære et foto af en persons ansigt.

De har også beskåret et par andre interessante fotos og kombineret disse billeder med vektorformer, mens de har tilføjet et par minimale drop shadow- og glødeffekter.

Fjernelse af baggrunden

Med billedmaskering kan du fjerne baggrunden fra billeder med et bredt udvalg af værktøjer, så du kan få det helt rigtige resultat.

Fjernelse af baggrunden er fantastisk af flere grunde.

Det giver dig mulighed for at rydde op i en travl baggrund uden at skulle fotografere hele scenen på ny, og det giver dig også mulighed for at udtrække interessante motiver fra fotos til brug i andre designs.

Dette fjerner også behovet for at hyre et professionelt fotostudie eller en lysboks - med dagens billedredigeringssoftware kan du slippe af sted med et hurtigt snapshot taget på din telefon, som du forbedrer med efterbehandling.

Med denne proces kan du også oprette billeder med gennemsigtige baggrunde, som du kan eksportere i billedfiler, der tillader gennemsigtighed, f.eks. PNG og SVG.

Du kan f.eks. fjerne baggrunden af et klassisk maleri og give det en moderne anvendelse, f.eks. ved at fremstille cool merchandise.

Fjernelse af baggrunden er afgørende for at skabe flotte produktkataloger, fordi du kan arrangere produkterne i forhold til hinanden i et layoutdesign.

Dette skaber et ensartet udseende, der er behageligt for øjet, i modsætning til et gitter af rektangulære eller firkantede billeder på siden.

En anden god måde at bruge baggrundsfjernelse på er, når du vil oprette en vektor fra et foto ved hjælp af Auto Trace.

Hvis du fjerner billedelementets baggrund, er der ikke længere behov for ekstra redigering, når Auto Trace er afsluttet.

Se det smukke plante-decal nedenfor. Du kan tegne og lukke alle stierne selv, men du kan også bruge et fundet foto, fjerne baggrunden og derefter stole på, at Auto Trace gør det store arbejde.

Dynamisk billedgennemsigtighed

I grafisk design bruger du ofte flere lag og billedelementer i et design. Det smukke ved billedredigering og vektordesign er, hvordan du kan få alle disse elementer til at interagere med hinanden for at danne et nyt, ensartet billede.

Når du anvender billedmasker, har du mere kontrol over, hvordan billedtransparenser overlejres for at skabe lagvirkninger.

Det betyder, at du kan lave nogle ret stærke og poetiske billeder, som f.eks. det nedenfor, der illustrerer en statistik om plastikaffald i USA.

Du kan også anvende grundlæggende gradienter (f.eks. en radial gradient eller en lineær gradient) på billedmasker for at blande billeder ind og ud af dit design.

Dette skaber dobbelteksponeringseffekter, som en meget dygtig fotograf ville opnå med stor indsats og forsøg og fejl.

Udfyldning af tekst med et billede eller mønster

Kombinationen af skrifttyper og teksturer eller mønstre er en af de nemmeste måder at lave tilpassede marketingdesigns, der virkelig skiller sig ud.

Du kan omdanne skrifttyper til stier og derefter bruge en udklipsmaske til at fylde bogstaverne med billedet.

I eksemplet nedenfor gik designeren et skridt videre og ændrede teksten efter at have lavet den om til stier, idet han strækkede ordene og gjorde dem bølgede.

Uden maskefunktionen ville du være nødt til manuelt at skitsere teksten for at skabe en sti for hvert bogstav, derefter beskære billedet til det pågældende bogstavs form og gøre det samme for hvert andet bogstav i ordet. Lyder det ikke super kontraproduktivt?

Typer af billedmaskering

Du bør have en god idé om, hvad billedmasker er, og hvorfor du skal bruge dem. Det er et vigtigt værktøj til at løfte dine grafiske designs til det næste niveau.

Som du også har set i eksemplerne ovenfor, er billedmaskering ikke kun nyttig til at skabe omfattende og smukke designs. Hvis du laver markedsføringsmateriale, invitationer til arrangementer, plakater, kataloger osv., gør maskering og beskæringsfunktioner det meget mindre arbejdskrævende at lave disse tilpassede designs!

Lad os nu se nærmere på de forskellige typer billedmasker.

1. Vektormasker (AKA Clipping Masks)

Vektormasker, også kendt som beskæringsmasker, oprettes med vektorstier i modsætning til rasterbaserede billedmasker.

Du bruger dit designprograms pen- og formværktøjer eller lignende til at oprette en vektorudklipssti. En udklipssti er en linje, som du tegner med dit vektorværktøj, og som kan bruges til at udstanse en del af et billede, når du har lukket stiens form.

Fordele ved vektormasker

• Den enkleste og letteste måde at klippe billeder og fjerne baggrunde på
• Meget redigerbar og justerbar
• Bedst egnet til indramning af billeder og design med tilpassede former

Ulemper ved vektormasker

• Ikke så god til at bevare kantdetaljer i billeder som f.eks. fotografier
• Færre sofistikerede redigeringsmuligheder med hensyn til farver og effekter sammenlignet med lagmasker

2. Lagmasker

En lagmaske er den standard billedmaske, som du bruger til at skjule og afsløre dele af et billede.

Lagmasker er raster- eller pixelbaserede og redigeres normalt med male- eller markeringsværktøjerne.

Fordele ved lagmasker

• Den bedste måde at redigere meget detaljerede billeder, f.eks. fotografier, på en ikke-destruktiv måde
• Tilbyder en masse kontrol over forskellige effekter og pensler til at skabe dynamiske digitale collager

Ulemper ved lagmasker

• Raster- eller pixelbaseret, så masken er ikke let skalerbar
• Det er ikke let at gå tilbage og redigere dit arbejde eller ændre maskedesignet

3. Masker for Alpha-kanaler

Maskering af alfakanaler sker, når du først laver et valg på dit billede og derefter omdanner dette valgområde til en alfakanal.

Du kan derefter redigere alfamasken, som om den var på sit eget lag, og anvende billedmasker og effekter kun på det valgte område uden at påvirke resten af det originale billede.

Fordele ved Alpha Channel Masks

• Gør det muligt at isolere visse områder af et billede til at maskere
• Tilføjer gennemsigtighed til dit billede, når du fjerner dele af det
• Gør det muligt at gemme markeringer og indstillinger for gennemsigtighed til brug i andre projekter og software
• Perfekt til at fremhæve specifikke funktioner og farver i fotografiske billeder

Ulemper ved Alpha Channel Masks

• Det er lidt mere avanceret at bruge alfakanaler og kræver en del færdigheder og træning
• Det kan være tidskrævende og vanskeligt at foretage det første valg af område

4. CSS billedmaskering

Billedkilde: CSS Tricks

Hvis du beskæftiger dig med webdesign, ved du måske allerede, at du også kan lave avancerede billedmasker ved hjælp af kode.

Med egenskaben mask-image i CSS kan du bruge et gennemsigtigt PNG- eller SVG-billede til at maskere en billedfil på dit websted. Du kan f.eks. bruge dit firmalogo som en maske over et billede af din kontorbygning for at fylde logoet ud.

CSS giver dig mulighed for at oprette billedmasker med figurer, stier, gradienter og tekst, ligesom du ville gøre det i dit designprogram.

Forskellen er, at maskeringseffekterne findes på selve websiden og ikke kan eksporteres som selvstændige billedfiler som f.eks. JPEG- eller PNG-billeder.

Det er også sværere at tilføje og redigere flere lag, og du kan kun se resultatet af dine redigeringer i et live webviewer-værktøj eller en webbrowser.

Fordele ved CSS-masker

• Intet behov for premium billedredigeringssoftware
• Mulig besparelse på billedstørrelsen, fordi effekterne håndteres af koden i stedet for at blive gemt i billedfilen
• Den originale billedfil er stadig tilgængelig i brugergrænsefladen

Ulemper ved CSS-masker

• Virker kun på webbrowsere
• Producerer grundlæggende effekter
• Kan ikke eksportere det originale billede og maskeeffekter som et enkelt billede
• Du skal være meget dygtig til CSS

Andre kodebaserede typer af billedmaskering

Har du nogensinde overvejet de andre måder, hvorpå maskering anvendes i teknologien?

Når du f.eks. vælger et baggrundsbillede eller en sløring i et videomøde, er der tale om dynamisk alfakanalmaskering i videoen.

Ved hjælp af programmeringssprog som C og Python kan du tildele pixelerne i billedobjekter værdier og derefter anvende maskeringseffekter. Dette kaldes spatial filtrering.

Billedmaskering på et røntgenbillede. Billedkilde: Research Gate

Disse maskeringseffekter kan bruges til at reducere sløring og støj og forbedre billedets skarphed. På det medicinske område hjælper billedmaskering med at gøre røntgenbilleder klarere og lettere at analysere.

Nu hvor du kender typerne af billedmasker og ved, hvordan de bruges, kan vi se, hvordan du kan bruge Vectornator til at skabe bedre designs.

Sådan opretter du billedmasker med Vectornator

I Vectornator er maskelaget nederst, og det klippet billede er over det. En klipmaske klipper billedet eller billedgruppen over det til den vektorsti, du har oprettet.

Avanceret billedmaskering i Vectornator er supernemt og kan gøres på tre måder. Vi viser dig det grundlæggende her, men hvis du gerne vil have en grundig vejledning, kan du læse vores trinvise vejledning om, hvordan du maskerer objekter.

1. Opret dine objekter og lag

Tegn den vektorform, du vil bruge som klippesti. I Vectornator kan du bruge pen-værktøjet, blyantværktøjet, penselværktøjet, tekstværktøjet eller formværktøjet til at gøre dette.

• Penværktøjet er bedst til at skabe præcise former med glatte Bézier-kurver.
• Med blyantværktøjet kan du tegne en form i frihånd og omdanne den til en vektorsti. Du kan kontrollere, hvor meget du vil glatte den udjævning, du ønsker.
• Med penselværktøjet kan du bruge forskellige penselstrøg til at skabe en friformet vektorsti.
• Du kan bruge tekstværktøjet til at skrive en sætning og derefter vælge indstillingen Opret konturer fra tekst i fanen Stil.
• Med værktøjet Shape Tool kan du nemt oprette grundlæggende vektorformer som f.eks. rektangler, cirkler, polygoner, stjerner og spiraler.

Når du har oprettet den ønskede vektorform, skal du gå til fanen Lag i Inspektøren og flytte laget under det eller de objekter, du vil klippe.

2. Foretag dit valg

Tryk på Udvalgsværktøjet, vælg Multiselektionstilstand, og vælg den vektorform, du vil bruge som maske, sammen med de(t) objekt(er), du vil klippe.

3. Brug maskeværktøjet

Nu kan du bruge maskeværktøjet til at oprette din beskæringsmaske. Her er tre muligheder for at gøre dette:

Mulighed 1: Via fanen Hurtige handlinger

Dette er den hurtigste måde at oprette en beskæringsmaske på.

Når du har valgt dine objekter på tegnebrættet, vises fanen Hurtige handlinger. Tryk på ikonet Maske i fanen for hurtigt at forvandle din vektorform til en maske.

Mulighed 2: Via fanen Lag

Når dit design er ret komplekst, er det nemmere at vælge alle objekter fra fanen Lag i stedet for at trykke på hvert enkelt element på tegnebrættet.

Tryk på fanen Lag i Inspektøren. Rul ned i panelet Lag, indtil du finder den vektorform og de(t) objekt(er), du vil klippe.

Vælg alle de lag, der skal beskæres, sammen med din vektorform i multiselektionstilstand, og tryk derefter på værktøjet Maske i fanen Hurtige handlinger, der dukker op.

Mulighed 3: Via fanen Arranger

Tryk på fanen Arrangér i inspektøren, når du har valgt din vektorform, og rul ned til indstillingen Maske.

Tryk på ikonet Maske for at oprette det beskårne billede.

4. Rediger din billedmaske

Når du har oprettet en maske, vises der en ny gruppe i fanen Lag. Når du trykker på laggruppen for at åbne den, vil du se maskeikonet ved siden af laget med klippemaske under det eller de objekter, du har klippet på.

Når du vil redigere din beskæringsmaske, kan du vælge vektorformen fra fanen Lag og bruge et af værktøjerne til at redigere den, f.eks. knudeværktøjet.

En anden mulighed er at dobbeltklikke på selve det beskårne objekt på tegnebrættet for at gå ind i isolationstilstand og derefter vælge vektorstien fra fanen Lag og begynde at redigere.

Opfølgning

Billedmaskering er et utroligt effektivt værktøj til at skabe detaljerede og dynamiske billeder, der er langt fra et standard rektangulært foto.

Med mulighederne for billedmaskering lige ved hånden (bogstaveligt talt, hvis du designer på en iPad!) kan du manipulere enhver billedfil med fotos eller illustrationer for at skabe omfattende og unikke designs.

Forestil dig at skulle beskære eller tegne komplekse billeder inden for en bestemt form for senere at indse, at du gerne vil flytte hele billedet til venstre. Med billedmaskering kan du nemt flytte og ændre billeder uden at miste det tidligere arbejde på designet.

Desuden giver billedmasker dig mulighed for at skabe omfattende billedvirkninger, f.eks. gradienter og forskellige penselstrøg, uden at ændre det oprindelige billede. Du kan blive ved med at redigere maskelaget eller endda starte en ny maske for at prøve forskellige teknikker og filtre.

En anden stor fordel ved lagmasker er, at du nemt kan duplikere dine masker, så du kan bruge dem flere gange på forskellige billeder eller tegninger på dit tegnebræt.

Hvis du tilføjer dine beskæringer og effekter på selve billedet, kan du ikke nemt gentage dem andre steder på artboardet med et andet billede.

Billedmasker hjælper os designere til at arbejde smartere, ikke hårdere.

Hvis du er klar til at prøve billedmaskering eller ønsker at prøve et nyt designprogram, så prøv Vectornator - vi tilbyder alle de kraftfulde værktøjer, du har brug for, i en meget mere intuitiv og brugervenlig vektordesigngrænseflade.

Download Vectornator for at komme i gang

Løft dine designs til det næste niveau.