Opprett en ny fil. Still Width til 320px og høyde på 480px.

Trinn 2

I dette trinnet skal vi skape bakgrunnen. Det er en ny enklere måte å skape vektorfigurer i Photoshop CS6, og vi kommer til å bruke denne metoden gjennom hele opplæringen.

Opprett en ny gruppe og gi den navnet "Bakgrunn". Velg rektangelverktøyet (R) og på alternativlinjen sette Tool Mode til Shape, klikk deretter på knappen like ved siden av det å velge Shape fylltype. Fra listen over fylltyper velg Gradient knappen. Satt alle verdiene de samme som de verdiene som er uthevet på bildet nedenfor. Bruk farger # 3F4042 og # 303133 for graderingen.

Klikk hvor som helst på lerretet. Når Lag rektangulært vindu spretter ut, klikker du bare OK og sørge for at målene er satt til 700x700px. Nevne den nyopprettede lag "Bakgrunn".

Trykk Cmd /Ctrl + A for å velge hele lerretet, velg Move Tool (V) og deretter på alternativlinjen klikk på Juster Horisontal Centers og Juster nedre kant knapper.

Dobbeltklikk på laget miniatyr på lag "Bakgrunn" og sørge for at Dither check-boksen er avmerket. På denne måten får du en jevn gradient uten banding.

Trinn 3

Åpne statusbar.psd i Photoshop og importere statuslinjen gruppen til arbeids PSD. Bruke metoden nevnt ovenfor for å justere gruppen "Status Bar" - Trykk Cmd /Ctrl + A for å merke hele lerretet og mens du bruker Move Tool (V) klikk på Juster Horisontal Centers og Align toppkantene knapper
<. h2> Trinn 4

Opprett en ny gruppe under gruppen "Status Bar" og gi den navnet "Navigasjon Bar." Velg Avrundet rektangel Tool (U) og angi egenskapene som vist på bildet nedenfor. Bruk # 5F8F1D og # 99B83D for graderingen. Klikk hvor som helst på lerretet, og klikk OK når Opprett Avrundet rektangel vindu spretter ut. Nevne den nyopprettede lag "Nav Bg."

Juster lag horisontalt til sentrum og vertikalt rett under statuslinjen som vist nedenfor.

Velg rektangel Tool (U) og tegne en rektangel form som ligner på den som er vist nedenfor, men sørg for at denne formen dekker bare den nederste delen av laget "Nav Bg." Jeg brukte Ingen farge alternativ for Shape fylltype.

Bruke Sti Selection Tool (A) Velg den nyopprettede form. Trykk Cmd /Ctrl + C for å kopiere formen til utklippstavlen. Nå velger lag "Nav Bg" i Lag-panelet og trykke Cmd /Ctrl + V. nå formen er limt på lag "Nav Bg."

Med Sti Selection Tool (A) fortsatt på, Klikk på banen Operations knappen på alternativlinjen, og velg deretter Trekk fra Front Shape.

Nå klikk igjen på banen Operations knappen og velg Flett Shape Components.

Bruke Direct Selection Tool (A ) velge de to nederste punktene og flytte dem til høyden på formen er 43px

Bruk følgende lag stil til laget "Nav Bg".

Trinn 5

Bruke Avrundet rektangel Tool (U) tegne en figur med egenskapene som vises nedenfor. Bruk Solid Color for Shape Fill Type. Nevne den nyopprettede lag ". Settings Bg"

Bruk følgende lag stil:

Move "Settings Bg" så det vertikalt til sentrum av "Nav Bg" og horisontalt 6PX fra høyre kant av lerretet.

Åpne icons.psd og flyttar på laget "Innstillinger" til din PSD. Juster ikonet horisontalt og vertikalt til sentrum av

Bruk følgende lag stil "Settings Bg.":

Trinn 6

Bruke Avrundet rektangel Tool (U) tegner en form med de egenskapene som vises nedenfor. Bruk Solid Color for Shape Fill Type. Nevne den nyopprettede lag "Back Bg."

Bruke Legg Anchor Point Tool legge en ankerpunkt på venstre side av rektangelet og 14px under den øverste kanten.

Ved hjelp av punktkonverterings Tool klikk på samme ankerpunkt.

Nå velger Direct Selection Tool (A) og flytte punktet 10px til venstre.

Med Direct Selection Tool (A) fortsatt på velg to ankerfester som er uthevet på bildet nedenfor og flytte dem 1px til venstre. Deretter velger du Konverter Point Tool og klikk på hver av de to ankerpunkter.

Juster formen vertikalt til sentrum av "Nav Bg" og horisontalt 6PX fra venstre kant av lerretet.

Trinn 7

Nå som vi er ferdig med tegningen av formen, kan vi legge til en stil til det. Høyreklikk på layer "Settings Bg" og velg Copy Layer stil, deretter høyreklikk på lag "Back Bg" og velg Paste Layer stil.

Legg til tekst på knappen ved hjelp av parametrene fra bildet under. Jeg brukte fonten Helvetica Neue. Juster teksten til midten av formen og kopiere lagstilen fra laget "Innstillinger".

Legg tittelteksten ved hjelp av parametrene fra bildet nedenfor og juster den til midten av navigasjonsfeltet.

Trinn 8

Opprett en ny gruppe under gruppen "Navigasjonslinje" og gi den navnet "Position". Velg rektangelverktøyet (U) og angi egenskapene som vist på bildet under, og klikk deretter et sted på lerretet. Bruk # 2E2F30 og # 494A4C for graderingen. Lagnavnet "Position Bg."

Sett formen under navigasjonsfeltet, men sørg for at det er én piksel gap mellom dem. Justere formen horisontalt til midten av lerretet

Bruk følgende lag stilen til formen.

Trinn 9

Velg Avrundet rektangel Tool (U) og satt eiendommene som vist på bildet under, og klikk deretter et sted på lerretet. Sett Radius til noen høyere verdi. Jeg brukte 50 piksler

lagnavnet "Position Empty" og justere den, både horisontalt og vertikalt, til midten av laget

Bruk følgende lag stil. "Position Bg.":

Velg Avrundet rektangel Tool (U) og angi egenskapene som vist på bildet under, og klikk deretter et sted på lerretet. Bruk # 85AD2A, # A0D028 og # B6D028 for graderingen. Igjen, setter Radius til noen høyere verdi. Navn dette laget "Position Full."

Juster formen som sin vist på bildet under, men pass på at det er en to-pixel gap på alle sider mellom form og laget "Position Empty."

Bruk følgende lag stil med formen:

Trinn 10

Velg Ellipse Tool (U) og angi egenskapene som vist på bildet under, og klikk deretter på et sted på lerretet. Bruk # 444547 og # 5C5E61 for graderingen. Navn dette laget "Handle".

Juster denne formen slik at den dekker den høyre kanten av laget

Bruk følgende lag stil "Position Full.":

Velg igjen Ellipse Tool (U) og angi egenskapene som vist på bildet under, og klikk deretter et sted på lerretet. Bruk # 636669 og # 38393B for graderingen. Navn dette laget "Handle Circle".

Juster form til sentrum av laget "Handle".

Legg til tekst for tiden. Bruk Helvetica Neue, Fet. Størrelsen er 10pt og farge # B2B2B2. Juster teksten som vist på bildet nedenfor.

Trinn 11

Opprett en ny gruppe og gi den navnet "avspillingskontroller." Bruke Ellipse Tool (U) tegne en sirkel med dimensjoner 50x50px. Ikke ta hensyn til de andre parametere. Navngi det nye laget "Play Bg."

Utvid gruppen "Position", høyreklikker du på lag "Handle" og velg Kopier Shape attributter fra menyen.

Gå tilbake til gruppen "Avspillingskontroller", høyreklikk på laget "Play Bg" og velg Lim Shape attributter fra menyen. Dette er en ny funksjon i Photoshop CS6. Denne måten i stedet for å sette opp alle attributtene for Shape Fill Type, som graderingsfarger, vinkel etc. vi kopierer disse attributtene fra lag "Handle", siden vi bruker de samme verdiene for den nyopprettede laget.
< p> Juster lag horisontalt til midten av lerretet og vertikalt 20px under

Bruk følgende lag stil "Position Bg.":

Trinn 12

Høyreklikk laget "Play Bg" og velg Duplicate Layer. Navngi det nye laget "Fast bakover Bg."

Bruke Sti Selection Tool (A) klikk på lag "Fast bakover Bg" og endre dimensjonene på alternativlinjen for å 34x34px.

Juster laget vertikalt til sentrum av "Play Bg" og horisontalt 8 piksler til venstre.

Duplicate "Fast bakover Bg" og navngi det nye laget "Fast Forward Bg." Juster lag den samme som den forrige, men denne gangen på høyre side.

Trinn 13

Opprett en ny sirkel form med parametrene fra bildet under. Bruk # 46484A og # 2C2D2E for graderingen. Sørg for at den nyopprettede laget er under alle de andre lagene i gruppen "avspillingskontroller."

lagnavnet "Avspilling Bg" og juster det både horisontalt og vertikalt til sentrum av "Play Bg"

Duplicate "Avspilling Bg" og redusere størrelsen til 48x48px, ved hjelp av den metoden som vi brukte i trinn 12. Juster lag til sentrum av "Fast bakover Bg."

Nå duplisere laget igjen og juster den til midten av "Fast Forward Bg."

Importer lagene "Fast bakover", "Play" og "Fast Forward" fra icons.psd. Rett ikonene som vist på bildet nedenfor.

Velg de tre ikon lag ved å holde Cmd /Ctrl på tastaturet og klikke på hvert lag tilsvarende. Sett opacity til 85%.

Importer lagene "Speaker" og "Repeat" fra icons.psd. Juster ikoner som vist nedenfor.

De importerte ikoner er fylt med farge, men vi kommer til å bruke en gradient for dem. Bruke Sti Selection Tool (A) velger du laget "Speaker" og sette parametrene fra bildet under. Bruk farger # 6B6C70 og # 797B80 for graderingen.

Kopier attributtene fra høyttalerikonet med kopierings Shape attributter alternativ og lime dem å gjenta-ikonet

Bruk følgende lag stil til den som snakker og gjentar ikoner.

Step 14

I dette trinnet skal vi plassere albumcovere i vår design. Etter import har vi tenkt å konvertere dem til smarte objekter og redusere størrelsen på de smarte objekter med 50%. Vi gjør dette fordi i det siste tutorial trinnet filen vil bli endret til netthinnen oppløsning. På denne måten vil vi ikke miste kvaliteten på rasterbilder etter resizing til netthinnen.

Åpne Albumcover-02.jpg og importere bildet til PSD.

Konverter laget til smart objekt ved å gå til Layer> Smarte objekter> Konverter til smart objekt. Trykk Cmd /Ctrl + T på tastaturet for å forvandle laget. Redusere størrelsen til 50%. Navn dette laget "Album Cover Center."

Juster lag horisontalt til midten av lerretet og vertikalt 20px under lag "Play Bg."

Bruke Avrundet rektangel Tool (U) tegne en figur med parametrene vist nedenfor. Angi størrelsen til 180x180px. Bruk No Color for Shape fylltype og angi radiusen til 3px.

Juster formen akkurat på toppen av albumcoveret bildet.

Nå gjelder formen til albumbildet ved å dra musepekeren fra miniatyren av avrundet rektangel laget til miniatyren av laget "Album Cover Center", mens du holder de Cmd /Ctrl + Alt tastene på tastaturet. Etter at du er ferdig med å kopiere, slette lag med avrundet rektangel, siden vi ikke trenger det lenger.

Trinn 15

Åpne Albumcover-01.jpg og importere bildet til PSD, konvertere den til smart objekt og endre størrelsen til 50%. Juster dekselet vertikalt til sentrum av laget "Album Cover Center" og horisontalt 40px til venstre. Lagnavnet "Album Cover Venstre."

Bruke Avrundet rektangel Tool (U) tegne en figur med parametrene vist nedenfor. Denne gangen angi størrelsen til 160x160px. Bruk No Color for Shape fylltype og angi radiusen til 3px.

Kopier avrundet rektangel form til laget "Album Cover Left" ved hjelp av samme metode for omslaget sentrum. Etter at du er ferdig, må du slette lag med avrundet rektangel.

Åpne Albumcover-03.jpg og importere den til PSD. Gjenta samme prosedyre som vi brukte for venstre deksel, men denne gangen justere bildet på høyre side, som vist nedenfor

Trinn 16

Bruk følgende lag stil til den midtre deksel.:

Kopier lagstilen fra dekselet sentrum og lim den inn i de to andre deksler. Nå velger både venstre og høyre dekk lag og sett Fill til 50%.

Sett inn en tekst for å spille sangtittel. Plasser den få piksler under dekselet sentrum.

Sett inn en annen tekstlinje for den sangen som spilles forfatteren. Juster begge linjene til sentrum.

Step 18

Bruk rektangel Tool (U) tegne en figur med parametrene vist nedenfor. Bruk # 292A2B og # 38393B for graderingen.

Juster formen til nedre venstre hjørne av lerretet.

Bruke Legg Anchor Point Tool legge til to ankerpunkter og sette avstanden som vist på bildet.

Velg de to ankerfester som er uthevet på bildet og flytte dem 6PX oppover.

Bruke Direct Selection Tool (A) drar tangentlinjene slik at de ser lik de som er forhåndsvises under. Anmeldelser
Step 19

I dette trinnet skal vi fullføre fanelinjen bakgrunnen ved å duplisere og speiling stien som vi opprettet i forrige trinn.

Dupliser laget og snu den horisontalt ved gå til Edit> Transform Sti> Vend vannrett.

Flytt dupliserte laget akkurat til nederste høyre hjørne av lerretet. En viktig varsel: Kontroller at det ikke er noe gap mellom de to formene

Nå velger begge lag, som vist på bildet, høyreklikk og velg Flett Shapes

Dette bør være.. resulterer form. Som du ser er det en vertikal linje i midten av formen. Dette betyr at vi har to figurer i et lag som ikke er fullt fusjonert.

Bruke Sti Selection Tool (A) klikk på formlag, klikk på bane Operations knappen på alternativlinjen og velg Flett Shape komponenter. Nå har du de to formene fullt fusjonert. Navn dette laget "Tab Bar Bg."

Hvis vi velger Direct Selection (A) vil vi legge merke til at det er noen unødvendige ankerpunktene som ble opprettet under sammenslåing av figurene. Prøver alltid å holde banene rene unødvendige poeng.

For å slette disse ankerpunkt velg Slett Anchor Point Tool og klikk på de to ankerpunkter hhv.

Bruk følgende lag stil til "Tab Bar Bg".

Trinn 20

I dette trinnet skal vi lage guider som vil hjelpe oss å justere fanelinjen ikoner lettere

Bruke Rectangular Marquee Tool (M) gjør en 60px bredt utvalg starter fra venstre side av lerretet.

Nå drar en guide fra venstre linjal og plassere den på høyre kant av valget. Sørg for at alternativet for snapping til guider er slått på. Du finner dette ved å gå til Vis> Fest til> Guides.

Gjenta forrige prosedyre for å plassere den andre guider. Sette avstanden som vist på bildet nedenfor.

Drag to horisontale guider fra toppen linjal og sette avstanden som vist på bildet.

Trinn 21

Dra layer "Home" fra icons.psd filen.

Bruke Rectangular Marquee Tool (M) foreta et valg som snaps til guidene som de nedenfor.

Ved hjelp av Move Tool (V ) Klikk på Juster Vertikale Centers og Juster Horisontal Centers knapper på alternativlinjen

Skriv inn teksten "Home" med følgende parametre:.

Juster teksten vertikalt nær bunnen guide og horisontalt til sentrum av ikonet.

Trinn 22

Gjenta trinn 21 for de andre ikoner og tekst (favoritter, spillelister og søk). Bruk bildet under for referanse.

Step 23

Bruke rektangel Tool (U) tegne en figur med parametrene fra bildet under. Bruk # 5F8F1D og # 99B83D for graderingen.

Juster formen slik at toppen kant berører øvre horisontale guide og horisontalt til midten av fanelinjen. Lagnavnet "Now Playing Bg."

Bruk følgende lag stil:

Dra laget "Now Playing" fra icons.psd filen og endre fyllfargen av laget til # 000000.

Bruk følgende lag stil.

Juster ikonet horisontalt til sentrum av "Now Playing Bg" og vertikalt få piksler under sin øverste kanten

Skriv teksten "Now Playing" med følgende parametre:

Juster teksten på nytt horisontalt til midten av knappen og vertikalt få piksler under ikonet. Kopier lagstilen fra Spilles nå-ikonet.

Trinn 24

Vi er ferdig med etableringen av alle elementene i design. Men vi har en endelig steg til venstre, og det er å skalere ned filen til netthinnen.

Skalering til retina oppløsning er veldig enkelt, og det tar bare ett trinn. Gå til Image> Image Size og sett verdiene som vist nedenfor. Sørg for at alle de markerte parametere er satt nøyaktig den samme som på bildet

Dette bør være et resultat etter endre størrelse på bildet på netthinnen oppløsning

Tips:.. Alltid prøve å tegne elementene i din design med vektorfigurer, akkurat som vi gjorde i denne opplæringen. På den måten kan du enkelt tilpasse dem, og du vil ikke tape på kvalitet når du skalerer til netthinnen.

Konklusjon

I denne opplæringen, vi har vist deg hvordan du kan lage en iPhone-applikasjon grensesnittet i Photoshop bruker sin nye vektorredigeringsmuligheter. I tillegg har vi vist hvordan du kan bruke disse teknikkene for å lage en iPhone-applikasjon som er kompatibel med den opprinnelige oppløsningen enhet samt dens retina oppløsning motstykke. Anmeldelser