Share
Ce que vous allez créerSketch, réalisé par les gentils gars de Bohemian Coding, est un excellent programme pour la conception d’interfaces. Ce tutoriel de niveau débutant vous initiera à la conception avec Sketch. Vous n'avez besoin d'aucune expérience préalable du programme, mais du temps libre pour apprendre quelque chose de nouveau..
Je vais vous montrer comment configurer une planche graphique simple, comment créer des formes à l'aide d'outils de base, des opérations booléennes, du panneau Inspecteur et de la liste des couches. Nous verrons comment modifier les propriétés, organiser les calques, importer des images et d'autres aspects utiles du flux de travail d'un concepteur Sketch..
Commençons par créer un nouveau document. Avez-vous déjà ouvert Sketch 3? Ok, c'est tout ce que vous devez faire! Laisse-moi expliquer; Par défaut, Sketch vous offre un canevas infini sur lequel travailler. Vous pouvez commencer à créer des éléments sans craindre de manquer d'espace.
Allons encore plus loin et créons un plan de travail. Les planches d’art permettent de créer des cadres fixes sur la toile infinie de Sketch..
Pour créer un nouveau tableau graphique, allez à Insérer> Artboard (UNE) à partir de la barre d'outils ou du menu principal.Cliquez et faites glisser à l'intérieur de la toile de Sketch. Vous remarquerez que Sketch affiche les valeurs de largeur et de hauteur de la même manière. Créer un 600 x 800px artboard.
Pointe: Nous pouvons créer autant de planches que nécessaire. Nous pouvons aussi changer le nom de l’artboard sur le Liste des couches à gauche de l'écran, ou changez sa position et ses dimensions à l'aide du bouton Inspecteur panneau à droite. Supprimer des plans d’art en appuyant sur le bouton Supr ou Effacer touche lorsque le plan de travail est sélectionné.
Par exemple, utilisons le Inspecteur pour changer la position de l’artboard en X = 0 Y = 0. Sinon, vous pouvez simplement faire glisser la planche à cet emplacement.
Pointe: Aller à Voir> Afficher la grille activer la grille par défaut fournie avec Sketch. Cela vous aidera à positionner les objets exactement comme vous le souhaitez.
Nous allons maintenant changer la couleur de l’artboard. Cela facilitera les étapes suivantes. Sélectionnez votre planche et regardez le Inspecteur panneau. Vérifier la Couleur de fond et cliquez sur l’échantillon de couleur à droite. Un sélecteur de couleur apparaîtra nous montrant différentes options de couleur et propriétés. Choisissez la couleur que vous voulez. Peu importe la couleur que vous choisissez, mais dans ce cas, nous allons opter pour un gris chaud..
Votre planche graphique est terminée et vous êtes prêt à commencer avec la mise en page de base!
Aller à Insertion> Forme> Rectangle (R). Créer un 360 x 500px rectangle sur votre planche d’art. Comme pour la création de plan de travail, vous pouvez dessiner un rectangle aléatoire et en ajuster les propriétés à l’aide de la souris. Inspecteur panneau. Montrer la grille pour faciliter les choses!
Après avoir sélectionné le rectangle, jetez un oeil à la Inspecteur panneau. Supprimez la bordure de la forme en la décochant. Clique le Remplir échantillonner et le régler sur blanc. Nous pouvons définir des coins arrondis dans le Inspecteur panneau aussi; Bouge le Rayon curseur vers la droite ou tapez dix dans le champ de saisie.
Créer un 40 x 40px cercle en utilisant Insertion> Forme> Ovale. Rappelez-vous, vous pouvez dessiner un cercle au hasard et utiliser le Inspecteur pour changer ses propriétés. Maintenant, déplacez-le au milieu en haut de votre rectangle. Utilisez le Outil de zoom sur le Barre d'outils si vous avez besoin de zoomer.
Créez un autre cercle, cette fois 20 x 20 px. Alignez-le dans le premier cercle, au centre. En le déplaçant, vous verrez des guides intelligents pour vous aider à aligner des objets.
En fait, pour vous assurer que votre contenu est correctement aligné, maintenez la touche enfoncée. option (⌥) touche du clavier. Sketch vous aidera à obtenir des mesures exactes en pixels indiquant les distances entre les objets. Par exemple:
C'est une grande aide! Merci, esquisse!
Maintenant, nous allons transformer nos deux objets de cercle en un "anneau" unique. Sélectionnez les deux cercles directement ou par Liste des couches. Aller au Barre d'outils et cliquez sur Soustraire.
Nous avons maintenant une nouvelle forme complexe:
Sélectionnez ce nouvel objet et sélectionnez également votre rectangle. Maintenant, cliquez syndicat pour obtenir la forme finale.
Qu'avons-nous fait ici? Lorsque nous avons besoin d’une forme non standard, nous devons la créer nous-mêmes. Nous pourrions le dessiner avec l'outil Plume, mais souvent une forme complexe est facile à décomposer en formes plus standard. On peut utiliser opérations booléennes pour ça. Sketch vient avec syndicat, soustraire, couper et différence opérations booléennes pour obtenir différentes formes complexes faites par des sous-chemins.
Ces options sont non destructif opérations afin que nous puissions changer les propriétés des sous-chemins (formes de base) facilement en les sélectionnant sur le Liste des couches. Lorsque vous avez une forme comportant plusieurs sous-chemins dans votre canevas, consultez la liste des calques. Vous verrez une flèche de divulgation à gauche et si vous développez, vous verrez une liste de sous-chemins pour votre forme. Sur le côté droit, vous pouvez choisir une opération booléenne pour chaque sous-chemin individuellement si vous voulez le changer..
Notre forme de base est presque terminée! Assurez-vous que votre forme reste sélectionnée, regardez le Inspecteur panneau, sélectionnez Ombres et définissez ses propriétés comme suit: Couleur> R = 38 G = 30 B = 10 Alpha = 50, X = 0, Y = 20, Flou = 20 et Spread = 0. En fin de compte, votre forme devrait ressembler à ceci:
Un formulaire de connexion ne serait rien sans les champs de saisie et les boutons, alors faisons quelques!
Pointe: Vous pouvez verrouiller votre forme principale pour éviter les erreurs et les mouvements inattendus. Sélectionnez-le et allez à Arranger> Verrouiller la couche. Un petit cadenas sur la liste des calques vous indique quels objets sont verrouillés.
En utilisant le Outil Rectangle (R), créer un 280 x 50px forme, supprimez la bordure, définissez la couleur de remplissage sur R = 239 G = 87 B = 46, Rayon = 2 et placez-le comme indiqué dans l'image suivante.
Créer un autre 280 x 70px forme, remplis-le de blanc, rayon = 2, ensemble épaisseur de la bordure à 1 et couleur de la bordure à R = 234 G = 234 B = 234. Déplacez-le vers le haut du rectangle orange en le faisant glisser 10 pixels vers le haut. Dupliquer cette forme (Contrôle-D), sélectionnez la copie et faites-la glisser 80px en haut.
Maintenant créer un peu 20 x 20 pixels carré en utilisant Outil Rectangle (R). Remplissez-le de blanc et placez Rayon = 2 , épaisseur de la bordure=1 et couleur de la bordure à R = 234 G = 234 B = 234. Le déplacer 10px sous le rectangle orange. Votre planche graphique devrait ressembler à ceci:
Ok, nous allons maintenant agrémenter le formulaire de connexion avec des éléments de texte pour les étiquettes et les espaces réservés. Sélectionnez le Outil texte (T) Vous pouvez ensuite cliquer n'importe où sur le canevas pour insérer votre calque de texte. Vous verrez le texte ajouté et sélectionné afin que vous puissiez commencer à taper immédiatement. Vous remarquerez que l'inspecteur a changé pour afficher toutes les propriétés qui s'appliquent au texte..
Pointe: Vous pouvez également cliquer et faire glisser pour créer une zone de texte de taille fixe. Lorsque le texte devient trop gros pour tenir dans la zone, il sera redimensionné vers le bas, par opposition à une zone de texte normale dont la largeur augmente pour s'adapter au contenu..
Ajoutez le texte "USERNAME" et allez à Inspecteur panneau pour définir ses propriétés. Utilisez le Police Montserrat, Poids = régulier, Taille = 11, Espacement = 1, Couleur> R = 204 G = 204 B = 204.
Resélectionner le Outil de type (T) et ajoutez le texte d'entrée "Armando" (ou ce que vous voulez). Cette fois, utilisez ces valeurs pour définir ses propriétés: Police Montserrat, Poids = régulier, Taille = 24, Espacement = 0, Couleur> R = 113 G = 87 B = 44. Sélectionnez les deux morceaux de texte et placez-les comme indiqué ci-dessous:
Cela trie notre espace réservé et le texte saisi pour le premier champ. Pour le second, dupliquez les calques de texte et déplacez-les sur le second rectangle 80px vers le bas. Modifier le contenu du texte en "MOT DE PASSE" et "*******".
Ajoutez de nouveaux calques de texte et utilisez les attributs comme indiqué ci-dessous. Tu auras besoin de Open Sans police.
Vous remarquerez que le lien "Mot de passe oublié" est souligné. Pour obtenir cet effet, cliquez sur le bouton Bouton d'options de texte révéler des effets de décoration. Choisissez le second alors que le calque de texte est sélectionné.
Maintenant, le résultat:
En ce moment, nous devrions jeter un coup d’œil à la liste des couches. Ce pourrait être une bonne idée de commencer à organiser et à renommer les rectangle formes ou simplement regrouper des éléments. Renommez les objets en double-cliquant dessus ou en cliquant avec le bouton droit de la souris et en sélectionnant Renommer option. Pour créer un groupe de calques, choisissez un ou plusieurs calques, puis cliquez sur le bouton Groupe icône dans le Barre d'outils. Vous pouvez également faire glisser des objets entre les groupes dans la liste des calques comme vous le souhaitiez..
L'objectif principal est de changer une liste de couches en désordre en quelque chose de plus élégant et organisé. Prenez-le en considération, non seulement en suivant ce didacticiel, mais dans chaque projet auquel vous participez.
Nous avons déjà créé les éléments dont nous avons besoin dans notre boîte de connexion. Il est temps d'ajouter un logotype.
Ouvrez le logo_icon.svg J'ai fourni en pièce jointe à ce tutoriel. Concentrez-vous maintenant sur le panneau de la liste des calques. Vous verrez comment l’icône a été créée en utilisant différents chemins que nous pouvons éditer facilement..
En utilisant le Outil Rectangle (R), créer un 30 x 60px la forme et placez-le comme indiqué dans l'image suivante. Il n'est pas nécessaire de le placer parfaitement à 100% pour le moment. Rappelez-vous, vous pouvez utiliser la grille et le option (⌥) touche du clavier lors du déplacement. De cette façon, Sketch vous montrera des distances précises.
Maintenant sur le Liste des couches, faites glisser le calque de chemin dans le groupe "Forme". Mettez le sur le dessus. Vous obtiendrez ainsi une nouvelle forme composée. C'est la puissance des opérations booléennes et des formes vectorielles dans Sketch!
Vous rappelez-vous quand nous avons parlé de ces minuscules icônes situées à droite de vos sous-chemins? Nous pouvons choisir différentes opérations booléennes pour chaque sous-chemin individuellement. Alors changeons le premier Soustraire et le second à Différence.
Étape facile. Assurez-vous que votre nouvelle forme composée est toujours sélectionnée. Aller à layer> Chemins> Aplatir. Ce faisant, vous aurez perdu vos sous-chemins et leurs capacités d'édition, mais la prochaine étape sera plus facile maintenant..
Gardez votre forme sélectionnée. Aller au Barre d'outils et cliquez sur le modifier icône. Vous remarquerez quelques changements au Inspecteur panneau et la forme elle-même. Sélectionnez tous les points vectoriels en les faisant glisser sur le canevas..
Focus sur le Inspecteur panneau et set Coins à 5. Cliquez sur Remplir to révéler la fenêtre d’options et sélectionner le second type de remplissage, Gradient linéaire. Vous verrez deux points reliés par une ligne superposant votre calque. Chaque point de la ligne représente un arrêt de couleur le long du dégradé.
Pour changer la couleur de l'un des arrêts, cliquez dessus dans le canevas. Vous verrez que le sélecteur de couleur dans l'inspecteur met à jour la couleur de cet arrêt. Choisissez une nouvelle valeur dans ce sélecteur de couleur et vous verrez le résultat. Sachant cela, nous pouvons ajuster la première couleur à R = 245 G = 166 B = 35 et le second à R = 239 G = 87 B = 46. Vous pouvez également modifier les couleurs directement sur le sélecteur de couleurs..
Ceci est notre forme finale:
Copiez la forme et collez-la dans votre formulaire de connexion.
Votre logo est presque terminé, ajoutez maintenant du texte générique. Tapez ce que vous voulez, mais pour ce tutoriel, j'ai utilisé "myapp" ainsi que la position et les propriétés suivantes:
Notre formulaire de connexion est terminé!
Sketch nous permet de travailler avec des images bitmap ainsi que des objets vectoriels. Pour le fond, je vais sélectionner une image de Unsplash. Photographie impressionnante là-bas! Je vais choisir celui fait par Nick West.
Revenons maintenant à votre document. Sélectionnez votre planche sur le Liste des couches panneau et aller à Insérer> Image pour sélectionner l'image. Attention: cette image est énorme! Nous allons le réduire un peu en allant à la Inspecteur panneau et de changer ses dimensions en quelque chose de plus facile à gérer comme 1280 x 876px. Position à X = 0 Y = 0 et assurez-vous que c'estau bas de votre liste de calques.
Pointe: Si vous importez des images tout en maintenant une planche graphique sélectionnée, votre image sera automatiquement masquée à l'aide des dimensions de la planche graphique. Déplacez le calque en dehors du groupe de plan de travail pour le démasquer. En savoir plus sur le masquage d'objets dans la documentation officielle.
Dans Sketch, nous pouvons modifier les couleurs d’une image existante en utilisant le Réglage de la couleur panneau situé dans le Inspecteur. Nous pouvons modifier la saturation, la luminosité et le contraste. Ensemble Saturation à 0 et Contraste à 1,9.
Maintenant, créez un 600 x 800px rectangle utilisant Insertion> Forme> Rectangle (R). Placez-le à X= 0 Y = 0. Sur le Liste des couches déplacez le calque de forme juste au-dessus du calque d'image. Dupliquez-le et définissez les propriétés des rectangles comme suit: pour le premier jeu de rectangles Opacité = 100%, Mélange = Multiplier, Couleur> R = 173 G = 166 B = 152. Pour le second (juste au-dessus du premier) réglé Opacité = 50%, Mélange = Normal, Couleur> R = 173 G = 166 B = 152.
Voici à quoi cela devrait ressembler.
J'espère que vous avez apprécié ce tutoriel…
Puisque vous créez un élément d'interface utilisateur, ajouter des détails supplémentaires à votre formulaire de connexion pourrait être vraiment utile, vous ne pensez pas? Les interfaces de formulaire ont de nombreux aspects; différents états et commentaires. Toutes les techniques que j'ai abordées au cours de ce tutoriel vous auront armé des compétences nécessaires pour créer des éléments supplémentaires tels que:
Pensez-vous pouvoir le faire? Si vous êtes bloqué ou si vous avez besoin de me demander quelque chose, laissez un commentaire ou retrouvez-moi sur Twitter. J'ai hâte de voir comment vous allez!
Accentsconagua