How Tegn en MP3-spiller Skin

I denne opplæringen, vil vi bruke en kombinasjon av lagstiler, teksturer, og en bit av manuell tegning for å lage en Winamp-stil mp3-spiller hud.

Instruksjons Eiendeler

Følgende eiendeler ble brukt under produksjonen av denne opplæringen.

Oppskrapte Metallic Tekstur

Trinn 1: Tegn figurar

For å få nøyaktig størrelse, vil vi bruke nettet for å hjelpe oss å designe. Åpne dialogboksen Innstillinger (Kommando /Ctrl + K). I Guides, Grid & Slices setting, satt Uten kraftlinjer hver: 100 piksler og Underinndeling: 5.

Trinn 2

Lag en rektangulær form med størrelsen 400px x 200px og farge:. # 4f4834

Trinn 3

Aktiver penneverktøyet. Klikk banen for å legge to poeng på hvert hjørne. Se bildet under for sin plassering.

Trinn 3

Hold Alt midlertidig endre Pen Tool konverterer Point Tool. Alt-klikk alle nye punkter vi har nettopp opprettet.

Trinn 4

Likevel bruker pennen, klikk på alle hjørnepunkter for å slette dem.

Trinn 5 Anmeldelser

Klikk topplinjen for å legge 4 poeng. Alt-klikk på hvert punkt for å konvertere dem til skarp spiss.

Trinn 6

bevege seg oppover to midterste punktene så høyt som en boks.

Trinn 7

Lag en rektangulær bane inne vår bane, og velg Trekk fra alternativet bar.

Trinn 8

Vårt hjørne er litt for tykk tilsett to skarpe punkter på hvert hjørne, etter at du vil slette alle hjørner.. Vi vil prøve å holde sin størrelse uniform, en kolonnebredde. For å hjelpe oss, tegne en størrelse en kolonne i rektangulær form, roter det 45 grader, og plassere den på hjørnet.

Trinn 9

manuelt, flytte punkter med direkte valg verktøyet.

Step 10

Gjenta trinn 8 og 9 til andre hjørner for å gi dem en lik størrelse.

Trinn 11

Legg disse lagstiler.
< h2> Trinn 12: Legg Tekstur

Lag nytt lag, og legg den over formen. Bruk splatter pensel til å trekke noen skitt. Hit Kommando /Ctrl + Alt + G for å konvertere laget til klipping maske.

Step 13

Legg ripete metalliske teksturer

på toppen av formen. Trykk på bildet for > Justeringer > Avmett å fjerne sin farge. Sett Blend Mode til Screen med Opacity: 45%. Hit Kommando /Ctrl + Alt + G for å konvertere tekstur lag til klipping maske. Teksturen er nå inne i formen.

Trinn 14

Skråkant og preg lagstiler legge 3D-effekt på vår form. Men siden jeg ikke er fornøyd med resultatet, vil jeg legge til mer lys på sin side. Så velger du den siden ved hjelp av polygonal lasso, lage nytt lag, og tegne svart til kvit. Endre Blend mode til skjerm og redusere Opacity til 20%. Nedenfor kan du se forskjellen før og etter tilsetting gradient

Trinn 15:. Legg Tittel

Skriv LIST
for tittelen på denne formen. Legg følgende lagstiler.

Trinn 16

Tegn en sirkel form. Set lag Fyll til 0%, legge lagstiler.

Trinn 17

Jeg merker at nedre del av figuren er for mørkt. Det finnes ingen detaljer sett. For å fikse dette, vil jeg trekke manuelt. Kommando /Ctrl-klikk formlag. Bruk liten myk børste deretter male den med hvitt. Du kan se forskjellen før og etter male hvitt

Trinn 18:. Lag Bakgrunn

Foreløpig bruker vi hvit for bakgrunnen. Dette hjelper ikke fordi hvit tendens til å gjøre alt rundt det lettere. Så, la oss legge bakgrunnen nå. Dobbelklikk Bakgrunn for å konvertere den til laget. Klikk Rediger > Fyll og velg Farge: # 332c1c. Legge tekstur på laget. Du kan gjøre dette ved å lime en tekstur på laget og satt sin Blend mode til skjerm eller Multiply, eller du kan legge lagstilen Pattern Overlay og bruke ett av de tilgjengelige mønstre

Trinn 19:. Tegn Screen

Tegn en rektangulær form og legg den bak formen. Still Fyll til 0%. Legg layer style Gradient Overlay.

Trinn 20

Duplicate den veien vi har nettopp opprettet. Klikk på Legg til justeringslag og velg Gradient Fill. Tegn en annen vei akkurat beskrives som vist i bildet nedenfor og velg Snitt. Kombinasjonen av begge banene vil gi oss en fin refleksjon i øverste venstre hjørne.

Trinn 21

La oss legge til en annen gradient for å gjøre den øverste skjermen lysere. Tegn et avrundet rektangel på toppen. Still Fyll til 0%. Legg lagstiler Gradient Overlay med Blend Mode Screen å holde lettere pixel.

Trinn 22

Legg til flere skygger på nedre del av skjermen. Vi trenger bare å gjenta den forrige prosessen. Tegn et avrundet rektangel, satt Fyll til 0%. Legg lagstilen Gradient Overlay, men denne gangen velger blanding modus Multipliser å skjule alle lettere piksler

Trinn 23:. Legg Ornamenter på Screen

Bruk pennen til å tegne noen figurer og plassere dem bak skjermen. Legg lagstiler.

Trinn 24

Reduser lag ornament Opacity til 50%. Legg lag tekstur på toppen av ornament. Sette Blend Mode til Screen og redusere Opacity til 45%. Konverter lag tekstur til klipping maske.

Trinn 25

Dupliser ornament og plassere den på motsatt side. Hit Kommando /Ctrl + T, høyreklikk og velg Vend vannrett

Trinn 26:. Legg Detaljer om Screen

La oss legge til flere detaljer på skjermen. Begynn med å legge høydepunkt. Lag en halvmåne form bane og plassere den på venstre kryss. Klikk Legg Adjustment Layer ikonet og velg Gradient Fill fra hvit til gjennomsiktig. Still Opacity til 50%

Trinn 27

Duplicate høydepunkt. Og plassere den på øverst i høyre hjørne. Hit Kommando /Ctrl + T, høyreklikk og velg Vend vannrett. Hvis du legger merke til, i det virkelige liv, er belysning aldri perfekt. Det er nesten umulig å få den samme punktet på begge sider. Så, for dette duplisert høydepunkt, endre Opacity til 20%.

Trinn 28

Gjenta de forrige trinnene, men denne gangen, bruker svart til gjennomsiktig for å skape skygge

Trinn 29:. Legg Sprekker

Jeg har alltid elsker små detaljer. Små detaljer helt gi perfekt inntrykk på arbeidet ditt. En ting du kan gjøre for å legge til realisme på arbeidet ditt er å legge noen feil, i vårt tilfelle, en sprekk. Dette er ganske enkelt faktisk. Start med å lage nytt lag, tegne 1px svart linje ved hjelp av blyantverktøyet. Duplicate layer (Kommando /Ctrl + J), flytte den 1px. Hit Kommando /Ctrl + jeg å invertere sin farge til hvit. Redusere svart linje Opacity til 30% og hvit linje til 20%. Slett begge ender av linjene ved hjelp av myk liten viskelæret.

Trinn 30

Gjenta samme prosess til en annen sprekk.

Trinn 31

Ved 100 % zoom, kan du se våre små sprekker

Trinn 32:. Legg Høydepunkt

La oss legge noen tilfeldige høydepunkt. Start med å tegne en hvit prikk ved hjelp 2px myk børste. Hit Kommando /Ctrl + T og strekke den horisontalt. Slette sine ender ved hjelp av myke viskelæret

Trinn 33

Duplicate høydepunkt og plassere den på andre stillinger

Trinn 34:.. Legg i spilleliste Tittel

Legg tekst for spillelisten. Legg fet stil til en av sangene for å indikere at den er aktiv. Bruk farger # ffffc5 og legge følgende lagstiler

Trinn 35

For å visne spillelisten, legge til lagmaske og trekke gradient fra hvitt til grått

Trinn 36:.. Legg Spilleliste Button

Tegn en mangekantet form og plassere den på den nedre delen av spillelisten. Vi må gjenta trinn 11 til 13 for å legge lignende teksturer på formen. Legg ripete metalliske teksturer, Avmett sin farge (Kommando /Ctrl + Shift + U). Sett Blend Mode til Screen, redusere Opacity til 45%. Hit Kommando /Ctrl + Alt + G for å konvertere laget til klipping maske. Legg følgende lagstiler.

Step 37

Duplicate sirkulær form fra hjørnet av spillelisten. Plasser den på begge sider av den nye formen. Endre størrelsen til 90%.

Step 38

Tegn en rektangulær form. Satt Fyll lag til 0%. Legg følgende lagstiler.

Trinn 39

Jeg vil legge til mer definisjon til nedre del av den rektangulære formen ved å legge mer lys. For å gjøre dette, vi trenger bare å trekke en 1px linje ved hjelp av blyant verktøyet og sette opacity til 20%.

Trinn 40

Nedenfor kan du se liten forskjell før og etter tilsetting 1px linjen.

Trinn 41

Ved hjelp av rektangulær verktøy, tegne + tegnet og legge følgende lagstiler.

Trinn 42

Duplicate + tegnet og ta av horisontal forme å slå den inn i en -. tegn

Trinn 43

Tegn lenger rektangulær form ved siden av -. knappen

Trinn 44

Inne i form , legge til tekst for Gjeldende spor Tid /Total spilleliste Tid

Trinn 45:. Tegning Player Interface

Duplicate spilleliste grensesnitt. Endre tittelen til + PLAYER
. Vi trenger ikke spillelisten sang så slette sin tekst.

Trinn 46

Tegn en rektangulær bane og velg Legg til Shape. Tegn en poygonal bane, legg det på nedre del av spilleren og velg Subtract.

Trinn 47

Vi ønsker ikke dette grensesnittet for å være nøyaktig kopi av spillelisten. For å gjøre det unikt, la oss legge til noen forskjell. Flytt teksturer, flytte høydepunkter, og legge til flere sprekker.

Ikke glem å omplassere skjermen. Flytte sine høydepunkter, skygger og tilbehør på hjørnet

Trinn 48:.. Tid Indicator

Tegn en tynn rektangulær form og legge til noen lag figurer

Trinn 49

Vi vil trekke en gang spor indikator. Tegn formen laget av avrundet rektangel og en trekant. For sin fargebruk. # 4f4834

Legg tekstur på toppen, setter sin blanding modus til skjerm med Opacity 45%. Konverter tekstur lag til klipping maske. Legg følgende lagstiler

Trinn 50:. Legg Player Button

Tegn et annet polygon på toppen av spilleren grensesnittet. Gjenta trinn 36, og legger til tekstur og lagstiler.

Trinn 51

Tegn en rektangulær form, satt Fyll til 0%. Legg følgende lagstiler.

Step 52

Tegn formen laget av rektangel og trekant. Legg følgende lagstiler.

Step 53

Bruk samme teknikk for å skape en annen knapp.

Trinn 54

Tegn en liten høyttaler ikon form. Ved siden av det, lage en halvmåne form laget av to overlappende sirkel. Legg følgende lagstiler, i likhet med tidligere knapper.

Trinn 55

Tegn noen rektangulære former. Legg følgende lagstiler.

Trinn 56

Duplicate layer form (Kommando /Ctrl + J) og slette noen av dem. Fjern alle lagstiler og legge følgende Color Overlay.

Step 57

Legg sirkulær form på begge ender av form. Se trinn 37 for referanse på hvordan du gjør det

Trinn 58:. Legg låtinfo

Legg til tekst inneholder spor opplysninger. Legg lagmaske. Tegn wite til svart gradient for å gjøre det visne bort

Trinn 59

Vi er ferdige med grensesnittet

Trinn 60:.. Endre Interface Color

Vi kan også endre fargen. Legg Adjustment Layer Hue /Saturation og plassere den på toppen av grensesnittet. Endre innstillingene.

Konklusjon

Som du kan se, designe grensesnitt er ikke bare om å legge lagstiler. Det er mye mer i prosessen. Jeg håper du kan lære noen nye teknikker fra denne opplæringen. Hvis du har spørsmål, kan du gjerne spørre i kommentarfeltet skjemaet nedenfor. Anmeldelser