Gegevens toevoegen aan uw schetsontwerpen

Sep 11, 2025

Procedures

Schermontwerp is de afgelopen jaren een lange weg afgelegd. Heck, we zeiden niet eens een paar jaar geleden 'schermontwerp'. Omdat scores van grafische ontwerpers en illustratoren evolueren om schermontwerp aan te pakken, moet ook onze toolset. We creëren niet langer statische, enkelvoudige gespecificeerde kunstwerken - we plannen met leven, ademende ontwerpsystemen die in verschillende omgevingen moeten werken.

Deze nieuwe reeks eisen heeft een explosie van flexibele, gerichte nieuwe hulpmiddelen gegeven. Mijn favoriet van de stel is schets, een rijzende ster uit het team bij Boheemse codering.

Schets laat me sneller werken dan ik ooit had gedroomd, allemaal terwijl ik me bevrijd om te doen wat ik het beste doe: ontwerp. Het is licht genoeg om snel te prototeren en sterk genoeg om high-fidelity te gaan als ik er klaar voor ben. Een van de grootste sterke punten van schets is de groeiende gemeenschap, die een enorme selectie van plug-ins heeft gecreëerd die schets in elke gewenste richting uitbreiden.

Ambacht , van Invision Labs, als doel de ontwerpworkflow van de toekomst aan te pakken. Het biedt een groeiende reeks gereedschappen, allemaal gebouwd om tijd te besparen en realisme toe te voegen tijdens het ontwerpen. De tijd komt van talloze opgeslagen stappen (afscheidskopie en plakken!) En het realisme komt van snelle toegang tot echte gegevens en inhoud (Goodbye Lorem Ipsum!).

In deze les nemen we een kijkje op het gebruik van drie belangrijke tools van ambacht: foto's, typ en duplicaat, om een compleet en realistisch schermontwerp voor een lijst met contacten te maken.

01. Stel je artboard in

Laten we beginnen met het maken van een nieuw document in schets en het instellen van een artboard om binnen te werken. In een vers document, hit Insert & GT; Artboard of gewoon de EEN sleutel om het tool van de artboard te activeren.

In het rechterdeelvenster ziet u een menu gevuld met vooraf gedefinieerde artboardmaten (gemaakt om aan populaire apparaten en scenario's te evenaren). Selecteer iPhone 6 en er wordt een artboard voor u gecreëerd in het midden van het canvas.

02. Teken een koptekst

Hoewel we specifiek een lijst met contacten in deze les maken, hebben we wat extra interface-bits nodig om de illusie te voltooien. Met de rechthoekige tool ( Insert & GT; Rechthoek of R ), teken een koptekst over de bovenkant van het artboard. Plaats de titel 'Contacten' en sommige pictogrammen voor een goede maat, zoals 'menu' en 'Search'-acties in de linker en rechterhoek van het artboard, respectievelijk.

03. Bouw de voettekst

Add a tabbed footer, with a floating action button for adding a new contact — Voeg een Tabbed-voettekst toe, met een zwevende actieknop voor het toevoegen van een nieuw contact

Voordat we bij de gegevens komen, laten we ook een snelle tabelvoeter bouwen, compleet met een FAB (zwevende actieknop) voor het toevoegen van een nieuw contact. Teken met de rechthoekige gereedschap een witte rechthoek uit en plaats deze op de bodem van het artboard. Het gebruik van de ovale tool ( Insert & GT; ovaal of O ), teken een cirkel voor de fab.

04. Plaats pictogrammen

Voeg vervolgens enkele pictogrammen in om de gebruiker weer te geven waar te klikken: A 'Plus' in het fab, een pictogram 'Gebruiker' in het tabblad Left en een pictogram 'Geschiedenis' aan de rechterkant. We voegen ook een indicator toe - een eenvoudige zwarte lijn - om aan te tonen dat de Contacten Bekijk is geselecteerd. Nu is ook een geweldige tijd om de artboard achtergrondkleur (zwart), die je kunt doen door het artboard te selecteren en vervolgens een kleur in de inspecteur te kiezen.

05. Maak een contactpunt

Met onze stage set is het tijd om een enkel contactpunt te maken. Dit is het artikel dat wordt gevuld met gegevens, gedupliceerd en gerangschikt in een raster om een volledige lijst met contacten te voltooien. Laten we beginnen met een eenvoudige cirkel, die optreden als een tijdelijke aanduiding voor de Avatar (een foto die elke gebruiker vertegenwoordigt).

06. Maak enkele tekstlagen

Add text layers where the names and addresses of your contacts will sit — Voeg tekstlagen toe waar de namen en adressen van uw contacten zullen zitten

Laten we naast het ovaal ook inzetten van paar tekstlagen. Met Insert & GT; Tekst of gewoon de T Sleutel, gebruik het teksttool om een laag in te voegen die 'naam hier' leest, en een andere onder die 'e-mail hier' leest. Dit zijn de lagen die we vullen met gegevens van het type paneel in het vaartuig.

07. Kies een naam

Using the Type panel, populate the design with some random names — Het type van het type gebruiken, vul het ontwerp met enkele willekeurige namen in

Tijd om de worst te maken! We zullen beginnen met het invoegen van een echte naam en een echt e-mailadres. Selecteer eerst de laag die 'Naam hier' leest en het type paneel opent (gelegen in de CRAFT-balk naast de inspecteur). U krijgt een menu met gegevens te selecteren om uit te kiezen. Kies 'namen' en selecteer vervolgens van mannelijk, vrouw of beide. Uw tekstlaag wordt automatisch gevuld met een echte naam.

08. Vul de e-mailtekstlaag in

We gaan de laagtekstlaag op dezelfde manier vullen die we de namen hebben gedaan. Selecteer de laag 'E-mail hier', open het typepaneel en selecteer E-mailadres om snel een realistisch e-mailadres in te voegen.

09. Een willekeurig gezicht

Select a source from which headshots can be pulled — Selecteer een bron waaruit headshots kunnen worden getrokken

Vervolgens willen we die grijze cirkel vullen met een echte foto-avatar, die we doen met het paneel van de foto's. Begin met het selecteren van de cirkellaag en open vervolgens 'Foto's' uit het veld Pane. Hier heb je een paar opties, zoals sourcing van een lokale map, dropbox of het web in het algemeen.

Hier selecteer ik een lokale map vol met afbeeldingen die ik heb gedownload van de website UiFaces.com. Klik op 'Place Photos' en Craft vult je cirkel met een willekeurig gezicht uit je verzameling.

10. Maak een lijst met contacten

Met een enkele contact gevuld, is het tijd om een volledige lijst met contacten te maken. Voordat we dat doen, laten we een kleine scheidslijn inzetten onder de lagen die we zojuist hebben gemaakt.

11. Dupliceren

Om ons enkele contactelement in een hele lijst te herhalen, gaan we het dubbele paneel van Craft. Open het dubbele paneel met uw groep op en bekijk de opties.

We hebben twee keuzes: binnen selectie en specifieke telling. In de eerste plaats kunt u het gewenste gebied selecteren dat u wilt, vult u deze dan met veel items die passen. De tweede laat je de exacte telling definiëren ('ik wil een raster x items wijd en y-items lang').

12. Binnenste selectie gebruiken

We gebruiken de optie Inside Selection, die ik heb gevonden, is perfect voor schermontwerp. Omdat dit een verticale lijst is, geen raster, gaan we alleen de verticale optie controleren. Klik op Dubbele inhoud en je ziet er een paar dingen gebeuren.

Ten eerste is uw enkele contactgroep verdrievoudigd. Ten tweede, elke keer duplicaat doet zijn magie, worden uw velden opnieuw bevolkt, zodat elke nieuwe groep verse gegevens gebruikt. Ten derde is er een nieuwe laag gecreëerd onder uw contactgroepen, die we gebruiken om het gebied te definiëren dat we met contacten willen worden gevuld.

13. Grootste de laag

Resize the Duplicate Control layer, and the contacts will multiply to fill the space — Het formaat van de dubbele bedieningslaag wijzigen en de contacten zullen vermenigvuldigen om de ruimte te vullen

Om de contactlijst te maken vult u het volledige scherm, we gaan het formaat van de Dubbele controle laag. Pak gewoon de onderste handgreep van de vorm en sleep hem naar beneden naar de onderkant van uw artboard.

Zodra u loslaat, maakt duplicaat automatisch meer contactgroepen om de nieuwe ruimte te vullen, vult opnieuw elke nieuwe groep met verse gegevens.

14. Bevestig de afstand

Nu is onze lijst op zijn plaats, misschien merk je dat de spatie niet helemaal gelijk is. Met ambacht, het aanpassen van goten is vrij eenvoudig. Met de geselecteerde dubbele bedieningslaag opent u het duplicaatpaneel opnieuw en merk op dat de knop nu leest de dakgoten aanpassen. In plaats van elke nieuwe laag rond het canvas te neuken, verandert u eenvoudig de verticale gootoptie naar 20 en druk vervolgens op de knop Gutwaren. Uw lijst wordt automatisch ingeschakeld in de juiste afstand.

15. Voeg een coole kop toe

Met onze lijst compleet en bevolkt met reëel ogende mensen, laten we dan dubbele terug naar de interface en een flair plaatsen, misschien in de vorm van een volledige foto-header. We zullen beginnen met het selecteren van de originele 'Header-BG' -vorm die we hebben getekend met het rechthoekige tool en het formaat van het afnemen naar het eerste contact in de lijst. De koptekst moet waarschijnlijk rond 20 px van het eerste artikel stoppen, omdat dat dezelfde goot is die we in onze lijst hebben gebruikt.

16. Zoek de juiste afbeelding

Unsplash is an impressive online photo resource — UNSPLASH is een indrukwekkende online fotobron

Laten we met onze nieuw geselecteerde vorm het paneel van de foto's openen en ga naar het tabblad UNSPLASH. UNSPLASH is een verbazingwekkende online resource, gevuld met royalty-vrije, foto's van hoge kwaliteit.

Craft laat je filteren op kleur en categorie, dus het vinden van een perfecte foto voor elke gelegenheid is gemakkelijker dan ooit. Met ons donkere kleurenschema denk ik dat de space-categorie prima zal doen. Klik op Plaatsfoto en uw nieuwe foto zal op zijn plaats vallen.

17. Tweaking kleuren

Omdat Craft een willekeurige foto plaatst op basis van onze filters, is het gemakkelijk om de afbeelding weer en opnieuw te schudden, totdat je er een vindt die je leuk vindt. Blijf eenvoudig op de plaats van de plaats klikken totdat je het leuk vindt wat je ziet.

De foto die ik leuk vind, is een beetje helder, dus ik ga het een inkeping draaien door een donkere doorschijnende vulling bovenop de afbeelding toe te vullen. Schets stelt u in staat om 'stapelt' in te vullen een enkele vorm, dus alles wat we moeten doen is klikken op het kleine '+' pictogram in het gedeelte Vulling van de inspecteur. Ik heb een zwarte laag van 50 procent toegevoegd bovenop de afbeelding, die nu precies goed uitziet.

18. Gedaan!

There you have it – a realistic mockup full of data — Daar heb je het - een realistisch mockup vol met gegevens

Dat is alles wat er is! De normale MAD DASH om inhoud te vinden, bestaat meestal uit het zoeken, kopiëren, plakken en herhalen - niet langer. Het vullen van een hele lay-out met realistische gegevens is slechts een paar klikken verwijderd en u hoeft niet eens uw favoriete ontwerpprogramma te verlaten.

Gegevens toevoegen aan uw schetsontwerpen

01. Stel je artboard in

02. Teken een koptekst

03. Bouw de voettekst

04. Plaats pictogrammen

05. Maak een contactpunt

06. Maak enkele tekstlagen

07. Kies een naam

08. Vul de e-mailtekstlaag in

09. Een willekeurig gezicht

10. Maak een lijst met contacten

11. Dupliceren

12. Binnenste selectie gebruiken

13. Grootste de laag

14. Bevestig de afstand

15. Voeg een coole kop toe

16. Zoek de juiste afbeelding

17. Tweaking kleuren

18. Gedaan!

Procedures - Meest populaire artikelen

Hoe het lettertype in uw Instagram BIO te veranderen

Een gids voor webhulpmiddelen van Google

4 Essential Image Optimization Tips

Een inleiding tot het testen van Frontend

3D-tekst-tutorial voor grafische ontwerpers

Bruidegom Een onweerstaanbaar harig wezen

Verf een portret zoals de oude meesters

Converteer een foto in een VR-set

Categorieën