Share
Photoshop CS6 er et mye kraftigere vektorredigeringsprogram enn sine forgjengere. I denne veiledningen vil vi vise deg hvordan du bruker disse nye funksjonene for å lage et iPhone-grensesnitt for iPhone-spilleren i både den opprinnelige iPhone-oppløsningen, samt netthinnen uten å måtte gjenta samme prosess for begge designene. La oss komme i gang!
Følgende eiendeler ble brukt under produksjonen av denne opplæringen.
Opprett en ny fil. Angi bredde til 320px og høyde til 480px.
I dette trinnet skal vi lage bakgrunnen. Det er en ny enklere måte å lage vektorformer i Photoshop CS6, og vi skal bruke den metoden gjennom hele opplæringen.
Opprett en ny gruppe og gi den navnet "Bakgrunn." Velg Rektangulærverktøyet (R), og i Alternativlinjen settes Verktøymodus til Form, deretter klikker du på knappen like ved siden av det for å velge Form fyltype. Fra listen over fylletyper velger du Gradient-knappen. Sett alle verdiene på samme måte som verdiene som er markert på bildet nedenfor. Bruk fargene # 3F4042 og # 303133 for gradienten.
Klikk hvor som helst på lerretet. Når vinduet Opprett rektangel åpnes, klikker du bare OK og sørger for at dimensjonene er satt til 700x700px. Gi det nyopprettede laget "Bakgrunn".
Trykk Cmd / Ctrl + A for å velge hele lerretet, velg Flyttverktøyet (V) og deretter i Alternativfeltet, klikk på Juster horisontale sentre og Juster nederste kantene..
Dobbeltklikk lag miniatyrbildet på laget "Bakgrunn" og kontroller at kryssboksen Dither er merket. På denne måten får du en jevn gradient uten banding.
Åpne statusbar.psd i Photoshop og importer Statusbar-gruppen til din arbeids-PSD. Bruk fremgangsmåten som er nevnt ovenfor til å justere gruppen "Statuslinje" - Trykk Cmd / Ctrl + A for å velge hele lerretet og mens du bruker Flyttverktøyet (V), klikk på Juster horisontale sentre og Juster toppkanter.
Opprett en ny gruppe under gruppen "Statuslinje" og navngi den "Navigasjonslinje." Velg det avrundede rektangelverktøyet (U) og sett egenskapene som vist på bildet nedenfor. Bruk # 5F8F1D og # 99B83D for gradienten. Klikk hvor som helst på lerretet og klikk OK når vinduet Opprett avrundet rektangulære vises. Navngi det nyopprettede laget "Nav Bg."
Juster laget horisontalt til midten og vertikalt like under statuslinjen som vist nedenfor.
Velg rektangulærverktøyet (U) og tegne et rektangelform som ligner på det som vises nedenfor, men pass på at denne formen dekker bare den nederste delen av laget "Nav Bg." Jeg brukte alternativet Ingen farge for Shape Fill Type.
Bruk Path Selection Tool (A) ved å velge den nyopprettede formen. Trykk Cmd / Ctrl + C for å kopiere formen til utklippstavlen. Velg nå laget "Nav Bg" i Lag-panelet og trykk Cmd / Ctrl + V. Nå er formen klistret på laget "Nav Bg."
Med Path Selection Tool (A) fremdeles, klikker du Path Operations-knappen i Alternativlinjen og velger deretter Subtract Front Shape.
Klikk nå igjen på Path Operations-knappen, og velg deretter Merge Shape Components.
Ved hjelp av Direct Selection Tool (A) velger du de to bunnpunktene og beveger dem til formens høyde er 43px.
Bruk følgende lagstil til laget "Nav Bg":
Bruk rundet rektangulært verktøy (U) til å tegne en form med egenskapene som er vist nedenfor. Bruk solid farge for formfyllingstypen. Navngi det nyopprettede laget "Innstillinger Bg."
Bruk følgende lagsstil:
Flytt "Innstillinger Bg" slik at den ligger vertikalt i midten av "Nav Bg" og horisontalt 6px fra høyre kant av lerretet.
Åpne ikoner.psd og flytt laget "Innstillinger" til din PSD. Juster ikonet horisontalt og vertikalt til midten av "Innstillinger Bg."
Bruk følgende lagsstil:
Bruk rundet rektangulært verktøy (U) til å tegne en form med egenskapene som er vist nedenfor. Bruk solid farge for formfyllingstypen. Gi det nyopprettede laget "Back Bg."
Ved hjelp av Add Anchor Point Tool legges ett ankerpunkt på venstre side av rektangelet og 14px under toppkanten.
Ved hjelp av Konverteringspunktverktøyet klikker du på samme ankerpunkt.
Nå velger du Direkte markeringsverktøy (A) og flytter punktet 10px til venstre.
Med Direct Selection Tool (A) fremdeles velger du de to ankerpunktene som er markert på bildet under og flytt dem 1px til venstre. Velg deretter Konverter punktverktøyet og klikk på hvert av de to ankerpunktene.
Juster formen vertikalt til midten av "Nav Bg" og horisontalt 6px fra venstre kant av lerretet.
Nå som vi er ferdige med tegningen av formen, kan vi legge til en stil til den. Høyreklikk på laget "Innstillinger Bg" og velg Copy Layer Style, og høyreklikk på laget "Back Bg" og velg Lim inn lag stil.
Legg til tekst på knappen ved hjelp av parametrene fra bildet nedenfor. Jeg brukte skriften Helvetica Neue. Juster teksten til midten av formen og kopier lagstilen fra laget "Innstillinger."
Legg til titteltekst ved hjelp av parametrene fra bildet under og juster det til midten av navigeringslinjen.
Opprett en ny gruppe under gruppen "Navigeringslinje" og navngi den "Posisjon". Velg rektangelverktøyet (U) og angi egenskapene som vist på bildet under, og klikk et sted på lerretet. Bruk # 2E2F30 og # 494A4C for gradienten. Gi navnet "Posisjon Bg."
Plasser formen under navigasjonslinjen, men sørg for at det er en pixel mellom dem. Juster formen horisontalt til midten av lerretet.
Påfør følgende lagstil til formen:
Velg det avrundede rektangelverktøyet (U) og sett egenskapene som vist på bildet under, og klikk et sted på lerretet. Sett radien til noe høyere verdi. Jeg brukte 50px.
Navn laget "Posisjon tom" og juster det, både horisontalt og vertikalt, til midten av laget "Posisjon Bg."
Bruk følgende lagsstil:
Velg det avrundede rektangelverktøyet (U) og sett egenskapene som vist på bildet under, og klikk et sted på lerretet. Bruk # 85AD2A, # A0D028 og # B6D028 for gradienten. Sett igjen Radius til noe høyere verdi. Navn dette laget "Posisjon Full."
Juster formen som vist på bildet under, men sørg for at det er et topunkts gap på alle sider mellom formen og laget "Posisjon tom".
Påfør følgende lagstil til formen:
Velg Ellipseverktøyet (U) og sett egenskapene som vist på bildet under, og klikk et sted på lerretet. Bruk # 444547 og # 5C5E61 for gradienten. Navngi dette laget "Håndter".
Juster denne formen slik at den dekker den høyre kanten av laget "Posisjon Full".
Bruk følgende lagsstil:
Velg igjen Ellipseverktøyet (U) og sett egenskapene som vist på bildet under, og klikk et sted på lerretet. Bruk # 636669 og # 38393B for gradienten. Navngi dette laget "Håndter sirkel".
Juster formen til midten av laget "Håndtak".
Legg til tekst for tiden. Bruk Helvetica Neue, Fet. Størrelsen er 10pt og fargen # B2B2B2. Juster teksten som vist på bildet nedenfor.
Opprett en ny gruppe og kaller den "Playback Controls." Bruk Ellipseverktøyet (U) til å tegne en sirkel med dimensjoner 50x50px. Ikke vær oppmerksom på de andre parameterne. Navngi det nye laget "Play Bg."
Utvid gruppen "Posisjon", høyreklikk laget "Håndter" og velg Kopier formattributter fra menyen.
Gå tilbake til gruppen "Playback Controls", høyreklikk på laget "Play Bg" og velg Lim inn formattributter fra menyen. Dette er en ny funksjon i Photoshop CS6. På denne måten i stedet for å sette opp alle attributter for Form Fill Type, som gradientfarger, vinkel etc. kopierer vi disse attributene fra laget "Handle", siden vi bruker de samme verdiene for det nyopprettede laget.
Juster laget horisontalt til midten av lerretet og vertikalt 20px under "Posisjon Bg."
Bruk følgende lagsstil:
Høyreklikk laget "Spill Bg" og velg Dupliser Layer. Gi det nye laget "Fast Backward Bg." Navnet.
Ved hjelp av Path Selection Tool (A) klikker du på laget "Fast Backward Bg" og endrer dimensjonene i alternativlinjen til 34x34px.
Juster laget vertikalt til midten av "Spill Bg" og horisontalt 8px til venstre.
Dupliser "Fast Backward Bg" og navnet på det nye laget "Fast Forward Bg." Juster laget samme som forrige, men denne gangen på høyre side.
Opprett en ny sirkelform med parametrene fra bildet nedenfor. Bruk # 46484A og # 2C2D2E for gradienten. Pass på at det nylig opprettede laget ligger under alle de andre lagene i gruppen "Playback Controls."
Navngi laget "Playback Bg" og juster det både horisontalt og vertikalt til midten av "Play Bg"
Dupliser "Playback Bg" og reduser størrelsen til 48x48px ved å bruke metoden som vi brukte i trinn 12. Juster laget til midten av "Fast Backward Bg."
Dupliserer laget igjen, og juster det til midten av "Fast Forward Bg."
Importer lagene "Fast Backward", "Play" og "Fast Forward" fra icons.psd. Juster ikonene som vist på bildet nedenfor.
Velg de tre ikonlagene ved å holde Cmd / Ctrl på tastaturet og klikk på hvert lag tilsvarende. Still opaciteten til 85%.
Importer lagene "Speaker" og "Repeat" fra icons.psd. Juster ikonene som vist nedenfor.
De importerte ikonene er fylt med farge, men vi skal bruke en gradient til dem. Ved hjelp av Path Selection Tool (A) velg lag "Speaker" og sett parametrene fra bildet nedenfor. Bruk fargene # 6B6C70 og # 797B80 for gradienten.
Kopier attributter fra høyttalersymbolet med alternativet Copy Shape Attributes, og lim dem inn i gjentaikonet.
Bruk følgende lagstil til høyttaleren og gjenta ikoner:
I dette trinnet skal vi legge albumdekslene i vårt design. Etter importen skal vi konvertere dem til smarte objekter og redusere størrelsen på de smarte objektene med 50%. Vi gjør dette fordi i den endelige opplæringsstrinnet blir filen endret til retinaoppløsningen. På den måten vil vi ikke miste kvaliteten på rasterbildene etter å ha endret størrelsen på netthinnen.
Åpne albumcover-02.jpg og importer bildet til PSD-en.
Konverter laget til smart objekt ved å gå til Lag> Smarte objekter> Konverter til smart objekt. Trykk Cmd / Ctrl + T på tastaturet for å transformere laget. Reduser størrelsen til 50%. Navngi dette laget "Album Cover Center."
Juster laget horisontalt til midten av lerretet og vertikalt 20px under laget "Play Bg."
Ved hjelp av det avrundede rektangelverktøyet (U) tegner du en form med parametrene vist nedenfor. Still størrelsen til 180x180px. Bruk ingen farge for formfyllingstypen og sett radius til 3px.
Juster formen nøyaktig på toppen av albumdekselet.
Bruk nå formen på albumdekselet ved å dra musemarkøren fra miniatyrbildet av det runde rektangellaget til miniatyrbildet av laget "Album Cover Center", mens du holder Cmd / Ctrl + Alt-tastene på tastaturet. Når du er ferdig med kopiering, slett laget med det avrundede rektangelet, siden vi ikke trenger det lenger.
Åpne albumcover-01.jpg og importer bildet til PSD, konverter det til smart objekt og endre størrelsen til 50%. Juster dekselet vertikalt til midten av laget "Album Cover Center" og horisontalt 40px til venstre. Navngi laget "Album Cover Left."
Ved hjelp av det avrundede rektangelverktøyet (U) tegner du en form med parametrene vist nedenfor. Denne gangen satt størrelsen til 160x160px. Bruk ingen farge for formfyllingstypen og sett radius til 3px.
Kopier den avrundede rektangelformen til laget "Album Cover Left" ved å bruke samme metode for midtdekselet. Når du er ferdig, slett laget med det avrundede rektangel.
Åpne albumcover-03.jpg og importer den til din PSD. Gjenta samme fremgangsmåte som vi brukte til venstre deksel, men denne gangen justerer du bildet på høyre side som vist nedenfor.
Påfør følgende lagsstil til midtdekselet:
Kopier lagestilen fra midtdekselet og lim den inn i de andre to dekslene. Velg nå både venstre og høyre deksjonslag og sett fyll på til 50%.
Sett inn en tekst for spillesangstittelen. Legg det få piksler under senterdekselet.
Sett inn en annen tekstlinje for spillesangsforfatteren. Juster begge linjene til midten.
Bruk rektangulærverktøyet (U) til å tegne en form med parametrene vist nedenfor. Bruk # 292A2B og # 38393B for gradienten.
Juster formen til det nederste venstre hjørnet av lerretet.
Ved hjelp av Add Anchor Point Tool legges to ankerpunkter og angi avstandene som vist på bildet.
Velg de to ankerpunktene som er markert på bildet, og flytt dem 6px oppover.
Bruk Direct Selection Tool (A) til å trekke retningslinjene slik at de ligner de som forhåndsvises nedenfor.
I dette trinnet fullfører vi bakgrunnslinjens bakgrunn ved å duplisere og speile banen vi opprettet i forrige trinn.
Dupliser laget og vri det horisontalt ved å gå til Rediger> Transform path> Flip Horizontal.
Flytt duplisert lag nøyaktig til nederste høyre hjørne av lerretet. En viktig melding: Pass på at det ikke er noen mellomrom mellom de to figurene.
Velg nå begge lagene som vist på bildet, høyreklikk og velg Merge Shapes.
Dette bør være den resulterende formen. Som du kan se er det en vertikal linje i midten av formen. Dette betyr at vi har to former i ett lag som ikke er fullstendig fusjonert.
Ved å bruke Path Selection Tool (A) klikker du på formlaget, klikker du på Path Operations-knappen i Alternativlinjen og velger Merge Shape Components. Nå har du de to figurene helt fusjonert. Navn dette laget "Tab Bar Bg."
Hvis vi velger Direktevalg (A), vil vi legge merke til at det er noen unødvendige ankerpunkter som ble opprettet under sammenslåingen av figurene. Forsøk alltid å holde stiene rene på unødvendige punkter.
For å slette disse ankerpunktene velg Slett ankerpunktverktøyet og klikk på de to ankerpunktene henholdsvis.
Bruk følgende lagstil til "Tab Bar Bg":
I dette trinnet vil vi opprette guider som vil hjelpe oss med å justere ikonene på fanebjelken lettere.
Bruk det rektangulære markeringsverktøyet (M) til å lage et 60px bredt utvalg fra venstre side av lerretet.
Dra nå en guide fra venstre linjal og legg den på den høyre kanten av valget. Pass på at alternativet for å snakke til guider er slått på. Du kan finne dette ved å gå til Vis> Snap To> Guides.
Gjenta den forrige prosedyren for å plassere de andre støttelinjene. Still avstandene som vist på bildet nedenfor.
Dra to horisontale guider fra topplinjen og sett avstandene som vist på bildet.
Dra laget "Home" fra ikonet icons.psd.
Ved hjelp av Rectangular Marquee Tool (M) gjør du et valg som snaps til guider som de nedenfor.
Bruk Flytt Verktøy (V) ved å klikke på Juster vertikale sentre og Juster horisontale sentre i alternativlinjen.
Skriv inn teksten "Hjem" med følgende parametere:
Juster teksten vertikalt nær bunnføreren og horisontalt til midten av ikonet.
Gjenta trinn 21 for de andre ikonene og teksten (Favoritter, Spillelister og Søk). Bruk bildet nedenfor for referanse.
Bruk rektangulærverktøyet (U) til å tegne en form med parametrene fra bildet nedenfor. Bruk # 5F8F1D og # 99B83D for gradienten.
Juster formen slik at den øverste kanten berører den øvre horisontale styringen og horisontalt til midten av tverrfeltet. Gi laget navnet "Now Playing Bg."
Bruk følgende lagsstil:
Dra laget "Now Playing" fra ikonet icons.psd og endre fyllfargen på laget til # 000000.
Bruk følgende lagsstil:
Juster ikonet horisontalt til midten av "Now Playing Bg" og vertikalt få piksler under toppkanten.
Skriv inn teksten "Now Playing" med følgende parametere:
Juster teksten igjen horisontalt til midten av knappen og vertikalt få piksler under ikonet. Kopier lagestilen fra ikonet for Now Playing.
Vi er ferdige med etableringen av alle elementene i designet. Men vi har et siste skritt igjen, og det er å skalere filen til netthinnen.
Skalering til retinaoppløsningen er veldig enkelt, og det tar bare ett skritt. Gå til Bilde> Bildestørrelse og angi verdiene som vist nedenfor. Kontroller at alle de uthevede parametrene er angitt nøyaktig det samme som på bildet.
Dette bør være resultatet etter å endre størrelsen på bildet til retinaoppløsningen.
Tips:Forsøk alltid å tegne elementene i designene dine med vektorformer, akkurat som vi gjorde i denne opplæringen. På den måten kan du enkelt tilpasse dem, og du vil ikke miste på kvalitet når du skalerer til netthinnen.
I denne opplæringen har vi vist deg hvordan du lager et iPhone-applikasjonsgrensesnitt i Photoshop ved hjelp av de nye vektorredigeringsfunksjonene. I tillegg har vi vist hvordan du kan bruke disse teknikkene til å lage et iPhone-program som er kompatibelt med den opprinnelige oppløsningsenheten, samt dens retinaoppløsning motpart.
Accentsconagua