Turn opp volumet med en Moody PSD Interface

La oss bygge oss en humørsyk UI Element. Vi vil bruke Photoshop til å utforske subtile teksturer og trekke sammen et flott utseende volumhjulet. La oss gå

Trinn 1:!. Bakgrunnen

Åpne en ny RGB dokument 800x600px i størrelse, og 72dpi oppløsning

Velg en lunefull mørk blå farge for bakgrunnen (i dette tilfellet fargekoden er # 1b1c20) og deretter bruke maling bøtte verktøyet for å fylle bakgrunnen.

bruk noe støy i bakgrunnen, for å gi den en myk tekstur (1% Gaussian støy og monokromatisk)

nå sjekke kilden nedlasting -. du finner et mønster fil der som du må dobbeltklikke for å installere i Photoshop. . Påfør mønster til et nytt lag, og fylle hele laget med mønsteret

Slå mønsteret overleggsopasitet til 15-20% avhengig av din smak, for å ende opp med noe sånt som dette:
< h2> Trinn 2: The Button Base

Lag ny gruppe med navnet "knapp" og legge til en sirkel form (gjør dette ved å velge elliptiske form verktøyet og holde nede shift for å gjøre det helt sirkulær). Gi den et levende farger slik at du kan se laget klart lenger ned linjen ...

Endre fylle tettheten av laget ned til 0% og bruke en skygge med følgende egenskaper:
< p> Deretter gjelder en liten indre skygge for å gjøre det ser innrykket

Etter det gjelder en indre glød for å gjøre basen ser full

Trinn 3:.. The Button

for neste trinn, foreta en sirkel og gi den en hvit farge, vil dette være vår UI element grunnleggende form, og det vil tjene for et par mer detaljlagene, så gjør en størrelse du er veldig fornøyd med! Name it "button_base" eller noe lignende.

Bruk en vinklet gradient overlay til det, starte med hvit og legge til to stopp i en lys grå farge. Bruk to hvite stopp i midten for å leke med skarpheten på knappen, og mens du arbeider holde forhåndsvisning elementet for å se hvordan den ser ut.

Bruk en skråkant og preg til basen, slik at den ser litt 3d-ish

Trinn 4:. detaljering

nå for detaljering. Lag en kopi av underlaget, og legg den under knappen basen. Nå slår fyllet til 0% for å se kun filtrene du bruker på det laget, og ikke innholdet. Lag en skygge med følgende innstillinger:

For å gjøre knappen sprette ut litt mer, kopierer knappen basen igjen, plassere den under knappen basen og over skyggelegging. Gi den en mørk farge overlegg slik at den ser fantastisk.

Nå lage en ny kopi av knappen underlaget, men forvandle den til en større størrelse. Sett det på toppen av knappen underlaget, og rastrere det!

Med det gjort, gå til filtre panel og gi den en maksimal støyfilter (slik at du tror du ser på en ødelagt TV).

Bruk deretter en Radial Blur filteret, og sett den til den maksimale verdien for å få en fin effekt.

Du bør skru ned opacity på dette laget til rundt 20-40%, og deretter sentrere midten med knappen. Når du har den i midten, velger du knappen lag og gå for å velge> inverse. Deretter velger du skrape laget og trykk delete. Du bør sitte igjen med en hyggelig ripete effekt på knappen

Trinn 5:. Historien så langt

For å sjekke vi gjør alt ok, bør du ha noe som ligner på dette:

Trinn 6:.. The Notch

Lag en liten sirkel for hakk (eller indikator) på knappen

gi det en hvit skygge for å gi det en preget utseende

Gi hakket en liten indre skygge

Og til slutt bringe den til liv med en farge som du selv velger

Trinn 6:.. Milepæl

Du bør har noe sånt som dette:

Trinn 1: Dial etiketter

la oss nå sette seg fast i de siste små detaljene! Lag en liten firkant for hakkene i bunnen av knappen.

Slå fyllingen ned til 0% igjen, og gi det en hvit skygge.

Det trenger litt skyggelegging på innsiden også, så gi det en liten indre skygge

nå kopiere og snu den til den andre siden

Trinn 7:.. Text

Sett tekstlig innhold i det , med en skrift av ditt valg (jeg valgte Myriad Pro).

Bruk en skygge til teksten, slik at den ser innrykket.

Deretter gjelder en liten indre skygge.

Trinn 8: Milestone

dette bør være det du ser i filen:

Og dette er vår endelige UI element, en enkel volumhjulet for å pumpe opp musikken

Konklusjon

jeg håper du likte denne opplæringen, det vil være den første av mange, så gjerne følge meg på twitter eller abonnere på nettstedet mitt nyhetsbrev. Glad designe og være kul!