Share
Avec ce tutoriel, je voudrais vous montrer comment créer un jeu de polices inspiré d'un tatouage sur le thème de la mer à l'aide de Sketch. Nous utiliserons des formes simples et l'outil Vecteur, ainsi que des bordures et des styles prédéfinis pour créer rapidement l'alphabet..
Avec Sketch ouvert, la vue par défaut a déjà une infinité Artboard. Puisque nous ne créons rien de taille spécifique, nous pouvons le laisser tel quel. Nous allons cependant travailler avec une grille alors allumons ça en ce moment.
Au sommet Barre d'outils sélectionner Affichage> Paramètres de la grille puis changez les valeurs comme vu ci-dessous.
Afin de faciliter mon travail, j'ai esquissé quelques idées sur lesquelles j'aimerais travailler. Cela aidera à garder le thème de la police uniforme et à fournir un point de départ pour démarrer le processus de vecteur..
Ce n'est pas parfait mais ça n'a pas besoin d'être. Au cours du processus vectoriel, j'ai même changé d'avis à propos de certains fioritures et formes. Ces croquis sont juste là pour vous guider.
D'après mes croquis, tous mes personnages sont composés d'une barre large et d'un trait pour compléter les formes. J'ai décidé que je voulais que cette barre large ait deux carrés sur une grille large et une hauteur de huit carrés. Le rendant 50 x 200px.
Dans le cas de la lettre "A", cette barre sera légèrement inclinée, il m'a donc été plus facile de créer une forme personnalisée à l'aide du Vecteur outil (V). Avec le Vecteur outil sélectionné, cliquez sur un point d'intersection de la grille pour commencer votre forme. Ensuite, comptez deux carrés à gauche et cliquez pour créer un autre point. Allez sur deux carrés et sur huit et cliquez pour créer un autre point. Maintenant, comptez plus de deux carrés à droite et cliquez pour marquer un point. Enfin, cliquez sur le point de départ pour fermer la forme.
Créons maintenant l’autre diagonale qui compose le "A". Esquisse a Ligne outil qui serait agréable à utiliser, mais cet outil ne semble pas bien fonctionner avec la grille et les lignes tracées avec cet outil ne se fixent pas automatiquement. Donc, nous allons sauter en utilisant cet outil et faire nos lignes en utilisant le Vecteur outil (V).
Avec le Vecteur outil (V) Sélectionnez une fois de plus, cliquez sur le haut de la grille où la forme large se termine, puis descendez vers le bas et sur trois carrés, puis cliquez à nouveau. Vous pouvez ensuite appuyer sur Revenir sur le clavier pour définir le chemin.
Nous allons maintenant créer notre barre transversale et nos empattements. En utilisant le Vecteur outil (V) Encore une fois, cliquez et créez des lignes horizontales au milieu de la forme pyramidale. Comme il a une hauteur de huit carrés, cela signifie que le centre aura quatre carrés vers le haut ou le bas. Quant aux empattements, ceux-ci donneront un carré de la grille de chaque côté.
La majorité de notre forme de lettre est un simple trait, mais la barre large doit être stylée pour rester dans le même thème que notre thème de tatouage rétro nautique. Je vais travailler dans une belle couleur bleu aqua, mais n'hésitez pas à utiliser la couleur de votre choix. dans le Liste des couches (volet le plus à gauche), sélectionnez tous les calques de trait simples, puis dans le menu déroulant. Inspecteur (volet le plus à droite) ajuster le Les frontières section comme vu ci-dessous. S'il y a des remplissages s'il vous plaît assurez-vous de les supprimer à ce moment.
Avec les traits toujours sélectionnés, revenez à la positionListe des couches et en bas, vous verrez Presets de style. Clique le "+"icône dans cette section pour enregistrer le trait en tant que préréglage pour un accès plus facile ultérieurement.
Maintenant, sélectionnez la forme de la barre large et cette fois nous allons ajuster la Remplir, Les frontières, et Ombres intérieures éléments.
le Remplir sera un dégradé. Si vous cliquez sur l’icône de remplissage, le La couleur de remplissage panneau va voler et vous pouvez ajuster ces paramètres. Dans ce panneau, sélectionnez Pente et un dégradé prédéfini apparaîtra sur la forme.
Pour éditer un dégradé, vous devrez regarder sur le Artboard vous remarquerez deux icônes de cercle en haut et en bas de la forme en ligne droite. Par défaut, l’icône du cercle supérieur est sélectionnée. Par conséquent, si vous modifiez la couleur / l’opacité, cela n’affectera que ce point. Pour l'instant définissons-le à plat blanc avec 100% opacité. Sur le Artboard cliquez sur l'icône du cercle du bas et ajustez la couleur à celle de votre trait précédent.
Zoom sur votre Artboard de sorte que vous êtes au centre de la forme de la barre et faites glisser les icônes de cercle du haut et du bas du dégradé vers le milieu. Si tu tiens Décalage l'icône se déplacera verticalement sans s'égarer. Pour ce faire, ils se rencontrent et forment une ligne horizontale de votre bordure et de la couleur blanche..
Notez dans la capture d'écran que cette ligne n'est pas exactement au centre de la grille. Je voulais que la couleur s'arrête en ligne avec le bord de la barre transversale.
Avec le dégradé souhaité, appuyez sur la touche Retour bouton en haut de la Inspecteur puis ajustez le Les frontières et Ombres intérieures sections décrites ci-dessous.
Avec ces paramètres en place, enregistrez-le en tant que Style prédéfini comme vous l'avez fait avec le trait simple.
En utilisant notre croquis initial comme guide et notre nouveau Presets de style créés nous allons continuer à créer nos autres lettres. Vous devriez trouver cela facile et rapide, car ce sera en grande partie la répétition des étapes susmentionnées..
Je suppose que vous savez à quoi ressemble l'alphabet, alors plutôt que de vous guider dans chaque lettre, je vais m'en tenir aux formes de lettres majeures qui utilisent différents outils et techniques..
Pour créer le "B" nous devrons créer un rectangle qui est 50 x 200px. Ce sera la tige principale du "B". Pour ce faire, sélectionnez le Forme icône du menu et choisissez le Rectangle outil (R) et dessinez votre forme puis ajoutez le Style prédéfini avec le dégradé.
Pour créer le bol du "B", nous allons utiliser le Arrondi outil (U) et dessinez un rectangle arrondi qui est 150 x 100px avec un rayon d'au moins la moitié de la hauteur si 50. Vous pouvez ajuster cela dans le Inspecteur barre latérale.
Avec le rectangle arrondi que nous venons de créer, toujours sélectionné, activez la modifier outil de notre Barre d'outils en haut et cliquez sur le point en haut à gauche pour le sélectionner. Maintenant dans le Barre d'outils un nouvel ensemble d'options sera disponible. Parmi eux, vous verrez notre réglage de coin 50px. Cliquez dans cette zone de texte et remplacez-le par 0. Cela supprimera le coin arrondi de ce coin supérieur gauche. Allez-y et répétez cela pour le point en bas à gauche aussi.
Aller à Édition> Chemins> Ciseaux et cliquez sur le bord plat gauche sur la gauche pour le supprimer. Nous utiliserons beaucoup cet outil car il peut être dans votre intérêt de le sauvegarder sur votre ordinateur. Barre d'outils. Pour ce faire, faites un clic droit sur le Barre d'outils ou visiter Affichage> Personnaliser la barre d’outils… et faites glisser l'outil vers le Barre d'outils dans une position confortable pour vous.
Sélectionnez le modifier outil une fois de plus et cliquez sur le point en bas à gauche et faites-le glisser de sorte qu'il ne coupe plus la tige de notre "B". Maintenant, appliquez notre trait simple Style prédéfini. Vous pouvez maintenant le terminer en répétant ces étapes pour créer la forme du bol inférieur et en utilisant le Vecteur outil pour ajouter un serif supplémentaire au milieu de la tige "B".
Notre "C" est assez simple. Il s’agit essentiellement d’un cercle mais nous avons ajouté un élément à notre tige pour le compléter un peu. Sélectionnez le ovale outil (O) et créer un cercle qui est 200 x 200px.
Avec le Rectangle outil (R) dessinez comme ci-dessus notre rectangle principal et alignez-le à gauche du cercle. À présent Maj-clic les deux formes et aller à Édition> Combiner> Intersection ou choisir Couper du haut Barre d'outils. Vous pouvez maintenant le remplir avec notre dégradé Style prédéfini.
Dessinez un autre cercle de la même taille que la dernière fois et placez-le sur la forme que nous venons de créer. Sélectionnez le modifier outil et passez le curseur de la souris sur le bord du cercle et vous verrez le curseur se transformer en une icône de stylo avec un "+". À l’intersection du tracé avec la grille, cliquez pour créer un nouveau point situé au-dessus et au-dessous du point central. Sélectionnez le Les ciseaux outil et supprimez les chemins entre ces deux points que vous venez de créer pour créer une ouverture. Vous pouvez maintenant appliquer le trait simple Style prédéfini et ajoutez vos empattements.
En suivant les étapes ci-dessus, vous devriez pouvoir créer les lettres "A" à "R". Il suffit de faire mousser, rincer, répéter en suivant le thème et les formes de lettre de base. Le "S" est cependant un peu différent, donc je vais expliquer que maintenant.
Pour garder les choses en ligne, j'ai décidé d'utiliser le même angle que la lettre "A" pour toutes les autres lettres inclinées telles que "V", "W" et "X". Cependant, cet angle était un peu trop dur pour le "S" et le "Z". J'ai donc dessiné un nouvel angle pour le "S" dans cette étape. Le bloc a toujours une largeur de deux carrés mais au lieu de trois, il en a maintenant quatre. Donc, comme nous l'avons fait pour le "A", sélectionnez le Vecteur outil (V) et créez votre bloc coudé comme vu ci-dessous.
Sélectionnez le Arrondi outil (U) et dessinez un rectangle arrondi qui est 150 x 200px avec un rayon d'au moins la moitié de la largeur, 75. À présent Maj-clic les deux formes et aller à Édition> Combiner> Intersection ou choisir Couper du haut Barre d'outils. Vous pouvez maintenant le remplir avec notre dégradé Style prédéfini.
Activer le ovale outil (O) et créer deux cercles qui sont 150 x 150px et placez-les directement sur la forme précédente en alignant l’un vers le haut et l’autre vers le bas. Puis sélectionnez le modifier outil et passez le curseur de la souris sur le bord du cercle et vous verrez le curseur se transformer en une icône de stylo avec un "+". À l'endroit où le cercle croise la forme sous-jacente, cliquez pour créer un nouveau point. Sélectionnez le Les ciseaux outil et supprimez les chemins entre ces deux points que vous venez de créer pour créer un demi-cercle. Vous pouvez maintenant appliquer le trait simple Style prédéfini et ajoutez vos empattements. Faites ceci pour le cercle supérieur et inférieur et votre "S" doit être complet.
Le "Y" est une forme personnalisée dessinée avec le Vecteur outil (V). Vous pouvez voir les étapes ci-dessous sur la façon de le créer.
Enfin, pour le «Z», j’ai senti que l’angle était trop raide, je l’ai allongé comme nous l’avons fait pour le «S», mais j’ai rendu celui-ci un peu plus prononcé. N'hésitez pas à jouer avec à votre guise, mais pour moi, j'ai parcouru cinq cases de la grille, puis j'ai ajouté les tiges et les empattements pour la terminer..
J'espère que j'ai pu vous montrer quelques techniques permettant de gagner du temps pour réutiliser des styles simples. Une fois vos lettres créées, vous pouvez regrouper les différents éléments afin de pouvoir les copier / coller pour former des mots et des phrases. Restez à l'écoute pour de futurs tutoriels sur l'utilisation de cette police nouvellement créée de manière amusante et astucieuse.
Accentsconagua