Share
Slick design er en viktig del av et vellykket iPad-grensesnitt. I denne opplæringen vil vi forklare hvordan du lager en vakker GUI for et Audio / DJ iPad-program i Photoshop. La oss komme i gang!
Opprett en ny fil. Angi bredde til 768 og høyde til 1024 og oppløsningen til 132 PPI.
Lag en ny gruppe og gi den navnet Bakgrunn. Åpne lærtekstur av Tommaso Nervegna, bygg et rutenettverk, akkurat som det i eksempelet, ved å dele lerret halvveis på horisontal og i 3 på loddrett. Endre størrelsen på teksten slik at den passer til den ene av de seks figurene, og dupliser den 5 mer tid, slik at vi kan fylle hverandre.
Slå sammen alle 6 lagene som vi tidligere gjorde, og bruk et gradientoverlegg fra Layer Style-panelet. Sentrere gradienten like over midten av lerretet akkurat som det er sett i eksemplet, og vår Bakgrunn er ferdig. Fortsett å lese for å få flere trinn gjort.
Opprett en ne-gruppe og gi den navnet Platter. Nå bruker Ellipse Tool (U) Lag en perfekt sirkel (513x513 px), reduser fyllnivået til 0 og bruk lagstiler fra eksempelet. Du bør få et resultat som ligner på bunnen av eksemplet.
Nå vil vi gi formen et lett slag. Bruke børsteverktøyet (B) angi størrelsen til 300 og hardheten, sett forgrunnsfargen til # 01f5f5 og gjør en prikk som den i eksemplet. Sett blandemodus for laget til Overlegg.
Ved hjelp av Ellipse Tool (U) lag en annen perfekt sirkel (483x483 px), sett forgrunnen til # 111111 og bruk et ytre glød ved hjelp av innstillingene fra eksempelet.
Igjen ved hjelp av Ellipse Tool (U) lag en annen perfekt sirkel (481x481 px), men gjør denne en 2 px mindre enn den forrige. Sett forgrunnsfargen til # 00a2ff, og bruk lagstilene fra eksempelet mitt.
Lag en ny sirkel ved hjelp av Ellipse Tool (U) angi forgrunnsfargen til # c2c2c2, gjør den 10 px mindre enn vår forrige (471x471 px) og bruk et Stroke fra panelet Layer Styles, ved hjelp av innstillingene fra eksemplet.
I dette trinnet vil vi lage noen former for å gi mer dybde til tallerkenen. Bruk pennverktøyet (P) til å tegne en form som den i eksemplet. Gjør det rundt 64 px bredde og 55 høyde, sett forgrunnsfargen til # 000000 enn duplikere den for å bygge en sirkel ut av figurene og bruk Gradient Overlay til hver form, noe å endre vinkelretningen som du beveger deg fra en form til en annen for å gi den en mer dynamisk nyanse, i dette tilfellet gir vi mer dybde. Grupper alle disse figurene, og bruk Ellipse Tool (U) til å lage en perfekt sirkel (467x467 px) over denne gruppen. Overfør Vector Mask Thumbnail fra sirkelen vi gjorde til gruppen av figurer, og slett sirkelen.
Bruke Ellipse Tool (U) tegne en annen perfekt sirkel (469x469 px), reduser fyllnivået til 0 og bruk lagstilene fra eksempelet.
Bruk pennverktøyet (P) til å tegne en form akkurat som i eksemplet. Gjør det rundt (425x425 px), sett forgrunnsfarge til # 8d8a8a og bruk Gradient Overlay ved å bruke innstillingene i eksemplet.
Plukk opp ellipseverktøyet (U) og lage en perfekt sirkel (405x405 px), sett forgrunnsfargen til # 232323 og bruk lagstilene fra eksempelet.
Dupliser forrige sirkel, reduser fyllnivået til 0 og bruk lagstilene.
Ved hjelp av Ellipse Tool (U) lag en perfekt sirkel (160x160 px), reduser fyllnivået til 0 og bruk et 1 px, svart (# 000000) slag fra Layer Style-panelet. Dupliserer nå dette laget og endrer størrelsen på det for å gjøre det noen få piksler mindre enn det som er før det, til du får et resultat som det i eksemplet.
Velg alle lagene, slå dem sammen i et smart objekt og sett fyllingsnivået til 10%. Dupliser dette smarte objektet 4 flere ganger, og plasser duplikatene i de angitte stedene fra eksempelbildet og sett fyllfarge til 5%.
Opprett en ny gruppe og navngi det Kontrollpanel. Bruk pennverktøyet (P) til å tegne på figurer som i eksempelet, en på venstre side og en annen på høyre side av tallerken. Gjør figurene rundt 300 px og. Forgrunnen er ikke viktig fordi vi vil legge til en tekstur på toppen av formen og bare bruke formen som en basis for vår trestruktur. Når du er ferdig med å tegne figurene, bruker du lagstilene fra eksempelet.
Åpne og importere Wood Texture av Matthew Skiles, og legg ett lag på toppen av venstre og høyre baseform som vi gjorde for kontrollpanelet. Forvandle teksturlagene til Clipping Masks og gå videre til neste trinn.
Bruke Pen Tool (P) tegne 2 lignende former til de forrige, men litt mindre. Reduser fyllnivået til 0 og bruk lagstilene.
I dette trinnet vil vi skape indikatorpiler. Bruke Pen Tool (P) tegne 2 former som de i eksemplet. Sett forgrunnsfargen til # 000000 og bruk lagstilene.
Legge til tekst ved hjelp av Horizontal Type Tool (T). Bruk Tahoma> Fet som skrift, sett størrelsen til 6 og skriv under venstre pil "- (brakett) REV" og under høyre pil "+ (brakett) FWD" og gjelder både en Drop Shadow-effekt fra lagstiler panel ved hjelp av innstillingene fra eksemplet.
Nå for å legge til litt tekst til venstre panel, som blir vår Equalizer. Bruk størrelsen til 4 px, skrifttype til Arial> Legg til og skriv ned "10hz 20hz 40hz 80hz 1khz 2khz 3khz 4khz 5khz 6khz" og bruk Drop Shadow-effekten for å holde innstillingene fra eksempelet.
Ved hjelp av avrundet rektangulært verktøy (U) sett Radius til 2 px og tegne 10 former som de i eksemplet. Forgrunnsfargen for figurene er # 000000. Sett blandemodus for lagene til mykt lys og bruk lagstilene fra eksempelet.
Nå vil vi EQ knappene. Ved hjelp av avrundet rektangulærverktøy (U) sett Radius til 5 px og forgrunnsfargen til #ffffff og tegne 10 former som i eksemplet. Gjør dem rundt 30 px høyde og 20 bredde. Påfør lagstilene og gå til neste trinn.
Ved hjelp av Horizontal Type Tool (T) vil vi sette inn noen intensitetsindikatorer. Bruke Tahoma> Vanlig som skrift, 6 px som skriftstørrelse og forgrunnsfarge satt til #ffffff skrive ned en serie "..." som vist i eksemplet. Sett nå skrifttypen til fet og hold de forrige innstillingene, og skriv ned, innenfor de røde sirkler du ser på eksempelbildet, etter samme rekkefølge "-", "0", "+" og bruk lagstilene til alle tekstlag som vi gjorde i dette trinnet.
La oss nå flytte til høyre panel. Her har vi vår Pitch kontroll og flere andre knapper. Ved hjelp av avrundet rektangulært verktøy (U) angir du Radius til 2 px, og tegner en form som den i eksemplet, deretter bruker du en kommando og Emboss-stil fra panelet Layer Styles, ved hjelp av innstillingene i eksemplet.
Nå bruker vi Rectangle Tool (U) vi tegner indikatormerker på begge sider av formen vi gjorde i forrige trinn. Sett forgrunnsfargen til # 00ffff og tegne en serie rektangelformer, akkurat som i eksemplet. Sørg for å holde et mønster i tankene, og når du tegner en 22 px med 2 px rektangelform, enn tegne 4 18 px med 1 px figurer og så videre til du kommer til bunnen av formen. Når du er ferdig med å tegne figurene, velg dem alle, og slå dem sammen i et smart objekt, og bruk lagstilene som er angitt i eksemplet. Deretter dupliserer du det smarte objektet, og speil det på den andre siden av tonehøyde.
La oss lage Tempo-knappen nå. Ved hjelp av avrundet rektangulærverktøy (U) sett Radius til 5px og tegne en form som den i bildet. Gjør det rundt 45 px x 55 px og sett forgrunnsfargen til #dbdbdb, bruk deretter lagstilene sett i eksempelbildet.
Ved å bruke avrundet rektangulært verktøy (U) med radien satt til 5 px, lag en form som den i eksemplet. Angi fargen til #dbdbdb og bruk lagstilene.
Plukk opp rektangelverktøyet (U) og trekk 3 hvite #ffffff-former som de i eksemplet. Over dem tegner en annen 3 former, samme størrelse som de forrige, unntatt gjør alle 3 på piksel høyere enn de hvite. Sett forgrunnsfarger for disse siste 3 bildene til # 545353 og gå til neste trinn.
Bruke Ellipse Tool (U) tegne 2 perfekte sirkler på venstre side av søknaden vår like under EQ kontrollpanelet. Lag formene rundt 89 px x 89 px og sett fyllingsnivået til 0. Bruk lagstilene som er sett i eksemplet, og fortsett å lese neste trinn.
Lag 2 flere sirkler ved hjelp av Ellipse Tool (U), noen få piksler mindre denne gangen, sett forgrunnsfargen til # 0a0a0a og bruk lagstiler.
Bruke Ellipse Tool (U) lag 2 små sirkler som figurene som er sett i eksempelet, sett fyllnivået til 0 og bruk lagstiler.
Nå for å legge til litt tekst og symboler. På venstre knapp, ved hjelp av Horizontal Type Tool (T), sett Fonten til Calibri> Bold, og skriftstørrelsen til 8 px og skriv ned midt på knappen "/". For høyre knapp med de samme innstillingene skriv ned "CUE". Bruk nå rektangulærverktøy (U) ved å tegne 2 rektangler som dem i eksemplet, på høyre side av "/" og på venstre side, ved hjelp av Pen Tool (P), trekk en trekant som i eksemplet. Påfør lagstilen til alle tekst- og formlagene som vi gjorde i dette trinnet.
I dette trinnet vil vi lage noen flere interessante knapper. Ved hjelp av avrundet rektangulært verktøy (U) sett Radius til 10 px og tegne 7 firkantede former som de i eksemplet, gjør dem rundt 53 px med 53 px. Sett forgrunnsfargen til # 000000, reduser fyllnivået til 10% og bruk lagstilene.
Nå skal vi lage de normale modusknappene. Ved å bruke avrundet rektangulært verktøy (U) tegner du bare 5 figurer, som peket i eksempelet, sett forgrunnsfargen til # 0a0a0a og bruk lagstiler.
Bruk rektangelverktøyet (U) til å sette forgrunnsfargen til #ffffff og tegne rektangelformer som de i eksemplet. Nå bruker du pennverktøyet (P), hold forgrunnsfargen til #ffffff og trekk trekantede former som de i eksemplet. Plukk opp Horisontal Typeverktøy (T) og skriv ned på samme steder som vist i eksemplet ordene "PLAYLIST", "POWER", "EJECT", "TRACK SEARCH", "SEARCH". Når du er ferdig, bruk Drop Shadow-effekten til alle lagene vi gjorde i dette trinnet.
Lag noen rektangulære former, akkurat som de i eksempelet, ved hjelp av rektangelverktøyet (U), og bruk lagstilen. Vær forsiktig med å gjøre dem 1 px bredde.
Nå for å lage de aktive knappene. Ved hjelp av avrundet rektangulærverktøy (U) sett Radius til 10 px og tegne 2 former som dem i eksemplet. Sett forgrunnsfargen til # 0a0a0a og bruk lagstilene.
Velg Pennverktøy (P) og tegne 2 trekantformer som de i eksemplet. Sett forgrunnsfargen til #ffffff og bruk lagstilen.
Nå for å tegne USB-kontakten. Ved hjelp av avrundet rektangulærverktøy (U) stiller du Radius til 10 px og tegner en form over spillelisten. Gjør det samme størrelse som Playlist-basen. Sett fyllnivået til 10 og bruk lagstilene.
Bruke børsteverktøyet (B) still størrelsen til 36 og hardheten til 0 og lag en liten svart # 000000 prikk som den i eksemplet. Nå bruker du Rectangular Marquee Tool (M) til å gjøre et utvalg som det i eksempelet og slette det. Nå blir vår prikk skygge. Bruk Drop Shadow-effekten til punktlaget, og bruk Pen Tool (P) til å tegne en form akkurat som i eksemplet. Sett forgrunnsfargen til # 000000 og bruk lagets stiler.
Velg Brush Tool (B) igjen, og sett børstenes størrelse til 49 px og hardheten til 70% og lage en svart # 000000 prikk som den i eksemplet. Bruk et rektangulært markeringsverktøy (M) til å gjøre et valg som det i eksemplet og slette den delen. Still Opacity-nivået til 40% og dupliser laget. Flytt dupliseringslaget 1 px til venstre og trykk CMD / CTRL + I (invert) og sett Opacity for dette siste laget til 10%.
Nå for å tegne hastighetsknappene. Bruke rektangelverktøyet (U) tegne 2 hvite #ffffff-linjer som de i eksempelet, og bytt til Ellipseverktøy (U) og tegne 3 sirkler som de i eksemplet. Sett fyllnivået for alle fasene til 0 og bruk lagstilene.
Bruke Ellipse Tool (U) tegne 3 sirkler, inne i de forrige 3 sirkler, men denne gangen litt mindre. Dette vil representere knappen selv. Sett forgrunnsfargen til # 0a0a0a for mellomknappen, dette vil være vår aktive tilstandsknapp og bruke lagstilene fra eksempelet.
Sett forgrunnsfargen til # 0a0a0a for både venstre og høyre knapp, dette vil være den inaktive tilstanden for knappene og bruke lagestiler.
Bruk Ellipseverktøy (U) til å lage 2 små sirkler som i eksempelet, sett fyllnivået til 0 og bruk lagstiler.
Nå for å legge til tekst. Bruke Horizontal Type Tool (T), skriv ned midt på hver knapp, fra venstre til høyre, tallene "1", "2", "3" og bruk lagstilene til hver enkelt.
Ved hjelp av avrundet rektangulærverktøy (U) sett Radius til 10 px, og trekk tre former som dem i eksempelet på høyre panel. Reduser fyllnivået til 10% og bruk lagstilene.
Gjør nå en annen form ved hjelp av avrundet rektangelverktøy (U), hold Radius til 10 px, men reduser formens størrelse slik at den passer til den forrige. Sett forgrunnsfargen til # 000000 og bruk lagstilene.
Tegn 2 flere former ved hjelp av avrundet rektangulært verktøy (U), med radien satt til 10 px som vist i eksemplet, sett forgrunnsfargen til # 000000 og fyll nivået til 10% og bruk lagstilene.
Nå for å gjøre den aktive tilstanden. Ved hjelp av avrundet rektangulærverktøy (U) sett Radius til 10 px og tegne 3 former som de i eksemplet. Bare bruk lagstilene til den øvre formen, fordi det vil være vår aktive tilstandsknapp.
Nå for normal tilstand, bruk lagstilene som er sett i eksemplet til knappene.
Legge til tekst. Ved hjelp av Horizontal Type Tool (T) stilles Font til Tahoma> Regular, og skriftstørrelsen til 6 px og skriv ned under hver knapp følgende tekst "BPM LOCK", "VINIL", "RESET TEMPO" og bruk Drop Shadow-effekten til alle tekstlag.
Ved hjelp av Custom Shape Tool (U) settes piltast 18, fra piler og plasserer det midt på den siste knappen. Må redigeres> Transform> Skala og plassere en minus i Angi en horisontal skalainngang, deretter bruke Drop Shadow-effekten, hold innstillingene sett i eksemplet.
Ved hjelp av Egendefinert Formverktøy (U) settes "NO" Sign, fra Symboler og plasser det midt på den første knappen. Samme som forrige form, gå til Rediger> Transform> Skala og legg en minus i Angi en horisontal skalainngang, deretter bruk Drop Shadow-effekten, hold innstillingene sett i eksemplet.
Nå for å lage noen aktive indikatorer. Bruke Ellipse Tool (U) tegne noen små kretser som vist i eksemplet. Sett forgrunnsfargen til # 00c52e for strømknappsindikatoren og for resten sett den til # 007dc5 og bruk lagstiler.
Ved hjelp av avrundet rektangulærverktøy (U) sett Radius til 4 px og tegne en form som den i eksemplet. Sett forgrunnsfargen til # 000000 og bruk Drop Shadow. Plukk opp avrundet rektangelverktøy (U), hold de samme innstillingene og tegne en annen form, men denne gangen er det litt mindre. Sett forgrunnsfargen til # 000000 og bruk lagstilene.
La oss nå lage Album Art Holder. Bruke rektangelverktøyet (U) tegne et rektangelform som det i eksempelet, sett forgrunnsfargen til # 00fbff og bruk lagstiler. Nå åpner du og plasserer album som du liker. Mitt valg var Chase and Status, Album "More Than Alot". Forvandle album kunstlaget til en Clipping Mask. Bruk nå pennverktøyet (P) til å tegne en form som den i eksemplet. Legg en lagmaske og glatt med en middels størrelse børste, maling over masken med svart farge # 000000 for å få et resultat som i eksempelet. Still Opacity-nivået til 20% og gå videre til neste trinn.
Fikk Digital Dream Font og importer den til Photoshop. Velg Horizontal Type Tool (T), sett Font til Digital Dream Fat Skew Narrow og Font size til 12 px og skriv ned "Chase & Status", "More than Alot" ved hjelp av hvit #ffffff som forgrunnsfarge. Hold fonten, men endre størrelsen fra 12 px til 14 px og skriv ned nederst til venstre, som vist i eksemplet ordene "Stykker - (featplan B)" og på høyre side av displayet "00 00 00 "2 ganger, og reduser Opacity-nivået for dette 2 tekstlaget til 10 px. Nå på toppen av dem som holder samme innstilling, skriv ned "02:13. 33" og "04:49. 02" akkurat som sett i eksemplet. Bruk Outer Glow-effekten til alle tekstlagene.
Bruk pennverktøy (P) til å tegne en form som den i eksempelet, legg til en lagmaske til den og bruk en svart # 000000 mediumstørrelse børste, unngår vekk slik at vi får en jevn overgang fra hvit #ffffff til informasjonen under denne lag. Angi blandemodus for dette laget til ekskludering og fyllnivået til 7%.
Bruke Pen Tool (P) tegne 2 former som de i eksemplet. Sett fyllnivået til 0 og bruk lagstilene, og konverter deretter hver form til et smart objekt. Du vil legge merke til at Gradien har endret seg. Legg lagsmasker til begge smarte objekter, og puss bort bunndelen, ved hjelp av en middels svart # 000000 børste.
Velg Pennverktøy (P) og tegne 2 form, som de i eksemplet. Sett forgrunnsfargen til # 0c0c0c og bruk lagstilen.
Bruk rektangelverktøy (U) til å lage en serie rektangulære former som i eksemplet. Sett forgrunnsfargen til #ffffff for alle, og grupper dem ved sider EX: "venstre sidegruppe EQ". Forvandle gruppene til smarte objekter, og gå til Rediger> Transform> Varsel. Trekk hjørnene for å få et lignende resultat som det i eksemplet og redusere fyllnivået til 10%.
Dupliser Smart Obscts fra vårt forrige trinn. Sett fyllnivået til 100%, og bruk lagstilene. Bruk nå Polygonal Lasso Tool (L) til å gjøre 2 valg som de i eksempelet og legg til en lagmaske for hver smart objekt.
Bruke Pen Tool (P) tegne 2 former som de i eksemplet. Sett forgrunnsfargen til #ffffff, legg til en lagmaske og puss bort bunnsiden med en medium svart # 000000 børste, som vist i eksemplet. Reduser fyllnivået til 20% og bruk lagstilen. Velg Pennverktøy (P) og tegne #ffffff en hvit form som den i eksemplet. Gå til Filer> Uklarhet> Bevegelsesskarphet og sett avstanden til 40 og vinkelen til 0. Reduser opasiteten til 30% og vi er ferdige.
Du kan spille rundt, lage nye elementer, endre farger og form. Eksperiment! Dette var alltid nøkkelen til læring. Håper du har hatt denne opplæringen. Takk for at du leste!
Accentsconagua