Design et vakkert detalj Web Button

I dag skal vi tilbake til grunnleggende med en enkel, elegant og profesjonell knapp opplæringen fra Liam McCabe. Liam skaper alle slags gode web-elementer, så han kommer til å være en god guide gjennom prosessen. Hvis du har vært på utkikk etter en måte å krydre opp din design med en unik stil knapp eller UI element, ser ikke lenger ...

publiseres Tutorial

Hver noen uker, vi besøker noen av vår lesernes favoritt innlegg fra hele historien til området. Denne opplæringen ble første gang utgitt i februar 2011.

I denne opplæringen vil jeg skal vise deg hvordan å designe en detaljert knappen ved hjelp av Photoshop. Diverse nyttige teknikker brukes til å oppnå den pixel perfekt design, og det er en ganske enkel prosess tar ikke mer enn 15-20 minutter. Sluttresultatet kan sees nedenfor. Liker det? Så la oss komme i gang

Trinn 1: Komme i gang

Det første du bør gjøre er å åpne opp photoshop. Ctrl + N for å få opp det nye lerretet vinduet. Bredden og høyden er helt opp til deg, men pass på at oppløsningen er minst 72 og fargemodus er RGB 8 bit. Oh og sette bakgrunns innholdet til gjennomsiktig. Så noe som dette:

Trinn 2: Fyll

Nå fyller det aktive laget ved å trykke Shift + F5 for å få opp fyll vinduet og fra rullegardinmenyen, velg Color ... og kopiere hex verdien 141d28 inn i boksen ved siden av # -tegnet. Dette bør fylle laget med en fin mørk blå farge

Trinn 3:. Alignment

Nå når det gjelder å utforme nesten hva som helst, er det alltid en god ide å bruke guider til gjør at alt er pent justert. For å legge til en guide dask bang i midten av lerretet, fra toppmenyen velger view -> ny guide, velg vertikal og innspill halvparten av hva din bredde kanskje, for meg er det 250px

Trinn 4:. Avrundede hjørner

Neste du ønsker å velge avrundet rektangel verktøyet (fra panelet til venstre) og tegne en fin rektangulær form i midten av lerretet, som så:

stiller jeg bakgrunnsfargen på avrundet rektangel til en litt lysere blå, hex verdi: 17202b. For å gjøre dette kan du enten sette forgrunnsfarge før du tegner rektangelet eller dobbeltklikk på laget miniatyr farge etter at du har trukket rektangelet

Trinn 5a. Layer Styling

Med den grunnleggende forme tegnet vi kommer til å legge noen lag styling. For å legge til styling til et lag rett og slett dobbeltklikke på formlag og et vindu lag stil vises. Den første stil å legge til er en skygge. Ved å bruke en skygge med spredning verdien satt til 100 kan vi gi knappen en 3d følelse.

(For følgende lagstiler, gjerne leke seg med verdiene og bruke mine som retningslinjer)

Neste stil å legge til er en indre skygge, vil dette gi knappen enda mer 3d følelse ved å legge en skinne til toppen av knappen.

En ytre glød bare lukker opp toppen, som omfatter knappen.

Ved å legge en gradient overlay vi kan simulere en buet overflate, noe som tyder på at formen er mer av en pressable objekt som en knapp.

Det nye laget stil er et slag. Dette gir hele formen en fin ramme og gir litt mer definisjon mellom bunnen av formen og skygge

Trinn 5b:. Gradient Border

Ok det er laget styling ut av vei. Det er alltid verdt å bruke tid på å eksperimentere med ulike stiler, som du kan oppnå noen veldig fine effekter. Hvis vi tar en titt på vår knappen kan vi se helt nederst (nederst på skygge) mangler definisjon og er derfor en liten uskarphet. For å fikse dette vil vi legge til en fin gradient grensen.

Det første du må gjøre er å sette forgrunnsfargen til noe rundt # 050607. Lag et nytt lag (ctrl + shift + n), og deretter holde ctrl og klikk formen miniatyr. Dette er hvordan du velger innholdet i et lag.

Gjort riktig, og du bør ha en stiplet linje rundt avrundet rektangel. Nå trykker G for å velge gradient verktøyet og dra fra midten rett under formen utover slik:

Med den formen fortsatt er valgt, bytte tilbake til teltet verktøyet ved å trykke på M og trykk deretter opp en gang, og deretter slette. Nå trykker V, som vil tillate deg å bevege deg nyopprettede gradient grensen og plasser den på bunnen av skyggen som så:

Trinn 7: Ytterligere Detail

Hvis du vil legge ytterligere detalj til knappen, duplisere vår gradient grensen lag, posisjon like over bunnen av formen, invertere ved å trykke ctrl + jeg og sette blending muligheten til å overlappe. Det kan være lurt å kopiere dette laget også, bare for å lyse det opp litt

Trinn 8:. Radial Gradient

Nå vil legge til en radial gradient til toppen av knappen. Som før hold ctrl og klikk på lag for å velge form. Velg gradient verktøyet (G) og sett forgrunnsfargen til hvit. Et godt tips er å trykke D som setter forgrunnsfargen til svart og bakgrunnsfargen til hvit og deretter X for å reversere fargene.

Over utvalg dra fra midten og utover mye som før, for å få følgende Resultatet:

Trykk ctrl + D for å fjerne markeringen og deretter sette laget å overlappe

Trinn 9:. Text

Legg til litt tekst, valgte jeg Arial fet, størrelse 14 glatt og legge en svak skygge og der har du det! En fantastisk detaljert knappen. Ytterligere detaljer kan legges til skygge delen (ser litt vanlig), og du kan også begynne å forestille seg hvordan du kan kode dette opp i css med de ulike statene til å spille med.

Ferdig! Anmeldelser

Og det er det! Jeg håper du likte denne opplæringen og ha det gøy å lage noe vakkert detaljerte knapper :) Anmeldelser