Brugergrænseflader (UI) spiller en afgørende rolle i digitalt design. En lille, men utrolig vigtig del af enhver UI er knappen. Knapper er de interaktive elementer, der guider brugerne og initierer handlinger. At skabe en visuelt tiltalende og funktionel knap er essentielt for en god brugeroplevelse. Adobe Photoshop er et kraftfuldt værktøj, der giver dig mulighed for at designe knapper fra bunden med fuld kontrol over udseendet. Denne guide vil føre dig gennem processen med at skabe en moderne knap med forskellige stilarter og en hover-tilstand.
https://www.youtube.com/watch?v=ygUWI2J1dHRvbmdhbWVpbnBob3Rvc2hvcA%3D%3D
Vi vil designe en knap, der måler 170 pixels i bredden og 50 pixels i højden. For at give os god plads at arbejde på, starter vi med et større lærred, for eksempel 600x600 pixels. Dette ekstra 'ånderum' gør det nemmere at manipulere elementer, før vi beskærer dokumentet til den endelige størrelse.
Trin 1: Opret Photoshop-dokumentet
Start med at åbne Adobe Photoshop. Gå til 'Fil' > 'Ny' (eller tryk Ctrl/Cmd + N). Indstil bredden til 600 pixels og højden til 600 pixels. Sørg for, at opløsningen er passende for dit formål (typisk 72 pixels/tomme for web) og farvetilstanden er RGB. Klik 'Opret' for at åbne dit nye, tomme lærred.
Trin 2: Skab grundformen
Knappens fundament er en afrundet rektangelform. Vælg 'Afrundet rektangelværktøj' (U) fra værktøjslinjen. I indstillingslinjen øverst skal du sørge for, at værktøjet er indstillet til 'Formlag' (ikonet ligner en firkant). Indstil 'Radius' til 5 pixels. Dette bestemmer, hvor afrundede hjørnerne på knappen bliver. Klik og træk på lærredet for at tegne en rektangelform. Mens du trækker, kan du se størrelsen. Prøv at ramme 170 pixels i bredden og 50 pixels i højden. Du kan justere størrelsen præcist efter at have tegnet formen ved at vælge 'Flytteværktøjet' (V) og bruge transformeringshåndtagene eller indstille størrelsen i indstillingslinjen, hvis 'Vis transformeringskontroller' er slået til.
Trin 3: Giv grundformen en lagstil
Udseendet af knappen defineres i høj grad af dens lagstil. Fordelen ved at bruge lagstilarter er enorm fleksibilitet. Du kan nemt ændre farver, gradienter, konturer og andre effekter senere uden at skulle genskabe formen. Dobbeltklik på formlaget i 'Lagpanelet' for at åbne dialogboksen 'Lagstil'.
Vi vil anvende to lagseffekter på dette lag: en 'Farveoverlejring' (Gradient Overlay) og en 'Kontur' (Stroke).
Farveoverlejring (Gradient Overlay):
Vælg 'Farveoverlejring' fra listen til venstre. Sørg for, at 'Blandingstilstand' er 'Normal', 'Opacitet' er 100%, 'Typografi' er 'Lineær', og 'Vinkel' er typisk 90 grader for et top-til-bund gradient. Klik på selve gradientbjælken for at åbne 'Gradienteditor'. Her tilføjer vi flere farvestop for at skabe et moderne, nuanceret look:
- Farvestop 1: Farve: #2877ac, Placering: 0%
- Midtpunkt 1: Placering: 40%
- Farvestop 2: Farve: #87bfe6, Placering: 95%
- Midtpunkt 2: Placering: 40%
- Farvestop 3: Farve: #c2def1, Placering: 100%
Klik 'OK' i 'Gradienteditor'.
Kontur (Stroke):
Vælg 'Kontur' fra listen til venstre. Indstil 'Størrelse' til 1 pixel. Sæt 'Position' til 'Indenfor'. 'Blandingstilstand' bør være 'Normal' og 'Opacitet' 100%. Vælg 'Farvetype' til 'Farve' og klik på farvefeltet for at vælge en farve. Vi bruger den mørkeste blå fra vores gradient, #2877ac. Dette skaber en fin, diskret kant, der blender godt ind i bunden af knappen.
Klik 'OK' i dialogboksen 'Lagstil' for at anvende effekterne.
Trin 4: Giv knappen et diagonalt mønster
Et diskret mønster kan tilføje visuel interesse. Vi laver et simpelt diagonalt linjemønster fra bunden. Opret et nyt, meget lille Photoshop-dokument (Ctrl/Cmd + N). Indstil bredden til 4 pixels og højden til 4 pixels. Klik 'Opret'.
Zoom meget tæt ind (brug 'Zoomværktøjet' (Z) og træk, eller brug Ctrl/Cmd + Plus) for at se de få pixels tydeligt. Opret et nyt lag (Ctrl/Cmd + Shift + N) og slet det hvide baggrundslag ved at trække det til papirkurven i 'Lagpanelet'.
Vælg 'Blyantværktøjet' (B). Sørg for, at penselstørrelsen er 1 pixel, og farven er hvid (#ffffff). Tegn en diagonal linje fra øverste venstre hjørne til nederste højre hjørne. Hold Shift nede, mens du tegner, for at sikre en helt lige linje.
Gå til 'Rediger' > 'Definer mønster' og giv dit mønster et navn, f.eks. 'Diagonale linjer'. Klik 'OK'. Du kan nu lukke dette lille dokument uden at gemme.
Skift tilbage til dit hoveddokument med knappen. I 'Lagpanelet' skal du Ctrl/Cmd + klikke på miniaturebilledet for vektormasken på grundformlaget. Dette indlæser et markeringsområde omkring knapformen.
Opret et nyt, tomt lag over grundformlaget (Ctrl/Cmd + Shift + N). Sørg for, at markeringen stadig er aktiv. Gå til 'Rediger' > 'Fyld' (eller Shift + F5). I dialogboksen 'Fyld' skal du under 'Indhold' vælge 'Mønster'. Vælg dit nydefinerede diagonale linjemønster fra rullemenuen 'Brugerdefineret mønster'. Klik 'OK'. Mønsteret fylder nu knapformen.
For at mønsteret ikke skal dække konturen og den øverste tynde highlight fra gradienten, skal vi trække kanterne af mønsteret 2 pixels ind. Med markeringen stadig aktiv, gå til 'Vælg' > 'Modificer' > 'Træk sammen'. Indtast 2 pixels og klik 'OK'. Markeringen er nu 2 pixels mindre end knapformen. Invertér markeringen ved at gå til 'Vælg' > 'Invertér' (eller Shift + Ctrl/Cmd + I). Sørg for, at du stadig er på mønsterlaget, og tryk så på 'Delete' for at fjerne de yderste 2 pixels af mønsteret.
For at gøre linjerne diskrete skal vi ændre lagets blandingstilstand og opacitet. I 'Lagpanelet' skal du ændre 'Blandingstilstand' for mønsterlaget til 'Blødt lys' (Soft Light) og reducere 'Opacitet' til 20%. Dette giver et subtilt, tekstureret look.
Trin 5: Tilføj teksten
En knap har brug for tekst for at angive dens formål. Vælg 'Vandret tekstværktøj' (T). Klik på knappen og skriv den ønskede tekst, f.eks. 'Køb Nu'. Vælg en passende skrifttype (f.eks. Museo Slab 500, som nævnt i kilden, hvis du har den), skriftstørrelse (f.eks. 24 pt) og farve (hvid, #ffffff).
For at give teksten lidt dybde tilføjer vi en skygge. Dobbeltklik på tekstlaget i 'Lagpanelet' for at åbne 'Lagstil'. Vælg 'Skygge' (Drop Shadow). Indstil 'Blandingstilstand' til 'Normal', 'Opacitet' til omkring 50-70%, 'Vinkel' til 90 grader, 'Afstand' til 1-2 pixels, 'Spredning' til 0% og 'Størrelse' til 1-2 pixels. Vælg farven til den mørkeste blå fra knappen (#2877ac). Dette skaber en diskret skygge, der løfter teksten lidt fra knapoverfladen.
Trin 6: Tilføj en pil
For at indikere en handling, f.eks. at gå videre, kan en simpel ikon som en pil være nyttig. Photoshop leveres med mange standardformer, som vi kan bruge. Vælg 'Brugerdefineret formværktøj' (U). I indstillingslinjen øverst skal du sørge for, at værktøjet er indstillet til 'Formlag'. Klik på rullemenuen 'Form' og find en passende pilform, f.eks. 'Pil 2'.
Tegn formen til højre for teksten på knappen. Prøv at matche højden med de små bogstaver i din tekst, f.eks. 13x13 pixels. Brug 'Flytteværktøjet' (V) til at placere pilen, så den er centreret både vandret og lodret i forhold til teksten og knappen. Du kan bruge smarte guider (View > Show > Smart Guides) til at hjælpe med justeringen.
Trin 7: Opret hover-tilstanden
En god webknap reagerer, når brugeren fører musen hen over den – dette kaldes 'hover'-tilstanden. Vi designer nu, hvordan knappen skal se ud i denne tilstand.
For at gøre det nemt at administrere, grupperer vi alle lagene, der udgør knappen (grundform, mønster, tekst, pil). Vælg disse lag i 'Lagpanelet' (klik på det øverste, hold Shift nede, og klik på det nederste) og tryk Ctrl/Cmd + G (eller højreklik og vælg 'Gruppér lag'). Omdøb gruppen til f.eks. 'Knap - Normal'.
Duplikér denne gruppe ved at højreklikke på den og vælge 'Duplikér gruppe' eller trække gruppen til ikonet 'Opret nyt lag' nederst i 'Lagpanelet'. Omdøb den nye gruppe til f.eks. 'Knap - Hover'. Flyt 'Knap - Hover' gruppens indhold lige under den originale knap ved hjælp af 'Flytteværktøjet' (V). Hold Shift nede, mens du trækker nedad, for at holde den på samme vandrette position.
Nu ændrer vi udseendet på knappen i 'Knap - Hover' gruppen. Dobbeltklik på grundformlaget inde i 'Knap - Hover' gruppen for at åbne 'Lagstil'. Vi skal modificere 'Farveoverlejringen' for at give indtryk af, at gradienten er vendt. Selvom der er en 'Vendt' mulighed, opnår man ofte et bedre resultat ved manuelt at justere farvestoppene. Ændr farvestoppene i 'Gradienteditor' til:
- Farvestop 1: Farve: #87bfe6, Placering: 0%
- Midtpunkt 1: Placering: 40%
- Farvestop 2: Farve: #2877ac, Placering: 95%
- Midtpunkt 2: Placering: 40%
- Farvestop 3: Farve: #4c9fd7, Placering: 100%
Klik 'OK' i 'Gradienteditor' og 'OK' i 'Lagstil'. Nu har du designet både normal- og hover-tilstanden for knappen.
Trin 8: Beskæring og lagring
Det endelige trin er at beskære dokumentet til kun at indeholde de to knapper og gemme det i et format, der er egnet til webbrug. Vælg 'Rektangulært markeringsværktøj' (M). Træk en markering, der præcist omkranser begge knapper. Da hver knap er 170x50 pixels, og de er placeret lige under hinanden, skal markeringen være 170 pixels bred og 100 pixels høj.
Når markeringen er aktiv, gå til 'Billede' > 'Beskær'. Dokumentet reduceres nu til størrelsen af din markering (170x100 pixels). Slå synligheden fra for baggrundslaget i 'Lagpanelet' ved at klikke på øjeikonet ud for det. Dette sikrer, at baggrunden er gennemsigtig.
Gå til 'Fil' > 'Eksporter' > 'Gem til web (ældre)' (eller 'Save for Web & Devices' i ældre versioner). Vælg formatet 'PNG-8' og sørg for, at 'Gennemsigtighed' er markeret. PNG-8 er ideel til grafik med begrænset antal farver og understøtter gennemsigtighed. Gem filen i den mappe, hvor du vil bruge den. Filen indeholder nu begge knaptilstande stablet vertikalt – dette kaldes en CSS-sprite og er en effektiv måde at håndtere flere billedtilstande for web.
Oversigt over Gradientfarver
For nem reference er her en tabel over de anvendte gradientfarver og placeringer for de to knaptilstande:
| Tilstand | Farvestop 1 | Midtpunkt 1 | Farvestop 2 | Midtpunkt 2 | Farvestop 3 |
|---|---|---|---|---|---|
| Normal | #2877ac (0%) | 40% | #87bfe6 (95%) | 40% | #c2def1 (100%) |
| Hover | #87bfe6 (0%) | 40% | #2877ac (95%) | 40% | #4c9fd7 (100%) |
Ofte Stillede Spørgsmål
Her er svar på nogle almindelige spørgsmål relateret til at skabe knapper i Photoshop:
Q: Kan jeg nemt ændre størrelsen på knappen, når den er færdig?
A: Ja, da grundformen er et formlag, kan du skalere det uden tab af kvalitet. Vælg formlaget, brug 'Fri transformering' (Ctrl/Cmd + T) og træk i håndtagene. Du skal dog muligvis justere størrelsen og placeringen af mønsterlaget, tekstlaget og pilen manuelt for at få proportionerne rigtige. Lagstilarter som kontur og skygge skal muligvis også justeres i deres indstillinger efter skalering.
Q: Hvordan bruger jeg denne CSS-sprite fil på min hjemmeside?
A: Den gemte PNG-fil, der indeholder både normal- og hover-tilstanden, bruges som baggrundsbillede for et HTML-element (typisk et <a> tag eller <button>). Ved hjælp af CSS kan du indstille elementets størrelse til 170x50 pixels. For normaltilstanden indstiller du background-position til 0 0 (øverste del af billedet). For hover-tilstanden (f.eks. ved hjælp af :hover pseudo-klassen i CSS) ændrer du background-position til 0 -50px for at vise den nederste del af billedet. Dette skaber effekten af, at knappen ændrer udseende, når musen svæver over den.
Q: Hvad hvis jeg vil have andre farver eller en anden stil?
A: Fordelen ved at bruge lagstilarter og formlag er fleksibilitet. Du kan nemt ændre farverne i 'Farveoverlejringen' og 'Konturen' ved at dobbeltklikke på laget og redigere lagstilen. Du kan også eksperimentere med forskellige gradienttyper (radial, reflekteret), blandingstilstande eller tilføje andre lagseffekter som indre skygge, indre glød osv. Hvis du vil have et andet mønster, skal du oprette et nyt mønster og anvende det på mønsterlaget.
At mestre kunsten at skabe knapper i Photoshop er en værdifuld færdighed for enhver designer. Med denne detaljerede proces kan du skabe professionelle, fler-stats knapper, der er klar til brug i web- og UI-projekter. Husk at øve dig og eksperimentere med forskellige stilarter for at finde dit eget unikke udtryk.
Hvis du vil læse andre artikler, der ligner Lav en Professionel Knap i Photoshop, kan du besøge kategorien Design.