Share
Design-urile slick sunt o parte importantă a unei interfețe iPad de succes. În acest tutorial vom explica cum să creați un GUI frumos pentru o aplicație iPad Audio / DJ în Photoshop. Să începem!
Creați un fișier nou. Setați Lățimea la 768 și Înălțimea la 1024 și rezoluția la 132 PPI.
Creați un nou grup și denumiți-l pe fundal. Textură deschisă din piele de Tommaso Nervegna, construiește un sistem de rețea la fel ca cel din exemplu, împărțind pânza în jumătate pe orizontală și pe 3 pe verticală. Redimensionați textura pentru a se potrivi una din cele 6 forme și duplicați-o mai mult timp pentru a putea umple fiecare.
Mergeți toate cele 6 straturi pe care le-am realizat anterior și aplicați o suprapunere de gradient din panoul Stil de strat. Centrarea gradientului chiar peste mijlocul panzei exact așa cum se vede în exemplu și fundalul nostru este făcut. Continuați să citiți pentru a face mai mult de făcut.
Creați un Grup ne și denumiți-o Platter. Acum, folosind Instrumentul Ellipse (U) Faceți un cerc perfect (513x513 px), reduceți nivelul de umplere la 0 și aplicați stilurile de strat din exemplul respectiv. Ar trebui să obțineți un rezultat similar cu cel din partea de jos a exemplului.
Acum vom da forma unui accident vascular cerebral ușor. Utilizând Tool Brush (B) setați dimensiunea la 300 și Duritate, setați culoarea primului la # 01f5f5 și faceți un punct ca cel din exemplu. Setați modul de amestecare pentru stratul de suprapunere.
Folosind instrumentul Ellipse (U) faceți un alt cerc perfect (483x483 px), setați prim-planul la # 111111 și aplicați o strălucire exterioară utilizând setările din exemplu.
Din nou, folosind instrumentul Ellipse (U), faceți un alt cerc perfect (481x481 px), dar faceți acest lucru cu 2 px mai mic decât cel precedent. Setați culoarea primului rând la # 00a2ff și aplicați stilurile de nivel din exemplul meu.
Efectuați un nou cerc utilizând instrumentul Ellipse (U) pentru a seta culoarea primului câmp la # c2c2c2, pentru a face cu 10 px mai mic decât cel precedent (471x471 px) și pentru a aplica un Stroke din panoul Stiluri de straturi, utilizând setările din exemplu.
În acest pas vom crea niște forme pentru a da mai multă adâncime plăcii. Folosind Pen Tool (P) trageți o formă ca cea din exemplu. Faceți-o în jur de 64 px latime și 55 înălțime, setați culoarea primului rând la # 000000 decât duplicați-l pentru a construi un cerc din forme și aplicați Gradient Overlay pentru fiecare formă, modificând ușor orientarea unghiului în timp ce treceți de la o formă la alta pentru a da o nuanță mai dinamică, în acest caz oferindu-ne mai multă profunzime. Grupează toate aceste forme și folosind instrumentul Ellipse (U) face un cerc perfect (467x467 px) deasupra acestui grup. Transferați miniatură Vector Mask din cercul pe care l-am făcut grupului de forme și ștergeți cercul.
Folosind instrumentul Ellipse (U) trageți un alt cerc perfect (469x469 px), reduceți nivelul de umplere la 0 și aplicați stilurile stratului din exemplul.
Folosind Pen Tool (P) trageți o formă exact ca cea din exemplu. Faceți-o în jur (425x425 px), setați culoarea prim-planului la # 8d8a8a și aplicați acoperirea cu gradient utilizând setările din exemplu.
Ridicați instrumentul Ellipse (U) și realizați un cerc perfect (405x405 px), setați culoarea primului rând la # 232323 și aplicați stilurile stratului din exemplul.
Duplicați cercul anterior, reduceți nivelul de umplere la 0 și aplicați stilurile de nivel.
Folosind instrumentul Ellipse (U) faceți un cerc perfect (160x160 px), reduceți nivelul de umplere la 0 și aplicați o cursă de 1 px, negru (# 000000) din panoul Strat de strat. Acum duplicați acest strat și redimensionați-l pentru ao face cu câțiva pixeli mai mici decât cel din fața lui până când obțineți un rezultat ca cel din exemplul.
Selectați toate straturile, îmbinați-le într-un obiect inteligent și setați nivelul de umplere la 10%. Duplicați acest obiect inteligent de 4 ori și plasați duplicatele în locurile indicate din imaginea de exemplu și setați culoarea de umplere la 5%.
Creați un nou grup și denumiți Panoul de control. Folosind Pen Tool (P) desenați formele cum ar fi cele din exemplul respectiv, unul în partea stângă și altul în partea dreaptă a platoului. Asigurați-forme în jurul valorii de 300 px și. Avantajul primordial nu este important pentru că vom adăuga o textura pe partea superioară a formei și vom folosi doar forma ca bază pentru textura noastră din lemn. După ce ați terminat desenarea formelor, aplicați stilurile de nivel din exemplul respectiv.
Deschideți și importați Textura de lemn de Matthew Skiles și plasați un strat pe partea superioară a formei de bază din stânga și din dreapta pe care am făcut-o pentru panoul de control. Transformați straturile de textura în măști de tăiere și treceți la pasul următor.
Folosind Pen Tool (P) desenați 2 forme similare cu cele anterioare, dar puțin mai mici. Reduceți nivelul de umplere la 0 și aplicați stilurile stratului.
În acest pas vom crea săgețile indicatoare. Folosind Pen Tool (P) desenați 2 forme asemănătoare celor din exemplul respectiv. Setați culoarea primului rând la 000000 și aplicați stilurile de strat.
Adăugarea de text cu ajutorul instrumentului tip orizontal (T). Folosind Tahoma> Bold ca font, setați dimensiunea la 6 și scrieți sub săgeata stânga "- (bracket) REV" și sub săgeata dreapta "+ (bracket) FWD" și aplicați atât efectului Drop Shadow din Styles Layer utilizând setările din exemplul respectiv.
Acum, pentru a adăuga un text în panoul din stânga, care va deveni Equalizer-ul nostru. Folosind instrumentul de tip orizontal (T) setați dimensiunea la 4 px, fontul la Arial> Narrow și scrieți "10hz 20hz 40hz 80hz 1kHz 2kHz 3kHz 4kHz 5kHz 6kHz" și aplicați efectul Drop Shadow păstrând setările din exemplul.
Folosind Instrumentul rotunjit dreptunghi (U), setați Radiusul la 2 px și desenați 10 forme cum ar fi cele din exemplul respectiv. Culoarea primului motiv pentru forme este # 000000. Setați modul de amestecare pentru straturi pe Lumină moale și aplicați stilurile de strat din exemplul respectiv.
Acum vom face butoanele EQ. Folosind Instrumentul rotunjit dreptunghi (U), setați Radiusul la 5 px și culoarea primului la #ffffff și desenați 10 forme ca cele din exemplul respectiv. Asigurați-le în jur de 30 px înălțime și 20 lățime. Aplicați stilurile stratului și treceți la pasul următor.
Folosind un instrument tip orizontal (T) vom introduce câțiva indicatori de intensitate. Utilizarea Tahoma> Regular ca font, 6 pixeli ca dimensiune font și culoarea prim-planului setată la #ffffff scrie o serie de "..." ca în exemplu. Acum, setați fontul la Bold și păstrați setările anterioare și scrieți-le în interiorul cercurilor roșii pe care le vedeți în imaginea de exemplu, urmând aceeași comandă "-", "0", "+" și aplicați stilurile de straturi pentru toate straturi de text pe care le-am făcut în acest pas.
Acum hai să ne mutăm la panoul din dreapta. Aici vom avea controlul Pitch și câteva butoane. Utilizând Instrumentul rotunjit dreptunghi (U), setați Radiusul la 2 px și trageți o formă ca cea din exemplu, apoi aplicați un stil Bevel și Emboss din panoul Styles Layer folosind setările din exemplu.
Acum, folosind Instrumentul Rectangle (U), vom desena marcatori indicatori pe ambele laturi ale formei pe care am facut-o in pasul anterior. Setați culoarea primului rând la # 00ffff și desenați o serie de forme dreptunghiulare, la fel ca cele din exemplul respectiv. Asigurați-vă că păstrați un model în minte și când desena faceți o formă dreptunghiulară de 22 px-2 px, decât să desenați 4 forme de 18 x 1 px și așa mai departe până când ajungeți la fundul formei. Când ați terminat desenarea formelor, selectați-le pe toate și îmbinați-le într-un obiect inteligent și aplicați Stilurile de strat indicate în exemplu. Apoi duplicați Obiectul inteligent și oglindiți-l pe cealaltă parte a diapozitivului.
Să facem butonul Tempo acum. Folosind Tool Rounded Rectangle Tool (U), setați Radius la 5px și desenați o formă ca cea din imagine. Faceți-o în jurul valorii de 45 px x 55 px și setați culoarea prim-planului la #dbdbdb, apoi aplicați stilurile de straturi văzute în imaginea de exemplu.
Utilizând un instrument dreptunghiular rotunjit (U) cu Radius setat la 5 px, faceți o formă ca cea din exemplu. Setați culoarea la #dbdbdb și aplicați stilurile stratului.
Ridicați instrumentul Rectangle (U) și desenați 3 forme #ffffff albe ca cele din exemplul respectiv. Peste ei desenați alte 3 forme, la fel ca cele precedente, cu excepția faptului că toate cele 3 pe pixeli sunt mai mari decât cele albe. Setați culorile din prim plan pentru aceste ultime 3 forme la # 545353 și treceți la pasul următor.
Folosind instrumentul Ellipse (U) desenați 2 cercuri perfecte pe partea stângă a aplicației noastre chiar sub panoul de control EQ. Asigurați-forme în jurul valorii de 89 px x 89 px și setați nivelul de umplere la 0. Aplicați stilurile de strat văzute în exemplu și continuați să citiți pasul următor.
Faceți încă 2 cercuri utilizând instrumentul Ellipse (U), cu câțiva pixeli mai mici de această dată, setați culoarea primului rând la # 0a0a0a și aplicați stilurile de strat.
Folosind instrumentul Ellipse (U) creați 2 cercuri mici, cum ar fi formele văzute în exemplu, setați nivelul de umplere la 0 și aplicați stilurile stratului.
Acum, pentru a adăuga text și simboluri. În butonul din stânga, folosind Instrumentul de tip orizontal (T) setați Font la Calibri> Bold, iar dimensiunea fontului la 8 px și notați în centrul butonului "/". Pentru butonul din dreapta, folosind aceleași setări, scrieți "CUE". Acum, folosind Instrumentul dreptunghi (U) trageți 2 dreptunghiuri ca cele din exemplu, în partea dreaptă a "/" și pe partea stângă, folosind Pen Tool (P) trageți un triunghi ca cel din exemplu. Aplicați stilul stratului la toate straturile de text și de formă pe care le-am făcut în acest pas.
În acest pas vom face niște butoane mai interesante. Folosind Instrumentul rotunjit dreptunghi (U), setați Radiusul la 10 px și desenați 7 forme pătrate ca cele din exemplu, făcându-le în jur de 53 px și 53 px. Setați culoarea primului rând la # 000000, reduceți nivelul de umplere la 10% și aplicați stilurile de strat.
Acum vom face butoanele pentru modul normal. Folosind Instrumentul rotunjit dreptunghi (U) trageți doar 5 forme, cum ar fi arătat în exemplu, setați culoarea primului câmp la # 0a0a0a și aplicați stilurile stratului.
Folosind Tool Rectangle (U), setați culoarea prim-planului la #ffffff și desenați forme dreptunghiulare ca cele din exemplul respectiv. Acum, folosind Pen Tool (P) păstrează culoarea primului rând la #ffffff și desenează forme de triunghi ca cele din exemplul respectiv. Ridicați instrumentul de tip orizontal (T) și scrieți în aceleași locuri ca în exemplul respectiv cuvintele "PLAYLIST", "POWER", "EJECT", "TRACK SEARCH", "SEARCH". Când ați terminat, aplicați efectul Drop Shadow pentru toate straturile pe care le-am făcut în acest pas.
Faceți câteva forme de dreptunghi, la fel ca cele din exemplul utilizând Instrumentul dreptunghi (U) și aplicați stilul stratului. Aveți grijă să le faceți 1 x lățime.
Acum, pentru a face butoanele active. Utilizând Instrumentul rotunjit dreptunghi (U), setați Radiusul la 10 px și trageți 2 forme asemănătoare celor din exemplu. Setați culoarea primului rând la # 0a0a0a și aplicați stilurile de strat.
Selectați Pen Tool (P) și desenați două forme de triunghi ca cele din exemplul respectiv. Setați culoarea primului rând la #ffffff și aplicați stilul stratului.
Acum trageți fișa USB. Folosind Instrumentul rotunjit dreptunghi (U), setați Radiusul la 10 px și trageți o formă deasupra butonului Playlist. Asigurați-o la aceeași dimensiune ca baza de redare. Setați nivelul de umplere la 10 și aplicați stilurile stratului.
Folosind Tool Brush (B) setați dimensiunea la 36 și duritatea la 0 și faceți un punct negru # 000000 negru ca cel din exemplu. Acum, folosind Instrumentul de marcaj rectangular (M) efectuați o selecție ca cea din exemplu și ștergeți-o. Punctul nostru va deveni o umbră. Aplicați efectul Drop Shadow la nivelul stratului și folosiți Pen Tool (P) pentru a desena o formă similară celei din exemplu. Setați culoarea primului rând la # 000000 și aplicați stilurile stratului.
Selectați din nou instrumentul Brush (B) și setați dimensiunea periei la 49 px și duritatea la 70% și faceți un punct # 000000 negru ca cel din exemplu. Folosind Instrumentul de marcaj dreptunghiular (M) faceți o selecție ca cea din exemplu și ștergeți acea parte. Setați nivelul opacității la 40% și duplicați stratul. Deplasați stratul duplicat 1 px spre stânga și apăsați CMD / CTRL + I (invert) și setați opacitatea pentru acest ultim strat la 10%.
Acum, pentru a desena butoanele de viteză. Folosind Tool Rectangle (U) trageți 2 linii #ffffff albe ca cele din exemplul respectiv, apoi treceți la Ellipse Tool (U) și desenați 3 cercuri ca cele din exemplul respectiv. Setați nivelul de umplere pentru toate formele la 0 și aplicați stilurile stratului.
Folosind instrumentul Ellipse (U) trageți 3 cercuri, în interiorul celor 3 cercuri anterioare, dar de această dată puțin mai mici. Aceasta va reprezenta însăși butonul. Setați culoarea primului rând la # 0a0a0a pentru butonul din mijloc, acesta va fi butonul nostru de stare activă și vom aplica stilurile stratului din exemplul.
Setați culoarea primului rând la # 0a0a0a pentru butonul din stânga și în dreapta, aceasta va fi starea inactivă a butoanelor și va aplica stilurile stratului.
Folosind instrumentul Ellipse (U) faceți 2 cercuri mici, cum ar fi cele din exemplul respectiv, setați nivelul de umplere la 0 și aplicați stilurile stratului.
Acum pentru a adăuga text. Folosind un instrument de tip orizontal (T), scrieți în mijlocul fiecărui buton, din stânga în dreapta numerele "1", "2", "3" și aplicați stilurile de straturi fiecăruia.
Folosind Instrumentul rotunjit dreptunghi (U), setați Radiusul la 10 px și trageți 3 forme asemănătoare celor din exemplul de pe panoul din dreapta. Reduceți nivelul de umplere la 10% și aplicați stilurile stratului.
Acum faceți o altă formă folosind Instrumentul rotunjit dreptunghi (U), păstrând Radiusul la 10 px, dar reduceți dimensiunea formei astfel încât să se potrivească cu cea anterioară. Setați culoarea primului rând la 000000 și aplicați stilurile de strat.
Desenați încă 2 forme folosind Instrumentul rotunjit dreptunghiular (U), cu Radius setat la 10 px, așa cum se vede în exemplu, setați culoarea primului la 000000 și nivelul de umplere la 10% și aplicați stilurile de strat.
Acum, pentru a face starea activă. Folosind Instrumentul rotunjit dreptunghi (U), setați Radiusul la 10 px și desenați 3 forme ca cele din exemplul respectiv. Doar aplicați stilurile de straturi în forma superioară, deoarece acesta va fi butonul nostru de stare activă.
Acum, pentru starea normală, aplicați pe butoanele Stilurile de straturi văzute în exemplul respectiv.
Adăugarea de text. Folosind un instrument de tip orizontal (T) setați fontul la Tahoma> Regular și dimensiunea fontului la 6 px și scrieți sub fiecare buton textul "BPM LOCK", "VINIL", "RESET TEMPO" și aplicați efectul Drop Shadow la toate straturile de text.
Folosind Custom Shape Tool (U) introduceți Arrow 18, de la Săgeți și plasați-o în mijlocul ultimului buton. Trebuie să modificați> Transformați> Scala și să plasați un minus în setarea unei intrări pe scară orizontală, apoi să aplicați efectul Drop Shadow, păstrând setările văzute în exemplu.
Folosind instrumentul Custom Shape Tool (U) introduceți semnul "NO", din simboluri și plasați-l în mijlocul primului buton. La fel ca și forma anterioară, mergeți la Edit> Transform> Scale și plasați un minus în setarea intrării scară orizontală, apoi aplicați efectul Drop Shadow, păstrând setările văzute în exemplul.
Acum, pentru a crea unii indicatori activi. Folosind instrumentul Ellipse (U) trageți niște cercuri mici, așa cum se arată în exemplu. Setați culoarea primului rând la # 00c52e pentru indicatorul butonului de alimentare, iar pentru restul setați-l la # 007dc5 și aplicați stilurile de strat.
Folosind Instrumentul rotunjit dreptunghi (U), setați Radiusul la 4 px și trageți o formă ca cea din exemplu. Setați culoarea primului câmp la # 000000 și aplicați Umbra de Drop. Ridicați Instrumentul rotunjit dreptunghi (U), păstrați aceleași setări și trageți o altă formă, dar de această dată puțin mai mică. Setați culoarea primului rând la 000000 și aplicați stilurile de strat.
Acum să facem Album Art Holder. Folosind Instrumentul dreptunghi (U) trageți o formă dreptunghiulară ca cea din exemplu, setați culoarea primului câmp la # 00fbff și aplicați stilurile stratului. Deschideți acum și plasați orice artă de album care vă place. Alegerea mea a fost Chase and Status, albumul "More Than Alot". Transformați stratul de artă al albumului într-o mască de tăiere. Acum, folosind Pen Tool (P) trageți o formă ca cea din exemplu. Adăugați o mască de strat și utilizați fără probleme o pensulă de dimensiuni medii, vopsiți peste mască cu culoarea neagră # 000000 pentru a obține un rezultat ca în exemplu. Setați nivelul opacității la 20% și treceți la pasul următor.
Am ajuns la Fontul de vis digital și l-am importat în Photoshop. Selectați un instrument de tip orizontal (T), setați fontul la visul digital pentru grăsime și reduceți dimensiunea fontului la 12 px și scrieți "Chase & Status", "Mai mult decât prea mult" folosind alb #ffffff ca culoare prim-plan. Păstrați fontul, dar schimbați dimensiunea de la 12 px la 14 px și scrieți în dimensiunea din stânga jos, așa cum se vede în exemplu cuvintele "Pieces - (feat plan B)" și în partea dreaptă a ecranului "00 00 00 "de 2 ori și reduce nivelul de opacitate pentru acest strat de text 2 la 10 px. Acum, pe lângă aceleași setări, scrieți "02:13 .33" și "04:49 .02" exact așa cum se vede în exemplu. Aplicați efectul Outer Glow la toate straturile de text.
Folosind Pen Tool (P) trageți o formă ca cea din exemplu, adăugați o mască de strat și folosiți o pensulă de dimensiuni medii negre # 000000, îndepărtați-o astfel încât să obținem o tranziție lină de la alb #ffffff la informațiile de mai jos strat. Setați modul de amestecare pentru acest strat la Excludere și nivelul de umplere la 7%.
Folosind Pen Tool (P) desenați 2 forme asemănătoare celor din exemplul respectiv. Setați nivelul de umplere la 0 și aplicați stilurile stratului, după care convertiți fiecare formă într-un obiect inteligent. Veți observa că Gradienul sa schimbat. Adăugați măști de strat în ambele obiecte inteligente și periați partea inferioară, utilizând o perie neagră medie # 000000.
Selectați instrumentul Pen (P) și desenați 2 formă, ca în exemplul respectiv. Setați culoarea primului rând la # 0c0c0c și aplicați stilul stratului.
Folosind Tool Rectangle (U) faceți o serie de forme rectangulare, cum ar fi cele din exemplul respectiv. Setați culoarea primului rând la #ffffff pentru toți și grupați-le pe laturi EX: "EQ de partea stângă". Transformați grupurile în obiecte inteligente și mergeți la Edit> Transform> Warp. Trageți colțurile pentru a obține un rezultat similar celui din exemplu și pentru a reduce nivelul de umplere la 10%.
Duplicați obiectele inteligente din pasul anterior. Setați nivelul de umplere la 100% și aplicați stilurile de nivel. Acum, folosind Polygonal Lasso Tool (L) faceți 2 selecții precum cele din exemplul respectiv și adăugați o mască de straturi pentru fiecare obiect inteligent.
Folosind Pen Tool (P) desenați 2 forme asemănătoare celor din exemplul respectiv. Setați culoarea primului rând la #ffffff, adăugați o mască pentru straturi și periați partea inferioară folosind o perie medie # 000000 negru, așa cum se vede în exemplu. Reduceți nivelul de umplere la 20% și aplicați stilul stratului. Selectați Pen Tool (P) și desenați #ffffff o formă albă ca cea din exemplu. Mergeți la Filer> Blur> Motion Blur și setați distanța la 40 și unghiul la 0. Reduceți opacitatea la 30% și am terminat.
Puteți să jucați, să creați elemente noi, să schimbați culorile și forma. Experiment! Acesta a fost întotdeauna cheia învățării. Sper că v-ați bucurat de acest tutorial. Vă mulțumim pentru lectură!
Accentsconagua