Create en Clean iPad Interface i Photoshop
Photoshop har noen kraftige verktøy som hjelper deg lage lekre grensesnitt. I denne opplæringen vil vi vise hvordan du kan lage et rent iPad grensesnitt ved hjelp av Photoshop kraftige verktøykasse. La oss komme i gang!
Instruksjons Eiendeler
LCD Font
Britannic Font
Trinn 1
Opprett en ny fil. Still Width til 768 og Høyde til 1024 og oppløsningen til 132 ppi.
Trinn 2
Lag en ny gruppe og gi den navnet Bakgrunn. Inni den gruppen opprette et nytt lag og fyll den med # c2c2c2 og anvende Layer Styles. Gjør et annet lag, fyll den med hvilken som helst farge som du liker enn å gå til Filter> Noise> Legg til støy og satt beløpet til 400%, Distribusjon til Uniform og sjekke Monokromatiske boksen. Sett blending mode for laget til Soft lys og Opacity til 14%.
Trinn 3
Opprett en ny gruppe og gi den navnet Side Button. Ved hjelp av rektangulær Tool (U) foreta en rektangel form på samme måte som den i eksempel. Sett fyllfarge til # 636363 og bruke Layer stil. Nå tar Rectangular Tool (U) og foreta en ny rektangel form, denne gangen litt mindre enn den forrige, og sette fyllfarge til #cfcfcf etterpå bruke Layer Styles.
Trinn 4
Ved hjelp Horizontal Type Tool (T) sett skriften til Myriad Pro (standard font) /Fet og størrelsen til 14 og skriv tallet 1 i sentrum av formen. Påfør Layer Stil og duplisere Side Button konsernet som i eksemplet og endre teksten antall av hver form.
Trinn 5
Nå gjør en ny gruppe og gi den navnet Handling Button. Bruke Avrundet rektangel Tool (U) satt radiusen til 5PX og lage en figur som den i eksempelet. Sett fyllfarge til # 3d3d3d og bruke Layer stil. Lag en mindre form ved hjelp Avrundet rektangel Tool (U), sett fyllfarge til # d7d7d7 og anvende Layer Styles.
Trinn 6
Ved hjelp av Pen Tool (P) vi vil gjøre symbolet. Tegn en trekant og angi fyllfarge til # 696969, bruke Layer Styles og duplisere form som vist i eksempelet.
Trinn 7
Gjør ti flere knapper følgende trinn 5 og la en åpen plass for den pressede versjonen av knappene. Bruke Avrundet rektangel Tool (U) vil du få en annen form på plass igjen mellom knappene. Sett farge til # 2c2c2c og bruke Layer stil. Nå gjør en annen form ved hjelp Avrundet rektangel Tool (U) denne gangen litt mindre, som den i eksemplet og bruke Layer Styles.
Trinn 8
Bruk Rectangular Tool (U), Ellipse Tool (U) og Custom Shape Tool (U) trekke følgende former. Sett fyllfarge til alle fasonger til # 696969 unntatt til stykket symbol som vi vil farge i # 0b709a. Til alle former farget med # 696969 gjelder det første settet med Layer Styles og til stykket symbol gjelder det siste settet med Layer Styles.
Step 9
Opprett en ny gruppe og gi den navnet Sliding Switch. Ved hjelp av rektangulær Tool (U) ta en form som den i eksemplet. Sett fyllfarge til # d4d4d4. Nå bruker Rectangular Marquee Tool (M) gjøre to valg som de i eksempelet. Velg inverse utvalget og Legg en lagmaske. Påfør Layer stil.
Trinn 10
Lag en ny Layer og forvandle den i en Clipping Mask. Bruke Rectangular Tool (U) lage en figur som den på i eksemplet og sette farge til # 2c2c2c og bruke Layer stil. Nå å jobbe med detaljene. Lag en ny gruppe og gi den navnet Detaljer. Bruke Rectangular Tool (U) gjør en liten firkant som den i eksempelet. Sett Fill til 0% og bruke Layer stil. Duplisere lag så mange ganger som neede for å få et tilsvarende resultat som den i eksemplet. Sett Opacity av detaljer Group til 50%, og vi er ferdige her.
Trinn 11
Når du har opprettet et nytt lag og transformere det til en Clippin Mask, bruke Rectangular Tool (U) og lage en figur som den i eksempelet. Sett fyllfarge til # 484848 og anvende Layer Styles. Lag et nytt lag og bruke Horisontal Type Tool (T) stiller Font til Myriad Pro (standard font) /Fet og skriftstørrelse til 14 pt og skrive tallene 02, 04 og 06 akkurat som i eksemplet og bruke Layer Styles. Gjør et annet lag og forvandle det til et Clippin Mask. Lag en annen form lik den første, Filter > Noise > Legg støy og satt beløpet til 400, Distribusjon til Uniform og sjekke Monokromatiske boksen. Sett Opacity nivå til 5% og gå til neste trinn.
Trinn 12
Opprett en ny gruppe og gi den navnet Skjerm. Ved hjelp av Pen Tool (P) tegne en figur som den i eksempelet, redusere Fyll til 0% og gjelder Layer Styles.
Step 13
Ved hjelp av penneverktøyet (P) foreta en ny form og sette farge fylle til # 49c1ff og anvende Layer Styles. Lag et nytt lag, fylle laget med hvilken som helst farge du liker, gå til Filter /Noise /Legg støy og satt beløpet til 400%, Distribusjon til Uniform og sjekke Monokromatiske boksen. Forvandle lag i en Clipping Mask og sette blending mode for laget til Soft lys og Opacity nivå til 14%.
Step 14
Etter nedlasting LCD Font bruke Horizontal Type Tool (T) og med forskjellige skriftstørrelser skrive ned en tekst som i eksempelet. Sett farge til hvit #ffffff og gjelder for alle tre tekstlag Layer stil. Nå bruker Custom Shape Tool (U) last Web figurer fra librabry og bruke de angitte former vist i eksempelet. Påfør Layer Stil og vi er ferdige.
Trinn 15
Nå skal vi bruke Rectangular Shape Tool (U) trekke 60 hvite #FFFFFF rektangler som i eksempelet. Endre fargen til noen av dem til # 7f7f7f og bruke Layer stil. Sett alle disse lagene i en gruppe og gi den navnet Indicators. Nå bruker Pen Tool (P) satt til stier foreta et valg akkurat som den i eksempelet, velger inverse og legge en maske til gruppen.
Trinn 16
Du er nødt til å følge den nøyaktige fremgangsmåten fra trinn 12 til trinn 15 for å speile skjerm på høyre side av UI. Du kan spille rundt, bli kreativ om det, så det er en av de viktigste tingene mens utforme.
Step 17
Opprett en ny gruppe og gi den navnet Knott. Ved hjelp av Ellipse Tool (U) foreta en svart # 000000 sirkel som den i eksemplet. Slipp Fill til 8%. Nå bruker Pen Tool (P) satt til Paths foreta et valg akkurat som den i eksempel og legge den som en lagmaske. Påfør Layer Styles og flytte til neste trinn.
Step 18
Ved hjelp av Ellipse Tool (U) foreta en ny sirkel inne i forrige form, sette farge fylle til # 141414 og anvende Layer Styles.
Step 19
Lag en annen sirkel ved hjelp av Ellipse Tool (U), sett farge fyllet til #efefef og anvende Layer Styles.
Step 20
Ved hjelp av Ellipse Tool (U) tegne en annen sirkel som den i eksemplet satt fyllfargen til # 414141 og anvende Layer Styles. Legg et nytt lag og forvandle den i en Clipping Mask. Ved hjelp av penneverktøyet (P) satt til formlag lage en figur som den i eksempel og sette farge til # 6dcff6.
Step 21
Legg et nytt lag og bruke Ellipse Tool (U) foreta en ny sirkel som den i eksempelet. Sett fyllfarge til hvit #ffffff og anvende Layer Styles.
Step 22
Lag et nytt lag og bruke penselverktøyet plukke en middels stor pensel, sett hardhet til 0 og farge til # 000000 og slå et slag som den i eksempelet. Forvandle lag i en Clipping Mask. Lag en ny Layer og fyll den med hvilken som helst farge. Gå til Filter > Noise > Legg støy og satt beløpet til 400, Distribusjon til Uniform og sjekke Monokromatiske boksen. Etter dette går du til Filter /Blur /Radial Blur satt beløpet til 50, Blur Method Spin og kvalitet til beste. Forvandle lag i en Clipping Mask og sette blending mode for laget til Hardt lys og Opacity nivå til 41%. Sentrere øyet av vortex med sentrum av vår knott og du er klar til å gå videre til neste trinn.
Trinn 23
Ved hjelp av Ellipse Tool (U) foreta en ny sirkel som den i eksempelet. Sett Fyll til 0 og bruke Layer stil. Duplisere og endre størrelse på dette laget til du får et resultat som den i eksempelet. Legg alt dette lagvis i en rot mappe /gruppe og redusere grupper Opacity til 15%.
Trinn 24
I dette trinnet vil vi skape blinklys. Ved hjelp av Pen Tool (P) må du tegne en figur som den i eksempelet. Sett fyllfarge til # 3a3a3b. Nå velger laget og legge til en lagmaske. Ved hjelp av Gradient Tool (G) satt til Forgrunn til gjennomsiktig og plukke svart # 000000 som vår forgrunnsfarge, lage en gradient slag akkurat som den i eksempelet. Duplisere og endre størrelsen på lag slik at du får et resultat som i eksempelet. Gjelder for begge lag Layer Styles og våre retningslys er klare.
Step 25
opprette en ny gruppe og navn det skruer. Ved hjelp av Ellipse Tool (U) gjøre to svarte # 000000 sirkler som de i mitt eksempel og bruke Layer Styles. Nå bruker Ellipse Tool (U) igjen gjøre ytterligere to sirkler, denne gangen litt mindre enn de forrige og angi fyllfarge til # 494949. Påfør lagstiler og vi er klare til å flytte til vårt neste steg.
Step 26
Ved hjelp Horizontal Type Tool (T) sett skriften på Britannic Font og størrelsen til 11 pt og skriv to "+" akkurat som i eksempelet. Påfør Layer Styles til dem og våre skruene er ferdig.
Step 27
Lag en ny gruppe og gi den navnet Switchesc. Innsiden med Pen Tool (P) trekker to sorte # 000000 former som de i eksemplet og bruke Layer Styles.
Step 28
Ved hjelp av Pen Tool (P) trekker to flere former som de i eksempel og sette fyllfarge til #cecece etterpå bruke Layer Styles.
Step 29
Nå vil vi arbeide på vår venstre bryteren. Ved hjelp av Ellipse Tool (U) gjør en hvit #ffffff sirkel som den i eksemplet og bruke Layer Styles.
Step 30
Ved hjelp av Custom Shape Tool (U) laste Symboler pakke fra biblioteket og legge bilen symbol med fyllfargen til hvit #ffffff. Påfør Layer Styles. Fra Custom Shape Tool bibliotek velge sykkelen og sett den deretter bruke Layer stil.
Trinn 31
Nå skal fungere på høyre bryteren. Ved hjelp av Ellipse Tool (U) gjør en liten sirkel som den i eksemplet satt fyllfargen til # 75d0f5 og anvende Layer Styles.
Step 32
Ved hjelp Horizontal Type Tool (T) satt skriften til Arial og skriftstørrelse til 9 og skrive "EDIT" akkurat som i eksemplet og bruke lagstiler. Nå bruker en mindre skrift og skrive i en 45 graders vinkel ordene og på og bruke Layer stil.
Step 33
Lag en ny gruppe og gi den navnet Slår 2. Bruke Ellipse Tool (U) gjør i former som de i eksempelet. Sett fyllet til 0% og anvende Layer Styles. Bruk Ellipse Tool (U) nok en gang og lage to figurer som de i eksempelet. Sett farge fylle til # 2e2e2e og bruke Layer stil.
Step 34
Ved hjelp av Ellipse Tool (U) lage to figurer som de i eksempelet. Sett fyllfarge til # b6b6b6 og anvende Layer Styles.
Step 35
Ved hjelp Avrundet rektangel Tool (U) stiller Radius til 5 px og tegne seks figurer akkurat som de i mine eksempler. Sett Fill til 0% til alle lagene og anvende Layer Styles. Nå bruker ellipseverktøyet sette farge til # 4c4c4c og gjøre 6 sirkler som i eksempelet. Bruke Rectangular Tool (U) og samme farge lage 4 figurer akkurat som de i eksempelet. Nå må du bruke Horizontal Type Tool (T) og sett Font til Myriad Pro /Fet og skriftstørrelsen til 6 pt og skrive på slutten av hver gruppe en "-" og "+" akkurat som i eksempelet .
Step 36
Lag en ny gruppe og gi den navnet Video Connector. Ved hjelp av Pen Tool (P) tegne en figur som den i eksempelet. Sett fyllfarge til # 252525 og anvende Layer Styles.
Step 37
Ved hjelp av Pen Tool (P) gjør en annen form, akkurat som den i eksemplet satt fyllfargen til # 292929 og anvende Layer Styles.
Step 38
Ved hjelp av Ellipse Tool (U) lage en sirkel som den i eksempel og sette fyllfarge til # 9da2a6. Velg Rectangular Marquee Tool (M) og lage 3 valg som de i eksempelet, velger inverse og legge lagmaske. Nå velger Pen Tool (P) sette den til Paths og foreta et valg bane akkurat som den i eksempelet. Velg lagmaskeminiatyren fra vår krets lag og fylle markeringen med svart # 00000 og anvende Layer Styles. Lag en ny layer fylle den med hvilken som helst farge, går du til Filter > Noise > Legg støy og satt beløpet til 400%, Distribusjon til Uniform og sjekke Monokromatiske boksen. Forvandle dette laget i en Clipping Mask, sette blending mode for laget til Soft Light og Opacity nivå til 24%, og vi er klare til å flytte til vårt neste steg.
Trinn 39
Ved hjelp av Ellipse Tool (U) gjør syv svarte # 000000 sirkler som de i eksemplet og bruke Layer stil. Bruk Rectangle Tool (U) og lage en figur som den i eksemplet satt fyllfargen til # 323232 og bruke Layer stil.
Trinn 40
Lag en ny gruppe og navn dette en Jack. Ved hjelp av Ellipse Tool (U) lage en sirkel som den i eksempelet satt fyllfargen til # 4b4b4b og anvende Layer Styles.
Trinn 41
Lag en annen sirkel ved hjelp av Ellipse Tool (U ) og sett Fill til 0% og anvende Layer Styles. Lag en annen sirkel ved hjelp av Ellipse Tool (U) og slippe Fill til 0% og bruke Layer stil.
Step 42
Ved hjelp av rektangel Tool (U) gjøre 4 figurer som de er angitt i eksempel og sette fyllfarge til # 474747. Ved hjelp av rektangel Tool (U) gjøre en liten rektangel form bare mellom de to øverste slag gjort før. Sett fyllfarge til # 92a1ab. Nå bruker Ellipse Tool (U) foreta en ny sirkel akkurat som den i eksempelet, angi fyllfargen til # 83898f og bruker Elliptical Marquee Tool (M) gjør en sirkulær utvalg inne formen vi har gjort før akkurat som den i eksempelet. Nå velger inverse og Legg en lagmaske. Påfør Layer Styles og gå til neste trinn.
Trinn 43
Opprett en ny gruppe og gi den navnet USB Connector. Ved hjelp av rektangel Tool (U) lage en figur som den i eksempel og sette fyllfarge til # 1f1f1f. Påfør Layer Styles, og vi er ferdig.
Trinn 44
Lag et nytt lag, og forvandle den til en Clipping Mask. Bruke Avrundet rektangel Tool (U) angi radien til 5PX og lage en form akkurat som den i eksempelet. Slipp Fill til 0% og bruke Layer stil. Gjør et nytt lag og bruke et medium og en liten størrelse svart # 000000 børste gjøre to slag som de i eksempelet. Forvandle dette laget i en Clipping Mask og redusere Opacity til 70%.
Trinn 45
Ved hjelp Avrundet rektangel Tool med Radius satt til 5 px, få fem figurer som de i eksempelet og sette fyllfargen til # 8d8d8d, etterpå bruke lag stil. Nå bruker Pen Tool (P) satt til formlag tegne en figur som den i eksempel og sette fyllfarge til # 454544 og bruke Layer stil. Ved hjelp av rektangel Tool (U) gjør fem rutene som de i eksemplet satt fyllfargen til # 1a1a1a og bruke Layer stil. Igjen bruker rektangel Tool (U) til 5 figurer som de i eksempel og sette fyllfarge til # eceee9.
Step 46
Ved hjelp av Pen Tool (P) tegne en figur som den i eksempelet, redusere Fyll til 0% og bruke Layer stil.
Final Bildeanmeldelser