Share
Dans le didacticiel suivant, vous apprendrez à créer un filtre de fourchette de prix qui aurait fière allure dans une application de téléphonie mobile ou une interface de site Web. Nous allons travailler dans Adobe Illustrator avec quelques outils de base pour créer un élément essentiel pour tout portefeuille de concepteurs..
Ouvrez Illustrator et appuyez sur Commande + N pour créer un nouveau document. Entrez 600 dans la zone de largeur et 300 dans la zone de hauteur, puis cliquez sur le bouton Avancé. Sélectionnez RVB, Écran (72ppi) et assurez-vous que la case "Aligner les nouveaux objets sur la grille de pixels" est décochée avant de cliquer sur OK..
Activer la grille (Affichage> Afficher la grille) et Aligner sur la grille (Affichage> Aligner sur la grille). Vous aurez besoin d'une grille toutes les 1px. Allez simplement dans Edition> Préférences> Guides> Grille, entrez 1 dans le quadrillage toutes les cases 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.
En utilisant l’outil Rectangle (M), créez une forme de 301 x 3 pixels et remplissez-la avec R = 50 G = 50 B = 50. Sélectionnez ce mince rectangle, concentrez-vous sur le panneau Apparence (Fenêtre> Apparence) et ajoutez un second remplissage à l'aide du bouton Ajouter un nouveau remplissage (indiqué par la flèche dans l'image suivante). Sélectionnez ce nouveau remplissage, définissez sa couleur sur R = 25 G = 25 B = 25 et sélectionnez Effet> Tracé> Décalage. Entrez un décalage -1px et cliquez sur OK. Retournez dans le panneau Apparence, assurez-vous qu'aucun fond ou trait n'est sélectionné et allez à Effet> Styliser> Coins arrondis. Entrez un rayon de 1,5 px et cliquez sur OK.
Concentrez-vous sur le côté gauche de la forme créée à l'étape précédente. À l'aide de l'outil Rectangle (M), créez deux rectangles de 1 x 3 pixels. Remplissez les deux formes avec R = 50 G = 50 B = 50, placez-les comme indiqué dans la première image puis transformez-les en un chemin composé (Objet> Chemin composé> Construire). Sélectionnez ce chemin de composé frais et allez à Effet> Styliser> Coins arrondis. Entrez un rayon de 0.5px, cliquez sur OK et allez à Effet> Déformer et transformer> Transformer. Entrez les données affichées dans la troisième image et cliquez sur OK.
À l'aide de l'outil Rectangle (M), créez deux rectangles de 1 x 4 pixels. Remplissez les deux formes avec R = 50 G = 50 B = 50, placez-les comme indiqué dans la première image puis transformez-les en un chemin composé (Objet> Chemin composé> Construire). Sélectionnez ce chemin de composé frais et allez à Effet> Styliser> Coins arrondis. Entrez un rayon de 0.5px, cliquez sur OK et allez à Effet> Déformer et transformer> Transformer. Entrez les données affichées dans la troisième image et cliquez sur OK.
Avec l'outil Rectangle (M), créez une forme de 359 x 96px, remplissez-la avec le dégradé linéaire illustré ci-dessous, renvoyez-la en arrière (Maj + Ctrl + [) et placez-la comme indiqué dans l'image suivante..
Resélectionnez le rectangle créé à l'étape précédente, concentrez-vous sur le panneau Apparence, ajoutez un second remplissage, définissez sa couleur sur R = 210 G = 210 B = 210 et faites-le glisser au bas du panneau. Revenez au premier remplissage, sélectionnez-le et accédez à Effet> Déformer et transformer> Transformer. Entrez les données affichées dans l'image suivante et cliquez sur OK.
Resélectionnez le rectangle créé à la cinquième étape, concentrez-vous sur le panneau Apparence, ajoutez un troisième remplissage et faites-le glisser au bas du panneau. Sélectionnez ce nouveau remplissage, ajoutez le dégradé linéaire indiqué dans l'image suivante et sélectionnez Effet> Tracé> Tracé de décalage. Entrez un décalage de 1 px et cliquez sur OK.
Resélectionnez le rectangle créé à la cinquième étape, concentrez-vous sur le panneau Apparence, assurez-vous qu'aucun fond ni trait n'est sélectionné et accédez à Effet> Styliser> Coins arrondis. Entrez un rayon de 3 pixels, cliquez sur OK et sélectionnez Effet> Styliser> Ombre portée. Entrez les données affichées dans la fenêtre du haut, cliquez sur OK et accédez à nouveau à Effet> Styliser> Ombre portée. Entrez les données affichées dans la fenêtre du milieu, cliquez sur OK et accédez à nouveau à Effet> Styliser> Ombre portée. Entrez les données affichées dans la fenêtre du bas et cliquez sur OK. A la fin, votre forme devrait ressembler à l'image suivante.
À l’aide de l’outil Ellipse (L), créez un cercle de 9 pixels, remplissez-le avec R = 88 G = 88 B = 88 et placez-le comme indiqué dans l'image suivante..
Resélectionnez la forme créée à l'étape précédente, concentrez-vous sur le panneau Apparence et ajoutez un second remplissage. Sélectionnez-le, définissez la couleur sur R = 190 G = 190 B = 190 et sélectionnez Effet> Chemin> Chemin de décalage. Entrez un décalage -1px et cliquez sur OK.
Resélectionnez le cercle créé à la neuvième étape, concentrez-vous sur le panneau Apparence et ajoutez un troisième remplissage. Sélectionnez-le, ajoutez le dégradé linéaire indiqué dans l'image suivante et sélectionnez Effet> Chemin> Chemin décalé. Entrez un décalage -1px, cliquez sur OK et allez à Effet> Déformer et transformer> Transformer. Entrez les données affichées dans l'image suivante et cliquez sur OK.
Resélectionnez le cercle créé à la neuvième étape, concentrez-vous sur le panneau Apparence et ajoutez un trait d'un trait. Sélectionnez-le, définissez la couleur sur le noir, alignez-le sur l'extérieur et baissez l'opacité à 20%. Continuez à vous concentrer sur le panneau Apparence et ajoutez un deuxième trait pour cette forme à l'aide du bouton Ajouter un nouveau trait (indiqué par la flèche dans l'image suivante). Sélectionnez ce nouveau trait, faites-le grand large, réglez la couleur sur R = 50 G = 50 B = 50 et alignez-le sur l'intérieur.
Resélectionnez ce cercle de 9 pixels et effectuez une copie devant (Contrôle + C> Contrôle + F). Sélectionnez-le et déplacez-le de 84 pixels vers la droite, comme indiqué dans l'image suivante..
Resélectionnez le rectangle arrondi fin créé à la deuxième étape et effectuez une copie devant (Contrôle + C> Contrôle + F). Sélectionnez cette copie et redimensionnez-la comme indiqué dans l'image suivante. Conservez la hauteur définie à 2 pixels, mais diminuez la largeur à 85 pixels. Accédez au panneau Apparence et modifiez les propriétés de couleur pour cette nouvelle forme. Tout d’abord, sélectionnez le remplissage et définissez la couleur sur R = 0 G = 69 B = 33, puis sélectionnez le trait et définissez la couleur sur R = 57 G = 181 B = 74. À la fin, les choses devraient ressembler à la troisième image.
Resélectionnez les chemins composés créés aux étapes 3 et 4 et allez à Effet> Styliser> Ombre portée. Entrez les données affichées dans l'image suivante et cliquez sur OK.
À l’aide de l’outil Texte (T), ajoutez du texte simple, comme indiqué ci-dessous. Utilisez les propriétés du texte et les codes de couleur indiqués dans l'image suivante.
Resélectionnez les morceaux de texte ajoutés à l'étape précédente et ajoutez les effets Ombre portée illustrés dans l'image suivante..
Enfin, vous pouvez facilement changer la couleur générale de votre forme principale. Resélectionnez le rectangle gris créé à la cinquième étape, concentrez-vous sur le panneau Apparence, ajoutez un nouveau remplissage et assurez-vous qu'il se place en haut du panneau. Sélectionnez-le, définissez la couleur sur R = 196 G = 154 B = 108, diminuez son opacité à 70%, modifiez le mode de fusion en Couleur et accédez à Effet> Tracé> Chemin de décalage. Entrez un décalage de 1 px et cliquez sur OK. Clairement, vous pouvez choisir une couleur différente pour ce nouveau remplissage, vous pouvez essayer d'autres modes de fusion ou vous pouvez augmenter / diminuer le pourcentage d'opacité. Il y a d'innombrables possibilités.
Maintenant, votre travail est terminé. Voici à quoi cela devrait ressembler.
Accentsconagua