Share
I dag skal jeg vise deg hvordan du designer en noe annerledes, men veldig fin knapp i Photoshop. Selv om det kan se ganske enkelt ut, har det fortsatt noe annet knapper mangler; det er en dropdown-knapp. Er du klar? Her går vi!
Start Photoshop. Opprett et nytt dokument, jeg skal bruke et dokument som er 600x350px.
Velg "Avrundet rektangelverktøy" og bruk en radius på 2. Dette gir knappen et skarpt utseende med en ren rundkant. Hvor stor du velger å gjøre det spiller ingen rolle, men sørg for at du ikke har den for stor, da det kan ende opp med å se ut av sted. Min knapp er 104px i bredde og 30px i høyde.
La oss nå legge til noen styling på knappen. Vi starter med "Gradient Overlay" for å gi den litt dimensjon. Her er innstillingen vi skal bruke:
Fortsett å legge til en "Stroke" til den, vi må gi den en slags ramme for å understreke den. Bruk disse innstillingene og fargen # F8F8F8 for å gjøre det pop.
Nå legger vi til en "Inner Glow" for litt mindre polering av knappen. Bruk disse innstillingene:
Slik ser knappen ut, etter at du har lagt til litt tekst:
La oss ta en titt på den blå rullegardinfanen, dette trinnet er mer komplisert, ettersom vi bruker "Pen Tool" for å tilpasse formen litt. Hvis du ikke er kjent med "Pen Tool", må du lese nøye slik at du ikke savner noe.
Du kan enten kopiere knappelaget eller opprette et nytt lag. Jeg lager et nytt lag med det samme verktøyet som før (Avrundet rektangulærverktøy). Men denne gangen bør det være litt mindre enn før, helst ikke bredere enn 100px, da vi vil at denne formen skal ta seg under selve knappen. Fyll dette laget med fargen # 57A0FA. Her er hva du burde ha nå:
La oss gå videre til "Pen Tool" og tilpasse formen litt. Pass på at du bruker "Add Anchor Point Tool" og velg lag. For å gjøre det enklere for nybegynnere, bruker jeg guider for å få plassering akkurat. Du vil sørge for at du har en guide i midten av knappen, og legg deretter en ekstra veiledning på hver side av den. Slik ser det ut:
Zoom inn og velg det siste laget med "Legg til ankerpunktsverktøy" og plasser ankerpunktene på styrene. Ta tak i senterankeret og dra det ned til ønsket størrelse. Bare noen få piksler vil gjøre som vi vil at det skal være en subtil effekt.
For å gjøre dropdown-fanen enda vakrere, legger vi et hull i det (bli zoomet inn som det er lettere å se hvor du skal plassere hullet). For å gjøre dette, klikker du bare på Legg til lagsmaske på det nylig opprettede laget, og velg "Elliptical Marquee Tool" for å gjøre et valg. Treffer backspace og slett den delen fra fanen. Slik ser det ut.
For å hjelpe fanen ser pen ut og samsvarer med knappen, legger vi nå til en styling. Start med "Stroke" og bruk disse innstillingene:
Gå videre til "Innerskyggen" og bruk følgende innstillinger for å rydde opp litt og få litt dybde i fanen:
Hvis alt er gjort riktig, bør du ha et resultat som ser slik ut, hvis ikke, må du ha gjort noe galt!
For å opprette rullegardinmenyen "svever" bare duplisere den normale tilstanden, øk dens høyde og bruk de samme teknikkene som før. Legg til litt tekst, og du er ferdig!
Slik ser Dropdown-knappen i forskjellige farger, fest dine øyne på disse godbiter!
Rask og rett frem, jeg håper du likte dette designet Quick Tip!
Accentsconagua