Share
En av de beste måtene å lære å lage fantastiske grensesnitt det å øve ved å lage elektroniske enheter i Photoshop. I dag har omtrent alle en slags MP3-enhet for å spille musikk. I denne opplæringen vil vi demonstrere hvordan du lager et elegant, stilig og enkelt MP3-grensesnitt i Photoshop for å spille av lydfiler for dine Flash-prosjekter.
Det første trinnet er å skape en bakgrunn der vi kan bruke en mørk radialgradient. Lakk laget i hvilken som helst farge og legg til en lagestil med graden vist nedenfor.
Med det avrundede rektangelverktøyet (angi en radius på 20 piksler), opprett hovedelementet til enheten ved hjelp av et formlag (klikk på det første alternativet i den øvre menyen).
Dobbeltklikk på vektoren av dette laget, dets fargeditor åpnes. Vi vil velge en lysegrå farge # E1E0E0 som gjør at vi kan legge litt glød på overflaten. Hver gang du vil lage hvite objekter, må du legge til litt grå farge, slik at du kan telle dem opp eller legge til noe lys for å gjøre disse ressursene ganske synlige.
Nå skal vi lage en skråstilling rundt enheten. For å gjøre dette må vi opprette noen referanse guider ved hjelp av Photoshops linjaler. Klikk konvergensvinkelen til begge linjene. Ved å dra musen, vil du kunne visualisere de stiplede linjene som nøyaktig bestemmer hvor markøren er plassert. Dette vil gjøre det mulig for oss å skape en ekvivalent skråning rundt enhetens omkrets.
Nå som vi har et nytt formlag for skråden, må vi ta opaktheten til dette laget til null, da vi bare vil se en 2-piksskrå på overflaten.
Påfør en 1 piksler i innvendig posisjon med en mørkere farge enn fronten på enheten. I dette trinnet vil vi lage en linje som representerer det felles gapet mellom kroppen og forsiden av spilleren.
Påfør en innvendig glød med en 2 pikslinje ved hjelp av verdiene nedenfor.
Legg til en myk gradient for å gi ideen om konveksitet til enhetens front.
Nå skal vi ta vare på spillerens kant. For å gjøre dette, legg til en linje som vil fungere som en ekstrudering for å gi illusjonen til et 3D-objekt. Legg til et 2 piksler grått slag i utvendig posisjon.
Ved å bruke stilen & Emboss-stil legger vi lys til det øvre området av denne linjen. Nå synes objektet å ha en ekstrudering mot ryggen som mottar lys ovenfra og blir mørkere ved basen.
Legg til en myk, liten indre skygge til dette laget for å markere enda mer spillerenes front.
Ved å duplisere og redigere frontens skrålag, genererer vi flere fasetter som representerer de forskjellige kontrollknappene på enheten.
Rediger nå formen laget for å lage hovedspill / pause-knappen til spilleren vår. La oss kopiere den første skråden og ta kantene innvendig for å lage et sirkulært objekt. Så forstørr det 10% da vi bare trenger de horisontale fasene.
Påfør en myk 3 pikselmaske til formen vi opprettet i trinn 13 som vist nedenfor.
For å få masken til å gjemme objektet og dets lagestil, klikk på alternativet "Layer Mask Hide Effects" i stilvinduet. Hvis vi ikke velger dette alternativet, vil masken bare skjule objektet, men vil vise effekten utenfor masken, og vi vil beholde den gjemte.
Denne samme masken vil også være nyttig for de andre fasene; Vi kan ta det fra laget vi maskerte før. Ved å klikke på høyre museknapp over maskeikonet i laget, velger vi "Subtract Layer Mask from Selection". Dette vil skape et identisk utvalg til den forrige.
Med dette valget gjentar vi konverteringstrinnet for maskevalg.
Vi har allerede separasjonsfeltene i vårt hovedknappsett. Nå må vi lage et formlag for spillerens skjerm: en svart akryl skjerm hvor navnet på sangen og tiden vil bli vist.
Først bruker vi drop shadow for å lage en nedre skråning hvor lyset som kommer fra oven vil treffe. Bruk verdiene som vises på bildet for å konfigurere stilen for å gjøre den skarp og klar og ikke mørk og sløret.
Nå må vi lage en radial gradient. Ta begge svarte og hvite farger så nær senteret som mulig fra hverandre, så det er ikke så mye mykhet mellom begge fargene. Plassering av svart 49%, plassering av hvitt 50%.
Unklikk alternativet Juster med lag. Hvis vi ikke gjør dette, vil gradienten bare ligge fra midten av objektet til kantene, og vi vil at denne gradienten skal bli mye større og bredere.
Etter å ha produsert den glatte effekten, gjør du ferdig med denne stilen med et par fasetter som de som vi opprettet for knappesteget. Bruk en svart 1 piksestreng med stroke rettet innvendig. Bruk en innvendig glød, 2 px i størrelse med blandingsmodusen som er satt til skjermen.
Vi har nå avsluttet forsiden av vår MP3-spiller. Nå må vi legge til noen ikoner på knappene og teksten inne i displayet.
La oss nå simulere tekstskriveren på skjermen. Ved å bruke en pixelert skrift må vi legge til tolknavnet og sangnavnet som skal spilles. Du kan bruke denne gratis fonten. Husk å fjerne aliasing i tegnvinduet i øvre meny i tekstverktøyet for å holde teksten skarp.
Med en annen bitmap skrifttype lager vi kronometer som angir klokkeslettet. Denne skrifttypen er også gratis, og du kan få den her.
Bruk nå en skrift som har de vanlige ikonene og symbolene til en lyd- eller videospiller. Du kan bruke denne. Når den er installert, bruk den til å opprette de forskjellige knappene til spilleren, i så fall, Spill / Pause-kontrollen (du må opprette to tilstander for knappen når du utvikler denne spilleren, da Play-knappen blir Pause-knappen når det er presset og omvendt).
For dette symbolet bruker vi samme farge som den vi valgte for objektets forside. Med fargevalgverktøyet kan vi male teksten.
Nå kan vi inkludere ulike stiler som gjør at dette symbolet ser ut som bas-relief. Bruk de tilsvarende verdiene under for den indre skyggen.
Lyse opp nederste kant ved å bruke disse verdiene.
Bruk en myk og liten breddegradient til overflaten av depresjonen, så det er ikke så kjedelig.
La oss lage volumkontrollen. Tegn en liten knapp med en polert metallfinish. Begynn med et sirkelformet lag.
Bruk en dråpe skygge for å skape illusjonen av en stor ekstrudering.
Med en gradient i vinkeltilstand og flere grå og hvite striper kan vi simulere den sirkulære polen av denne typen knapp. Pass på at den første grå fargen til venstre er den samme som den endelige grå fargen til høyre.
Til slutt legger du til et slag med en gradient fylling. Dette vil legge til skråningen på omkretsen. Følg verdiene på bildet nøye.
Vi har nå fullført volumkontrollknappen, men vi vil også legge til en dempet knapp. Du kan gjøre dette ved hjelp av lagstiler.
Mal skyggen av spilleren i et nytt lag ved hjelp av et 2 piksler mykt sirkulært valg (se verktøyets overordnede meny).
Skjul valget med Ctrl + H og bruk en 100 piksler pensel med 10% av malingen, mal skyggen sakte. Dette vil gjøre det mer intens i midten av objektet.
La oss legge til litt glød på spillerens skjermkant. Først må du male et intens lyst område i midten av et rektangulært utvalg som er 1 pixel høyt. Og da, med samme pensel, men uten valg, klikk flere ganger for å øke intensiteten til senteret.
Lag en overgangseffekt på hovedknappen for å gjøre frontoverflaten pop når musen går over. Vi begynner med å lage en sirkulær form bak pausikonet.
Denne depresjonseffekten kan gjøres med: dråpe skygge for å mørke og myke objektets kanter og en gradient for å simulere at denne depresjonen har et øvre område som er i nyanser, da knappen ble trykket ned.
Vi skjuler også denne rolloveringen med en maske som vi gjorde med fasene på hovedknappsettet. Husk muligheten til å gjemme lageffekter samtidig.
Gjenta de forrige trinnene vi maskerer overgangen.
Vi vil legge til to lyseffekter for å forbedre overgangen. Ved å male med 2 farger (# 00CCFF for kanten av effekten og hvitt i midten), skaper vi en lysende kant som vi vil maskere. Dupliser laget og reflekter det vertikalt for å få det til å se ut som om det lyser oppe og bunn når musen går over. Dette laget må settes til "Screen" for å integrere lysene bedre.
Til slutt, la oss legge til en slank ledning som gir mer realisme til spilleren. For å gjøre dette, tegne et buet formlag ved hjelp av pennverktøyet.
Ta den til 0% opacity og legg til et slag med samme grå tone på spillerens overflate.
Skille streken fra formlaget som vi opprettet, da vi må legge til litt skygge på denne ledningen. Høyreklikk på fx-ikonet ved siden av laget, og velg Lag lag.
Denne handlingen skiller streken i et nytt lag uten å ødelegge formen som tidligere ble tegnet. Bruk en indre skygge for å gi ideen om en sylindrisk preg til denne linjen.
Vår MP3-spiller er nå klar til å bli eksportert som en gjennomsiktig PNG og kodet i Flash som skal brukes på nettsteder. Du kan se det siste bildet under eller se en større versjon her.
Accentsconagua