Lav Dit Eget Kreditkort Mockup i Photoshop

I en verden hvor visuel præsentation er altafgørende, kan det at vise dine designs på en realistisk måde gøre en kæmpe forskel. Hvis du designer noget, der skal ende på et kreditkort, er et overbevisende mockup uundværligt. Det giver dine kunder eller din portefølje et professionelt løft. Men hvad er egentlig størrelsen på et kreditkort, og hvordan skaber du et troværdigt mockup i Photoshop? Denne guide fører dig gennem processen, så du kan mestre kunsten at skabe dit eget, fuldt tilpasselige kreditkort mockup.

https://www.youtube.com/watch?v=0gcJCdgAo7VqN5tD

At kende de korrekte dimensioner er det første skridt mod et realistisk resultat. Kreditkort har en standardstørrelse defineret af internationale standarder for at sikre kompatibilitet med kortlæsere verden over. Denne standardisering gør det lettere for banker og virksomheder at udstede og behandle kort. Selvom visitkortstørrelser varierer regionalt, er kreditkortstørrelsen universel.

Forstå Standard Dimensioner for Kreditkort

Den internationale standard for kreditkortstørrelse er specificeret i ISO/IEC 7810 ID-1. Denne standard dikterer de præcise fysiske mål, som alle kreditkort, betalingskort, identitetskort og lignende skal overholde. At arbejde med disse mål i Photoshop er afgørende for at opnå et autentisk look.

Her er de præcise dimensioner for et standard kreditkort:

• I tommer: 3.375” x 2.125”
• I millimeter: 85.6 x 53.98 mm
• I centimeter: 8.56 x 5.40 cm

Når du arbejder digitalt, især med henblik på eventuel trykning eller højopløselig visning, er det også vigtigt at kende størrelsen i pixels. Ved en standard trykopløsning på 300 DPI (Dots Per Inch) eller PPI (Pixels Per Inch) svarer kreditkortets størrelse til:

• I pixels (ved 300 DPI): 1011 x 638 px

Den afrundede kant på et kreditkort har også en standard radius. Denne radius er typisk 0.125 tommer. At inkludere denne detalje bidrager i høj grad til realismen i dit mockup.

Forbered Dit Lærred i Photoshop

Det første skridt i Photoshop er at oprette en ny fil med de korrekte dimensioner og indstillinger for dit kreditkort.

Trin 1: Opret en ny fil

Gå til Filer > Ny (File > New). Indtast følgende dimensioner:

• Bredde (Width): 3.37 tommer
• Højde (Height): 2.125 tommer
• Opløsning (Resolution): 300 Pixels/Tomme (eller Pixels/Inch)
• Farvetilstand (Color Mode): RGB (til digital brug) eller CMYK (hvis det skal printes)

Klik på Opret (Create).

Trin 2: Skab kortets grundform

Vælg Værktøjet Rektangel (Rectangle Tool - U). Klik et vilkårligt sted på lærredet for at åbne dialogboksen Opret Rektangel (Create Rectangle). Indtast de samme dimensioner som for lærredet (3.37 tommer x 2.125 tommer). For Radius (Radius) indtaster du 0.125 tommer. Klik OK.

Centrer rektangellaget på dit lærred. Du kan gøre dette ved at markere både rektangellaget og baggrundslaget (hvis det findes), vælge Flytteværktøjet (Move Tool - V) og bruge Justeringsindstillingerne i topbjælken til at centrere vandret og lodret.

For at gøre kortet til en Smart Object, som er essentielt for nem tilpasning senere, højreklikker du på rektangellaget og vælger Konverter til Smart Object (Convert to Smart Object). Dette lag vil nu repræsentere dit blanke kreditkort.

Tilføj Nødvendige Elementer til Kortet

Et kreditkort er mere end bare en afrundet rektangel. Det indeholder forskellige tekstfelter og grafiske elementer. Disse skal placeres korrekt og styliseres.

Trin 3: Tilføj tekstfelter

Brug Horisontalt Tekstværktøj (Horizontal Type Tool - T) til at oprette tekstlag for de forskellige informationer, der typisk findes på et kreditkort:

• Kortindehaverens navn (CARDHOLDER NAME)
• Kortnummer (typisk 16 cifre opdelt i fire grupper af fire)
• Udløbsdato (VALID THRU MM/YY) og eventuelt gyldig fra dato (VALID FROM MM/YY)
• Andre valgfrie felter som bankens navn, korttype (f.eks. VISA, Mastercard)

For kortnummeret anbefales skrifttypen OCR A Std, da den efterligner den stil, der ofte bruges på kort. Indstil størrelsen til ca. 63 px og Tracking til -25 for at give det et mere autentisk, komprimeret look.

For kortindehaverens navn kan du bruge en lidt mindre skriftstørrelse, f.eks. 45 px, og teksten bør være i STORE BOGSTAVER.

Dato-felterne kan bruge samme størrelse som navnet eller lidt mindre. Tilføj små labels som "VALID THRU" med en mere læselig skrifttype som Arial, justeret i størrelse (f.eks. 20 px) og linjeafstand (Leading) for at passe ved siden af datoen.

Mange kort gentager de første fire cifre af kortnummeret i mindre skrift lige under det store nummer. Opret et separat tekstlag til dette, f.eks. i størrelse 23 px.

Tilføj eventuelle andre tekstfelter eller logoer nu ved hjælp af tekstværktøjet eller ved at placere billeder/logoer (konverteret til Smart Objects).

Trin 4: Placer elementerne

Brug Flytteværktøjet (Move Tool - V) til at placere tekstfelterne og eventuelle logoer. Standardplaceringer er:

• Kortnummeret: Lidt under midten.
• De første fire cifre: Lige under det store kortnummer.
• Datoer: Mellem kortnummeret og navnet.
• Kortindehaverens navn: Typisk nederst.
• Banknavn/logo: Ofte i øverste hjørne(r).

Gruppér relaterede lag (f.eks. dato label og dato) ved at markere dem og trykke Ctrl+G (Cmd+G på Mac) for at gøre placeringen nemmere.

Trin 5: Tilføj mikrochippen

De fleste moderne kreditkort har en mikrochip. Brug Værktøjet Rektangel (Rectangle Tool - U) igen. Klik for at oprette et rektangel med dimensionerne 11 mm (Bredde) x 8 mm (Højde) og en Radius på 2 mm. Placer chippen typisk på venstre side over kortnummeret.

Styliser Kortets Udseende

Nu hvor alle elementer er på plads, er det tid til at give kortet et realistisk udseende med effekter som prægning og glans.

Trin 6: Styliser tekst og chip

For at give tekstfelterne (kortnummer, navn, datoer), der typisk er præget, et 3D-look, grupperer du disse tekstlag. Højreklik på gruppen og vælg Blending Options. Anvend følgende indstillinger under Skråkant og Prægning (Bevel & Emboss):

• Stil (Style): Prægning (Emboss)
• Teknik (Technique): Glat (Smooth)
• Dybde (Depth): Ca. 553%
• Størrelse (Size): 4 px
• Udtoning (Soften): 0 px
• Vinkel (Angle): 90°
• Højde (Altitude): 30°
• Fremhævningstilstand (Highlight Mode): Skærm (Screen), hvid, 100% dækkende
• Skyggetilstand (Shadow Mode): Gang (Multiply), sort, 50% dækkende

For mikrochippen skal du også tilføje en Skråkant og Prægning (Bevel & Emboss), men denne gang med Stilen Pude Prægning (Pillow Emboss) for at få det til at se ud som om, den er sænket ned i kortet. Juster indstillingerne for Dybde, Størrelse og Udtoning til lave værdier (f.eks. Dybde 115%, Størrelse 0 px) og juster Fremhævning/Skygge dækkende evne (f.eks. 50%).

Chipper er ofte metalfarvede. Tilføj en Overlejring med Farveforløb (Gradient Overlay) til chiplaget. Brug Stilen Lineær (Linear) med en Vinkel på 90°. Farveforløbet skal efterligne guld eller sølv. Et eksempel på guld kunne være farverne #ae9f88, #cbb799, #ae9f88 jævnt fordelt.

Du kan tilføje et simpelt mønster på chippen ved at bruge Polygonværktøjet (Polygon Tool - U) og Linjeværktøjet (Line Tool) og derefter klippe dem til chippens form ved hjælp af en lagmaske baseret på chippens markering (Ctrl+klik på chiplagets miniature). Anvend derefter en Pude Prægning (Pillow Emboss) effekt på denne mønstergruppe med lave indstillinger for at give linjerne et let præget look.

Skab en Realistisk Mockup Scene

Et fladt kort er godt, men at præsentere det i en scene med perspektiv, skygger og glans gør det langt mere overbevisende.

Trin 7: Opret præsentationsfilen

Opret en ny fil til din mockup scene. Dimensionerne afhænger af, hvor du vil bruge mockuppet (f.eks. 2000 x 1300 px).

Trin 8: Placer kortet som Smart Object

Gå til Filer > Placer Indlejret (File > Place Embedded) og vælg den Photoshop-fil, du lige har oprettet med dit kreditkort design. Kortet placeres som et Smart Object. Dette er afgørende, da det giver dig mulighed for at redigere det originale kortdesign, og ændringerne vil automatisk opdateres i mockup scenen.

Juster størrelsen på kortet, så det passer ind i din scene.

Trin 9: Skab perspektiv

For at få kortet til at se mere tredimensionelt ud, skal du ændre dets vinkler. Vælg Fri Transformering (Free Transform - Ctrl+T eller Cmd+T). Hold Ctrl (Cmd) nede og træk i hjørnerne af kortet for at skabe en forvrænget rektangelform, der simulerer perspektiv. Gør f.eks. venstre side lidt længere end højre for at vise kortets tykkelse.

Trin 10: Simuler kortets tykkelse

Dupliker kortlaget (Ctrl+J eller Cmd+J) og træk kopien under det originale lag. Vælg Flytteværktøjet (Move Tool - V) og brug piletasterne til at flytte kopien en smule til venstre og ned. Dette skaber illusionen af en tykkere kant.

For at give denne kant dybde og farve, åbn Blending Options for det duplikerede lag. Anvend en Overlejring med Farveforløb (Gradient Overlay). Brug Stilen Lineær (Linear) og juster Vinklen, så den følger kortets vinkel. Farveforløbet bør gå fra hvid (eller en lys farve) til en mørkere grå for at simulere lys og skygge på kanten (f.eks. fra hvid ved Position 0% til #484848 ved Position 100%). Blandingsindstillingen (Blend Mode) kan sættes til Hårdt Lys (Hard Light) for at lade baggrundsfarven skinne igennem.

Trin 11: Tilføj glans

Kreditkort er ofte en smule skinnende. Dupliker det originale kortlag igen og placer kopien øverst i lagstakken. Åbn Blending Options og anvend en Overlejring med Farveforløb (Gradient Overlay). Brug et sort/hvidt forløb med Blandingsindstillingen Skærm (Screen) og Stilen Lineær (Linear). Juster Vinklen, så den følger en tænkt lyskilde, og juster Skalaen (Scale) for at kontrollere bredden af glansen. Sænk lagets Dækkende evne (Opacity) for at gøre effekten mere subtil.

Trin 12: Tilføj skygge

For at få kortet til at se ud som om det ligger på en overflade, skal du tilføje en skygge. Dupliker det originale kortlag igen og placer det nederst i lagstakken (over baggrunden). Højreklik på laget og vælg Rasteriser Lag (Rasterize Layer). Tryk Ctrl+U (Cmd+U) for at åbne Nuance/Mætning (Hue/Saturation) og træk Lysstyrke (Lightness) helt ned til -100 for at gøre laget helt sort.

Gå til Filter > Sløring > Gaussisk Sløring (Filter > Blur > Gaussian Blur). Øg Radius, indtil skyggen er blød. Brug derefter Fri Transformering (Ctrl+T eller Cmd+T) og træk i hjørnerne (mens du holder Ctrl/Cmd nede) for at forme skyggen, så den passer med kortets perspektiv og ser realistisk ud.

Trin 13: Skab baggrunden

Fyld baggrundslaget med en farve, f.eks. 50% grå, eller placer en tekstur eller et billede, der passer til din præsentation. Hvis du bruger en tekstur eller et billede, kan du anvende filtre som Sløringsgalleri > Tilt-Shift (Blur Gallery > Tilt-Shift) for at simulere dybdeskarphed og fokusere opmærksomheden på kortet.

Du kan også anvende en let Gaussisk Sløring på kortets kanter (på det originale kortlag, ikke smart object) for at simulere, at det ikke er i perfekt fokus hele vejen rundt, især hvis du har brugt dybdeskarphed på baggrunden.

Tilpasning og Smart Objects

Fordelen ved at bruge Smart Objects til dit kortdesign er enorm. Hvis du vil ændre designet (farve, tekst, logoer), skal du bare dobbeltklikke på miniaturebilledet af Smart Object-laget (et af kortlagene i mockup-scenen). Dette åbner den originale .psd-fil med dit flade kortdesign.

Foretag dine ændringer her. Du kan tilføje et nyt baggrundsbillede (f.eks. et farveforløb eller en tekstur), teksturer, ændre farver på tekst eller chip, tilføje nye logoer osv. Husk at dine designelementer skal være placeret *over* det grå rektangellag, der udgør kortets form. Du kan klippe dem til formen ved at holde Alt (Option) nede og klikke mellem lagene i Lagpanelet, eller ved at markere laget og trykke Ctrl+Alt+G (Cmd+Option+G).

Når du er færdig med at redigere kortdesignet i den originale fil, skal du gemme og lukke filen (Filer > Gem eller Filer > Luk og Gem). Photoshop vil automatisk opdatere Smart Object'et i din mockup scene med de nye ændringer.

Herefter kan det være nødvendigt at justere Dækkende evnen (Opacity) for glans-, tykkelses- og skyggelagene i mockup scenen for at sikre, at de passer til det nye design og ser mest realistiske ud.

Sammenligning af Kortstørrelser (Til Kontekst)

Selvom fokus er på kreditkortet, kan det være nyttigt at se det i relation til andre almindelige kortstørrelser, især visitkort, da kreditkortstørrelsen ofte bruges til visitkort netop fordi de passer i punge.

Som tabellen viser, er kreditkortstørrelsen meget tæt på standard visitkortstørrelser, især i Europa. Dette forklarer populariteten af at bruge kreditkortstørrelsen til visitkort – de er praktiske at opbevare.

Ofte Stillede Spørgsmål

Hvad er den præcise størrelse på et kreditkort i Photoshop?

Når du opretter en ny fil med henblik på tryk eller høj kvalitet, skal du bruge dimensionerne 3.375 tommer x 2.125 tommer med en opløsning på 300 DPI. I pixels svarer dette til 1011 x 638 px ved 300 DPI.

Hvorfor bruge 300 DPI?

300 DPI (Dots Per Inch) er den standardopløsning, der anbefales til tryk for at sikre skarpe og detaljerede billeder. Selvom mockuppet kun er til digital brug, er det godt at arbejde i høj opløsning, da det giver fleksibilitet til at bruge mockuppet i forskellige størrelser og sammenhænge uden tab af kvalitet.

Kan jeg nemt ændre designet på kortet, efter jeg har lavet mockuppet?

Ja, absolut! Ved at oprette kortets grunddesign som et Smart Object i din mockup scene, kan du til enhver tid dobbeltklikke på Smart Object'et, redigere det originale design (ændre farver, tekst, logoer) og gemme filen. Ændringerne vil automatisk blive opdateret i din mockup scene.

Hvilken skrifttype skal jeg bruge til kortnummeret?

En almindeligt anvendt skrifttype, der efterligner stilen på fysiske kreditkort, er OCR A Std. Den er velegnet til at simulere den prægede eller trykte stil på kortnumre og datoer.

Er det nødvendigt at tilføje alle de små detaljer som chip og prægning?

For at skabe et realistisk mockup er det stærkt anbefalet at inkludere detaljer som mikrochippen og simulere prægning på tekstfelterne. Disse elementer er karakteristiske for kreditkort og bidrager væsentligt til troværdigheden af dit mockup.

Konklusion

At skabe et realistisk kreditkort mockup i Photoshop er en detaljeret proces, der kræver opmærksomhed på standard dimensioner og forskellige visuelle effekter. Ved at følge trinene beskrevet i denne guide – fra at sætte den korrekte lærredsstørrelse og tilføje grundlæggende elementer til at anvende avancerede stiliserings- og præsentationsteknikker – kan du skabe et professionelt mockup, der præsenterer dine designs på bedst mulig vis.

Brugen af Smart Objects er nøglen til en fleksibel arbejdsgang, der tillader nemme ændringer i designet. Husk at eksperimentere med lys, skygge og glans i din mockup scene for at opnå det mest overbevisende resultat. Med lidt øvelse vil du hurtigt kunne producere imponerende visualiseringer af dine kreditkortdesigns.

Selvom processen kan virke omfattende, især hvis du er nybegynder i Photoshop, er resultatet et værdifuldt aktiv for din portefølje eller dine kundepræsentationer. Hvis tiden er knap, findes der naturligvis også mange professionelle, færdiglavede mockup-skabeloner online, men at mestre kunsten at skabe dem selv giver dig fuld kontrol og forståelse for processen.

Nu er du udstyret med den viden, der skal til for at kaste dig ud i at skabe dit eget, perfekte kreditkort mockup. God fornøjelse med designarbejdet!

Hvis du vil læse andre artikler, der ligner Lav Dit Eget Kreditkort Mockup i Photoshop, kan du besøge kategorien Photoshop.