Share
I denne opplæringen vil vi designe et elegant og rent MP3-spillergrensesnitt. Prosessen innebærer mye manuell tegning og mange lagstiler. La oss komme i gang!
Følgende eiendeler ble brukt under produksjonen av denne opplæringen.
La oss begynne med å lage en bakgrunn for vår mp3-spiller. Tegn en radiell gradient fra hvitt til grått.
Mørk gradienten ved å legge til Adjustment Layer Hue / Saturation. Reduser lysstyrkeinnstillingen.
Lag et nytt lag og fyll det med hvitt. Kontroller at du har hvit og svart som forgrunn og bakgrunn ved å trykke D. Klikk på Filter> Støy> Legg til støy. Sett Distribution to Uniform og velg Monochromatic.
Endre blandingstilstanden til laget til Multiply.
Dupliser lag ved å trykke på Command / Ctrl + J. Invert layer ved å trykke Ctrl + I. Flytt lag 1 px til venstre og 1 px ned ved å aktivere verktøyet flytt, trykk deretter på venstre pil og pil ned. Endre blandingstilstand til skjerm.
Sett begge lydlagene inn i en gruppemappe og reduser Opacity til 50%.
Lag et avrundet rektangel på lerretet. Bruk # 3b484f som farge. Legg til følgende lagstiler.
Tegn et mindre avrundet rektangel. Legg til følgende lagstiler.
Legg til et lite avrundet rektangel. Vi bruker den som en beholder for albumdekselet. Legg til følgende lagstiler.
Lim inn et bilde på toppen av det avrundede rektangelet. Hit Command / Ctrl + Alt + G for å konvertere den til klippemaske og sett den inne i det avrundede rektangel.
Legg til artistinformasjon, albumets navn og år under albumdekselet.
Fra valglinjen må du velge de beste Anti-aliasing-metodene for å hindre uklart utseende. Jeg kan ikke si hvilken som er bedre, fordi den er forskjellig for hver skrifttype og størrelse. Du må eksperimentere med hver innstilling. Som du kan se nedenfor, fungerer i dette tilfellet ingen best.
Tegn et avrundet rektangel. Legg til følgende lagstiler.
Lag nytt lag. Mal hvit ved å bruke en myk børste (Hardhet: 0%) med lav oppasitet (10-15%). Dette vil legge til en subtil lyskilde under equalizer.
Velg linjeværktøy og sett vekten til 1 px.
Tegn en hvit linje inne i utjevningen. Aktiver zoomverktøyet og klikk noen ganger for å zoome inn til maksimal visning. Vi må sørge for at linjen ikke er uklart. Som du ser nedenfor, er det uskarpt sted på begge ender av linjen.
Det er to måter å fikse denne blurriness på. Først må vi rulle opp størrelsen. Andre er å fikse sin plassering.
Hit Command / Ctrl + T for å transformere linjen. Høyreklikk Bredde (W) boksen og velg piksler. Gjør det samme til høyde (H) boksen.
Vi må rulle opp størrelsen. I dette tilfellet må vi bytte 11,97 px til 12 px.
Deretter la oss fikse sin posisjon. Velg linjeform med verktøybane. Trykk piltast for å fikse posisjonen. Gjør dette til vi ikke har noe uskarpt sted.
Dupliser og transform linjen ved å trykke Command / Ctrl + Alt + T. Flytt den oppover 3 px?
Gjenta dupliserings- og transformasjonsprosessen ved å trykke på Command / Ctrl + Shift + Alt + T.
Velg alle linjene, dupliser den og plasser den til høyre. Husk å holde det skarpt. Pass på at stillingen er perfekt for å unngå uklarhet.
Gjenta denne prosessen til vi har noen kolonner med 1 px høyde linjer.
Slett noen av linjene til vi får en naturlig form av equalizer. Legg til følgende lagstiler. Sett fyll på til 0%.
Legg til artistnavn, sangtittel og total sporetid på toppen av equalizer. Jeg bruker font type LCD-telefon her. Den anti-aliased metode som brukes her er ingen.
Nedenfor kan du se resultatet med hver Anti-aliased metode.
Legg til mer tekst for mer informasjon på toppen av LCD-skjermen. Bruk blyantverktøyet til å tegne en liten svart 1 px linje som skiller hver tekst. Slett begge ender av disse linjene.
Hit Command / Ctrl + 1. La oss gå tilbake og se resultatet vi har så langt i 100% visning. Dette er viktig for å gjøre at det ikke er uklare flekker i vårt design.
Tegn et lite avrundet rektangel for knappen.
Igjen må vi sjekke størrelsen og stillingen for å unngå uklare flekker. Hit Command / Ctrl + T og sørg for å runde opp størrelsen.
Pass på å sjekke sin posisjon, vi vil ikke se uklare kanter.
Legg til følgende lagstiler.
Tegn en svart trekant på toppen av knappen. Legg til Drop Shadow med følgende innstillinger.
Gjenta prosessen for å opprette flere knapper.
Lag knapbakgrunn laget av to overlappende avrundet rektangel. Legg til følgende lagstiler.
La oss gå tilbake igjen og ta en titt på designen i 100% visning. Vi må sørge for at det ikke er uklare flekker.
Lag et langt avrundet rektangel. Legg til følgende lagstiler.
Dupliser lagform som vi nettopp har opprettet og legger til disse lagformatene.
Legg til lagmaske. Velg halvparten av formen og fyll den med svart.
Foreløpig brukes lagstiler på lagmasken, og de legger en avrundet form på høyre ende av formen. Hvis du vil fjerne dette, aktiverer du Layer Mask Hides Effects fra dialogboksen Lagstil.
Du kan se forskjellen nedenfor. Effekten fra lagestilen er nå skjult av lagmasken.
Opprett større avrundet rektangel bak tidsindikatoren for bakgrunnen. Legg til denne lagestilen.
Opprett nytt lag på toppen av tidsindikatorbakgrunnen. Mal noe belysning og skygge. Du kan se fremgangen jeg laget nedenfor.
Lag et avrundet rektangel og legg det på høyre side bak hovedformen. Legg til følgende lagstiler.
Opprett nytt lag på toppen av det runde rektangelformet. Mal litt belysning og skygger.
Lag noen triangler og legg dem på høyre side av formen. Legg til følgende lag stil.
Bruk blyantverktøyet til å tegne to 1 px linje, svart og hvitt. Sett dens opasitet til 10%.
Legg lagmaske og lakk noen deler av linjen med svart. Nedenfor ser du masken som brukes her.
Tegn et avrundet rektangel og legg til følgende lagstiler. Sett fyll på lag til 0%.
Legg til sangtitler. Sett en av sangene til fet skrift for å angi den som en aktiv sang.
Legg til Drop Shadow for å gi det innsettingseffekt.
Tegn et avrundet rektangel. Legg til følgende lagstiler og sett fyllingslag til 0%.
Opprett et plustegn laget av to overlappende linjeform. Angi Fyll til 0% og legg til disse lagformatene.
Gjenta prosessen for å opprette andre knapper.
Dupliser spilleliste grunnleggende form. Hit Command / Ctrl + T, høyreklikk og velg Flip Horizontal. Flytt den til venstre side.
Tegn et tynt, avrundet rektangel og legg til disse lagformatene.
Opprett et lite avrundet rektangel for glidebryteren. Legg til følgende lagstiler.
Disse lagformatene er fremdeles ikke nok til å få et overbevisende 3D-utseende. Ved hjelp av blyantverktøy må vi legge til litt 1 px linjedetaljer på glidebryteren. Se bildet nedenfor for referanse.
La oss gå tilbake og se resultatet i 100% visning.
Mal noen svarte striper bak glideren.
La oss legge til etikett "VOLUME" for glidebryteren. Skrifttypen som brukes er Digital-7. Legg til Drop Shadow.
Opprett en annen glidebryter ved å duplisere tidligere skyvekontroll og endre etiketten.
La oss nå fokusere på å opprette balanseforskyver siden dette er litt annerledes. Legg til mer mellomrom mellom skyvekontrollen og etiketten. Slett striper bak glideren. Bruk blyant til å tegne vekslende 1 px svart og hvit linje. Still lagets opasitet til 10%.
Legg pluss (+) og minus (-) tegn i begge ender og legg til Drop Shadow.
Hit Command / Ctrl + 1 for å se resultatet ved 100% visning.
Vårt design er rett og slett for rent og unaturlig. For å fikse dette la vi legge til noen høydepunkter. Tegn en hvit 1 px linje med blyantverktøyet. Slett begge ender.
Gjenta denne prosessen for å lage andre høydepunkter.
Hold kommando / Ctrl og klikk på grunnleggende form, spillelisteform og spillerinnstillinger for å lage et nytt utvalg basert på mp3-spillerenes form. Trykk på nedpilen et par ganger for å sette valget nede.
Lag nytt lag under alle andre lag. Fyll valg med svart. Presst Command / Ctrl + Shift + I for å deaktivere. Sug skyggen ved å legge til Gaussian Blur filter.
La oss legge til refleksjon på overflaten av mp3-spilleren. Kopier skjermsti (1). Klikk på Justeringslag-ikonet og velg Solid Color. Du kan bruke hvilken som helst farge her. Opprett en annen sti som dekker øverste del av skjermen og sett den til Intersect (2). Endre Opacity til 2% og fyll til 0%.
Nå skal vi skape en annen refleksjon på den ytre siden av hovedvinduet. Opprett ny vei som dekker hoveddelen av hovedvinduet (1). Klikk på Justeringslag-ikonet og velg Solid Color. Trekk det med skjermformet bane (2). Intersect det med hovedvinduet formvei (3).
Still Opacity til 23% og fyll til 0%. Legg til følgende lagstiler.
Nedenfor kan du se forskjellen med og uten refleksjon.
Neste vil vi legge til refleksjon på venstre og høyre vindu. Kopier venstre og høyre vindusbane, sett modusen sin til Legg til (1). Klikk på Justeringslagsikon og velg Solid Color. Trekk sti med hovedvindubanen (2). Opprett ny vei som dekker toppdelen av grensesnittet og sett den til Intersect (3).
Still Opacity til 10% og fyll 0%.
Nedenfor kan du forskjellen med og uten refleksjon. Veldig subtil, men det gir mer dybde på formen.
Sett alle former og lag som lager mp3-spilleren inn i en gruppemappe. Dupliserer gruppen og flytt vinduet til venstre og høyre til de er stengt.
Vi har forsøkt å skarpere hver piksel på grensesnittet, vi trenger fortsatt å skjerpe den igjen. Lag nytt lag på toppen av alle lag. Hit Command / Ctrl + Shift + Alt + E for å fusjonere alle synlige lag. Nå har vi nøyaktig duplikat av bildet i ett enkelt lag.
Klikk på Filter> Skarpere> Uskarpe masker. Dette filteret vil skarpere alle pikslene på laget.
Accentsconagua