Astuce créer un bouton de lancement grunge

Dans le didacticiel suivant, vous apprendrez à créer un bouton de lancement très sale. Vous apprendrez à créer un bouton de style 3D et un arrière-plan d'aspect industriel grâce à quelques techniques simples comme la texture vectorielle. Commençons!


Étape 1

Créez un document de 700 x 700 pixels, puis sélectionnez l’outil Rectangle (M). Créez un carré de 256 x 256px, remplissez-le de blanc et nommez-le "Grille".


Étape 2

Activez la grille (Affichage> Grille) et l'alignement sur la grille (Affichage> Aligner sur la grille). Ensuite, vous aurez besoin d'une grille toutes les 5px. Allez dans Édition> Préférences> Guides et grille, entrez 5 dans le quadrillage chaque case et 1 dans la zone Subdivisions. Vous pouvez également ouvrir le panneau Info (Fenêtre> Info) pour un aperçu en direct avec la taille et la position de vos formes. N'oubliez pas de remplacer l'unité de mesure en pixels dans Edition> Préférences> Unité> Général. Toutes ces options augmenteront considérablement votre vitesse de travail.


Étape 3

Choisissez l'outil Rectangle (M) et créez une forme de 15 x 395 pixels. Remplissez-le avec R = 255 G = 222 B = 23 puis dupliquez-le. Sélectionnez cette copie, déplacez-la de 15 pixels vers la droite et remplissez-la de noir. Resélectionnez les deux rectangles et allez à Objet> Déformer et transformer> Transformer. Entrez 12 dans la zone "Copies" et 30 px dans la zone Déplacer-Horizontal, puis cliquez sur OK et sélectionnez Objet> Développer l'apparence..


Étape 4

Sélectionnez les formes créées à l'étape précédente, faites-les pivoter et placez-les au-dessus de la forme créée à la première étape (comme indiqué dans l'image ci-dessous). Assurez-vous de couvrir tout le carré. Sélectionnez la forme jaune et accédez à Objet> Chemin composé> Créer, sélectionnez les formes noires et accédez à nouveau à Objet> Chemin composé> Créer..


Étape 5

Faites deux copies de "Grid". Sélectionnez la forme jaune avec une copie de "Grid" et cliquez sur le bouton Intersection du panneau Pathfinder. Sélectionnez les formes obtenues et accédez à Objet> Chemin composé> Créer. Sélectionnez la forme noire avec l'autre copie de "Grid" et cliquez sur le bouton Intersection du panneau Pathfinder. Sélectionnez les formes obtenues et sélectionnez Objet> Chemin composé> Créer.


Étape 6

Sélectionnez la forme "Grille" d'origine et placez-la au premier plan (Maj + Ctrl +]). Remplissez-le avec aucun, ajoutez 15 pixels, alignés sur le trait intérieur (R = 255 G = 222 B = 23), puis sélectionnez Objet> Développer l'apparence. Sélectionnez la forme obtenue avec les autres formes jaunes et cliquez sur le bouton Unir du panneau Pathfinder..


Étape 7

Sélectionnez la forme jaune, ajoutez un nouveau remplissage (à partir du menu déroulant du panneau Apparence) et utilisez le dégradé linéaire présenté dans la deuxième image. Examinez de plus près le dégradé, le texte jaune représente Opacité et le texte blanc représente Emplacement. Ajouter un troisième remplissage, le noircir, baisser son opacité à 5% et changer son mode de fusion en Multiplier. Sélectionnez ce remplissage (dans le panneau Apparence), allez à Effet> Artistique> Grain de film, entrez les données affichées sous l'image n ° 3, puis cliquez sur OK. Enfin, ajoutez un 2px, aligné sur le trait intérieur. Le rendre blanc et baisser son opacité à 15%.


Étape 8

Choisissez l'outil Ellipse (L), maintenez la touche Maj enfoncée et créez une forme de 150 x 150 pixels. Double-cliquez dessus (dans le panneau Calques) et nommez-le "Bouton". Dupliquez cette forme (Contrôle + C> Contrôle + F), sélectionnez la copie et accédez à Objet> Chemin> Chemin décalé. Entrez un décalage de -5px et cliquez sur OK. Sélectionnez la forme obtenue avec la copie et cliquez sur le bouton Moins avant dans le panneau Pathfinder. Choisissez l'outil Rectangle (M), créez une forme de 150 x 150 pixels et placez-le comme indiqué dans la quatrième image. Saisissez l'outil Supprimer le point d'ancrage (-) et cliquez sur le point d'ancrage inférieur droit. Sélectionnez la forme obtenue avec la forme fine et cliquez sur le bouton Moins avant dans le panneau Pathfinder. Nommez cette forme nouvellement créée "Droite".


Étape 9

Faites une autre copie de "Button". Sélectionnez cette copie et accédez à Objet> Chemin> Décalage du chemin. Entrez un décalage de -10px et cliquez sur OK. Sélectionnez la forme obtenue avec la copie et cliquez sur le bouton Moins avant dans le panneau Pathfinder. Choisissez l'outil Rectangle (M), créez une forme de 150 x 150 pixels et placez-le comme indiqué dans la quatrième image. Saisissez l'outil Supprimer le point d'ancrage (-) et cliquez sur le point d'ancrage supérieur gauche. Sélectionnez la forme obtenue avec la forme fine et cliquez sur le bouton Moins avant dans le panneau Pathfinder. Nommez cette forme nouvellement créée "Gauche".


Étape 10

Sélectionnez la forme "Bouton" et remplissez-la avec R = 190 G = 30 B = 45. Sélectionnez le remplissage (dans le panneau Apparence) et ajoutez l'effet Inner Glow (Effet> Styliser> Inner Glow) présenté sous l'image n ° 1. Ajoutez un nouveau remplissage pour cette forme et utilisez le dégradé radial indiqué ci-dessous. Sélectionnez ce deuxième remplissage et réduisez son opacité à 75%.


Étape 11

Sélectionnez "Gauche", remplissez-le avec le dégradé linéaire dans la première image, réduisez son opacité à 80% puis ajoutez un effet Flou gaussien de 5 pixels (Effet> Flou> Flou gaussien). Sélectionnez "Droite", remplissez-le avec le deuxième dégradé linéaire, baissez son opacité à 30% puis ajoutez un effet Flou gaussien de 5 pixels. Ensuite, vous devez masquer ces deux formes. Regroupez-les (Contrôle + G) et ouvrez le panneau Transparence. Dupliquer "Bouton". Sélectionnez cette copie, placez-la au premier plan (Maj + Ctrl + Support carré droit) et remplissez-la de blanc (supprimez les remplissages et les effets supplémentaires). Sélectionnez cette forme blanche avec le groupe, ouvrez le menu déroulant du panneau Transparence et cliquez sur Créer un masque d'opacité. Maintenant, votre groupe devrait ressembler à la quatrième image.


Étape 12

Sélectionnez les formes créées dans les quatre dernières étapes et placez-les comme indiqué dans l'image suivante. Faites une nouvelle copie de "Button" et déplacez-la sous la forme d'origine (dans le panneau Calques). Sélectionnez cette copie, déplacez-la de plusieurs pixels vers le bas et vers la droite, puis remplissez-la de noir et ajoutez un effet Flou gaussien de 10 pixels. Choisissez l'outil Ellipse (L), créez un cercle plus petit et placez-le comme indiqué dans la deuxième image. Remplissez-le de noir, réduisez son opacité à 80% puis ajoutez un effet de flou gaussien de 15 pixels.


Étape 13

Choisissez l'outil Texte (T), cliquez sur votre Artboard et ajoutez le texte blanc "Lancer". Utilisez les informations affichées dans le panneau Caractère, puis sélectionnez Objet> Développer. Sélectionnez le groupe obtenu, ajoutez l'effet Gonfler (Effet> Déformation> Gonfler), puis sélectionnez Objet> Développer l'apparence. Sélectionnez les formes obtenues et sélectionnez Objet> Chemin composé> Créer.


Étape 14

Ajoutons maintenant un effet grunge pour le texte. Ouvrez le panneau Pinceaux (Fenêtre> Pinceaux). Ouvrez le menu déroulant et accédez à Ouvrir la bibliothèque de styles> Artistique> Artistic_ChalkCharcoalPencil. Choisissez l'outil Plume (P), tracez un chemin horizontal (comme indiqué dans la première image), cliquez sur le pinceau Craie, puis sélectionnez Objet> Développer l'apparence. Sélectionnez les formes obtenues, remplissez-les de noir et allez à Objet> Chemin composé> Créer. Ouvrez le panneau Transparence. Sélectionnez le texte avec le tracé noir, ouvrez le menu déroulant du panneau Transparence, cliquez sur Créer un masque d'opacité, puis décochez la case Clip. Enfin, sélectionnez cette forme masquée et réduisez son opacité à 80%.


Étape 15

Choisissez l'outil Ellipse (L), dessinez une forme de 35by35px et placez-le comme indiqué dans la première image. Remplissez-le de blanc, réduisez son opacité à 90%, puis sélectionnez Effet> Flou> Flou gaussien. Entrez un rayon de 15 px et cliquez sur OK. Resélectionnez l'outil Ellipse (L) et dessinez une forme de 15by15px. Placez-le comme indiqué dans la deuxième image, réduisez son opacité à 40% puis ajoutez un effet Flou gaussien de 5 pixels.


Étape 16

Regroupez toutes les formes créées jusqu'à présent (Contrôle + G) et récupérez l'outil Rectangle (M). Dessinez une forme de la taille de votre planche d’art (700 x 700 pixels) et envoyez-la à l’arrière (Maj + Contrôle + Support carré gauche). Sélectionnez ce rectangle avec le groupe, choisissez l'outil de sélection (V), cliquez sur la bordure du rectangle (il convient de le souligner), puis cliquez sur les boutons Aligner horizontalement le centre et Aligner le centre verticalement dans le panneau Aligner (Fenêtre> Aligner ). Maintenant, votre groupe devrait être placé au centre de votre planche.


Étape 17

Dupliquez le groupe créé à l'étape précédente. Sélectionnez-le et cliquez sur le bouton Unite du panneau Pathfinder. Sélectionnez la forme obtenue avec le grand rectangle et cliquez sur le bouton Moins avant dans le panneau Pathfinder..


Étape 18

Sélectionnez la forme créée à l'étape précédente, remplissez-la avec R = 40 G = 40 B = 40 puis ajoutez un nouveau remplissage. Sélectionnez ce second remplissage, faites-le noir, diminuez son opacité à 10%, changez son mode de fusion en Multiplier puis allez à Effet> Artistique> Grain de film. Entrez les données ci-dessous, puis cliquez sur OK. Enfin, ajoutez un 4 pt aligné sur le trait interne (R = 100 G = 100 B = 100) et un 2 pt noir aligné sur le trait interne.


Étape 19

Resélectionnez le groupe créé à la seizième étape, déplacez-le en haut du panneau Calques et choisissez Effet> Styliser> Ombre portée. Entrez les données ci-dessous, cliquez sur OK et vous avez terminé.


Conclusion:

Maintenant que le bouton est terminé, vous pouvez l’appliquer à diverses utilisations, telles que les icônes, les conceptions Web ou les interfaces utilisateur. Vous pouvez même utiliser les techniques que vous avez apprises dans ce didacticiel pour créer des icônes et des éléments supplémentaires pour un design web plutôt cool..