Create en elegant og stilig MP3-spiller i Photoshop

En av de beste måtene å lære hvordan du kan lage fantastiske grensesnitt det til praksis ved å lage elektroniske enheter i Photoshop. Disse dagene omtrent alle har en slags MP3-enhet til å spille musikk. I denne opplæringen vil vi vise hvordan du oppretter en slank, elegant og enkel MP3 grensesnittet i Photoshop for å spille av lydfiler for Flash prosjekter.

Trinn 1

første skritt er å skape en bakgrunn der vi kan bruke en mørk radial gradient. Mal lag i alle farger og legge et lag stil med gradienten er vist nedenfor.

Trinn 2

Med avrundet rektangel verktøyet (angir en radius 20 piksler) skaper den viktigste element av enheten ved hjelp av et formlag (klikke på det første alternativet i øvre menyen).

Trinn 3

Dobbeltklikk på vektor av dette laget, vil fargen redaktør åpne opp. Vi vil velge en lys grå farge # E1E0E0 som vil tillate oss å legge til noen glød til overflaten. Hver gang du vil lage hvite objekter må du legge litt grå farge, slik at du kan lyse dem opp eller legge litt glød til å gjøre disse ressursene ganske synlig.

Trinn 4

Nå vi vil skape en skråkant rundt enheten. For å gjøre dette trenger vi å lage noen referanse guider som bruker Photoshop ’ s herskere. Klikk på konvergens vinkel på begge herskere. Ved å dra musen vil du være i stand til å visualisere de stiplede linjene som nettopp bestemmer hvor markøren er plassert. Dette vil gi oss mulighet til å skape et like langt skråkant rundt enheten omkretsen.

Trinn 5

Nå som vi har en ny formlag for skråkant, må vi ta tettheten av dette laget til null, som vi bare ønsker å se en to pixel skråkant på overflaten.

Trinn 6

Bruk en 1 pixel slag til Inside posisjon ved hjelp av en mørkere farge enn enheten foran. I dette trinnet vil vi lage en linje som representerer felles gap mellom kroppen og fronten av spilleren.

Trinn 7

Bruk en indre glød med en 2 pixel linje med de verdiene nedenfor .

Trinn 8

Legg til en myk gradient for å gi inntrykk av konveksitet til enheten ’ s foran

Trinn 9

nå vil vi ta. vare på spilleren ’ s kanten. For å gjøre dette, legg til en linje som vil fungere som et press å gi en illusjon av et 3D-objekt. . Legg en 2 pixel grå strek i utvendig posisjon

Trinn 10

Bruke Bevel & Relieff stil vi legger lys til den øvre delen av denne linjen. Nå objektet ser ut til å ha et press mot ryggen som mottar lys ovenfra og blir mørkere på basen.

Trinn 11

Legg til en myk, liten indre skygge til dette laget for å markere enda mer spilleren ’ s foran

Trinn 12

Ved å duplisere og redigere forsiden ’.. s skrå lag, genererer vi flere skråkanter som skal representere de ulike kontrollknappene på enheten
< h2> Step 13

nå redigere formlag for å lage hoved Play /Pause-knappen for vår spiller. La ’ s duplisere den første skrå og ta grensene inne for å gjøre en sirkulær objekt. Deretter forstørre det 10% som vi trenger bare de horisontale bevels.

Trinn 14

Bruk en myk tre piksel maske til formen vi opprettet i trinn 13, som vist nedenfor.

Trinn 15

For å gjøre masken skjule objektet og dens lag stil, klikker du alternativet “ lagmaske skjuler Effects ” på stiler vinduet. Hvis vi ikke velger dette alternativet, vil masken bare skjule objektet, men vil vise effekten utenfor masken og vi ønsker å holde det skjult.

Trinn 16

Det samme maske vil også være nyttig for andre skråkanter; vi kan ta det fra laget vi maskert før. Ved å klikke på høyre museknapp over masken ikonet inne i laget, vi velger “ Trekk frå markering ”. Dette vil skape et identisk utvalg til den forrige.

Trinn 17

Med dette valget gjentar vi masken utvalg konvertering trinn.

Trinn 18

Vi har allerede separasjons bevels av våre hovedknappen sett. Nå må vi lage et formlag for spilleren ’ s display: en svart akryl skjerm der navnet på sangen og tiden vil bli vist

Trinn 19

Først bruker vi. skygge for å lage en bunn skrå hvor lyset kommer ovenfra vil hit. Bruk verdiene som er vist på bildet for å konfigurere stil å gjøre det skarpt og klart og ikke mørkt og uskarpt.

Trinn 20

Nå må vi opprette en radial gradient. Ta både svarte og hvite farger til så nær sentrum som mulig fra hverandre, så det er ikke så mye mykhet mellom begge farger. Plassering av svart 49%, plassering av hvit 50%.

Trinn 21

unclick muligheten Align med Layer. Hvis vi ikke gjør dette, vil gradienten bare være fra midten av objektet til kantene, og vi ønsker denne gradienten å være mye større og bredere.

Trinn 22

Etter å ha produsert din skinnende effekt, avslutt denne stilen med et par kanter lik de vi skapt for knappen trinn. Bruk en svart en piksel slag med slag justert til innsiden. Bruk en indre glød, 2 px i størrelse med overgangsmodusen satt til skjermen.

Trinn 23

Vi er nå ferdig med den foran våre MP3-spiller. Nå må vi legge noen ikoner til knapper og tekst i displayet

Trinn 24

Nå la ’ s. Simulere teksten scroller på skjermen. Ved hjelp av en kornete font må vi legge tolken navn og navnet på sangen som vil bli spilt. Du kan bruke denne gratis font. Husk å fjerne aliasing i Character vinduet i øvre meny med tekstverktøyet for å holde teksten skarp.

Trinn 25

Med en annen bitmap font skaper vi kronometer som viser tiden passert. Denne skriften er også gratis, og du kan få det her.

Trinn 26

Nå bruker en font som har de vanlige ikoner og symboler av en lyd- eller videospiller. Du kan bruke denne. Når den er installert bruke den til å lage de forskjellige knappene på spilleren, i dette tilfellet, Play /Pause-kontroll (du må lage to stater for knappen når du utvikle denne spilleren, som på Play-knappen blir pauseknappen når det trykkes og vice versa).

Trinn 27

for dette symbolet vi bruker samme farge som den vi plukket for fremsiden av objektet. Med fargevalg verktøyet kan vi male teksten.

Trinn 28

Nå kan vi inkludere ulike stiler som gjør dette symbolet ser ut som relieff. Bruk de aktuelle verdiene nedenfor for den indre skyggen.

Trinn 29

Lysere opp bunnen skrå bruke disse verdiene.

Trinn 30

Bruk en myk og liten bredde gradient til overflaten av depresjon, så det er ikke så kjedelig

Trinn 31

La ’ s. skape volumkontrollen. Tegn en liten knott knapp med en polert metall finish. Start med en sirkulær form lag.

Trinn 32

Bruk en skygge for å skape en illusjon av en stor ekstrudering.

Trinn 33

Med en gradient i vinkelmodus og flere grå og hvite striper kan vi simulere den sirkulære polske av denne type knappen. Pass på at første grå farge til venstre er den samme som den siste grå farge på høyre side.

Trinn 34

Til slutt legger du et strøk med en gradient fyll. Dette vil legge skråkant på omkretsen. Følg verdiene på bildet nøye.

Trinn 35

Vi har nå avsluttet vår volumkontroll knappen, men vi ønsker også å legge til en mute-knapp. Du kan gjøre dette ved hjelp av lagstiler.

Trinn 36

Paint skyggen av spilleren i et nytt lag ved hjelp av en 2 piksler myknet sirkulært utvalg (se øvre verdi meny av verktøyet).

Step 37

Skjul valget med Ctrl + H og bruke en 100 pixel børste med 10% av malingen flyt, maling skyggen mykt. Dette vil gjøre det mer intens i midten av objektet

Trinn 38

Nå la ’ s. Legge litt glød på spilleren ’ s skjermkanten. Først male en intens lyst område i sentrum av et rektangulært utvalg som er en piksel høy. Og så, over samme kam, men uten noen valg klikke flere ganger for å øke intensiteten i sentrum.

Trinn 39

Opprett en rollover effekt på hovedknappen for å gjøre fremsiden pop når musen passerer over. Vi starter med å lage en sirkulær form bak pauseikonet

Trinn 40

Denne depresjon effekt kan gjøres med. Skygge å mørkne og myke objektet ’ s kanter, og en gradient simulere at denne depresjonen har en øvre område som er i nyanser, som knappen ble trykket ned.

Trinn 41

Vi skjuler også denne roll med en maske som vi gjorde med bevels av hovedknappen sett. Husk muligheten til å skjule lag effekter på samme tid.

Trinn 42

gjenta de forrige trinnene vi maskere roll.

Trinn 43

vil legge til to lyseffekter å forbedre roll. Ved å male med 2 farger (# 00CCFF for kanten av effekten og hvit for midten) skaper vi en tent kant som vi vil maskere. Dupliser laget og reflekterer den vertikalt for å gjøre det ser ut som om den lyser opp på toppen og bunnen som musen passerer over. Dette laget må være satt til “ Screen ” å integrere de gløder bedre

Trinn 44

Til slutt, la ’ s. legge en slank wire som vil gi mer realisme til spilleren. For å gjøre dette, tegne en buet form lag bruker pennen

Trinn 45

Ta det til 0% opasitet og legge et strøk med samme grå tone om spilleren ’. Overflate.

Trinn 46

Skill slag fra formlag som vi opprettet, som vi trenger for å legge til litt skygge på denne ledningen. Høyreklikk på fx ikonet ved siden av lag og velg Opprett Layer.

Trinn 47

Denne handlingen skiller slag i et nytt lag uten å ødelegge formen tidligere trukket. Bruk en indre skygge for å gi inntrykk av en sylindrisk preg på denne linjen.

Konklusjon

Vårt MP3 Player er nå klar til å bli eksportert som et gjennomsiktig PNG og kodet i Flash skal brukes på nettsteder. Du kan se det endelige bildet nedenfor eller se en større versjon her.