Share
Învățarea modului de a proiecta interfețele poate fi o călătorie durabilă, dacă trebuie să o faceți în pace. Numele meu este Tim Silva și am fost încercarea pentru a proiecta aceste tipuri de interfețe de peste 5 ani acum și am o mulțime de informații valoroase pe care să le împărtășesc pentru a accelera și a ușura procesul de învățare. Iată ce am ajuns să înțeleg despre proiectarea interfețelor detaliate, realiste și interesante: Trebuie să fii Grozav în multe zone ale Photoshop-ului bun la proiectarea interfeței. Așadar, împreună cu pașii necesari pentru a crea această interfață, în această serie voi oferi, de asemenea, cât mai multe referințe la alte tutoriale, resurse și concepte. În acest fel, puteți avea acces la unele dintre instrumentele care vă vor permite să creați interfețe complet originale folosind aceleași metode pe care le predau în colaborare cu creativitatea proprie. Să continuăm cu partea a 2-a din seria de două părți.
Această postare este Ziua 6 a Sesiunii noastre de Design Interfață. Sesiuni de creație "Ziua sesiunii 5-a sesiune"Să revizuim și să planificăm. Am ajuns atât de departe. Apoi, vom începe să completați zona ecranului. Albastrul este cel mai sigur rece culoarea de utilizat. Ca designer de interfata cu experienta, sunt inca complet indragostita de ea.
Ascundeți cele două zone interioare ale ecranului. În Partea 1, le-am etichetat "Inner" și "Inner_Screen".
Repetarea metodei predate în etapa 37 din Partea 1, creați o reflecție albă de 2-3 pixeli în partea inferioară a stratului de bază. Am folosit mai multe straturi pentru a ajunge la un rezultat cu care m-am bucurat. Utilizați instrumentul Eraser (E) cu o dimensiune a periei de 75 pixeli și o duritate de 0% pentru a curăța orice pixelare pe care s-ar putea să o întâlniți.
De aici, continuați înainte pentru a crea liniuțe neagră de 1-3 pixeli pe vârfurile și laturile formei. Partea stângă ar trebui să fie mai groasă și mai complexă, în timp ce partea dreaptă va fi mai subțire și mai simplistă din cauza sursei de lumină. Niciunul dintre următoarele efecte nu a fost creat utilizând stiluri de straturi. Totul este de la 1-3 pixeli, care mi-am mutat, ajustat și curățat manual. Am folosit în jur de 20 de straturi de mici detalii aici. După cum am explicat în pasul 49 din Partea 1, aceste tipuri de detalii "nu sunt greu de creat, ci doar nevoie de timp". Ia-ți timpul cu detaliile și potriviți aceste rezultate cât mai aproape posibil.
Apoi vom adăuga niște umbre și gradienți întunecați. Adăugați o Umbre de Drop în afara și la stânga bazei formei. În plus, puneți niște gradienți întunecați în partea de jos care vine în sus.
Ca întotdeauna, efectele mai luminoase apar după efectele mai întunecate. Utilizând aceleași metode ca și pasul 3 (de la Partea 2), adăugați niște gradienți albi la design. Repetați propozițiile a doua, a treia și a patra a pașilor 46 din Partea 1 pentru a crea puncte importante în partea stângă și în partea de sus a formei.
Acum ne putem muta pe ecranul cel mai exterior. Îndepărtați ambele straturi de bază interioară și umpleți cel mai interior unul cu o culoare albastru temporar de culoare # 38a6de.
Repetați pașii 2 până la 4 din nou pentru a crea efecte similare pe stratul de bază cel mai exterior. Observați gradientul alb la partea de jos (în afara formei), gradientele întunecate din partea de sus și de jos a bazei și periajul în colțuri. Efectele asupra acestei forme de bază vor avea cea mai lungă durată. Am folosit aproape 25 de straturi pentru a crea detaliile aici. Este nevoie de o mulțime de încercări și erori pentru a obține colțurile să se uite neted.
În timp ce același efect poate fi obținut numai cu opțiunile de amestecare, prefer să nu folosesc deloc stiluri pentru a avea control complet asupra pixelilor. Nu există niciodată un proces pas cu pas pe care să îl urmez pentru aceste tipuri de detalii. Voi continua să adăugați până sunt mulțumit de ceea ce văd. Du-te în modul pixel-împingător!
Apoi adăugați un stil de Strat Inner Glow la baza albastră. Creați un duplicat al stratului albastru al ecranului. Faceți clic dreapta pe stratul duplicat și alegeți Ștergeți stilul stratului pentru a scăpa de opțiunea de combinare a strălucirii interioare. Mergeți la Filter> Blur> Blur Gaussian. Introduceți 10 și apăsați OK. Acest lucru va crea un efect albastru în afara ecranului. Asigurați-vă că mutați acest strat neclar sub original, doar pentru a vă ajuta să păstrați totul curat mai târziu. Repetați acest pas de mai multe ori cu diferite dimensiuni Blur și moduri de amestecare. Urmăriți o strălucire frumoasă, puternică și ambientală.
Utilizați instrumentul Eraser (E) pentru a vă întoarce și a elimina toate părțile prea puternice. Asigurați-vă că eliminați cea mai mare parte a strălucirii albastre de pe dreapta , deoarece strălucirea sursei de lumină ar slăbi efectul albastru strălucitor în acea zonă.
Apoi vom adăuga un stil de Strat Inner Glow Layer la baza albastră. Creați un duplicat al stratului albastru al ecranului. Faceți clic dreapta pe stratul duplicat și alegeți "Ștergeți stilul stratului" pentru a scăpa de opțiunea de amestecare a luminii interioare. Mergeți la Filter> Blur> Blur Gaussian. Introduceți 10 și apăsați OK. Acest lucru va crea un efect albastru în afara ecranului. Asigurați-vă că mutați acest strat neclar sub original, doar pentru a vă ajuta să păstrați totul curat mai târziu.
Cea mai sigură modalitate de a adăuga adâncimea într-un ecran este să adăugați un gradient întunecat subtil de jos în sus. Folosind instrumentul Gradient (G), potriviți rezultatul meu cât mai aproape posibil. Rețineți că am folosit un Gradient Linear care a fost perfect vertical (pentru că am ținut cheia de schimb), nu un Gradient radial ca înainte. Experimentați cu Lumina slaba și Acoperire Moduri de amestecare. De asemenea, m-am întors și am făcut Stunica interioară pentru stratul principal albastru 200x mai puternic. De multe ori mă întorc și ajustează setările stilului stratului. De fapt, cea mai mare parte a procesului de curățare / revizuire este alcătuită din ajustări foarte mici ale setărilor.
Ecranul ar trebui să fie în continuare plat. În trecut, l-aș lăsa aici și să încerc să-l compensez cu alte detalii. Din fericire, comunitatea de interfață are destui membri care au grijă. Am dat peste o nouă abordare care sa dovedit a fi atât eficientă, cât și fructuoasă. Lance Thackeray, pe care l-am menționat în Partea 1, a făcut mai multe orbe și ecrane cu acest aspect de bază. Mai întâi, Completați un cerc pe un strat nou în mijlocul ecranului, care are aproximativ această dimensiune. Puteți să o umpleți cu orice culoare, deoarece veți seta întotdeauna stratul de umplere la 0%.
Setați umplerea stratului la 0%. Deschideți stilurile stratului și adăugați o strălucire interioară cu următoarele setări.
Duplicați stratul și transformați stratul pe orizontală (Command + T) la aproximativ 85% din lățimea inițială. Apoi deschideți opțiunile Inner Glow și completați următoarele date.
Apoi trebuie să creăm un inel interior. Acest lucru adaugă la iluzia profunzimii, deoarece adaugă o profunzime Sfârșit a ecranului, care este puțin mai întunecată. În primul rând, trebuie să creăm un inel puternic, exagerat. Puteți folosi instrumentul perie sau instrumentul de marcare eliptică pentru acest lucru. Mai întâi, creați o formă de bază și apoi utilizați Filtrul Blur din nou pentru a bloca marginile. Odată ce ai un inel de potrivire a mea, reduce Opacitatea la aproximativ 10%. Vrei să nu fie chiar acolo. Atunci este cea mai eficientă. De asemenea, am făcut ecranul un pic mai întunecat pentru a scoate la iveală bogăția culorilor și a declivelor.
Acum vine una dintre piesele mele preferate - cele mai importante. Folosind metoda pe care am învățat-o pentru evidențierea laterală a pasului 46, creați un punct de atracție puternic în partea superioară a ecranului albastru. De asemenea, adăugați o reflecție de 3-4 pixeli în partea de sus, repetând din nou pasul 37 infamat. Faceți marginea superioară și mai puternică. Gradienții mici în interiorul acestor 4 pixeli verticali pot fi foarte eficienți. Am folosit 8 straturi pentru a-mi obține rezultatele.
Îmi place să adaug niște pensule pe interfețele mele. Acesta aduce într-adevăr aspectul până în prezent. Zane Bien, aka z-design, a realizat o colecție masivă de perii avansate de tehnologie. Z-Design Tech Seturi de perii: 1 | 2 | 3 | 4. Aruncați o privire prin ele și alegeți ceva ce vă place. Am ales unul din cel de-al doilea set și mi-am plasat sigla personală în interiorul zonei goale în mijloc pentru un rezultat uimitor.
Ar fi corect să ne oprim aici, deoarece este în esență finalizată. Acum, aș dori să iau această extra mile și să îmbunătățim interfața de bază pe care am creat-o până acum. Tot ceea ce ați lucrat ar trebui să fie bine organizat într-un dosar numit "Interfață". Vreau să duplicați acest dosar și să aplatizați (Command + E) duplicatul.
NOTĂ: În niciun caz, nu trebuie niciodată să ștergeți sau să vă aplatizați dosarul original.
Până în prezent, văd oameni care posteau plângeri precum "Oops, am pierdut acea parte a designului" sau "Acea parte a fost aplatizată, aș vrea să mă întorc și să o schimb." Salvează-te de acest coșmar și salvați dosarul original. Mergeți cu un pas mai departe și creați un fișier sursă duplicat înainte de a vă deplasa la următoarea parte. Duplicarea fișierelor sursă după fiecare 2 ore de lucru. Eu adaug "_01", "_02", etc la nume de fisiere pentru a-mi diminua sansele de a pierde cele mai recente actualizari. Am pierdut fișierele sursă importante în două dintre cele mai mari proiecte ale mele vreodată. Unul din cauza unui black out care mi-a corupt fișierele open source și altul dintr-un eșec complet de hard disk. Nu risca. Înapoi fișierele acum. sunt serios.
Redenumiți stratul nou duplicat și aplatizat pe "plat". Plasați-l într-un folder nou denumit "Interface_80%". Apăsați Command + T pentru a-l transforma la 80% atât vertical cât și orizontal. Apăsați Enter când ați terminat.
Duplicați acest strat în jos și mergeți la Filter> Sharpen> Sharpen. Acest lucru va face interfața mult mai clare.
Prindeți instrumentul Eraser (E) și curățați toate părțile din interfața care este de asemenea clare și care apar chiar pixelate. Utilizați setările Eraser personalizate pentru a curăța părțile pe care doriți să le curățați. Luați-vă timp în această etapă, ar putea dura cu ușurință până la 15 minute de mărire și ștergere la o vedere de aproape.
Așezați-vă straturile ascuțite și nestrămutate într-una. Adăugați un Shadow Drop și un Glow Inner cu următoarele setări.
Folosiți instrumentele Dodge și Burn (O) pentru a adăuga luminozitatea și întunericul la părțile din interfața dvs. pe care simțiți că trebuie să le atingeți. Din nou, ca și în Pasul 18 [Partea 2], luați-vă timpul cu privire la acest lucru. Am luat aproximativ 15 minute pentru a lucra la asta.
Acum permiteți să acordați mai multă atenție ecranului. Încărcați baza ecranului interior și, din meniu, accesați Selectare> Transformare selecție. Introduceți 80% atât pentru înălțime, cât și pentru lățime și salvați această nouă selecție ca "Inner_Screen_base_80%", astfel încât să puteți să-l prindeți din nou mai târziu, dacă este necesar. Creați un nou strat și completați selecția "Inner_Screen_base_80%" cu negru. Setați umplerea stratului la 0% și adăugați o strălucire interioară de 15 pixeli. Duplicați acest strat și schimbați stratul interior al noului strat pentru a suprapune. Experimentați diferite setări pentru a obține un rezultat curat. Refaceți evidențiarea dacă trebuie să încărcați selecția și să o creați manual. Culorile acelei culori trebuie să rămână clare și vizibile.
Folosind aceste linii pe care le-am furnizat pentru dvs., completați o grilă deasupra ecranului, ceea ce face ca aceasta să pară mai tehnică și computerizată. Acest lucru este văzut pe calculatoare și alte dispozitive portabile, așa că am crezut că ar fi o atingere drăguță. Am folosit instrumentul Eraser (E) pentru a curăța centrul grilajului în care era sigla și, de asemenea, coborâm opacitatea stratului la aproximativ 10%. Utilizați mai multe straturi cu mai multe moduri de amestecare, dacă este necesar.
Interfața noastră începe să dezvolte caracterul. Avem nevoie de mai multe detalii. Adăugați niște șuruburi micro și piulițe diferitelor cochilii de suprafață. Puteți descărca un șurub de bază, transparent, aici. Deschideți fișierul în Photoshop, copiați conținutul acestuia și lipiți-l în celălalt document. Setați straturile de șuruburi la Acoperire și / sau Lumina slaba și modificați stratul Opacities în funcție de tipul de fundal pe care stau. Incepand cu doar partea stângă, duplicarea și localizarea șuruburilor pe toată interfața. Odată ce sunteți mulțumit de partea stângă, duplicați-i și răsuciți-i pe toți pentru partea dreaptă. De asemenea, aruncați un titlu sau un nume frumos acolo cu un font potrivit.
Așezați totul până la acest punct într-un dosar duplicat. Ascundeți dosarul original și continuați să lucrați cu acesta nou. Faceți clic pe butonul de comandă pe pictograma Layer pentru a afișa selecția. În partea inferioară a panoului Straturi veți găsi un buton numit "Creați un nou strat de umplere sau ajustare". Faceți clic pe această opțiune până când apare o nouă listă de opțiuni. Mutați mouse-ul în "Vibrance" și eliberați clicul. Va apărea o nouă casetă de dialog. Setați vibrația la aproximativ 15 și Saturația la 10 înainte de a închide caseta. Albastrul tău ar trebui să apară chiar mai bogat acum.
Încă o dată, treceți prin interfața dvs. cu ajutorul instrumentelor Dodge și Burn (O) pe setările personalizate până când sunteți mulțumit de contrastul designului de interfață finalizat.
Sper că ați găsit acest tutorial pentru a fi util. Nu a fost un set ușor de concepte de învățat, și sper că vă oferă suficient pentru a vă inspira cel puțin să aflați mai multe despre designul de interfață realistă, realistă. Nu prea sunt prea mulți, chiar dacă genul nostru se extinde în mod exponențial.
În plus, aș dori să clarific opinia mea despre diferența dintre artă și design. Arta este comunicarea sub orice formă și este fără limite. Designul are restricții și este vorba despre modul în care utilizatorii interacționează și experimentează ceva.
Un player de interfață cu butoane care funcționează ca o piele reală este a proiecta. Cu toate acestea, dacă o interfață nu are butoane sau agenți interactivi și există doar ca o imagine statică fără interactivitate, este un design psuedo. Când această linie devine neclară, este mult mai probabil să fie artă.
Sunt fericit cu termenul de "design de interfață fantezie", deoarece este suficient de ambiguă pentru a acoperi totul cu un singur nume. Am încercat să înțeleg diferențele dintre design și artă de mai mulți ani, iar filozofia mea actuală este foarte puternică în mintea mea. Dacă aveți gânduri, critici sau opinii despre tutorialele, tehnicile și ideile mele, vă rugăm să le partajați mai jos cu un comentariu.
Accentsconagua