Create en mobiltelefon Music Player Interface
Dette innlegget er en del av en serie som heter Vector Mobile App Design.Quick Tips: Hvordan lage en iOS-stil Mobile Navigation Bar
I det følgende opplæringen du vil lære å lage en mobiltelefon musikkspiller grensesnitt. Vi vil bygge grensesnittet ved hjelp pixel perfekt justering, kvalitet vektor form byggeteknikker, samt gradient og lysstyring.
Trinn 1
Hit Command + N for å opprette et nytt dokument. Skriv inn 640 i bredden boksen og 960 i høyden, klikk deretter på knappen Avansert. Velg RGB, Screen (72ppi), og sørg for at Align nye objekter til Pixel Grid boksen ikke er krysset før du klikker OK. Nå, slå på Grid (View > Grid) og Fest til rutenett (View > Fest til rutenett).
Deretter trenger du et rutenett hver 5px. Gå til Rediger > Preferanser > Guides & Grid, skriv 5 i linjenettet hver boks og en i underinndelinger boksen. Du kan også åpne infopanelet (Vindu > Info) for en live forhåndsvisning med størrelsen og plasseringen av dine figurer. Ikke glem å sette måleenheten til piksler fra Rediger > Preferanser > Unit > General. Alle disse alternativene vil øke arbeidshastigheten.
Trinn 2
Velg rektangel Tool (M) og lage en 640 30px form. Fyll den med svart, fjerne fargen fra slag og plassere den som vist på bildet nedenfor.
Trinn 3
Velg rektangel Tool (M) og lage en 640 200px form. Fyll den med R = 50, G = 50, B = 50, sørg for at det er ingen farger satt for hjerneslag, og plasser den som vist i følgende bilde. Deaktiver Fest til rutenett (View > Fest til rutenett), og deretter gå til Rediger > Preferanser > . Generelt, og sørg for at tastaturet Increment er satt til 1px
Velg denne nye formen og lage to kopier foran (Command + C > Command + F > Command + F). Velg den øverste kopien og trykke pil ned en gang (for å flytte den 1px ned). Reselect begge eksemplarene, åpner Pathfinder-panelet, og klikk på Minus Front-knappen. Fyll formen resulterer med svart
Trinn 4
Velg det stort rektangel opprettet i forrige trinn og lage to nye eksemplarer foran (Command + C >. Command + F > Command + F). Velg den øverste kopiere og flytte den 1px opp. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Igjen, fyll den resulterende formen med svart
Trinn 5
Velg det stort rektangel opprettet i tredje trinn og lage to nye eksemplarer foran (Command + C >. Command + F > Command + F). Velg den øverste kopiere og flytte den 2PX ned. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll formen resulterer med lineær gradient vist i det endelige bildet
Trinn 6
Velg det stort rektangel opprettet i tredje trinn og lage to nye eksemplarer foran (Command + C >.; Command + F > Command + F). Velg den øverste kopiere og flytte den 2PX opp. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll formen resulterer med lineær gradient vist i det endelige bildet.
Trinn 7
Velg det stort rektangel opprettet i det tredje trinnet, fokus på Utseende panelet, og legge til en annen fylling hjelp Legg til ny Fill-knappen. Det er den hvite, firkantede ikonet som ligger på bunnen av Utseende panel. Velg denne nye fyll, gjør det svart, senke Opacity til 7%, endre blending mode å formere seg, og gå til Effect > Sketch > Oppmerksom på papir. Skriv inn dataene nedenfor og klikk på OK.
Trinn 8
Velg det formen redigeres i forrige trinn, legge til to nye fyllinger, og bruke de radiale gradienter vist nedenfor. De gule nuller fra den graderte bildene stå for Opacity prosent
Trinn 9
Re-aktivere Fest til rutenett (View > Fest til rutenett).. Plukk rektangel Tool (M) og lage en 640 70px form. Fyll den med lineær gradient vist nedenfor, og legg den som vist i følgende bilde. Den hvite nummer fra gradient bildet står for plassering prosent.
Trinn 10
Velg rektangel Tool (L) og lage en 590 ved 10px form. Fyll den med hvit, plasser den som vist i det første bildet, og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 5px radius, klikk OK, og gå til Objekt > Utvid Utseende. Velg resulterende formen og fokus på utseendet panel. Først erstatte den hvite fra fylle med en mørk farge (R = 25, G = 25, B = 25).
Deretter legger en 3pt slag for denne formen. Satt sin farge på R = 15, G = 15, B = 15 og justere den til innsiden. Endelig reselect dette avrundet rektangel, sørg for at ingen fyll eller hjerneslag er valgt (i Utseende-panelet), og gå til Effect > Stilisere > Drop Shadow. Skriv inn dataene nedenfor og klikk på OK
Trinn 11
Velg det formen opprettet i forrige trinn, og lage en kopi i front (Command + C > Command + F).. Velg denne kopiere og redigere gradient brukes til fyllet (som vist i det første bildet).
Deretter trenger du trenger for å maskere denne nye formen. Plukk rektangel Tool (M), lage en 190 ved 30px form, fyll den med svart, og plasser den som vist i det andre bildet.
Åpne Transparency panel. Velg denne svarte formen, sammen med kopien opprettet i begynnelsen av trinnet, åpner fly-out menyen i Transparency panelet klikker du på Gjør Opacity Mask, deretter fjerner du merket i Clip-boksen. Til slutt bør maskert, avrundet rektangel ser ut som den fjerde bildet som vises.
Trinn 12
Velg rektangel Tool (M) og lage en 640 90px form. Fyll den med lineær gradient vist nedenfor, og legg den som vist i følgende bilde
Trinn 13
Deaktiver Fest til rutenett (View > Fest til rutenett).. Velge formen opprettet i forrige trinn og lage to kopier foran (Command + C > Command + F > Command + F). Velg den øverste kopiere og flytte den 1px ned. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. . Fyll den resulterende formen med svart
Velg det formen opprettet i forrige trinn og lage to nye eksemplarer foran (Command + C > Command + F > Command + F). Velg den øverste kopiere og flytte den 2PX ned. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende formen med R = 90, G = 90, B = 90.
Trinn 14
Velg det rektangelet opprettet i trinn 12, legge til en ekstra fyll, og velg det. Gjør det svart, senke Opacity til 7%, endre blending mode å formere seg, og gå til Effect > Sketch > Oppmerksom på papir. Skriv inn dataene nedenfor og klikk på OK. Reselect de tre figurer skapt i de to siste trinnene og gruppere dem (Command + G)
Trinn 15
Re-aktivere Fest til rutenett (View > Fest til rutenett).. Velg gruppen ble opprettet i forrige trinn, gjør fem eksemplarer, og plassere dem som vist på bildet nedenfor.
Trinn 16
Velg rektangel Tool (M) og lage en 640 x 120 piksler form. Fyll den med R = 50, G = 50, B = 50, og plasser den som vist i følgende bilde
Trinn 17
Deaktiver Fest til rutenett (View >. Fest til Grid). Velge formen opprettet i forrige trinn og lage to kopier foran (Command + C > Command + F > Command + F). Velg den øverste kopiere og flytte den 1px ned. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende formen med svart
Trinn 18
Velg det formen opprettet i trinn 16 og lage to kopier foran (Command + C > Command + F > Command + F).. Velg den øverste kopiere og flytte den 2PX ned. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll formen resulterer med lineær gradient vist i det endelige bildet.
Trinn 19
Velg det formen opprettet i trinn 16, legge til en ekstra fyll, og bruke radial gradient vist nedenfor. Husk at den gule null fra gradient bildet står for Opacity prosent
Step 20
Re-aktivere Fest til rutenett (View > Fest til rutenett).. Plukk Ellipse Tool (L), opprette en 110px sirkel, og fyll den med det første lineær gradient vist nedenfor. Velg denne friske form og gå til Objekt > Sti > Offset Path. Skriv inn et -2px Offsettrykk, og klikk OK
Duplicate formen resulterende (Command + C > Command + F).. Velg denne kopien og flytte den 2PX ned. Velg disse to mindre sirkler og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll formen resulterer med lineær gradient vist i det endelige bildet.
Trinn 21
Velg det sirkel opprettet i forrige trinn, legge til en ekstra fyll, og dra den i bunnen av Utseende panel. Velg det, fyll den med radial gradient vist nedenfor, og gå til Effect > Sti > Offset Path. Skriv inn en 3px Offsettrykk, og klikk OK.
Kontroller at sirkelen er fortsatt valgt og legge en to slag. Satt sin farge på R = 60, G = 60, B = 60, og justere den til innsiden. Legg et andre slag for denne form ved hjelp av Legg til ny Stroke knappen. Det er den svarte firkanten ikonet nederst, venstre hjørne av Utseende panel.
Velg denne nye slag, gjør det 1PT bred, satt sin farge på R = 25, G = 25, B = 25, og justere den til innsiden. Reselect din 110px sirkel, sørg for at ingen fyll eller hjerneslag er valgt (i Utseende-panelet), og gå til Effect > Stilisere > Drop Shadow. Skriv inn dataene nedenfor og klikk på OK.
Trinn 22
Velg rektangel Tool (M), opprette en 30px kvadrat, fyll den med R = 240, G = 241, B = 241 og plasser den som vist i det første bildet. Bytt til Direct Selection Tool (A) og fokus på denne friske form. Velg riktige ankerpunktene og gå til Objekt > Sti > Gjennomsnitt.
Sjekk Både knappen og klikk på OK. Din torget bør slå inn i en trekant nå. Velg den og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 2px radius og klikk på OK.
Trinn 23
Velg alle figurene skapt i de tre siste trinnene, gruppere dem, (Command + G) og plasser gruppen som vist i følgende image.
Trinn 24
Velg den Ellipse Tool (L), opprette en 90px sirkel, og fyll den med lineær gradient vist nedenfor. Velg denne friske form og gå til Objekt > Sti > Offset Path. Skriv inn et -2px Offsettrykk, og klikk OK
Nå duplisere resulterende formen (Command + C > Command + F).. Velg denne kopien og flytte den 2PX ned. Velg disse to mindre sirkler og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll formen resulterer med lineær gradient vist i det endelige bildet.
Trinn 25
Velg det sirkel opprettet i forrige trinn, legge til en ekstra fyll, og dra den til bunnen av Utseende panel. Velg det, fyll den med radial gradient vist nedenfor, og gå til Effect > Sti > Offset Path. Skriv inn en 3px Offsettrykk, og klikk OK. Sørg for at sirkelen er fortsatt valgt og legge en 2px hjerneslag.
Sett farge på R = 60, G = 60, B = 60, og justere den til innsiden. Legg et andre slag for denne sirkelen, gjør det 1PT bred, satt sin farge på R = 25, G = 25, B = 25, og justere den til innsiden.
Marker på nytt din 90px sirkel, sørg for at ingen fylle eller hjerneslag er valgt (i Utseende-panelet), og gå til Effect > Stilisere > Drop Shadow. Skriv inn dataene nedenfor og klikk på OK.
Trinn 26
Velg rektangel Tool (M), opprette en 15px kvadrat, fyll den med hvit, og plasser den som vist i det første bildet . Bytt til Direct Selection Tool (A) og fokus på denne friske form
Velg venstre ankerpunktene og gå til Objekt >.; Sti > Gjennomsnittlig. Sjekk Både knappen og klikk på OK. Duplisere den resulterende trekanten formen og dra denne kopien til venstre. Bytt til rektangel Tool (M), opprette en 5 av 15px form, fyll den med hvit og plasser den som vist i tredje bildet.
Velg de tre formene opprettet i dette trinnet og gruppere dem (Command + G). Velg denne nye gruppen og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn en 1px radius og klikk på OK.
Trinn 27
Velg alle figurene skapt i de tre siste trinnene, gruppere dem (Command + G), og plasser den gruppen som vist i følgende image
Trinn 28
Velg det gruppen ble opprettet i forrige trinn, og lage en kopi i front (Command + C > Command + F).. Velg denne gruppen kopi, dra den til høyre, som vist i det første bildet, og gå til Objekt > Transform > Reflektere. Sjekk Vertikal og klikk OK
Trinn 29
Velg rektangel Tool (M), opprette en 70 ved 30px form, fyll den med hvit, og gå til Effect >.; Stilisere > Avrundede hjørner. Skriv inn et 10xp radius, klikk på OK og gå til Objekt > Utvid Utseende. Fyll formen resulterer med den første lineær gradient vist nedenfor, og lage to kopier i front (Command + C > Command + F > Command + F)
Deaktiver Fest til rutenett (View >. Fest til Grid), velger du den øverste kopiere og flytte den 1px ned. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll formen resulterer med andre lineær gradient vist i følgende bilde.
Trinn 30
Velg det avrundet rektangel opprettet i forrige trinn, og legge en 2pt hjerneslag. Satt sin farge på R = 25, G = 25, B = 25, og justere den til utsiden.
Legg til en ny strek for denne formen, gjør det 1PT bred, satt sin farge på R = 60, G = 60, B = 60, og juster den til utenfor. Sørg for at ingen fyll eller hjerneslag er valgt og gå til Effect > Stilisere > Drop Shadow. Skriv inn dataene nedenfor og klikk på OK
Trinn 31
Velg den type Tool (T), klikk på artboard og legge til ". Shuffle " tekst. Bruk Myriad skrift med en størrelse 14 pkt og sette farge på R = 240, G = 241, B = 241.
Velg denne teksten, sammen med figurer laget i de to siste trinnene, og gruppere dem ( Command + G). Re-aktivere Fest til rutenett (View > Fest til rutenett), velger du gruppen, og plasser den som vist i følgende bilde
Trinn 32
Velg rektangel Tool (M. ), opprette en 70 ved 30px form, fyll den med hvit og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 10xp radius, klikk OK, og gå til Objekt > Utvid Utseende.
Fyll formen resulterer med lineær gradient vist nedenfor, og flytte til Utseende panel. Velg fyll og gå til Effect > Stilisere > Indre glød. Skriv inn dataene nedenfor og klikk på OK.
Trinn 33
Velg det avrundet rektangel opprettet i forrige trinn, og legge en 2pt hjerneslag. Satt sin farge på R = 25, G = 25, B = 25, og juster den til utenfor. Legg et andre slag for denne formen, gjør det 1PT bred, satt sin farge på R = 60, G = 60, B = 60, og juster den til utenfor. Sørg for at ingen fyll eller hjerneslag er valgt og gå til Effect > Stilisere > Drop Shadow. Skriv inn dataene nedenfor og klikk på OK
Trinn 34
Velg den type Tool (T) og tilsett ". Gjenta " tekst. Bruk Myriad skrift med en størrelse 14 pkt og sette farge på R = 73, G = 230, B = 198. Velg denne teksten, sammen med figurer laget i de to siste trinnene, og gruppere dem (Command + G). Nå plassere denne nye gruppen som vist nedenfor.
Trinn 35
For neste trinn må du et rutenett hver 1px. Gå til Rediger > Preferanser > Guides & Grid, deretter inn 1 i linjenettet hver boks. Plukk rektangel Tool (M), opprette en 50 ved 14px form, fyll den med hvit og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 3XP radius, klikk OK, og gå til Objekt > Utvid Utseende.
Fyll formen resulterer med lineær gradient vist nedenfor, og flytte til Utseende panel. Først legger en 2pt hjerneslag. Satt sin farge på R = 15, G = 15, B = 15, og juster den til utenfor. Legg et andre slag for denne formen, gjør det 1PT bred, satt sin farge på R = 70, G = 70, B = 70, og juster den til utenfor. Sørg for at ingen fyll eller hjerneslag er valgt og gå til Effect > Stilisere > Drop Shadow. Skriv inn dataene nedenfor og klikk på OK.
Trinn 36
Velg rektangel Tool (M), opprette en 5px kvadrat, fyll den med R = 25, G = 25, B = 25 og plasser den som vist i det første bildet. Bytt til Direct Selection Tool (A) og fokus på denne friske form. Velg den venstre ankerpunktene og gå til Objekt > Sti > Gjennomsnittlig. Sjekk Både -knappen, og klikk OK.
Duplicate den resulterende trekanten formen og dra kopien til høyre, som vist i tredje bildet. Kopiere disse to trekanter, rotere dem, og plassere dem slik det er vist i fjerde bildet
Trinn 37
Gå tilbake til ". Linjenettet hver 5px ". Så, gå til Rediger > Preferanser > Guides & Grid, deretter inn 5 i linjenettet hver boks. Plukk Ellipse Tool (L), opprette en 30px sirkel, fyll den med lineær gradient vist nedenfor, og plasser den som vist i det første bildet. Velg denne nye formen og lage to kopier i front (Command + C > Command + F > Command + F).
Deaktiver Fest til rutenett (View > Fest til rutenett), velger du den øverste kopi , og flytte den 1px ned. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll formen resulterer med lineær gradient vist i det endelige bildet.
Trinn 38
Velg det sirkel opprettet i forrige trinn, og legge en 2pt hjerneslag. Satt sin farge til R = 25, G = 25, B = 25, og juster den til utenfor. Legg et andre slag for denne formen, gjør det 1PT bred, satt sin farge på R = 60, G = 60, B = 60, deretter justere den til utsiden. Sørg for at ingen fyll eller hjerneslag er valgt og gå til Effect > Stilisere > Drop Shadow. Skriv inn dataene nedenfor og klikk på OK
Trinn 39
Re-aktivere Fest til rutenett (View > Fest til rutenett).. Velg figurer skapt i de to siste trinnene og gruppere dem (Command + G). Gjør fem eksemplarer av denne gruppen og plassere dem som vist nedenfor.
Trinn 40
Velg rektangel Tool (M), opprette en 45 ved 30px form, fyll den med lineær gradient vist nedenfor , og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 2xp radius, klikk OK, og gå til Objekt > Utvid Utseende. Pass på at formen resulterende plasseres som vist
Trinn 41
Deaktiver Fest til rutenett (View > Fest til rutenett)., Velge formen opprettet i forrige trinn, og gjør to eksemplarer foran (Command + C > Command + F > Command + F). Velg den øverste kopiere og flytte den 1px ned. Gjenvelge både kopier og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll formen resulterer med lineær gradient vist i det endelige bildet.
Trinn 42
Velg det avrundet rektangel opprettet i trinn 40 og legge en 2pt hjerneslag. Satt sin farge på R = 25, G = 25, B = 25, og juster den til utenfor. Legg et andre slag for denne formen, gjør det 1PT bred, satt sin farge på R = 60, G = 60, B = 60, og justere den til utsiden.
Legg til en annen fylling for denne formen og dra den til bunnen av Utseende panelet. Velg den, satt sin farge på R = 70, G = 70, B = 70, og gå til Effect > Sti > Offset Path. Skriv inn et 2px Offset, klikk OK, og gå til Effect > Warp > Arc Nedre. Skriv inn dataene nedenfor og klikk på OK
Trinn 43
Re-aktivere Fest til rutenett (View > Fest til rutenett).. Velg figurer skapt i de tre siste trinnene og gruppere dem (Command + G). Gjør fem eksemplarer av denne gruppen og plassere dem som vist på bildet nedenfor.
Trinn 44
Velg rektangel Tool (M), lage en 110 ved 35px form, fyll den med hvit, og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 5xp radius, klikk OK, og gå til Objekt > Utvid Utseende. Pass på at formen resulterende plasseres som vist i det første bildet. Velg det, lage to kopier i front (Command + C > Command + F > Command + F), og deaktivere Fest til rutenett (View > Fest til rutenett).
Velg den øverste kopien og flytte den 1px ned. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll formen resulterer med lineær gradient vist i det endelige bildet nedenfor.
Trinn 45
Velg det avrundet rektangel opprettet i forrige trinn, erstatte med lineær gradient vist under den hvite, og legge en 2pt hjerneslag. Satt sin farge på R = 15, G = 15, B = 15, og juster den til utenfor. Legg et andre slag for denne formen, gjør det 1PT bred, satt sin farge på R = 70, G = 70, B = 70, og juster den til utenfor. Sørg for at ingen fyll eller hjerneslag er valgt og gå til Effect > Stilisere > Drop Shadow. Skriv inn dataene nedenfor og klikk på OK.
Trinn 46
Velg figurer skapt i de to siste trinnene og gruppere dem (Command + G). Lag en kopi av denne nye gruppen og dra den ned som vist i følgende bilde. Velg avrundet rektangel inne i denne gruppen kopi, gå til Utseende panel, og åpne eksisterende Drop Shadow effekt.
Bytt ut de eksisterende eiendommer med de som vises i bildet nedenfor. Den øverste gruppen representerer den aktive knappen, mens den nederste gruppen representerer den inaktive knappen.
Trinn 47
Velg den inaktive knappen gruppe, gjør åtte eksemplarer, og plassere dem som vist i følgende bilde .
Trinn 48
Fokus på de nederste knappene, plukke Type Tool (T), og legg til litt tekst. Bruk Myriad skrift. For den aktive knappen, gjøre teksten fet, angi størrelsen på 17pt og farge det med R = 150, G = 150, B = 150. For de inaktive knapper, sette tekststil ved kursiv og fargene på R = 15, G = 15, B = 15, og deretter legge den diskrete Drop Shadow effekt vist nedenfor.
Trinn 49
Fortsett med Type Tool (T) og legg til litt ny tekst. Denne gangen bruker Calibri font, angi størrelsen på 20 pkt, og fargen på R = 208, G = 210, B = 211, og deretter legge den Drop Shadow effekt vist nedenfor.
Trinn 50
< p> Fortsett med Type Tool (T) og tilsett 1 til 6, som vist i følgende bilde. Bruk Myriad font, med en størrelse på 15pt, og sette farge på R = 150, G = 150, B = 150.
Trinn 51
Deretter må du redigere den avrundede rektangel som står for sangen som spilles. Velg det og fokusere på utseendet panel. Først fjerne bunnen fyll. Velg den rester fyll, erstatte den eksisterende gradient med det som vises nedenfor, og gå til Effect > Stilisere > Indre glød. Skriv inn dataene nedenfor og klikk på OK.
Gå tilbake til Utseende panelet velger toppslag, og erstatte den eksisterende farge med R = 41, G = 225, B = 188. Reselect denne avrundet rektangel, sørg for at ingen fyll eller hjerneslag er valgt, og gå til Effect > Stilisere > Drop Shadow. Skriv inn dataene nedenfor og klikk på OK.
Trinn 52
Velg den type Tool (T) og legge til noen endelige teksten. Igjen, bruk Myriad skrift med en størrelse på 12 pkt.
Konklusjon
Nå arbeidet er ferdig. Her er hvordan det skal se ut.
Og etter å plassere den i en telefon design. Anmeldelser