Comment ajouter des données à vos conceptions de croquis

Sep 11, 2025
Comment
[dix] [dix] [dix]
[dix]

La conception d'écran est devenue un long chemin au cours des dernières années. Heck, nous n'avions même pas de "conception d'écran" il y a quelques années. Comme les scores de graphistes et d'illustrateurs évoluent pour s'attaquer à la conception de l'écran, aussi notre outils. Nous ne créons plus de l'art statique et singulièrement spécialisé - nous planifions des systèmes de conception de la vie respiration qui doivent travailler dans divers environnements.

[dix]

Ce nouvel ensemble de demandes a donné naissance à une explosion de nouveaux outils flexibles et ciblés. Mon préféré du groupe est un croquis, une étoile montante de l'équipe au codage bohémien.

Sketch me permet de travailler plus vite que ce que je n'avais jamais rêvé, tout en me libérant pour faire ce que je fais le mieux: design. Il est suffisamment léger pour prototyper rapidement et assez fort pour aller à haute fidélité lorsque je suis prêt. L'une des plus grandes forces de l'esquisse est sa communauté en croissance, qui a créé une vaste sélection de plugins qui étendent l'esquisse dans n'importe quelle direction souhaitée.

Artisanat , d'Invision Labs, vise à alimenter le flux de travail de conception du futur. Il propose un ensemble d'outils en pleine croissance, tous construits pour gagner du temps et ajouter du réalisme tout en concevant. Le temps vient de nombreuses étapes sauvées (copie au revoir et coller!) Et le réalisme vient d'un accès rapide aux données et au contenu réel (Goodye Lorem Ipsum!).

Dans cette leçon, nous examinerons l'utilisation de trois outils clés de CRAFT: des photos, de type et duplicata, pour créer une conception d'écran complète et réaliste pour une liste de contacts.

[dix]

01. Configurez votre artboard

Commençons par créer un nouveau document dans l'esquisse et la configuration d'un artboard pour travailler à l'intérieur. Dans un nouveau document, frappé Insertion & gt; Arboaque ou simplement le UNE clé pour activer l'outil Artboard.

Dans le volet de droite, vous verrez un menu rempli de tailles d'arcboot prédéfinies (créées pour correspondre aux périphériques et scénarios populaires). Sélectionnez l'iPhone 6 et un artboard vous sera créé au centre de la toile.

02. Dessine une en-tête

Bien que nous créons spécifiquement une liste de contacts dans cette leçon, nous aurons besoin de bits d'interface supplémentaires pour compléter l'illusion. Avec l'outil rectangle ( Insertion & gt; Rectangle ou R ), dessinez une en-tête sur le dessus du plancher. Insérez le titre 'Contacts' et quelques icônes pour une bonne mesure, comme "Menu" et "Rechercher" les actions dans le coin gauche et droit de l'artboard, respectivement.

03. Construire le pied de page

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

[dix] [dix]
Ajouter un pied de page à onglets, avec un bouton d'action flottant pour ajouter un nouveau contact

Avant d'accéder aux données, construisons également un pied de page à onglets rapide, avec un bouton d'action fabuleux (flottant) pour ajouter un nouveau contact. Avec l'outil rectangle, dessinez un rectangle blanc et placez-le au bas de l'artboard. En utilisant l'outil ovale ( Insertion & gt; ovale ou O ), dessinez un cercle pour le fab.

04. Insérer des icônes

Ensuite, insérez quelques icônes pour afficher l'utilisateur où cliquer sur: a 'plus' à l'intérieur de la fab, une icône «utilisateur» dans l'onglet Gauche et une icône «Histoire» à droite. Nous ajouterons également un indicateur - une ligne noire simple - pour montrer que le Contacts La vue est sélectionnée. Maintenant, c'est aussi un bon moment pour définir la couleur de fond d'artboard (noir), que vous pouvez effectuer en sélectionnant l'arboot, puis en choisissant une couleur dans l'inspecteur.

05. Créer un élément de contact

Avec notre ensemble de scène, il est temps de créer un seul élément de contact. C'est l'élément qui sera rempli de données, dupliqués et disposés dans une grille pour compléter une liste complète de contacts. Commençons par un cercle simple, qui servira d'espace réservé à l'avatar (une photo qui représente chaque utilisateur).

06. faire des couches de texte

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

[dix] [dix]
Ajoutez des couches de texte où les noms et adresses de vos contacts seront assis

À côté de l'ovale, insérons également une paire de couches de texte. Avec Insertion & gt; Texte ou simplement le T Touche, utilisez l'outil de texte pour insérer un calque qui lit "nom ici", et un autre dessous qui lit "e-mail ici". Ce seront les couches que nous remplissons de données du panneau de type à l'intérieur de l'artisanat.

07. Choisissez un nom

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

[dix] [dix]
Utilisation du panneau de type, remplissez la conception avec des noms aléatoires

Il est temps de faire la saucisse! Nous allons commencer par insérer un vrai nom et une véritable adresse e-mail. Tout d'abord, sélectionnez le calque qui lit «Nom ici» et ouvrez le panneau Type (situé dans la barre d'artisanat à côté de l'inspecteur). Vous serez présenté avec un menu de données à sélectionner. Choisissez «Noms», puis choisissez parmi les hommes, les femmes ou les deux. Votre couche de texte sera automatiquement remplie d'un vrai nom.

08. Remplissez la couche de texte e-mail

Nous allons remplir la couche de texte électronique de la même manière que nous avons fait les noms. Sélectionnez le calque 'email ici', ouvrez le panneau de caractères et sélectionnez Adresse e-mail pour insérer rapidement une adresse e-mail réaliste.

09. Un visage aléatoire

[dix]

Select a source from which headshots can be pulled

[dix] [dix]
Sélectionnez une source à partir de laquelle les headshots peuvent être tirés

Ensuite, nous voulons remplir ce cercle gris avec un véritable avatar photo que nous ferons avec le panneau Photos. Commencez par sélectionner la couche de cercle, puis ouvrez les «photos» dans le volet d'artisanat. Ici, vous avez quelques options, telles que l'approvisionnement dans un dossier local, Dropbox ou le Web en général.

Ici, je sélectionne un dossier local rempli d'images que j'ai téléchargées à partir du site Uiface.com. Cliquez sur «Placez les photos» et Craft remplira votre cercle avec un visage aléatoire extrait de votre collection.

10. Créer une liste de contacts

Avec un seul contact rempli, il est temps de créer une liste complète des contacts. Avant de le faire, insérons une petite ligne de division sous les couches que nous venons de créer.

11. Dupliquer

Pour répéter notre élément de contact unique dans une liste complète, nous allons utiliser le panneau en double de Craft. Avec votre groupe sélectionné, ouvrez le panneau en double et vérifiez les options.

Nous avons deux choix: sélection intérieure et compte spécifique. Le premier vous permet de sélectionner la zone que vous souhaitez dans la liste, puis de le remplir avec de nombreux articles en forme. La seconde vous permet de définir le nombre exact («Je veux une grille x articles de grande taille et des articles y hauts»).

12. Utilisation de la sélection intérieure

Nous utiliserons l'option de sélection intérieure que j'ai trouvée est parfaite pour la conception d'écran. Comme il s'agit d'une liste verticale, pas une grille, nous allons seulement vérifier l'option verticale. Cliquez sur Contenu dupliquer et vous verrez que quelques éléments vont se passer.

Premièrement, votre groupe de contact unique a été triplé. Deuxièmement, chaque fois que sa magie, vos champs sont ré-peuplés, chaque nouveau groupe utilise de nouvelles données. Troisièmement, il existe une nouvelle couche créée dans vos groupes de contact, que nous allons utiliser pour définir la zone que nous souhaitons être remplis de contacts.

13. Redimensionner la couche

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

[dix] [dix]
Redimensionner la couche de commande en double et les contacts se multiplieront pour remplir l'espace

Pour rendre la liste de contacts, remplissez l'écran entier, nous allons redimensionnez la Contrôle dupliquer couche. Saisissez simplement la poignée inférieure de la forme et faites-la glisser vers le bas de votre artboard.

Dès que vous lâchez, dupliquera automatiquement créer davantage de groupes de contact pour remplir le nouvel espace, remplissant à nouveau chaque nouveau groupe avec de nouvelles données.

14. Fixez l'espacement

Notre liste est maintenant en place, vous remarquerez peut-être que l'espacement n'est pas tout à fait raison. Avec des métiers, le réglage des gouttières est assez simple. Avec la couche de contrôle en double sélectionnée, ouvrez à nouveau le panneau de duplication et remarquez que le bouton indique maintenant de régler les gouttières. Au lieu de pousser chaque nouvelle couche autour de la toile, changez simplement l'option de gouttière verticale à 20, puis appuyez sur le bouton de réglage des gouttières. Votre liste s'infiltrera automatiquement dans le bon espacement.

15. Ajoutez une en-tête COOL

Avec notre liste complète et peuplée avec des personnes à la recherche réelle, revenons à l'interface et insérez-en une touche, peut-être sous la forme d'une en-tête de photo complète. Nous allons commencer par sélectionner la forme d'origine "Header-BG", nous avons dessiné avec l'outil rectangle et le redimensionner vers le premier contact de la liste. L'en-tête devrait probablement s'arrêter vers 20px du premier article, car c'est la même gouttière que nous avons utilisée dans notre liste.

16. Trouver la bonne image

Unsplash is an impressive online photo resource

[dix] [dix]
Unsplash est une ressource photo en ligne impressionnante

Avec notre formule nouvellement de taille sélectionnée, ouvrons le panneau Photos et dirigez-vous vers l'onglet Bombes. Un clash est une ressource en ligne incroyable, remplie de photos de haute qualité libres de droits.

Craft vous permet de filtrer par couleur et catégorie, alors trouver une photo parfaite pour toute occasion est plus facile que jamais. Avec notre palette de couleurs sombres, je pense que la catégorie spatiale fera très bien. Cliquez sur Place Photo et votre nouvelle photo va tomber en place.

17. Modification des couleurs

Puisque Craft place une photo aléatoire basée sur nos filtres, il est facile de mélanger à nouveau l'image et encore jusqu'à ce que vous en trouviez celui que vous aimez. Continuez simplement à cliquer sur la photo jusqu'à ce que vous aimiez ce que vous voyez.

La photo que j'aime est un peu brillante, je vais donc la transformer en arrière en ajoutant un remplissage translucide foncé sur l'image. Sketch vous permet de remplir «Stack» de remplir une seule forme, de sorte que tout ce que nous avons à faire est de cliquer sur la petite icône «+» dans la section Remplissements de l'inspecteur. J'ai ajouté une couche noire de 50% sur le dessus de l'image, qui ressemble maintenant à droite.

18. Fait!

There you have it – a realistic mockup full of data

[dix] [dix]
Là vous l'avez - une maquette réaliste pleine de données

C'est tout ce qu'on peut en dire! Le flash Mad normal pour trouver du contenu consiste généralement à rechercher, copier, coller et répéter - plus. Le remplissage d'une disposition complète avec des données réalistes est à quelques clics de clics et vous n'avez même pas à quitter votre programme de conception préféré.

[dix] [dix]
[dix]

Comment - Most Popular Articles

Comment éviter un anomalie Amazon Prime 2020 échouer

Comment Sep 11, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'image: Amazon) [DIX] Bien que Nous Nou NE Connais..

Le Guide essentiel pour désamorcer dans l'art

Comment Sep 11, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'Images: Rob Lunn) [DIX] SI VOUS VOUS PROXERTEZ DE..

Comment affiner votre portefeuille de conception

Comment Sep 11, 2025

VOYE PORTEFEUILLE Détient La Clé Pour Obtenir Le PROCHAIN ​​PROJET DANS LE SAC AFIN QU'IL MÉRITE BEAUCOUP D'ATTENTION. Il est égamément important de SE Rappeler Que ce n'est pas Jama..

Commencez avec WebVR

Comment Sep 11, 2025

[DIX] [DIX] [DIX] [dix] [DIX] Sauter à: WEBVR Ress..

Mettez à niveau vos textures dans des concepteurs de substances

Comment Sep 11, 2025

[dix] [dix] [dix] [dix] L'artiste d'environnement de plomb bungie Daniel Thiger nous traverse ses tec..

Comment préparer des illustrateurs graphiques pour After Effects

Comment Sep 11, 2025

[dix] [dix] [dix] [dix] Je ne peux pas commencer à vous dire combien Adobe Illustrat..

Créer un papier peint bas Poly dans C4D

Comment Sep 11, 2025

[dix] [dix] [dix] [dix] Page 1 sur 2: Créez un fon..

Comment utiliser des photographies de stock de stock de créativité dans votre travail de conception

Comment Sep 11, 2025

[dix] [dix] [dix] [dix] Plutôt que d'être un dernier recours, des images de stock peuvent et doiven..

Catégories