Share
În tutorialul de astăzi, vă vom ajuta să vă creați propriul kit UI simplu de la zero. Vom crea blocurile de bază pe care le puteți utiliza în aproape orice proiect web, inclusiv: câmpuri de text, câmpuri de focalizare, câmpuri selectate, bare de derulare, încărcătoare, casete de selectare și butoane radio. se bucura!
Crearea unui kit UI simplu este o modalitate excelentă de a vă accelera abilitățile de design când lucrați la un proiect mare. Dacă aveți o mulțime de pagini pentru a micsora, având un arsenal de elemente gata de utilizare făcute special pentru acel proiect, vă va face mai repede să vă ciocniți aceste pagini. Astăzi avem un videoclip și un tutorial scris - urmați fie unul, fie ambele!
Pentru cei dintre voi care doresc mai multă îndrumare decât videoclipul, vă ofer un tutorial complet pas cu pas. Hai să ne aruncăm!
Crearea câmpurilor de text este cea mai simplă parte a întregului proces, dar pentru că aceste elemente vor fi probabil folosite cel mai adesea, este important să le faci drept prima dată. În cazul nostru, am desenat dreptunghiuri rotunjite 300px x 30px cu o rază de 2px. Reglați-vă propriile dvs. pentru a se potrivi nevoilor dvs. Campurile mari, suculente, extra rotunjite pot fi distractive! Câmpurile cu marginile mari sunt pentru mulțimea mai serioasă.
În orice caz, creați unul perfect - adăugați un accident vascular cerebral care se potrivește cu marca dvs. (# bdd9a7 pentru demo) și duplicați stratul de două ori (Ctrl + J), mutați-l de fiecare dată.
Aceste trei straturi vor forma baza kit-ului nostru UI - ori de câte ori avem nevoie pentru a crea un nou câmp sau buton, șansele sunt bune că vom dori să începem aici, astfel încât să putem dubla aceeași înălțime de bază și spațiu.
Apoi adăugați un text pe fiecare strat. Utilizați orice font doriți, dar cel mai bine este să-l păstrați la fonturile în condiții de siguranță? mai ales cu câmpuri de formule în care înlocuirea fonturilor nu este cea mai bună opțiune. Am folosit Helvetica # 407a16, 12pt - dar puteți folosi Arial, Georgia, Times, etc.
Acum, să adăugăm o strălucire exterioară simplă în "câmpul de focalizare". Acest lucru îi va ajuta pe oameni să o identifice atunci când o utilizează. Strălucirea noastră este destul de subtilă, dar puteți să o faceți la fel de strălucitoare pe cât doriți. Observați că am adăugat și o umbre interioară foarte subtilă - este absolut opțională, dar vă arată cum să adăugați efecte subtile pentru a face câmpul să se simtă activ.
Apoi, duplicați dreptunghiul rotunjit pe care îl vom folosi pentru "meniul derulant" și mascați-l folosind instrumentul Marquee și aplicând o mască de strat. Acest lucru creează "butonul" pentru meniu, tot ce trebuie să faceți este să adăugați un gradient subtil pentru a face să se simtă mai mult ca un buton - # d9edca to # f0f9e9.
Acest pas este foarte important pentru că pentru aproape toate elementele viitoare de stoc (butoane, casete de selectare etc.) vom copia acest stil de strat și îl vom lipi peste forme goale. Ia-ți un minut pentru a-ți face perfecțiunea înainte de a trece mai departe, pentru că va seta tonul pentru întregul tau UI.
Așa cum am menționat deja, vom crea butoanele noastre utilizând același dreptunghi rotunjit de bază și copierea / lipirea stilului stratului din meniul derulant. Textul pe care îl folosim ar trebui să fie o varianta îndrăzneață a fontului folosit în câmpurile de text, doar să adăugați o umbră de umplere ușoară ("Drop Shadow", 75%, White, Screen, 1px Distance, 0 Size) text.
Pentru a crea versiunea apăsată a butonului, inversați doar gradientul selectând "Reverse" din meniul Gradient.
Săgeata în jos este creată utilizând butonul "Custom Shape" și selectând săgeata în jos din biblioteca elementelor care apar în Photoshop. De asemenea, puteți crea propriul dvs. dacă vreți? forma este total dependentă de tine.
Doar creați-vă săgeata, setați culoarea de umplere la "culoarea brandului" (a noastră este # 68b232) și aplicați o simplă Inner Shadow (opacitate 12%, distanța 2, dimensiunea 3) pentru a face să se simtă puțin încorporată. Poți să te descurci bine cu aceste setări - versiunea albastră a videoclipului îți va arăta o altă variantă.
În cele din urmă, puteți adăuga un efect de iluminare opțional utilizând o pensulă simplă de 120px (opacitate 0%) pe un strat gol. Poziționați cu atenție pensulă cu pensulă pe partea superioară a butonului - apoi mascați pensula perie peste buton (faceți o selecție a formei butonului și aplicați noua selecție ca o mască de strat peste efectul periat). Setați modul de amestecare la Soft sau Hard Light pentru a finaliza efectul.
Este posibil să fiți nevoiți să faceți puțin din acest ultim pas bazat pe culorile pe care le utilizați. Pașii vor fi întotdeauna aproximativ aceeași:
Următorul pas este foarte simplu - creați dreptunghiuri rotunjite de 12px (pătrate care trebuie să fie exact). De ce 12px? Deoarece este dimensiunea punctului generic pentru majoritatea textelor de pe internet. Puteți merge mai mare sau mai mic în funcție de dimensiunea fontului propriu.
Rețineți că copiem / adăugăm stilurile de strat de la acel buton din meniul derulant? acest lucru face lucrurile rapide și uniforme.
Același proces este valabil și pentru butoanele radio, cu excepția faptului că în acest moment creăm cercuri de 12 pixeli în loc de dreptunghiuri.
"D-Pad" este creat prin simpla dublare și rotirea săgeții din meniul derulant cu 90 de grade de câteva ori. Aceste săgeți direcționale sunt minunate când trebuie să creați un meniu de acordeon, un cursor jquery etc..
O simplă bară de încărcare ca aceasta este o modalitate excelentă de a extinde versatilitatea kitului dvs. de utilizare UI. Este posibil să nu-l utilizați tot timpul, dar vă va salva mult timp pentru cele câteva cazuri în care aveți nevoie de pronto! Bara de încărcare este compusă din câțiva pași.
Stilul de bază al fundalului este după cum urmează:
Puteți crea baza câmpului activ în câteva moduri diferite, dar iată cum a fost construit cel verde.
Apoi, vom adăuga liniile diagonale care vor fi mascate peste bara de încărcare:
Efectul de iluminare este doar un pic de bonus dacă îl doriți. Am creat-o folosind o pensulă de 120px (0% duritate), apoi am creat un nou strat și am dat clic pe mouse-ul o dată, creând o singură pată pe pagină. Apoi, am setat stilul stratului pe Soft Light și l-am setat să mascheze peste buton. Puteți face acest pas final în câteva moduri - în exemplul "Sunt simplu de a face o selecție din câmpul activ (Hold Cntrl și faceți clic pe forma) și apoi ați aplicat acea formă ca o mască de strat.
În regulă, suntem acum pe întinderea casei! Bara de derulare este destul de simplă pentru a crea, dar permiteți-mi să fac câteva indicații:
Iată fotografiile:
Un pas adesea trecute cu vederea pentru crearea unui kit UI de bază este adăugarea unor mărci de bază și a altor documentații în fișierul dvs. Sigur, ați putea adăuga astfel de lucruri într-un document text care însoțește fișierul dvs.? dar atunci oamenii ar trebui să-l deschidă. În acest fel, toate informațiile de bază (numele clientului, designerul, versiunea, tipul fișierului etc.) sunt afișate în interiorul fișierului, astfel încât nu există loc de confuzie.
În cele din urmă, puteți personaliza acest lucru în conținutul inimii dvs.? utilizați propriile culori, fonturi, stiluri de straturi etc. Adăugați elemente noi, cum ar fi etichete, meniuri derulante deschise, etc. Limita la cât de departe puteți să luați acest lucru este în totalitate la dvs., deci mergeți și nu vă faceți griji!
Accentsconagua