Opprett et nytt dokument (Fil > New ...) ved hjelp av innstillingene nedenfor

Trinn 2

Opprett rutenettet (Vindu > Extensions > GuideGuide) ved hjelp av innstillingene nedenfor. Klikk den store lilla GG knapp i midten for å aktivere guidene.

Nå lage noen flere guider. Slett alle målinger inne i GuideGuide Palette, med unntak av toppmargen, som du bør endre til 100px. Trykk på GG-knappen for å legge til den nye guiden.

Bruke Rectangular Marquee Tool, foreta et valg mellom 20px og 100px horisontale guider, og endre toppmargen i GG Palett til 10px og bunnen til 10px.

For å fullbyrde setter opp rutenett, bruke Rectangular Marquee Tool for å velge alt under 100px horisontal guide og skriv inn følgende for marginene , kolonnene og rennene

Nå bør du ha noe sånt som dette:.

Trinn 3

Opprett en ny lag med en # 5f666b fyll. Dette er din bakgrunnslaget. Kall det bg.

1. Bruk rektangelverktøyet for å lage et rektangel form som måler 257px x 1024px, med en # 292c2e fyll. Lagnavnet Nav bg. Alle navigasjons objekter vil gå her.
   
2. Bruk rektangelverktøyet for å lage et rektangel form som måler 768 x 100 piksler med en #ffffff fyll. Dette vil være bakgrunnen for den øverste linjen området. Navn dette laget Top bg.
   
   Trinn 4
   
   
   Åpne Andre ikoner (gitt i opplæringsmidler ovenfor) og dra eller kopiere statuslinjen lag på lerret. Plasser den på innsiden av topp 20px margin.
   
   1. Fra samme Ekstra ikoner PSD-fil, velge ikoner gruppen og dra eller kopiere logoen gruppe på lerretet.
      
   2. Deretter på logoen bg lag , skriv "Sticks & Stones". bruker tekstverktøyet, Pacifico Font, 20px, # 292c2e
      

      For å legge til en skygge i bakgrunnen, høyreklikker du på Top bg lag i lagpaletten og velg Blending Options på toppen. Velg Drop Shadow fra menyen til venstre for lagstiler vinduet, fyll ut følgende innstillinger, og klikk på OK.
      
      Trinn 5
      

      Nå er det på tide å legge på ikonene for å dokumentet.
      

      
      Vi begynner med innstillingsikonet. Dra eller duplisere innstillingsikonet lag fra flere ikoner PSD på lerretet. Plassere den ved siden av høyre marg og vertikalt sentrert mellom topp og bunn marginer på den øverste linjen.
      
      1. Dra en ny guide over og sett den på den andre siden av innstillingene ikonet slik at det ser ut som innstillingene ikonet sitter mellom høyre marg og den nye guide. Dra en annen guide til innstillingsikonet, men legg den 20px til venstre, og skaper en 20px takrenne.
         
      2. Bruk tekstverktøyet type 'James' i Avenir svart skrift, 14 pkt, # 6d767c, store bokstaver, og plasser den ved siden av 20px rennesteinen.
         
         Åpne 50 Mini Ikoner sett (oppført i opplæringen eiendeler), og dra eller kopiere bruker lag på dokumentet. Plasser den 5px til venstre for James. Du kan bruke din info Palette å se de nøyaktige koordinater for din plassering
         
         Gjenta denne prosessen for vogna og Hjerte ikoner slik at sluttresultatet ser slik ut:.
         
         Trinn 6
         
         
         Bruk Avrundet rektangel verktøyet for å sette Corner Radius å 5PX og skape en 230px x 30px form med en # 1c1f20 fyll. Lagnavnet søke bg.
         
         1. Dupliser eller dra på Søk-ikonet (fra 50 Mini Icons) i dokumentet.
            
         2. Legg til en Drop Shadow til søke bg lag ved å gå inn i de Blending Options av laget og kopierer innstillingene vist nedenfor.
            
            Trinn 7
            
            
            Lag et rektangel som måler 230px x 310px med en # 1c1f20 fyll. Kopier lagstilen av søket bg lag ved å høyreklikke på søke bg i lagpaletten og velge Kopier Layer stil. Høyreklikk på MENS bakgrunnslaget, klikk deretter Lim Layer stil å legge en skygge.
            
            1. Bruke Ellipse Tool skaper et 7x7 ellipse med en # 88e2d2 fyll.
               
            2. Bruk tekstverktøyet skrive MENS i Avenir Roman, 14 pkt, #ffffff, med store bokstaver.
               
               Trinn 8
               
               
               Bruke rektangelverktøyet skape 1x1px firkant med en # 464d51 fyll. Trykk Shift-Option-Kommando å duplisere torget mens du flytter det 5PX ned. Gjenta 6 ganger. Du bør ha en linje med 8 punkter (piksler) med 5PX mellomrom mellom hver prikk. Velg de 8 formlag, høyreklikk og velg Slå sammen figurer å slå sammen alle figurene i ett lag.
               
               1. Dupliser laget og trykk Kommando /Ctrl-T for å rotere den stiplede linjen 90 grader, slik at det blir vannrett. Bli med de to stiplede linjene som vist i # 2 på bildet nedenfor og flett de to formene.
                  
               2. Duplicate formen 7 ganger og linje det opp som vist på bilde # 3. Flett figurene inn i ett lag, og kaller det stiplede linjen.
                  
                  
                  Bruk tekstverktøyet, skriv "shorts, topper, gensere, jakker, bukser, Swim, Tilbehør" I en vertikal liste. Gå til tegn Palette og sørge for at innstillingene er satt på bildet nedenfor.
                  
                  1. Dupliser eller dra innsjekking tegn fra Andre Ikoner og plassere den 5PX til høyre for ordet Sweaters.
                     < li> Bland alle lagene i en gruppe og gi den navnet Mens.
                     
                     
                     Trinn 9
                     
                     
                     Velg Mens Group og trykk Kommando /Ctrl-Shift-Option å duplisere det samtidig flytte det ned.
                     
                     Gi nytt navn til gruppen til Womens og Slett den stiplede linjen lag, haken ic, og listen vertikale kategorier.
                     
                     Gi nytt navn mennenes bg lag til Womens bg. Trykk Kommando /Ctrl-T for å endre høyden på rektangelet til 54px.
                     
                     1. Dobbelklikk på Ellipse 1 for å endre fyllfargen til # 6d767c.
                        
                     2. Dupliser Womens gruppen. Flytte det ned 15 piksler fra originale kvinnegruppe og endre navn på alt for å surfe.
                        
                     3. Gjenta for Hjem-knappen.
                        
                        Trinn 10
                        
                        
                        Opprett et rektangel 236x288 piksler med en #ffffff fill
                        
                        Place image01, som vist nedenfor (Fil > Place > ...). til lerretet
                        
                        Trykk Tilvalg-Kommando-G til. skape en klipping maske og størrelse på bildet slik at det ser omtrent det samme som det gjør på bildet nedenfor. Kombinere de to lagene i én gruppe, og kaller det produktet bg ..
                        
                        
                        Duplicate produkt BG Group og name it prisen bg.
                        
                        1. Gi nytt navn til gruppen prisen bg og innenfor gruppen rename produktet bg lag å prise bg lag.
                           
                           Trykk Kommando /Ctrl-T for å flytte toppen og ned til 70 piksler.
                           
                           Velg image01 lag og skape en uklarhet ved å gå Filter > Blur > Guassian Blur og satt radiusen til 20px som vist et bilde av en.
                           

                           Dobbelklikk image01 lag å åpne Layer Styles dialog. Påfør Color Overlay som vist på bildet nedenfor.
                           

                           Legg til en Drop Shadow å prise bg lag med de innstillingene nedenfor.
                           
                           Trinn 11
                           

                           
                           Lag et rektangel form 50x70px med en # 88e2d2 fill
                           
                           Bruke Linje Tool, angi linje vekt 1px og tegne en 30px line -.. horisontalt og vertikalt sentrert inne i rektangel form som vist nedenfor Anmeldelser
                           De typeinnstillinger for prisen $ 36 bør settes som følger. Avenir Svart, 14 pkt, # 292c2e; For Simple Tee Avenir Svart, 14, # 3b4244; og for White Tee Avenir Medium, 12pt, # 6d767c.
                           
                           Dupliser vognen ic lag fra den øverste linjen. Flytt laget slik at den sitter på prislappen gruppe med resten av lagene. Dobbeltklikk på lag for å endre fyllet til #FFFFFF og plassere den slik at sluttresultatet matcher bildet nedenfor.
                           

                           Gjenta de to siste trinnene for å lage resten av produktbilder . Kombiner produktbildet grupper og nav gruppen i én gruppe, og gi den navnet Produktside.
                           

                           ---

                           
                           2. Opprett Innstillinger Overlay
                           
                           Trinn 1
                           
                           
                           Opprett en ny gruppe kalt Innstillinger og sørg for at den sitter under Top Bar konsernet og over Produktside gruppen.
                           
                           1. Inne i gruppen, opprette et nytt bakgrunnslaget fylt med #ffffff og name it overlegg. Redusere Opacity til 80%.
                              
                           2. Bruke Avrundet rektangel Tool med Corner Radius satt til 5PX skape et 450x300px form med en # f0eff5 fyll.
                              
                           3. Legg til en Drop Shadow til bakgrunnen bruker Følgende innstillinger.
                              
                              Trinn 2
                              
                              
                              Duplicate Innstillinger bg lag og endre navnet Innstillinger Top bg. Dobbeltklikk på lag for å endre fyllet til #FFFFFF.
                              
                              1. Bruke Slett Anchor Point Tool sletter de to inne bunn ankere som vist på nedenfor.
                                 

                                 Bruke Konverter Point Tool, klikk på de to nederste ankere å rette på bunnlinjen.
                                 

                                 Ved hjelp av punktkonverteringsverktøyet velge de to nederste ankere, trykker du Kommando /Ctrl + Klikk, hold og Flytt bunnlinjen til toppen før det sitter på 245px som vist på bilde 03.
                                 

                                 
                                 

                                 
                                 Legg til en Innstillinger Legg en Drop Shadow laget ved hjelp av følgende innstillinger. overskriften, horisontalt og vertikalt sentrert i Innstillinger Top bg gjør at den har innstillingen som vises nedenfor.
                                 
                                 Deretter legger Ferdig og plasser den 20px til venstre for høyre kant, vertikalt sentrert med innstillingene som vises nedenfor.
                                 
                                 
                                 Trinn 3
                                 
                                 
                                 Lag en general Overskrift i store bokstaver Helvetica Neue Regular, 14 pkt, # 4f4f4f og plasser den 20px under Innstillinger Top Bar.
                                 < li> Bruke Avrundet rektangel Tool med hjørneradius satt til 5PX skape en 410x88px form med en #ffffff fill - plassere den 10px under general Overskrift og lagnavnet Settings § 01.
                                 
                                 Bruke Linje Tool, satt vekten av linjen til 1px, og tegne en 390px linje. Vertikalt sentrere den i rektangel, samtidig samkjøre den til høyre kant.
                                 
                                 1. Legg Om og Versjon overskrifter i Helvetica Regular 18 pkt # 292c2e og plasser dem som vist nedenfor.
                                    
                                 2. Legg til 2,3 i Helvetica Regelmessig 18 pkt # b4b4b4 og posisjon som vist nedenfor.
                                    
                                    Duplicate eller Dra chevron ic fra Icons.psd og posisjon som vist nedenfor.
                                    
                                    Trinn 4
                                    
                                    
                                    Create a Stedstjenester overskrift med store bokstaver Helvetica Neue Regular, 14 pkt, # 4f4f4f og plasser den 20px under Setting området 01.
                                    
                                    Bruke Avrundet rektangel Tool med hjørneradius satt til 5px skape en 410x44px form med en #ffffff fyll. Plasser den 10px under Stedstjenester overskriften.
                                    
                                    1. Legg til Auto-detect Sted overskriften i Helvetica Regular, 18 pkt, # 292c2e og posisjon som vist nedenfor.
                                       
                                    2. Bruke Avrundet rektangel verktøyet satt hjørnet radius til 60px, og skape en 51x31px form fylt med # 88e2d2.
                                       
                                       Bruke Ellipse Tool skaper en 30x30px Ellipse med en #ffffff fyll og legge en Drop Shadow med innstillingene som vises nedenfor.
                                       < .no>

                                       innstillinger legget skal se ut som på bildet nedenfor.
                                       

                                       ---

                                       
                                       3. Lag en innloggingsside
                                       
                                       Trinn 1
                                       
                                       
                                       Slå av alle gruppene til side for Top Bar høyreklikk, duplisere og endre navn på gruppen til innlogging.
                                       
                                       1. Inside den nye Pålogging gruppe slette Liker, Shopping, og brukergrupper, samt innstillinger ic.
                                          
                                          Lag et nytt lag kalt bg under Top Bg Layer, med en # 292c2e fyll.
                                          
                                          Velg Top Bg Layer, trykker du Kommando /Ctrl-T, Klikk og dra rektangelet nedover til den er 500px som vist nedenfor.
                                          
                                          Åpne Logo Group og re-arrangere tekst og bilder i siden slik at de sams logoen posisjonering under
                                          
                                          Bland alle lag -. ikke inkludert bg -. inn i en gruppe og kaller gruppen Top området
                                          
                                          Trinn 2
                                          < ol>
                                          Trykk på Kommando-; å slå på dine guider.
                                          
                                          Bruke Linjeverktøy med en 1px vekt opprette en 236px linje med en # 3d4144 fyll som passer inni den midterste kolonnen, som vist nedenfor. Plasser det 150 piksler fra toppen bg og kaller det feltet Tekst linje.
                                          
                                       2. Opprett et brukernavn etikett. Avenir Roman, 14 pkt # 88e2d2. Plasser den mot venstre guide og 20px opp fra feltet Tekst linje
                                          
                                          Velg brukernavn og tekstfeltet linje lag, trykker du Shift -. Option, klikke og flytte ned 48px å lage et duplikat. Endre navn på Brukernavn duplikat til passord.
                                          
                                       3. Duplicate Passord tekstlag bruker over teknikken. Endre den til Glemt passord? og farge til # 3d4144.
                                          
                                          Trinn 3
                                          
                                          
                                          Bruke rektangelverktøyet opprette en 236x50px form med en # 1c1f20 fyll og kaller laget Login btn. Legg Logg inn med innstillingen under og vertikalt og horisontalt plassere teksten inne Login btn.
                                          
                                          1. Legg til en Drop Shadow til innlogging btn lag med de innstillingene nedenfor.
                                             
                                          2. Kombiner på lagene i en gruppe og kaller det Syng i btn.
                                             
                                             
                                             Trinn 4
                                             
                                             
                                             Duplicate Påloggings gruppen og flytte det ned 20px fra originalen. Gi det å registrere deg.
                                             
                                             1. Endre Login btn lagnavn for å registrere btn, og dobbeltklikk på lag for å endre fyll til # 88e2d2. Endre teksten for å lese Registrer deg og tekstfarge til # 292c2e.
                                                
                                             2. Endre Drop Shadow innstillingene til følgende.
                                                
                                                

                                                Login skjermen skal se slik ut.
                                                

                                                ---

                                                
                                                Konklusjon
                                                

                                                I denne opplæringen, viste jeg deg hvordan du kan lage 3 forskjellige skjermer for en iPad app i Photoshop ved hjelp av en kombinasjon av plug- ins, ledelinjer, vektor former og lagstiler. Når du er ferdig, bør du ha noen skjermbilder som ligner på de nedenfor. Jeg håper at du har lært noe av denne opplæringen, og kan bruke disse teknikkene til å skape virkelig fantastiske mobile grensesnitt av dine egne.
                                                
                                                Ekstra Resources
                                                

                                                Hvis du 're interessert i å få litt hjelp med din app design, har Envato Studio en stor samling av app design tjenester som du kanskje har lyst til å utforske. Anmeldelser

                                                
                                                
                                                
                                                Previous:Lag en Mixed Martial Arts Hendelses Flyer i Photoshop
                                                Next Page:Utvalgte Art Fra Design Challenge # 9