Share
Ce veți creaAcest tutorial vă va arăta cum să organizați un ghid de stil folosind Sketch. În plus, vă va învăța câteva aptitudini de bază pentru utilizarea schiței în alte situații. Vom trece peste tot, de la crearea tipografiei, folosind tipurile de grilă asortate, la cele mai bune practici pentru utilizarea "simbolurilor" și a "stilurilor comune".
Setarea stilurilor de tip reutilizabile în Sketch vă va economisi timp. Cu instrumentul de text selectat, veți vedea o casetă mică în partea dreaptă a aplicației, care vă permite să setați tot felul de stiluri de tip, cum ar fi familia de caractere, greutatea fontului și chiar distanța dintre caractere.
Să vedem cum putem să le folosim în propriul document al ghidului de stil.
De fiecare dată când lucrez cu tipografie, îmi place să folosesc o copie reală (spre deosebire de copia generică de umplutură). Cred că acest lucru face ca experiența de proiectare să fie mai ușoară și oferă rezultatului final mai mult context și voce autentică.
Începeți cu diferitele tipuri de text pe care le va avea designul. În acest dosar avem patru titluri, nu șase, deoarece nu avem nevoie de atât de multe.
Notă: Fiecare dintre acestea este un obiect text separat.
Este recomandabil să puneți straturile în ordinea corectăPrimul element care urmează a fi proiectat este subtitlul, care merge împreună cu H1, dar mai mult despre asta mai târziu. Schița nu are o setare pentru a dicta caracterul "caz", așa că, pentru a obține subtitlul să fie majuscule trebuie să-l introduc ca atare manual.
Faceți acest lucru acolo unde este relevant pentru fiecare element de text pe care îl aveți. Nu vă faceți griji despre distanțarea pe tabloul de bord, dar vom trece mai târziu.
Puteți crea stiluri de text reutilizabile în două moduri. Mai întâi, selectați un text cu stilul dorit, apoi faceți clic pe Nu există stil text deasupra setărilor de tip din dreapta. Apoi, selectați Creați stilul textului nou de la oprirea în jos.
Notă: Pentru a transfera aceste stiluri în alte fișierele copiază și inserați obiectele text dorite, iar stilurile vor fi transferate automat.
Cea de-a doua modalitate de a crea un stil text în Sketch este să creați noul stil de text în meniul derulant, așa cum ați văzut mai sus, apoi să adăugați stilul acelui stil. Nu contează care este prima. Ce contează este că înțelegeți că orice modificare a stilului unui stil de text va afecta toate celelalte elemente de text care utilizează stilul respectiv. Prin urmare, dacă aș schimba culoarea titlului Mini, ar reflecta această schimbare pentru fiecare element.
Nu există nicio modalitate ușoară de a regla stilul pentru diferite dimensiuni ale ecranului. Activitatea mea curentă este de a crea stiluri separate de text pentru ecrane mobile în plus față de stilurile desktop.
Există trei referințe pentru măsurători în Sketch: grilă, aspect și riglă. Să trecem cu toții pe toți trei și să vedem cum ar trebui folosiți. Cu asta, vom vorbi despre folosirea acestora pentru a configura aspectul paginii.
Pentru a comuta la vizualizarea riglei, apăsați ctrl + R (usor de amintit). Liniștii nu ar trebui folosiți ca principal forma de grilă în Sketch, celelalte două opțiuni sunt mult mai potrivite pentru aceasta. Utilizați rigla pentru a alinia lucrurile sau pentru a verifica alinierea dublă ca în imaginea de mai jos.
Similar cu rigla, pentru a comuta vizualizarea grilei apăsați ctrl + G. Grilă este un sistem de pătrate pe care le puteți ajusta partea. Le folosesc pentru aranjamente care nu țin neapărat la un stil tipic centrat pe pagină web. Lucrul grozav despre grila din Sketch este că acoperă întreaga placă de artă (dacă creșteți dimensiunea tabloului de bord, grila va crește).
Puteți seta dimensiunea unităților Grid pentru a fi orice. De asemenea, puteți evidenția un set de rânduri, implicit la fiecare 10.
Pentru a comuta aspectul pe care îl apăsați (ghiciți) ctrl + L. Această atingere este mult mai complicată în ceea ce privește toate punctele de date diferite pe care trebuie să le oferiți, dar vă oferă o grilă de layout perfect personalizată; perfect pentru proiectarea de site-uri web!
Rețeaua noastră se bazează pe unități de 30 de pixeli, astfel încât toate numerele pe care le vedeți în ecranul de mai jos reflectă acest lucru. Odată ce știți ce este grila dvs., introduceți-o în setări de schemă.
Dacă nu știți ce ar trebui să fie grilă, utilizați setări de schemă pentru a juca în jur - păstrează proporțiile și recalculează totul pentru tine. Spune, de exemplu, că vreau ca aspectul meu să folosească unsprezece coloane în loc de doisprezece, dar să păstreze încă lățimea totală. Dacă scade numărul de coloane, schița îmi va da o lățime de coloană și jgheaburi actualizate. Jucați în jur pentru a vedea ce se întâmplă.
Partea inferioară cu grila în Sketch este că nu poți avea o rețea nouă pentru tablouri de artă noi. Poate că e un lucru bun, dar nu am cum să muncesc. Dacă am două placi de artă unul lângă altul, dintre care unul este pentru desktop și celălalt pentru mobil, este imposibil să lucrezi la ele în același timp. Aici e locul Pagini veni la îndemână. Daca ai Listă de straturi vezi deschis, puteți vedea la început ceva numit Pagini.
Paginile sunt foarte utile, deoarece permit un strat suplimentar de proiectare într-un singur document. Puteți schimba Grid și Layout în pagini și aceștia vor rămâne aceiași numai în acea pagină.
Este posibil să fi observat în capturile de ecran că tipografia mea nu este aliniată la liniile de rețea. Având linii de rețea nu înseamnă că lucrurile care au fost anterior acolo se va alinia în mod magic. Ori de câte ori modificați plasarea rețelelor dvs., va trebui să vă aliniați elementele înapoi la ele. Tipografia este diferită deoarece nu începe sau nu se termină în cazul în care suprafața întregului element este. Puteți plasa linia de bază a tipografiei, oricum doriți în legătură cu grila. Depinde de tine. Am pus-o pe linii. Așadar, permiteți-mi să vă realiniază.
După cum puteți vedea, paragraful mobil nu se aliniază; înălțimea liniei este de 24 de pixeli. Prin urmare, are nevoie de propria pagină și de aspectul rețelei. Dar, în scopul acestei viziuni, ea poate rămâne nealiniată.
Să aruncăm o privire asupra modului de salvare a culorilor în Sketch, astfel încât să le reutilizați.
Să presupunem că aș dori să adaug un rând de purpuriu ca accente în acest design. Voi copia și lipi rândul verde și voi alege un violet. Pentru a face lucrurile mult mai repede, am hotărât asupra nuanțelor mai deschise de violet, schimbând opacitatea culorilor originale la 70%, 50% și, respectiv, 20%.
Ce faceți în continuare pentru a obține culoarea este folosirea instrumentului Color Eyedrop Tool și selectați noua nuanță. Nu uitați să schimbați opacitatea înapoi la 100%.
Apoi, utilizați micul + în partea de jos a swatches culoare pentru a salva culoarea paletei Sketch. Diferența dintre Culorile globale și Culorile documentelor așa cum sugerează numele lor, culorile globale vor fi salvate în Sketch pentru reutilizare în toate celelalte fișiere Sketch pe care le deschideți, în timp ce culorile documentelor rămân numai în acel document specific.
Am o grămadă de elemente UI simple în fișierul Sketch.
Le păstrez aici pentru a putea copia rapid cele de care am nevoie în noile modele pe care lucrez. Vă voi arăta cum să creați stiluri și simboluri comune pentru reutilizare.
Stilurile comune sunt stilurile pe care le puteți reutiliza din nou. De exemplu, intrarea activă / focalizată este formată din trei componente, textul etichetei, textul de intrare și caseta de introducere.
Dreptunghiul are un stil specific, are un fundal alb, o singură margine albastră pixel și umbra interioară albastru deschis. Este ceva care este reutilizabil dacă lucrați la mai multe intrări.
În partea dreaptă, deasupra tuturor stilului pe care tocmai l-am descris, puteți vedea textul care spune Niciun stil partajat. Puteți salva aceste caracteristici de stil în același mod în care am salvat stilul de text pentru titlurile noastre. Salvați-l și reutilizați-l cât doriți. Dar, vă rugăm să rețineți că dacă schimbați un aspect al stilului salvat în viitor, acesta va afecta fiecare element care împărtășește acel stil.
Eu folosesc această caracteristică pentru o mulțime de stiluri diferite, cum ar fi starea de intrare a erorilor și chiar și cele trei butoane (albastru, negru și cel alb).
Simbolurile reprezintă o trăsătură extraordinară a Sketch-ului pe care o folosesc foarte mult. Simbolurile sunt recunoscute de folderul lor purpuriu în Listă de straturi pe care nu am deschis în capturile de ecran. Pentru a comuta la vizualizare, mergeți la Vizualizare> Afișare listă straturi sau apăsați Comandă + Opțiune + 1.
Să facem intrarea pe care am folosit-o în Stilurile împărtășite, ca și exemplu pentru simbol. În primul rând, să facem un grup. Pentru a face asta apăsați Comandă + G.
Pentru a crea un Simbol, puteți utiliza pictograma din partea stângă sus a aplicației Sketch. De asemenea, puteți utiliza aceeași zonă pentru salvarea unui stil comun pentru a salva un grup și ca simbol. Odată ce faceți acest lucru, numiți-l.
Un simbol diferă de celălalt stil de reutilizare prin faptul că este un grup de elemente pe care le puteți actualiza peste tot în loc de un singur stil, cum ar fi culoarea dreptunghiului de intrare sau stilul de text al etichetei. Simbolurile păstrează spațierea și dimensionarea acestor elemente pe măsură ce le reutilizați.
O altă caracteristică interesantă a simbolurilor este aceea că puteți selecta ce element de text doriți să îl reutilizați, adică textul real rămâne același sau puteți exclude valoarea textului unui element de text selectat. Aceasta este o caracteristică uimitoare pe care o iubesc. Ar fi inutil să-mi refolosesc simbolurile de intrare dacă nu puteam redenumi unul la "Prenume" și celălalt la "Nume de familie".
Aceste caracteristici vă vor ajuta să creați propriile ghidaje de stil în cadrul Sketch. Descărcați fișierele sursă și jucați cu ceea ce a fost construit. Aștept cu nerăbdare să vă aud sugestiile pentru îmbunătățiri! Și dacă căutați mai multă inspirație pentru lucrul cu Sketch, aruncați o privire la categoria de fișiere Sketch de pe Envato Market.
Accentsconagua