Slik legger du til data i skisseutformene dine

Sep 16, 2025
hvordan
[1. 3]

Skjermdesign har kommet langt i de siste årene. Heck, vi sa ikke engang "skjermdesign" for noen år siden. Som mange grafiske designere og illustratører utvikler seg til å takle skjermdesign, så må du også bruke verktøyet vårt. Vi skaper ikke lenger statiske, singularly-spesifiserte kunstverk - vi planlegger levende, pustende designsystemer som må jobbe på tvers av en rekke miljøer.

Dette nye settet av krav har født en eksplosjon av fleksible, fokuserte nye verktøy. Min favoritt av gjengen er skisse, en stigende stjerne fra teamet på bohemsk koding.

Sketch lar meg jobbe raskere enn jeg noen gang hadde drømt, alt mens jeg forlot meg for å gjøre det jeg gjør best: Design. Det er lett nok til å raskt prototype og sterk nok til å gå høyt troskap når jeg er klar. En av skiss største styrker er dets voksende samfunn, som har skapt et stort utvalg av plugins som utvider skisse i hvilken som helst retning du vil ha.

Håndverk , Fra Invision Labs, har som mål å drive fremtidens design arbeidsflyt. Den tilbyr et voksende sett med verktøy, alt bygget for å spare tid og legge til realisme mens du designer. Tiden kommer fra utallige lagrede trinn (farvelkopi og lim inn!) Og realismen kommer fra rask tilgang til ekte data og innhold (farvel Lorem Ipsum!).

I denne leksjonen tar vi en titt på å bruke tre viktige verktøy fra håndverk: bilder, type og duplikat, for å skape en komplett og realistisk skjermdesign for en liste over kontakter.

01. Sett opp ditt art

La oss starte med å opprette et nytt dokument i skisse og sette opp en andelbord for å jobbe inne. I et nytt dokument, trykk Sett inn & GT; Artbord eller bare den EN Tast for å aktivere Tablemoard-verktøyet.

I høyre rute vil du se en meny fylt med forhåndsdefinerte artbordstørrelser (opprettet for å matche populære enheter og scenarier). Velg iPhone 6 og et andel av tavle vil bli opprettet for deg i midten av lerretet.

02. Tegn en header

Selv om vi ofte lager en liste med kontakter i denne leksjonen, trenger vi noen ekstra grensesnittbiter for å fullføre illusjonen. Med rektangelverktøyet ( Sett inn & GT; Rektangel eller R. ), tegne en header over toppen av tavlen. Sett inn tittelen "Kontakter", og noen ikoner for godt mål, som "Meny" og "Søk" -handlinger i henholdsvis til venstre og høyre hjørne av artbordet.

03. Bygg bunnteksten

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

Legg til en Tabbed Footer, med en flytende handlingsknapp for å legge til en ny kontakt

Før vi kommer til dataene, la oss også bygge ut en rask tabbed footer, komplett med en fab (flytende actionknapp) for å legge til en ny kontakt. Med rektangelverktøyet, tegner du et hvitt rektangel og legg det på bunnen av tavlen. Bruker det ovale verktøyet ( Sett inn & GT; Oval eller O. ), tegne en sirkel for fab.

04. Sett inn ikoner

Deretter setter du inn noen ikoner for å vise brukeren hvor du skal klikke: A 'Plus' inne i Fab, et "User" -ikon i venstre-fanen, og et "historikk" -ikon til høyre. Vi legger også til en indikator - en enkel svart linje - for å vise at Kontakter visning er valgt. Nå er det også en flott tid å angi startbakgrunnsfargen (svart), som du kan gjøre ved å velge artbord og deretter velge en farge i inspektøren.

05. Opprett et kontaktpost

Med vårt scenesett er det på tide å lage et enkelt kontaktpost. Dette er elementet som vil bli fylt med data, duplisert og arrangert i et rutenett for å fullføre en fullstendig liste over kontakter. La oss starte med en enkel sirkel, som vil fungere som plassholder for avataren (et bilde som representerer hver bruker).

06. Lag noen tekstlag

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

Legg til tekstlag der navnene og adressene til kontaktene dine vil sitte

Ved siden av den ovale, la oss også sette inn par tekstlag. Med Sett inn & GT; Tekst eller bare den T. Nøkkel, bruk tekstverktøyet til å sette inn et lag som leser navn her ', og en annen under som leser' e-post her '. Disse vil være lagene vi fyller med data fra typen panel inne i håndverket.

07. Velg et navn

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

Bruke typen panel, fylle ut designet med noen tilfeldige navn

Tid til å lage pølsen! Vi starter med å sette inn et ekte navn og en ekte e-postadresse. Først velger du laget som leser navn her 'og åpner Type-panelet (plassert i håndverkslinjen ved siden av inspektøren). Du vil bli presentert med en meny med data for å velge mellom. Velg "navn", velg deretter fra mann, kvinne eller begge deler. Tekstlaget ditt blir automatisk fylt med et ekte navn.

08. Fyll e-posttekstlaget

Vi skal fylle e-posttekstlaget på samme måte som vi gjorde navnene på. Velg "E-post her" -laget, åpne Type-panelet, og velg E-postadresse for å sette inn en realistisk e-postadresse raskt.

09. Et tilfeldig ansikt

Select a source from which headshots can be pulled

Velg en kilde fra hvilke headshots kan trekkes

Neste opp Vi vil fylle den grå sirkelen med en ekte foto avatar, som vi skal gjøre med bildene panelet. Begynn med å velge sirkellaget, og åpne opp "bilder" fra håndverket. Her har du noen få alternativer, som sourcing fra en lokal mappe, dropbox eller nettet som helhet.

Her velger jeg en lokal mappe full av bilder jeg lastet ned fra nettstedet uifaces.com. Klikk på 'Place Photos' og Craft vil fylle din sirkel med et tilfeldig ansikt tatt fra samlingen din.

10. Opprett en liste over kontakter

Med en enkelt kontaktfylling er det på tide å opprette en komplett liste over kontakter. Før vi gjør det, la oss sette inn en liten skillelinje under lagene vi nettopp opprettet.

11. Dupliserende

For å gjenta vårt enkelt kontaktelement til en hel liste, skal vi bruke håndverks duplikatpanel. Når gruppen din er valgt, åpner du duplikatpanelet og sjekk ut alternativene.

Vi har to valg: Innevalg og spesifikk telling. Den første lar deg velge området du vil ha listen i, fyller den med mange elementer som passer. Den andre lar deg definere den eksakte tellingen ('Jeg vil ha et rutenett x gjenstander bredt og y gjenstander høye').

12. Bruke innsidevalg

Vi bruker alternativet Inside Selection, som jeg har funnet er perfekt for skjermdesign. Siden dette er en vertikal liste, ikke et rutenett, skal vi bare sjekke det vertikale alternativet. Klikk på duplikat innhold, og du vil se noen få ting vil skje.

For det første har din enkeltkontaktgruppe blitt tredoblet. For det andre, hver gang duplikat gjør sin magi, blir feltene dine re-befolket, så hver ny gruppe bruker friske data. For det tredje er det et nytt lag som er opprettet under dine kontaktgrupper, som vi skal bruke til å definere området vi ønsker å fylles med kontakter.

13. Endre størrelsen på laget

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

Endre størrelsen på duplikatkontrolllaget, og kontaktene vil multiplisere for å fylle mellomrommet

For å få kontaktlisten fylt hele skjermen, skal vi endre størrelsen på Duplikat kontroll lag. Bare ta det nederste håndtaket i formen og dra den ned til bunnen av artbordet ditt.

Så snart du slipper, vil duplisere automatisk lage flere kontaktgrupper for å fylle det nye rommet, og igjen fylle hver ny gruppe med friske data.

14. Fest avstanden

Nå er vår liste på plass, du kan merke avstanden ikke helt riktig. Med håndverk er justering av rennere ganske enkelt. Med det dupliserte kontrolllaget som er valgt, åpner du duplikatpanelet igjen, og legg merke til at knappen nå leser tilpasse Gutters. I stedet for å nudging hvert nytt lag rundt lerretet, endrer du bare det vertikale gutteralternativet til 20, og trykk deretter på Juster Gutters-knappen. Listen din vil automatisk snappe inn i riktig avstand.

15. Legg til en kul header

Med vår liste komplett og befolket med ekte folk, la oss doble tilbake til grensesnittet og sette inn noen flair, kanskje i form av en full fotooverskrift. Vi starter med å velge den originale "Header-Bg" -formen vi trakk med rektangelverktøyet, og endret det ned mot den første kontakten i listen. Overskriften skal nok stoppe rundt 20px fra det første elementet, siden det er den samme rennen vi brukte i vår liste.

16. Finn det riktige bildet

Unsplash is an impressive online photo resource

Unsplash er en imponerende online foto ressurs

Med vår nylig dimensjonerte form valgt, la oss åpne opp fotopanelet, og gå til Unsplash-fanen. Unsplash er en fantastisk online ressurs, fylt med royaltyfri, bilder av høy kvalitet.

Craft lar deg filtrere etter farge og kategori, så å finne et perfekt bilde for enhver anledning er enklere enn noensinne. Med vår mørke fargevalg tror jeg at romkategorien vil gjøre det bra. Klikk på Plasser bilde og ditt nye bilde vil falle på plass.

17. Tweaking farger

Siden håndverket plasserer et tilfeldig bilde basert på våre filtre, er det enkelt å blande bildet igjen og igjen, til du finner en du liker. Bare fortsett å klikke på plass til du liker det du ser.

Bildet jeg liker er litt lyst, så jeg skal slå den ned et hakk ved å legge til en mørk gjennomsiktig fyll på toppen av bildet. Skisse gjør at du kan "stable" fyller på en enkelt form, så alt vi trenger å gjøre er å klikke på det lille '+' -ikonet i fyllingsdelen av inspektøren. Jeg har lagt til et svart lag på 50 prosent på toppen av bildet, som nå ser akkurat ut.

18. Ferdig!

There you have it – a realistic mockup full of data

Der har du det - en realistisk mockup full av data

Det er alt det er for det! Det vanlige Mad Dash for å finne innhold består vanligvis av å søke, kopiere, lime inn og gjenta - ikke lenger. Fylling av en hel layout med realistiske data er bare noen få klikk unna, og du trenger ikke engang å forlate ditt favorittdesignprogram.

hvordan - Mest populære artikler

Hvordan lage Pin-Up Art

hvordan Sep 16, 2025

Opprinnelsen til Pin-Up Art kan spores tilbake til slutten av 1800-tallet, men det ble mer utbredt på 1940-tallet og 1950-tallet, som ofte vises på plakater og kalendere. Definere egenskape..

Slik gjør du realistiske gjennomsiktige overflater

hvordan Sep 16, 2025

[1. 3] Å skape et gjennomsiktig materiale som glass virker lett - bare øke gjennomsiktige glidebryteren til 100 og jobben er fer..

Hvordan lage og bruke en mahlstick for å male

hvordan Sep 16, 2025

[1. 3] Mahlstick (eller Maulstick, som det er noen ganger kjent) er et stabiliserende støtteverktøy som brukes av malere når de..

Hvordan skulptør et tegn i VR

hvordan Sep 16, 2025

[1. 3] Side 1 av 2: Side 1 Side 1 Side 2 ..

Hvordan lage fantastiske effekter med CSS-former

hvordan Sep 16, 2025

[1. 3] Frontend utviklere har en tendens til å tenke i rektangler; rektangler inne i rektangler inne i rektangler inne i rektangl..

Hvordan legge til drama til pastell kunstverk

hvordan Sep 16, 2025

[1. 3] Store artister som Rembrandt og Caravaggio injiserer sine kunstverk med litt drama og intensitet, og skaper stykker som min..

Kom i gang med HTML Lerret

hvordan Sep 16, 2025

[1. 3] Html & lt; lerret & gt; Element er en kraftig løsning for å skape pikselbasert grafikk på nettet ved hjelp av ..

Mal et portrett som de gamle mestere

hvordan Sep 16, 2025

[1. 3] For denne opplæringen tar vi en grundig titt på fordelene med å kopiere et gammelt mastermaleri. Jeg har valgt å kopier..

Kategorier