Share
La oss bygge oss et moody brukergrensesnitt. Vi bruker Photoshop til å utforske subtile teksturer og trekke sammen en flott volumvelger. La oss gå!
Åpne et nytt RGB-dokument 800x600px i størrelse og 72dpi oppløsning.
Velg en moody mørk blå farge for bakgrunnen (i dette tilfellet er fargekoden # 1b1c20), og bruk deretter malingbøtteverktøyet til å fylle bakgrunnen.
Påfør litt støy til bakgrunnen, for å gi den en myk tekstur (1% Gaussisk støy og monokromatisk).
Nå sjekk kilde nedlastingen - du vil finne en mønsterfil der du må dobbeltklikke for å installere i Photoshop. Bruk mønsteret til et nytt lag, og fyll hele laget med mønsteret.
Vend mønsteroverleggets opacity til 15-20% avhengig av hva du liker, for å ende opp med noe slikt:
Lag en ny gruppe med navnet "button" og legg til en sirkelform (gjør dette ved å velge elliptisk formverktøy og hold nede skift for å gjøre det perfekt sirkulært). Gi den en levende farge slik at du kan se laget tydelig lenger nedover linjen?
Endre fyllingsopaciteten til laget ned til 0% og bruk en dråpeskygge med følgende egenskaper:
Påfør deretter en liten indre skygge for å få den til å se innrykket.
Deretter gjelder en indre glød for å få basen til å se full.
For neste trinn, lag en annen sirkel og gi den en hvit farge, vil dette være vårt brukergrensesnittets grunnleggende form, og det vil tjene til et par detaljerte lag, så gjør en størrelse du er veldig fornøyd med! Gi det navnet "button_base" eller noe lignende.
Påfør et vinklet gradientoverlegg til det, start med hvitt og legg til to stopp med en lysegrå farge. Bruk de to hvite stoppene i midten til å spille med knappens skarphet, og mens du jobber, må du forhåndsvise elementet for å se hvordan det ser ut.
Påfør en skråkant og prege til basen, for å få det til å se litt 3d-ish.
Nå for detaljering. Lag en kopi av grunnlaget, og legg det under knappestasjonen. Nå fyll fyllingen til 0% for å se bare filtre du bruker på laget, og ikke innholdet. Lag en skygge med følgende innstillinger:
For å få knappen til å stikke ut litt mer, kopier du knappestasjonen igjen, plasser den under knappestasjonen og over skyggen. Gi den en mørk fargeoverlegg slik at den ser fantastisk ut.
Gjør nå en annen kopi av knappens basislag, men forvandle den til en større størrelse. Sett den på toppen av knappens grunnlag, og rasteriser den!
Med det gjort, gå til filterpanelet og gi det et maksimalt støyfilter (slik at du tror du ser på en ødelagt TV).
Bruk deretter et Radial Blur-filter, og sett det til maksimalverdien for å få en fin effekt.
Du bør skru ned opaciteten til dette laget til rundt 20-40%, og deretter midt på midten med knappen. Når du har den i midten, velger du knappelaget og velger å velge> invers. Velg deretter skrape laget og trykk slett. Du bør være igjen med en fin ripet effekt på knappen.
For å sjekke at vi gjør alt ok, bør du ha noe som ligner på dette:
Lag en liten sirkel for hakk (eller indikator) på knappen.
Gi den en hvit dråpe skygge for å gi det et preget utseende.
Gi hakk en liten indre skygge.
Og endelig bringe det til liv med en farge du velger.
Du burde ha noe slikt:
La oss bli sittende fast i de siste små detaljene! Lag et lite rektangel for hakkene i bunnen av knappen.
Snu fyllingen til 0% igjen, og gi den en hvit dråpe skygge.
Det trenger litt skygge på innsiden også, så gi den en liten indre skygge.
Kopier nå og flip den til den andre siden.
Sett ditt tekstinnhold der inne, ved å bruke en skrift etter eget valg (jeg valgte Myriad Pro).
Bruk en dråpe skygge til teksten, for å få den til å se innrykket.
Påfør deretter en liten indre skygge.
Dette burde være det du ser i filen din:
Og dette er vårt siste UI-element, en enkel volumvelger for å pumpe opp musikken!
Jeg håper du likte denne opplæringen, det vil bli den første av mange, så vær så snill å følge meg på twitter eller abonnere på nettsiden min nyhetsbrev. Glad å designe og bli kult!
Accentsconagua