Share
Ce que vous allez créerSketch est un outil très polyvalent que vous pouvez utiliser quotidiennement pour votre travail de concepteur de sites Web et d'applications. Dans ce didacticiel, je vais vous présenter les fonctionnalités de planche, de couche, d’ombre portée, d’ombre intérieure, de texte, de bordure et de remplissage dans Sketch et vous montrer comment l’utiliser pour créer une icône simple et accrocheuse.
Si vous ouvrez Sketch 3 pour la première fois, vous devez garder à l’esprit les points suivants concernant l’interface Sketch:
Les planches à dessin constituent un moyen simple d'organiser vos conceptions par cadres délimités. Esquisse 3 vous donne un ensemble de tailles de plan de travail par défaut lorsque vous appuyez sur le bouton Une clé (ou cliquez sur Insérer> Artboard). Vous pouvez voir que par défaut, vous avez des tailles d'écran pour les principaux appareils Apple sur le côté droit de l'interface Sketch:
Choisir Écrans iPad> Landscape. Vous pouvez le voir maintenant dans le panneau des calques à gauche. Si vous avez une petite taille d’écran, n’oubliez pas de faire un zoom arrière pour voir tout le tableau d’art en appuyant sur Command-trait d'union (-).
Renommez votre tableau d'art en double-cliquant dessus. Appeler Icône de l'eau. Vous devriez avoir quelque chose comme ça maintenant:
Nous avons donc un tableau d’art pour iPad de 1024 px de large et 768 px de haut. Commençons par ajouter le fond. Pour ce faire, appuyez sur le bouton R clé (ou aller à Insertion> Forme> Rectangle), cliquez sur votre planche d’art et faites glisser votre souris / doigt pour créer un petit rectangle. Vous pouvez le voir maintenant dans votre panneau de calque. Renommez-le Contexte.
Ensuite, nous allons dans le panneau de droite et définissons la propriété de notre couche d’arrière-plan:
Ajoutons un peu de style. Aller à Les frontières et décochez-le. Ajoutez maintenant le dégradé en cliquant sur la couleur grise par défaut dans la propriété de remplissage. Un menu déroulant apparaît avec cinq options: Couleur unie, Dégradé linéaire, Dégradé radial, Dégradé angulaire, Remplissage de motif et Remplissage de bruit..
De gauche à droite: Flat Color, Gradient linéaire, Gradient radial, Gradient angulaire, Remplissage de motif, Remplissage de bruitCliquer sur Gradient Radial. Vous pouvez maintenant voir un curseur, avec la couleur blanche au centre du dégradé à gauche et la couleur noire qui est l'extrémité de votre couleur de dégradé à droite. Pour changer leurs couleurs, il suffit de cliquer dessus dans le curseur:
Définissons les couleurs. Sketch vous permet de basculer entre la valeur hexadécimale, RGBA et HSBA en cliquant sur le bouton RVB ou HSB étiquette. Je connais mieux HSBA, donc pour la couleur au centre, je choisis H190, S50, B100, A100, et pour celui sur l'extrémité je choisis H210, S50, B100, A100.
Nous allons maintenant créer l'icône qui contient le droplet. Pour ce faire, ajoutez un nouveau rectangle. presse R, et cliquez et faites glisser. Puis renommez votre nouveau calque icône.
Met le Largeur à 515 et la taille à 515. Placez-le au centre à l'aide des outils situés en haut du panneau de droite:
Utilisez les outils ci-dessus Position pour définir la position de votre calque par rapport à son conteneur.Met le Rayon de la frontière à 144, et comme pour le calque d'arrière-plan, décochez la bordure puis remplissez l'icône en choisissant une couleur blanche et plate..
Maintenant, nous allons ajouter une ombre. La fonctionnalité Ombres propose cinq options: la couleur, la position X, la position Y, le flou et la propagation. Définissez l’ombre sur:
La dernière étape pour l'icône consiste à ajouter une ombre intérieure en bas. Les ombres intérieures suivent exactement les mêmes fonctionnalités que les ombres, à la différence à l'intérieur de votre forme au lieu de l'extérieur. Nous pouvons définir l'ombre intérieure pour:
Et finalement, vous devriez avoir ceci:
Dans ces étapes finales, vous apprendrez à créer une icône de gouttelette d’eau avec Sketch. Nous avons d’abord besoin d’un ovale, alors appuyez sur O (ou aller à Insertion> Forme> Ovale) et définir sa taille comme Largeur: 200 et Hauteur: 200.
Ensuite, créez un triangle en allant à Insertion> Forme> Triangle (pas de raccourci pour celui-ci). Allez dans le panneau de droite, vérifiez Équilatéral, et mettre le Largeur à 200 et la taille à 200.
Maintenant vient la partie la plus délicate. Vous devez positionner vos calques comme ceci:
Sélectionnez les deux couches et cliquez sur le syndicat bouton qui se trouve dans la partie supérieure de l'interface Sketch.
Maintenant que nous avons notre forme de gouttelette, nous allons ajouter la touche finale pour la rendre plus conviviale en y ajoutant le rayon. Pour ce faire, sélectionnez votre forme et cliquez sur le bouton modifier outil, qui est dans la barre d'outils supérieure.
Heureusement, le premier point sélectionné est celui que nous souhaitons éditer. Allez au panneau de droite et changez le Coins valeur à 34.
Toutes nos félicitations! La forme des gouttelettes est maintenant terminée! Vous pouvez maintenant l'aplatir en cliquant sur l'icône dans la barre de menu supérieure (à droite de Rotation). Sélectionnez le calque de gouttelette dans le panneau Calques et renommez-le. Gouttelette. Allez dans le panneau de droite et configurez le Largeur à 266 et le la taille à 377. Puis centrez-le avec l'outil en haut du panneau de droite:
Et maintenant la dernière étape: le style! Commencez par décocher la bordure, puis remplissez la forme avec un dégradé radial. Faire la valeur centrale H190, S70, B100, A100, et la valeur inférieure H210, S70, B100, A100.
Ensuite, nous ajouterons un Ombre intérieure avec:
Et…
Merci d'avoir lu le tutoriel. J'espère que cela vous a aidé à apprendre à utiliser certains des outils fondamentaux disponibles dans Sketch. N'hésitez pas à poser des questions dans les commentaires ci-dessous.
Accentsconagua