Share
Ce veți creaSchița, realizată de oamenii buni de la Boemian Coding, este un program excelent pentru designul de interfață. Acest tutorial pentru începători vă va prezenta proiectarea cu Sketch. Nu veți avea nevoie de experiență anterioară cu programul, doar puțin timp liber pentru a învăța ceva nou.
Vă voi arăta cum să configurați o placă grafică simplă, cum să creați forme utilizând instrumentele de bază, operațiile booleene, panoul Inspector și lista de straturi. Vom vedea cum să schimbăm proprietățile, să organizăm straturi, să importăm imagini și alte aspecte utile ale fluxului de lucru al designerului Sketch.
Să începem prin crearea unui nou document. Ai deschis deja schița 3? Bine, asta e tot ce trebuie să faci! Lasă-mă să explic; în mod implicit, Sketch vă oferă o pânză infinită pe care să lucrați. Puteți începe să creați elemente fără teama de a scăpa de spațiu.
Să mergem cu un pas mai departe și să creăm un tablou de artă. Artboard-urile vă permit să creați cadre fixe pe panza infinită a lui Sketch.
Pentru a crea o nouă placă de artă, mergeți la Inserați> Artboard (A) din bara de instrumente sau din meniul principal.Faceți clic și trageți în interiorul panzei Sketch. Veți observa cum schița afișează valorile de lățime și înălțime în timp ce faceți acest lucru. Creeaza o 600 x 800 pixeli planșă de lucru.
Bacsis: Putem crea cât mai multe tablouri de artă, după cum este necesar. De asemenea, putem schimba numele tabloului de bord pe Listă de straturi în stânga ecranului sau modificați poziția și dimensiunile acestuia utilizând Inspector panoul din dreapta. Ștergeți tabloul de bord prin apăsarea butonului supr sau Șterge atunci când tabloul de bord este selectat.
De exemplu, hai să folosim Inspector pentru a schimba poziția de placă grafică X = 0 Y = 0. Alternativ, poți trage cu ușurință tabloul de bord în poziția respectivă.
Bacsis: Mergi la Afișați> Afișați grilă pentru a activa grila implicită care vine cu Sketch. Acesta va ajuta la poziționarea obiectelor exact cum le doriți.
Acum vom schimba culoarea artboard-ului. Acest lucru vă va ajuta în următorii pași. Selectați tabloul dvs. de arhitectură și aruncați o privire la Inspector panou. Verifică Culoare de fundal și faceți clic pe specimenul de culoare spre dreapta. Va apărea un selector de culori care ne arată diferite opțiuni de culoare și proprietăți. Alege culoarea dorită. Nu contează culoarea pe care o alegeți, dar în acest caz vom opta pentru un gri cald.
Tabloul dvs. de artă este făcut și sunteți gata să începeți cu aspectul de bază!
Mergi la Inserare> Formă> Dreptunghi (R). Creeaza o 360 x 500 pixeli dreptunghi pe tabloul de artă. Ca și în cazul creării de tablouri de artă, puteți desena un dreptunghi aleator și puteți ajusta proprietățile sale prin Inspector panou. Afișați grila pentru a face lucrurile mai ușoare!
După selectarea dreptunghiului, aruncați o privire la Inspector panou. Eliminați marginea formei debifând-o. Apasă pe Completati probați și setați-o alb. Putem seta colțuri rotunjite în Inspector și panoul; mută Rază glisați spre dreapta sau spre tip 10 în câmpul de introducere.
Creeaza o 40 x 40 px folosind cercul Inserare> Formă> Oval. Amintiți-vă, puteți desena un cerc aleator și utilizați Inspector pentru a-și schimba proprietățile. Acum, mutați-l în partea superioară a dreptunghiului. Folosește Instrument de zoom pe Bara de instrumente dacă aveți nevoie să măriți imaginea.
Creați un alt cerc, de data aceasta 20 x 20 px. Aliniați-l în primul cerc, în mijloc. Când îl mutați, veți vedea niște ghiduri inteligente pentru a vă ajuta să aliniați obiectele.
De fapt, pentru a vă asigura că conținutul dvs. este aliniat corect, țineți apăsat opțiune (⌥) cheie de pe tastatură. Schița vă va ajuta să obțineți măsurători precise ale pixelilor care arată distanțele dintre obiecte. De exemplu:
Acesta este un ajutor atât de mare! Mulțumesc, schiță!
Acum ne vom transforma cele două obiecte cerc într-un singur "inel". Selectați ambele cercuri direct sau prin Listă de straturi. Mergeți la Bara de instrumente și faceți clic pe scãdere.
Acum avem o nouă formă complexă:
Selectați acest obiect nou și selectați și dreptunghiul. Acum faceți clic pe Uniune pentru a obține forma finală.
Ce am făcut aici? Când avem nevoie de o formă nestandard, trebuie să o creăm singuri. L-am putea desena cu instrumentul stiloului, dar adesea o forma complexa este usor de descompus in forme mai standard. Putem folosi operații booleene pentru asta. Schița vine cu uniune, scădea, intersecta și diferență operații booleene pentru a obține diferite forme complexe făcute de subpați.
Aceste opțiuni sunt non-distructive astfel încât să putem schimba cu ușurință proprietățile substraturilor (forme de bază) prin selectarea acestora pe Lista de straturi. Când aveți o formă cu mai multe căi subpante în panza dvs., aruncați o privire la lista de straturi. Veți vedea o săgeată de dezvăluire din stânga și, dacă extindeți, veți vedea o listă cu subcale pentru forma. În partea dreaptă puteți alege o operație booleană pentru fiecare subpath individual dacă doriți să o schimbați.
Forma noastră de bază este aproape finalizată! Asigurați-vă că forma dvs. rămâne selectată și căutați Inspector panou, selectați umbre și setați proprietățile sale după cum urmează: Culoare> R = 38 G = 30 B = 10 Alfa = 50, X = 0, Y = 20, Blur = 20 și Spread = 0. În final, forma ta ar trebui să arate astfel:
Un formular de autentificare nu ar fi nimic fără câmpuri de intrare și butoane, așa că să facem câteva!
Bacsis: Puteți bloca forma principală pentru a evita greșelile și mișcările neașteptate. Selectați-l și mergeți la Aranjați> Blocare strat. Un mic blocaj din lista de straturi vă informează ce obiecte sunt blocate.
Utilizarea Instrumentul dreptunghiular (R), creeaza o 280 x 50 pixeli forma, scoateți marginea, setați culoarea de umplere la R = 239 G = 87 B = 46, Raza = 2 și plasați-o așa cum se arată în imaginea următoare.
Creați un altul 280 x 70 pixeli forma, umple-l cu alb, Raza = 2, a stabilit grosimea marginii la 1 și culoarea frontală la R = 234 G = 234 B = 234. Mutați-o în partea de sus a dreptunghiului portocaliu, trăgând-o cu 10 pixeli în sus. Duplicați această formă (Control-D), selectați copia și glisați-o pe alta 80px sus.
Acum creați un pic 20 x 20 px folosind pătrat Instrumentul dreptunghiular (R). Umpleți-l cu alb și setați Raza = 2 , grosimea marginii=1 și culoarea frontală la R = 234 G = 234 B = 234. Mișcă-l 10px sub dreptunghiul portocaliu. Tabloul dvs. de artă ar trebui să arate astfel:
Bine, acum ne vom bucura de forma de autentificare cu câteva elemente de text pentru etichete și substituenți. Selectează Instrument de text (T) și apoi puteți să faceți clic oriunde în panza pentru a insera stratul de text. Veți vedea textul adăugat și selectat astfel încât să puteți începe să tastați imediat. Veți observa că Inspectorul sa schimbat pentru a vă arăta toate proprietățile care se aplică textului.
Bacsis: De asemenea, puteți face clic și trageți pentru a crea o casetă de text cu o dimensiune fixă. Când textul devine prea mare pentru a se încadra în interiorul cutiei, acesta va redimensiona în jos, spre deosebire de o casetă de text normală care crește lățimea sa pentru a se potrivi conținutului.
Adăugați textul "USERNAME" și accesați Inspector pentru a seta proprietățile. Folosește Montserrat font, Greutate = Regular, Dimensiune = 11, Spațiere = 1, Culoare> R = 204 G = 204 B = 204.
Selectați din nou Instrumentul tip (T) și adăugați textul de intrare "Armando" (sau orice doriți). De această dată utilizați aceste valori pentru a seta proprietățile: Montserrat font, Greutate = Regular, Dimensiune = 24, Spațiere = 0, Culoare> R = 113 G = 87 B = 44. Selectați ambele piese de text și plasați-le după cum se arată mai jos:
Acest lucru sortează locația noastră și textul de intrare pentru primul câmp. Pentru a doua, duplicați straturile de text și deplasați-le peste cel de-al doilea dreptunghi 80px jos. Modificați conținutul textului la "PASSWORD" și "*******".
Adăugați câteva straturi noi de text și utilizați atributele după cum se arată mai jos. Vei avea nevoie Deschideți fontul Sans.
Veți observa că link-ul "Ați uitat parola" este subliniat. Pentru a obține acest efect, faceți clic pe Butonul pentru opțiunile de text pentru a descoperi efecte de decorare. Alegeți al doilea, în timp ce se selectează stratul de text.
Acum, rezultatul:
În acest moment ar trebui să aruncăm o privire la lista de straturi. Ar putea fi o idee bună să începeți organizarea și redenumirea acestora dreptunghi forme sau pur și simplu elemente de grupare. Redenumiți obiectele făcând dublu clic pe ele sau făcând clic dreapta și selectând Redenumiți opțiune. Pentru a crea un grup de straturi, alegeți unul sau mai multe straturi, apoi faceți clic pe grup pictograma în Bara de instrumente. De asemenea, puteți trage obiecte între grupuri în lista de straturi așa cum v-ați aștepta.
Obiectivul principal este de a schimba o listă de straturi murdare în ceva mai elegant și mai organizat. Luați în considerare, nu numai în timp ce urmați acest tutorial, dar și în fiecare proiect cu care sunteți implicat.
Am creat deja elementele de care avem nevoie în caseta de autentificare. Este timpul să adăugați un logotip.
Deschide logo_icon.svg Am oferit ca atașament la acest tutorial. Acum, concentrați-vă pe panoul listei de straturi. Veți vedea cum a fost realizată pictograma folosind diferite căi pe care le putem edita cu ușurință.
Utilizarea Instrumentul dreptunghiular (R), creeaza o 30 x 60 px formați-o și plasați-o așa cum se arată în imaginea următoare. Nu este necesar să o plasezi 100% perfect în acest moment. Rețineți că puteți utiliza grila și opțiune (⌥) pe tastatură atunci când vă mutați. În acest fel, Sketch vă va arăta distanțe precise.
Acum pe Lista de straturi, trageți stratul de cale în grupul "Shape". Pune-o pe partea de sus. Vei obține o nouă formă compusă făcând asta. Aceasta este puterea operațiilor booleene și a vectorilor în schema!
Îți aduci aminte când am vorbit despre acele mici icoane în partea dreaptă a subpaths? Putem alege diferite operații booleene pentru fiecare subpath individual. Deci, să schimbăm primul la scãdere iar al doilea la Diferență.
Pasul ușor. Asigurați-vă că noua dvs. compoziție este încă selectată. Mergeți la Layer> Căi> Flatten. În acest fel, veți fi pierdut subpaths și capabilitățile lor de editare, dar următorul pas va fi mai ușor acum.
Păstrați-vă forma selectată. Mergeți la Bara de instrumente și faceți clic pe Editați | × icon. Veți observa unele modificări la Inspector panou și forma în sine. Selectați toate punctele vector prin glisarea pe panza.
Concentrați-vă pe Inspector panou și set cornere la 5. Clic Umpleți to dezvălui fereastra de opțiuni și selectează al doilea tip de umplere, Gradient liniar. Veți vedea două puncte conectate printr-o linie care suprapune stratul. Fiecare punct de pe linie reprezintă o oprire a culorii de-a lungul gradientului.
Pentru a schimba culoarea uneia dintre opriri, faceți clic pe ea în panza. Veți vedea că selectorul de culori din inspector actualizează culoarea acelui stop. Alegeți o nouă valoare în acest selector de culori și veți vedea rezultatul. Știm că putem să ajustăm prima culoare R = 245 G = 166 B = 35 iar al doilea la R = 239 G = 87 B = 46. Puteți schimba și culorile direct pe selectorul de culori.
Aceasta este forma noastră finală:
Copiați forma și inserați-o în formularul de autentificare.
Logoul dvs. este aproape finalizat, deci adăugați acum un text generic. Tastați tot ceea ce doriți, dar pentru acest tutorial am folosit "myapp" și următoarea poziție și proprietăți:
Formularul de conectare a fost terminat!
Schița ne permite să lucrăm cu imagini bitmap, precum și cu obiecte vectoriale. Pentru fundal voi selecta o imagine de la Unsplash. Awesome fotografie acolo! Îl voi alege pe cel făcut de Nick West.
Acum du-te înapoi la documentul tău. Selectați tabloul dvs. de artă pe Lista de straturi panou și mergeți la Inserați> Imagine pentru a selecta fotografia. Avertisment: această imagine este imensă! O să-l diminuăm puțin, mergând la Inspector panou și modificarea dimensiunilor sale la ceva mai ușor de manevrat 1280 x 876px. Poziţie la X = 0 Y = 0 și asigurați-vă că esteîn partea de jos a listei de straturi.
Bacsis: Dacă importați imagini în timp ce păstrați o placă grafică selectată, imaginea va fi mascată automat folosind dimensiunile tabloului de bord. Mutați stratul în afara grupului de tabloul de artă pentru al demasca. Aflați mai multe despre mascarea obiectelor în documentația oficială.
În Sketch, putem schimba culorile unei imagini existente folosind Reglarea culorilor panou situat în Inspector. Putem schimba saturația, luminozitatea și contrastul. A stabilit Saturare la 0 și Contrast la 1,9.
Acum creați un 600 x 800 pixeli folosind dreptunghi Inserare> Formă> Dreptunghi (R). Plasați-l la X= 0 Y = 0. Pe Lista de straturi mutați stratul de formă peste stratul de imagine. Duplicați-l și setați proprietățile dreptunghiurilor după cum urmează: pentru primul set de dreptunghi Opacitate = 100%, Amestecare = Multiplicare, Culoare> R = 173 G = 166 B = 152. Pentru cel de-al doilea (chiar deasupra primului) setat Opacitate = 50%, Amestecare = Normal, Culoare> R = 173 G = 166 B = 152.
Iată cum ar trebui să arate.
Sper că v-ați bucurat de acest tutorial ...
Deoarece creați un element UI, adăugarea unor detalii suplimentare la formularul dvs. de conectare ar putea fi foarte util, nu credeți? Interfețele formate au multe aspecte; stări diferite și feedback. Toate tehnicile pe care le-am acoperit în timpul acestui tutorial vă vor înarmat cu abilitățile de a face unele elemente suplimentare, cum ar fi:
Crezi că o poți face? Dacă rămâneți blocat sau trebuie să mă întrebi ceva, trebuie doar să lăsați un comentariu sau să mă găsești pe Twitter. Aștept cu nerăbdare să văd cum te descurci!
Accentsconagua