Hur man lägger till data till dina skissdesigner

Sep 13, 2025
Hur

Skärmdesign har kommit långt under de senaste åren. Heck, vi sade inte ens "skärmdesign" för några år sedan. Som poäng av grafiska designers och illustratörer utvecklas för att hantera skärmdesign, så måste vår verktygssats. Vi skapar inte längre statiska, singulärt speciella konststycken - vi planerar att bo, andas designsystem som måste arbeta över en mängd olika miljöer.

Denna nya uppsättning krav har fött en explosion av flexibla, fokuserade nya verktyg. Min favorit av gänget är skiss, en stigande stjärna från laget på Bohemian Coding.

Sketch låter mig fungera snabbare än jag någonsin har drömt, alla när jag frigör mig för att göra vad jag gör bäst: design. Det är lätt nog att snabbt prototyp och starkt nog att gå med hög trovärdighet när jag är redo. En av skissens största styrkor är dess växande samhälle, som har skapat ett stort urval av plugins som utökar skiss i vilken riktning du vill ha.

Hantverk , från invisionslaboratorier, syftar till att driva framtidens designflöde. Det erbjuder en växande uppsättning verktyg, alla byggda för att spara tid och lägga till realism under design. Tiden kommer från otaliga sparade steg (farväl kopia och pasta!) Och realismen kommer från snabb tillgång till verkliga data och innehåll (adjö lorem ipsum!).

I den här lektionen tar vi en titt på att använda tre nyckelverktyg från båt: foton, typ och duplikat, för att skapa en komplett och realistisk skärmdesign för en lista med kontakter.

01. Ställ in ditt ämne

Låt oss börja med att skapa ett nytt dokument i skiss och skapa ett ämne för att arbeta inuti. I ett nytt dokument, slå Infoga och gt; Tavla eller helt enkelt A Nyckeln för att aktivera artboardverktyget.

I den högra rutan ser du en meny fylld med fördefinierade skivor storlek (skapad för att matcha populära enheter och scenarier). Välj iPhone 6 och ett ämne kommer att skapas för dig i centrum av duken.

02. Rita en rubrik

Även om vi specifikt skapar en lista med kontakter i den här lektionen, behöver vi några extra gränssnittsbitar för att slutföra illusionen. Med rektangelverktyget ( Infoga och gt; Rektangel eller R ), Rita ut en rubrik över toppen av tavlan. Sätt in titeln "Kontakter", och några ikoner för gott mått, som "meny" och "sök" -åtgärder i respektive vänster och höger sida av tavlan.

03. Bygg footer

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

Lägg till en tabbed footer, med en flytande åtgärdsknapp för att lägga till en ny kontakt

Innan vi kommer till data, låt oss också bygga ut en snabb flikbord, komplett med en Fab (flytande åtgärdsknapp) för att lägga till en ny kontakt. Med rektangelverktyget, dra ut en vit rektangel och placera den längst ner på tavlan. Använda det ovala verktyget ( Infoga och gt; Oval eller O ), Rita en cirkel för Fab.

04. Sätt i ikoner

Sätt i några ikoner för att visa användaren var du ska klicka: ett "plus" inuti Fab, en "användar" -ikon i den vänstra fliken och en "History" -ikon till höger. Vi lägger också till en indikator - en enkel svart linje - för att visa att Kontakter Visa är vald. Nu är det också en bra tid att ställa in konstkortets bakgrundsfärg (svart), som du kan göra genom att välja tavlan och sedan välja en färg i inspektören.

05. Skapa ett kontaktpost

Med vår scenuppsättning är det dags att skapa ett enda kontaktpost. Detta är det objekt som kommer att fyllas med data, dupliceras och arrangeras till ett rutnät för att slutföra en fullständig lista över kontakter. Låt oss börja med en enkel cirkel, som kommer att fungera som en platshållare för avataren (ett foto som representerar varje användare).

06. Gör några textlager

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

Lägg till textlager där namnen och adresserna på dina kontakter kommer att sitta

Bredvid den ovala, låt oss också infoga av par textlager. Med Infoga och gt; Text eller helt enkelt T Nyckel, använd textverktyget för att infoga ett lager som läser "namn här", och en annan under det läser "e-post här". Dessa kommer att vara de lager vi fyller med data från typpanelen inuti hantverket.

07. Välj ett namn

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

Använd typpanelen, fyll i designen med några slumpmässiga namn

Dags att göra korven! Vi börjar med att sätta in ett riktigt namn och en riktig e-postadress. Välj först det lager som läser "namn här" och öppnar typpanelen (finns i hantverksfältet bredvid inspektören). Du kommer att presenteras med en meny med data för att välja mellan. Välj "namn", välj sedan från man, kvinnlig eller båda. Ditt textlager fylls automatiskt med ett riktigt namn.

08. Fyll i e-posttextskiktet

Vi kommer att fylla i texttextskiktet på samma sätt som vi gjorde namnen. Välj "E-post här" -lagret, öppna typpanelen och välj e-postadress för att snabbt infoga en realistisk e-postadress.

09. Ett slumpmässigt ansikte

Select a source from which headshots can be pulled

Välj en källa från vilken headshots kan dras

Nästa upp vill vi fylla den grå cirkeln med en riktig foto avatar, som vi ska göra med panelen Foton. Börja med att välja cirkelskiktet, öppna sedan upp "Bilder" från hantverksfönstret. Här har du några alternativ, som att sourcing från en lokal mapp, dropbox eller webben i stort.

Här väljer jag en lokal mapp full av bilder som jag hämtade från webbplatsen uifaes.com. Klicka på "Placera foton" och hantverket fyller din cirkel med ett slumpmässigt ansikte från din samling.

10. Skapa en lista med kontakter

Med en enda kontakt fylld är det dags att skapa en komplett lista med kontakter. Innan vi gör det, låt oss infoga en liten delningslinje under de lager som vi bara skapat.

11. Duplicera

För att upprepa vårt enda kontaktelement i en hel lista, ska vi använda Crafts dubbla panel. Med din grupp vald, öppna dubbletterpanelen och kolla in alternativen.

Vi har två val: inuti urval och specifikt räkning. Den första låter dig välja det område du vill ha listan i, fyll sedan den med dock många saker som passar. Den andra låter dig definiera det exakta räkningen ("Jag vill ha ett galler x-objekt breda och y-saker långa").

12. Använda inuti urval

Vi använder alternativet Inside Selection, som jag har hittat är perfekt för skärmdesign. Eftersom det här är en vertikal lista, inte ett rutnät, kommer vi bara att kontrollera det vertikala alternativet. Klicka på Dubbla innehåll och du får se några saker kommer att hända.

För det första har din enda kontaktgrupp tredubblats. För det andra, varje gång duplikat gör sin magi, får dina fält tillbaka, så varje ny grupp använder färsk data. För det tredje finns det ett nytt lager som skapats under dina kontaktgrupper, som vi använder för att definiera det område vi vill fyllas med kontakter.

13. Ändra storlek på lagret

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

Ändra storlek på det dubbla styrskiktet, och kontakterna multiplicerar för att fylla utrymmet

För att göra kontaktlistan fyller hela skärmen, kommer vi att ändra storlek på Duplikat kontroll lager. Ta bara bort formens bottenhandtag och dra ner det till botten av ditt ämne.

Så snart du släpper, kommer dubbletter automatiskt att skapa fler kontaktgrupper för att fylla det nya utrymmet, fyller igen varje ny grupp med färsk data.

14. Fixa avståndet

Nu är vår lista på plats, du kan märka att avståndet inte är rätt. Med hantverk är justering av takrännor ganska enkelt. Med det dubbla kontrollskiktet, öppna dubblettpanelen igen och märker att knappen nu läser justerar takrännor. I stället för att nudging varje nytt lager runt duken, ändra helt enkelt det vertikala rännalternativet till 20 och tryck sedan på knappen Justera Gutters. Din lista sitter automatiskt in i rätt avstånd.

15. Lägg till en cool rubrik

Med vår lista komplett och befolkade med äkta folk, låt oss dubbla tillbaka till gränssnittet och infoga lite känsla, kanske i form av en fullständig fotohuvud. Vi börjar med att välja den ursprungliga "header-bg" -formen vi drog med rektangelverktyget och ändra storlek på det mot den första kontakten i listan. Huvudet bör förmodligen stoppa runt 20px från det första objektet, eftersom det är samma geter som vi använde i vår lista.

16. Hitta rätt bild

Unsplash is an impressive online photo resource

Unsplash är en imponerande online fotosurs

Med vår nyformade form vald, låt oss öppna bilderna och gå till fliken Unsplash. Osplash är en fantastisk online-resurs, fylld med royaltyfria, högkvalitativa bilder.

Craft låter dig filtrera efter färg och kategori, så det är lättare att hitta ett perfekt foto för alla tillfällen än någonsin. Med vårt mörka färgschema tror jag att utrymme kategorin gör det bra. Klicka på Place Photo och ditt nya foto kommer att falla på plats.

17. Tweaking Colors

Eftersom Craft lägger ett slumpmässigt foto baserat på våra filter, är det enkelt att blanda bilden igen och igen tills du hittar en du vill. Håll bara klicka på platsfoto tills du gillar det du ser.

Bilden jag gillar är lite ljus, så jag kommer att stänga av en hak genom att lägga till en mörk genomskinlig fyllning ovanpå bilden. Skiss kan du "stack" fyller på en enda form, så allt vi behöver göra är att klicka på den lilla "+" -ikonen i avsnittet Fills. Jag har lagt till ett 50 procent svart lager ovanpå bilden, som nu ser bara rätt ut.

18. Klar!

There you have it – a realistic mockup full of data

Där har du det - en realistisk mockup full av data

Det är allt det finns! Den normala galna bindestrecket för att hitta innehåll består vanligtvis av att söka, kopiera, klistra och upprepa - inte längre. Att fylla i en hel layout med realistisk data är bara några klick bort, och du behöver inte ens lämna ditt favoritdesignprogram.

Hur - Mest populära artiklar

Skapa perspektiv i Adobe Illustrator

Hur Sep 13, 2025

Sida 1 av 2: Använda perspektivnät i Illustrator: Steg 01-09 Använda p..

Procreate Tutorial: Hur målar du som de gamla mästarna

Hur Sep 13, 2025

Det finns alltid något nytt att lära av de gamla mästarna, oavsett om det är komposition, belysning eller till och med en ber..

Hur man förbereder en fil för utskrift

Hur Sep 13, 2025

Som en konstarbetare på Wieden + Kennedy London, jag Design för tryck regelbundet. Det finns viss..

Affinity Designer: Hur man använder exportpersonalen

Hur Sep 13, 2025

Affinitetsdesigner är ett populärt vektorredigeringsverktyg. Förutom Mac och Windows-versioner släpptes Serif nyligen ..

4 tips för att utveckla dina utvecklare färdigheter

Hur Sep 13, 2025

(Bildkredit: Robert Pizzo) SuperFriendly Director Dan Mall kommer att dela sina pro tips om hur du �..

4 Viktiga bildoptimeringstips

Hur Sep 13, 2025

Några lyckliga utvecklare och den här författaren hade möjlighet att Tech redigera Addy Osmani's New Image Optimization ebook..

7 Killer sätt att påverka användarbeteendet

Hur Sep 13, 2025

Webbplatser använder psykologiska tekniker för att påverka deras användares beteende. Ritning på årtionden av akademisk forskning som förklarar hur vårt sinne fungerar och hur vi fatt..

Skapa kvalitet Digitala kopior av din konst

Hur Sep 13, 2025

Konst handlar inte bara om att skapa, det handlar också om att dela. När du har gjort ett vackert arbete är du stolt över, det är bara naturligt att du vill att andra ska se det också. ..

Kategorier