Cum se adaugă date în schițele dvs.

Sep 13, 2025
să

Designul ecranului a venit un drum lung în ultimii ani. Heck, nu am spus nici măcar "designul ecranului" acum câțiva ani. Ca scoruri de designeri grafici și ilustratori evoluează pentru a aborda designul ecranului, de asemenea, trebuie să avem setul de instrumente. Nu mai creăm arta statică, singular-specul de artă - planificăm sisteme de construcții, respiratorii care trebuie să funcționeze într-o varietate de medii.

Acest nou set de cerințe a dat naștere unei explozii de instrumente flexibile și concentrate. Favoritul meu de la Bunch este schița, o stea în creștere de la echipa la codificarea Boemia.

Sketch mă lasă să lucrez mai repede decât am visat vreodată, toate în timp ce mă eliberez pentru a face ceea ce fac cel mai bine: design. Este suficient de ușor să prototipe rapid și suficient de puternic pentru a merge mai mare fidelitate când sunt gata. Una dintre cele mai mari puncte forte ale lui Sketch este comunitatea sa în creștere, care a creat o selecție imensă de plug-uri care extinde schița în orice direcție pe care o doriți.

Craft , din laboratoarele de invizie, își propune să alimenteze fluxul de lucru de proiectare a viitorului. Acesta oferă un set tot mai mare de instrumente, toate construite pentru a economisi timp și a adăuga realism în timp ce proiectați. Timpul vine de la nenumărate pași salvați (copie și lipire la revedere!) Și realismul provine de la acces rapid la date și conținut reale (Goodye Lorem Ipsum!).

În această lecție, vom arunca o privire la utilizarea a trei instrumente cheie din meserie: fotografii, tip și duplicat, pentru a crea un design complet și realist pentru o listă de contacte.

01. Configurați-vă tara de depozitare

Să începem prin crearea unui nou document în schiță și crearea unui tablă de artă pentru a lucra înăuntru. Într-un document proaspăt, lovit Inserați & gt; Taboard. sau pur și simplu A pentru a activa instrumentul de tablă.

În panoul din dreapta veți vedea un meniu umplut cu dimensiuni predefinite de tablă (create pentru a se potrivi cu dispozitive populare și scenarii). Selectați iPhone 6 și va fi creat un tablă de artă în centrul pânzei.

02. Desenați un antet

Deși creăm în mod specific o listă de contacte în această lecție, vom avea nevoie de niște biți suplimentari de interfață pentru a finaliza iluzia. Cu instrumentul dreptunghi ( Inserați & gt; Dreptunghi sau R. ), trageți un antet în partea de sus a tablă de artă. Introduceți titlul "Contacte" și unele pictograme pentru o măsură bună, cum ar fi "meniul" și "căutarea" în colțul din stânga și din dreapta al tablă de artă, respectiv.

03. Construiți subsolul

Add a tabbed footer, with a floating action button for adding a new contact

Adăugați un subsol cu ​​tabou, cu un buton de acțiune plutitor pentru adăugarea unui contact nou

Înainte de a ajunge la date, să obținem, de asemenea, un subsol rapid, complet cu un FAB (buton de acțiune plutitor) pentru adăugarea unui contact nou. Cu instrumentul dreptunghi, trageți un dreptunghi alb și puneți-l în partea de jos a tablării. Utilizarea instrumentului oval ( Inserați & gt; Oval sau O. ), Desenați un cerc pentru Fab.

04. Introduceți pictogramele

Apoi, introduceți câteva pictograme pentru a afișa utilizatorul unde să faceți clic pe: un "plus" în interiorul Fab, o pictogramă "Utilizator" din fila din stânga și o pictogramă "Istoric" din dreapta. De asemenea, vom adăuga un indicator - o linie neagră simplă - pentru a arăta că Contacte Vizualizarea este selectată. Acum este, de asemenea, un moment minunat pentru a seta culoarea de fundal de artă (negru), pe care o puteți face prin selectarea tablă de artă și apoi alegerea unei culori în inspector.

05. Creați un element de contact

Cu scena noastră set, este timpul să creați un singur element de contact. Acesta este elementul care va fi umplut cu date, duplicat și aranjat într-o rețea pentru a finaliza o listă completă a contactelor. Să începem cu un cerc simplu, care va acționa ca un substituent pentru Avatar (o fotografie care reprezintă fiecare utilizator).

06. Faceți unele straturi de text

Add text layers where the names and addresses of your contacts will sit

Adăugați straturi de text în cazul în care numele și adresele contactelor dvs. vor sta

Alături de oval, să introducem și o pereche de straturi de text. Cu Inserați & gt; Text sau pur și simplu T. Tastă, utilizați instrumentul de text pentru a introduce un strat care citește "Nume aici" și altul dedesubt care citește e-mail aici ". Acestea vor fi straturile pe care le umplem cu date de la panoul de tip în interiorul ambarcațiunilor.

07. Alegeți un nume

Using the Type panel, populate the design with some random names

Folosind panoul de tip, populați designul cu unele nume aleatoriu

Timp pentru a face cârnați! Vom începe prin introducerea unui nume real și o adresă de e-mail reală. În primul rând, selectați stratul care citește "Nume aici" și deschideți panoul de tip (situat în bara de artizanat de lângă inspector). Veți fi prezentat cu un meniu de date pentru a selecta. Alegeți "nume", apoi selectați de la bărbați, de sex feminin sau ambele. Stratul dvs. de text va fi automat umplut cu un nume real.

08. Umpleți stratul de text de e-mail

Vom completa stratul de text de e-mail în același mod în care am făcut numele. Selectați stratul "E-mail aici", deschideți panoul de tip și selectați adresa de e-mail pentru a introduce rapid o adresă de e-mail realistă.

09. O față aleatorie

Select a source from which headshots can be pulled

Selectați o sursă din care pot fi trase că headshot-urile

Apoi, vrem să umplem acel cerc gri cu un avatar adevărat de fotografii, pe care îl vom face cu panoul de fotografii. Începeți prin selectarea stratului de cerc, apoi deschideți "fotografii" de la panoul de artizanat. Aici aveți câteva opțiuni, cum ar fi aprovizionarea dintr-un dosar local, dropbox sau pe web la mare.

Aici selectez un folder local plin de imagini am descărcat de pe site-ul UaFaces.com. Faceți clic pe "Plasați fotografiile și Craft-ul va umple cercul cu o față aleatorie preluată din colecția dvs.

10. Creați o listă de contacte

Cu un singur contact umplut, este timpul să creați o listă completă de contacte. Înainte de a face acest lucru, să introducem o mică linie de divizare sub straturile pe care tocmai le-am creat.

11. Duplicate

Pentru a repeta elementul nostru de contact unic într-o întreagă listă, vom folosi panoul duplicat al ambarcațiunii. Cu grupul dvs. selectat, deschideți panoul duplicat și verificați opțiunile.

Avem două opțiuni: selecția interioară și numărul specific. Primul vă permite să selectați zona în care doriți lista, apoi o completează cu multe articole potrivite. Cea de-a doua vă permite să definiți numărul exact ("Vreau un elemente de grilă x lățime și obiecte y").

12. Utilizarea selecției interioare

Vom folosi opțiunea de selecție interioară, pe care am găsit-o este perfectă pentru designul ecranului. Deoarece aceasta este o listă verticală, nu o rețea, vom verifica doar opțiunea verticală. Faceți clic pe Conținut duplicat și veți vedea câteva lucruri se vor întâmpla.

În primul rând, grupul dvs. de contact unic a fost triplat. În al doilea rând, de fiecare dată duplicatul face magia, câmpurile dvs. devin re-populate, astfel încât fiecare grup nou utilizează date proaspete. În al treilea rând, există un nou strat creat sub grupurile dvs. de contact, pe care le vom folosi pentru a defini zona pe care vrem să o umplem de contacte.

13. Redimensionați stratul

Resize the Duplicate Control layer, and the contacts will multiply to fill the space

Redimensionați stratul de control duplicat, iar contactele se vor multiplica pentru a umple spațiul

Pentru a face ca lista de contacte să completeze întregul ecran, vom redimensiona Controlul duplicat strat. Pur și simplu apucați mânerul inferior al formei și trageți-l în jos în partea de jos a tablării de suport.

De îndată ce vă lăsați să mergeți, duplicat va crea automat mai multe grupuri de contact pentru a umple spațiul nou, completând din nou fiecare grup nou cu date proaspete.

14. Fixați distanța

Acum, lista noastră este în vigoare, ați putea observa că spațiul nu este corect. Cu ambarcațiunile, reglarea jgheaburilor este destul de simplă. Cu stratul de control duplicat selectat, deschideți din nou panoul duplicat și observați că butonul citește acum ajustați jgheaburile. În loc să nu dezactivați fiecare strat nou în jurul pânzei, schimbați pur și simplu opțiunea jgheab verticală la 20, apoi apăsați butonul de reglare a jgheaburilor. Lista dvs. va intra automat în spațiul corect.

15. Adăugați un antet rece

Cu lista noastră completă și populată cu oameni reali, haideți să ne întoarcem la interfață și să introducem niște fler, poate sub forma unui antet foto complet. Vom începe prin selectarea forma inițială "Header-BG" pe care am tras-o cu instrumentul dreptunghi și redimensionând-o spre primul contact din listă. Antetul ar trebui să se oprească probabil în jurul anului 20px de la primul element, deoarece acesta este același jgheab pe care l-am folosit în lista noastră.

16. Găsiți imaginea potrivită

Unsplash is an impressive online photo resource

Unsplash este o resursă de fotografie online impresionantă

Cu forma noastră nouă de dimensiuni selectate, să deschidem panoul de fotografii și să mergem la fila Unsplash. Unsplash este o resursă online uimitoare, plină de fotografii gratuite, de înaltă calitate.

Craft vă permite să filtrați după culoare și categorie, astfel găsirea unei fotografii perfecte pentru orice ocazie este mai ușoară decât oricând. Cu schema noastră de culoare întunecată, cred că categoria spațială va face bine. Faceți clic pe Plasați fotografia și noua fotografie va cădea în poziție.

17. Culori de completare

Deoarece ambarcațiunile plasează o fotografie aleatoare bazată pe filtrele noastre, este ușor să amestecați imaginea din nou și din nou, până când veți găsi unul dorit. Pur și simplu păstrați clic pe Fotografie până când vă place ceea ce vedeți.

Fotografia pe care o iubesc este un pic luminos, așa că o să-l întorc în jos o crestătură adăugând o umplere translucidă întunecată pe partea superioară a imaginii. Sketch vă permite să "stivuiți" o singură formă, deci tot ce trebuie să facem este să faceți clic pe pictograma mică "+ în secțiunea umplutură a inspectorului. Am adăugat un strat negru de 50% din partea de sus a imaginii, care acum arată drept.

18. A făcut!

There you have it – a realistic mockup full of data

Acolo aveți - o mockup realistă plină de date

Cam despre asta e! Dashia normală Mad pentru a găsi conținutul constă, de obicei, în căutarea, copierea, lipirea și repetarea - nu mai este. Umplerea unui întreg aspect cu date realiste este la doar câteva clicuri distanță, și nici măcar nu trebuie să lăsați programul de design preferat.

să - Cele mai populare articole

Începeți cu Bulma

să Sep 13, 2025

(Credit Imagine: BulMA) Doriți să începeți cu ajutorul BulMA? Ești în locul potrivit. Bulma este un cadru popul..

Folosiți instrumentul Pen și textul pentru a adăuga adâncimea în Photoshop

să Sep 13, 2025

Peste următoarele videoclipuri de captură scurtă, Charlie Davis. , un ilustrator bazat pe Londra, acoperă modu..

Creați un aspect receptiv cu grila CSS

să Sep 13, 2025

CSS Grid Layout. este în creștere în suportul browserului în fiecare zi și putem trimite grilă CSS la producți..

Cum să începeți cu TipsCript

să Sep 13, 2025

Tipul de tip este unul dintr-un grup de limbi care utilizează JavaScript. Runtime ca mediu de execuție: fișiere..

Cum să amestecați culoarea umbrei în vopsea

să Sep 13, 2025

Unii oameni găsesc amestecarea pentru umbre dificilă, adesea încercând să amestece o culoare cu totul nouă. Din păcate, re..

Creați un efect de apă de turnare în Realflow

să Sep 13, 2025

Acest tutorial vă arată cum să simulați un efect de turnare lichid. Există diverse software și pluginuri pe care le puteți..

Creați cerneluri mixte cu InDesign

să Sep 13, 2025

Pagina 1 din 2: Creați o senzație de cerneală mixtă Creați o senzaț..

Cum să obțineți mai mult din GIF-uri

să Sep 13, 2025

GIF-uri lucrează în cicluri fără sudură, care Rebecca mock. descrie ca "bucla perfectă". Această buclă ar trebui să ș..

Categorii