Share
Avec ce tutoriel, je vais vous montrer comment créer une icône d'indicateur de carte iOS idéale pour importer dans la conception de votre prochaine application basée sur des cartes. Nous utiliserons une seule forme avec plusieurs attributs d'apparence pour créer un style graphique facile à utiliser et à modifier dans Adobe Illustrator..
Commençons par préparer notre document. Ouvrez Illustrator et appuyez sur Commande + N pour créer un nouveau document. Entrez 500 dans la case de largeur et 500 dans la case 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..
Lorsque vous travaillez avec des appareils indépendants de la résolution, la perfection des pixels est un impératif. Pour créer des formes nettes, il serait plus facile de configurer la vue en grille et d'activer la capture de pixels, nous allons donc le faire maintenant. Activons la grille (Affichage> Afficher la grille), puis Aligner sur la grille (Affichage> Aligner sur la grille). Une fois ceux-ci activés, vous aurez besoin d'une grille toutes les 1 pixels. Allez simplement dans Illustrator> Préférences> Guides et grille, entrez 1 dans le quadrillage chaque case et 1 dans la zone Subdivisions. Définissons maintenant l'unité de mesure en pixels dans Illustrator> Préférences> Unité> Général. Une fois terminé, votre document devrait ressembler aux images ci-dessous..
Maintenant que notre document est configuré, commençons par créer notre forme de cercle utilisée pour l'icône d'indicateur. Puisque nous créons pour un écran Retina, nous devons travailler deux fois plus grand que l'objet que nous voulons créer. Sur notre dispositif de rétine, nous voudrons que l'indicateur apparaisse comme étant de 16 pixels par 16 pixels, donc si nous multiplions ce chiffre par 2, nous arrivons à 32 pixels. Dans cet esprit, sélectionnons notre outil Ellipse (L), puis cliquez n'importe où sur le canevas. Lorsque la boîte de dialogue apparaît, saisissez 32px pour la largeur et la hauteur. Cela créera le cercle parfait nécessaire à notre indicateur.
Pointe: Appuyez sur la lettre "D" de votre clavier pour rétablir les paramètres par défaut de vos couleurs de remplissage et de contour..
Avec notre forme dessinée, nous pouvons obtenir des trucs amusants. Ouvrez le panneau Apparence (s'il ne l'est pas déjà, allez à Fenêtre> Apparence) et commençons à créer notre icône..
Il existe de nombreux attributs d'apparence pour cette forme. Pour faciliter le suivi, nous allons travailler de bas en haut dans le panneau Apparence..
Pour commencer, dans le panneau Apparence, sélectionnez l'élément de remplissage du bas et nous allons créer un dégradé radial opaque à transparent, comme indiqué dans l'image ci-dessous, puis ajuster l'opacité à 50%. Avec cet élément de remplissage toujours sélectionné, nous allons également cliquer sur le bouton Ajouter un nouvel effet (il ressemble aux lettres "fx") au bas du panneau Apparence, puis sélectionner Chemin> Chemin de décalage et entrer les attributs décrits ci-dessous. Nous aurons également besoin de transformer l'élément Remplissage. Sélectionnez à nouveau le bouton Ajouter un nouvel effet, naviguez jusqu'à Distort & Transform> Transform et entrez les attributs décrits ci-dessous. Si vous ne l’avez pas encore deviné, il s’agira de l’ombre de l’icône d’indicateur. Nous avons créé une ombre portée entièrement vectorielle qui donne un léger halo à notre forme principale et qui est suffisamment décalée pour donner de la profondeur. Cela ne ressemble plus beaucoup maintenant, mais les choses vont bientôt se mettre en place.
Créons maintenant un autre élément de remplissage au-dessus de notre élément de remplissage dégradé. Par défaut, cela ajoutera notre dégradé noir à transparent, mais nous devrons supprimer ce dégradé à la place d'une couleur unie. Continuons et sélectionnons une belle couleur rouge vif pour ce calque, comme indiqué ci-dessous. À ce stade, il peut sembler étrange d’utiliser un rouge aussi vif, mais tout cela aura un sens dans un instant. Cette couche inférieure servira à la fois de couleur de base et de rehaussement secondaire lorsque nous passerons à l'étape suivante..
Encore une fois, créons un autre élément de remplissage. Cela utilisera par défaut la couleur rouge uniforme choisie précédemment, mais nous souhaitons un joli dégradé radial pour cet élément. Sélectionnez le panneau Dégradé et entrez les attributs décrits ci-dessous. Un joli combo violet à blanc réglé sur Multiplier et une opacité tombée à 50% ajoutera une belle forme 3D arrondie et corsée à l'icône. Pour pousser l’effet 3D encore plus loin, faisons un zoom (Z) sur notre icône jusqu’à ce que nous voyions les carrés de pixels individuels sur notre tableau d’art. Avec cet élément de dégradé toujours sélectionné, choisissez votre outil Dégradé (G) dans le panneau Outil. La barre de dégradé apparaîtra au-dessus de l'icône. Nous allons cliquer et faire glisser cette barre d'environ 2,5 pixels vers le haut en utilisant notre tableau de bord comme guide en veillant à ce que la barre soit aussi centrée que possible..
Nous allons maintenant commencer à créer notre source de lumière primaire. S'il vous plaît rappelez-vous que nous travaillons de bas en haut afin que les choses puissent ne pas avoir de sens jusqu'à ce que nous ayons terminé avec les prochaines étapes.
Gardant à l'esprit que nous essayons de créer une brillance brillante sur notre icône, il va de soi que cette brillance projetera un éclairage de diffusion sur notre objet, c'est donc ce que nous allons créer maintenant. Encore une fois, nous allons créer un nouveau calque de remplissage. Réglons ce dégradé de manière à ce qu'il soit opaque à transparent, comme indiqué ci-dessous, avec une opacité totale de 60%. Sélectionnez l'outil Dégradé (G) et utilisez le guidon blanc avec le centre noir à gauche du rectangle de dégradé. Cliquez et faites glisser cette poignée vers le centre du cercle de manière à faire presque la moitié de sa taille d'origine, puis cliquez sur la barre de dégradé centrale. faites-le glisser un peu vers la gauche. Gardez un œil sur cette couche car vous voudrez peut-être y revenir plus tard pour l'aligner exactement avec notre couche de surbrillance blanche plus tard..
Maintenant que nous avons un peu de diffusion, nous allons ajouter une lueur au point culminant lui-même. Créez un autre calque de remplissage et remplissez-le avec un dégradé de blanc à transparent, comme indiqué ci-dessous. N'oubliez pas que la position du dégradé correspond au calque ci-dessous. Avant de régler ce dégradé, cliquez sur la nuance "Aucune" dans le panneau Nuancier pour supprimer le remplissage, puis ajoutez-le, puis ajoutez-le au dégradé transparent afin de réinitialiser sa position . Avec le dégradé en place, nous allons également vouloir décaler et transformer ce calque de remplissage. Cliquez sur le bouton Ajouter un nouvel effet (il ressemble aux lettres "fx") au bas du panneau Apparence, puis sélectionnez Chemin> Chemin décalé et entrez les attributs décrits ci-dessous. Nous aurons également besoin de transformer l'élément Remplissage. Sélectionnez à nouveau le bouton Ajouter un nouvel effet, naviguez jusqu'à Distort & Transform> Transform et entrez les attributs comme indiqué ci-dessous..
Avec cette lueur de la route ajoutons notre point culminant réel. Cliquez à nouveau sur le bouton Ajouter un nouveau remplissage et remplissez-le avec une couleur blanc plat, puis sélectionnez le bouton Ajouter un nouvel effet (il ressemble aux lettres "fx") au bas du panneau Apparence, puis sélectionnez Chemin> Chemin de décalage et entrez les attributs décrits. au dessous de. Nous aurons également besoin de transformer l'élément Remplissage. Sélectionnez à nouveau le bouton Ajouter un nouvel effet, naviguez jusqu'à Distort & Transform> Transform et entrez les attributs comme indiqué ci-dessous..
À ce stade, vous pouvez revenir au calque de diffusion du dégradé rouge que nous avons fait quelques pas en arrière et ajuster le point central du dégradé de manière à ce qu'il soit directement sous le surlignage blanc..
Maintenant, ajustons cette bordure noire qui nous attend depuis tout ce temps. Nous allons le régler à l'extérieur avec un poids de trait de 2px et la couleur décrite ci-dessous.
L’indicateur lui-même est maintenant terminé, mais allons encore plus loin et créons également l’anneau du rayon GPS. Cliquez à nouveau sur le bouton Ajouter un nouveau remplissage et remplissez-le d'un dégradé rouge à transparent, comme indiqué ci-dessous, puis abaissez l'opacité à 25%. Sélectionnez ensuite le bouton Ajouter un nouvel effet (il ressemble aux lettres "fx") en bas du panneau d'apparence, puis sélectionnez Chemin> Chemin décalé et entrez les attributs décrits ci-dessous..
Pour la dernière partie de l'icône, nous allons ajouter la bordure autour de l'anneau du rayon GPS. Cliquez sur le bouton Ajouter un nouveau trait en bas du panneau Apparence et choisissez un poids de trait rouge 2px à l'intérieur de la forme. Désactivons maintenant le chemin en cliquant sur le bouton Ajouter un nouvel effet (il ressemble aux lettres "fx") au bas du panneau Apparence, puis sélectionnez Chemin> Chemin de décalage et entrez les attributs décrits ci-dessous. Et enfin, nous ajouterons une lueur extérieure à ce coup. Pour ce faire, cliquez sur le bouton Ajouter un nouvel effet (il ressemble aux lettres "fx") en bas du panneau Apparence, puis sélectionnez Styliser> Luminescent externe.
À ce stade, vous pouvez Maj + cliquer sur les deux éléments de l'anneau de rayon GPS pour les sélectionner tous les deux dans le panneau Apparence, puis faites-les glisser vers le bas de cette liste pour que l'icône de l'indicateur se trouve en haut..
Avec l'indicateur de la route, nous allons maintenant créer le nom pop-up. Sélectionnez l'outil Rectangle arrondi, cliquez sur la page et entrez les informations décrites dans l'image ci-dessous. Gardez à l'esprit que la largeur peut correspondre à tout ce que vous désirez tant que le nom que vous choisissez ultérieurement convient, mais pour les besoins de ce didacticiel, nous utiliserons cette largeur définie..
Nous devrons également cliquer une nouvelle fois avec l'outil Rectangle arrondi pour créer la flèche en bas. pour cela, nous aurons besoin que ce soit parfaitement carré et nous lâcherons le rayon comme indiqué ci-dessous. Lorsque la forme est créée, tournons-la à 45 degrés. Pour ce faire, sélectionnez l'outil de sélection (V), puis placez votre souris près d'un coin du carré et maintenez la touche Maj enfoncée tout en maintenant la touche Maj enfoncée, faites glisser la forme dans n'importe quelle direction jusqu'à ce qu'elle ressemble à un diamant, comme illustré dans la capture d'écran ci-dessous..
Nous allons maintenant aligner ces objets pour qu'ils soient centrés les uns sur les autres. Avec l'outil de sélection (V) en main, cliquez sur les deux objets pour qu'ils soient tous deux sélectionnés en même temps. Nous allons maintenant naviguer vers le panneau Aligner (Fenêtre> Aligner) et choisir la deuxième option sous l'en-tête Aligner les objets appelée Horizontal Align Center. Puis cliquez sur la dernière option sous le même en-tête appelée Vertical Align Bottom..
Avec l'outil de sélection (V) toujours activé, cliquez sur la forme en losange la plus petite pour qu'il s'agisse du seul objet maintenant sélectionné. Tout en maintenant la touche Maj du clavier enfoncée, appuyez une fois sur la flèche vers le bas de votre clavier. Relâchez Shift puis appuyez trois fois de plus sur la flèche vers le bas de votre clavier pour amener le losange dans la position idéale.
Déplacez le clic sur la forme arrondie la plus grande pour que les deux objets soient à nouveau sélectionnés et accédez au panneau Pathfinder (Fenêtre> Pathfinder), puis cliquez sur la première option sous l'en-tête Modes de forme intitulée Unir. Les deux objets doivent maintenant être joints à un seul..
Avec notre pop up. forme maintenant créée nous allons travailler sur le style. Avec la forme sélectionnée, accédez au panneau Apparence (Fenêtre> Apparence) et sélectionnez le trait. Nous allons garder cela en noir de base, mais réglons le en dehors de la forme avec un poids de trait de 2px.
Ensuite, sélectionnez le remplissage et nous le remplirons avec un dégradé de 90 degrés semi-transparent en niveaux de gris, comme indiqué ci-dessous..
Enfin, nous allons ajouter un effet d’ombre portée à cet objet. Cliquez sur le bouton Ajouter un nouvel effet (il ressemble aux lettres "fx") au bas du panneau Apparence, puis sélectionnez Styliser> Ombre portée et entrez les options décrites dans la capture d'écran ci-dessous..
Donnons à cet objet un joli point fort en haut. Avec l'objet sélectionné, nous allons copier (Commande + C) puis coller devant (Commande + F). Reprenons rapidement le style par défaut en appuyant sur la touche "D" de votre clavier. Cela supprimera les effets que nous avons ajoutés précédemment et ramènera la forme au blanc de base avec un trait noir. Pour les besoins de cette surbrillance, nous n’avons pas besoin d’un trait; accédez à votre panneau Outils et cliquez sur l’option de remplissage du trait située près du bas pour la sélectionner. Cliquez ensuite sur le carré blanc avec la diagonale rouge pour supprimer complètement le trait. Une fois le trait terminé, copiez-le à nouveau (Commande + C) puis à coller au premier plan (Commande + F) pour obtenir deux formes blanches unies superposées. Ensuite, alors que la forme la plus haute est sélectionnée et que l'outil de sélection (V) est activé, appuyez deux fois sur la flèche vers le bas de votre clavier pour déplacer l'objet vers le bas. Une fois déplacé, cliquez sur l’objet brut situé derrière pour sélectionner les deux à la fois. Lorsque les deux objets sont sélectionnés, accédez au panneau Pathfinder (Fenêtre> Pathfinder) et sélectionnez la deuxième option sous l'en-tête "Modes de forme" intitulée "Minus Front". Vous devriez maintenant vous retrouver avec un petit éclat de la forme originale tout en haut. Avec ce ruban sélectionné, diminuons l'opacité à 25% dans le panneau Apparence (Fenêtre> Apparence)..
Nous allons maintenant créer le texte pour cette fenêtre contextuelle. Sélectionnez l'outil Texte (T) dans le panneau Outils, puis cliquez sur la planche graphique et tapez le nom de votre choix. Dans le panneau Outils, cliquez sur Couleur de remplissage et changez-le en blanc. Accédez maintenant au panneau Caractère (Type> Type> Caractère) et ajustez la taille et le type de police comme indiqué ci-dessous..
Avec le texte sélectionné, accédez au panneau Apparence (Fenêtre> Apparence) et cliquez sur le bouton Ajouter un nouvel effet (il ressemble aux lettres "fx") en bas du panneau Apparence, puis sélectionnez Styliser> Ombre portée et entrez les options décrites dans la capture d'écran ci-dessous. Nous pouvons également utiliser l'outil de sélection (V) pour faire glisser le texte à l'emplacement souhaité dans la forme en bulle. Comme les guides intelligents et Aligner sur la grille sont activés, cela devrait être facile à trouver..
Avec le texte hors du chemin, créons l'icône en forme de flèche. Sélectionnez l'outil Rectangle arrondi et cliquez sur la planche d'art, puis connectez ces options..
Maintenant, sélectionnez l'outil de sélection (V) et cliquez sur le rectangle nouvellement créé. Avec l'objet sélectionné, nous allons copier (Commande + C) puis coller devant (Commande + F). Faisons maintenant pivoter ce nouvel objet de 90 degrés. Nous allons maintenant aligner ces objets pour former une forme de L en arrière. Avec l'outil de sélection (V) en main, cliquez sur les deux objets pour qu'ils soient tous deux sélectionnés en même temps. Nous allons maintenant naviguer dans le panneau Aligner (Fenêtre> Aligner) et choisir la troisième option sous l'en-tête Aligner les objets appelée Horizontal Aligner à droite. Puis cliquez sur la dernière option sous le même en-tête appelée Vertical Align Bottom..
Avec les deux objets toujours sélectionnés, accédez au panneau Pathfinder (Fenêtre> Pathfinder), puis cliquez sur la première option sous l'en-tête Modes de forme intitulée Unir. Les deux objets doivent maintenant être joints à un. Avec l'outil de sélection (V) toujours sélectionné, faisons pivoter la forme de 45 degrés. Pour ce faire, sélectionnez l'outil Sélection (V), puis placez votre souris près d'un coin du carré. Tout en maintenant la touche Maj enfoncée, faites glisser un coin situé à droite du cadre de sélection jusqu'à ce qu'il ressemble à une flèche pointant vers le bas. droite.
Avec la flèche sélectionnée, accédez au panneau Apparence (Fenêtre> Apparence) et cliquez sur le bouton Ajouter un nouvel effet (il ressemble aux lettres "fx") en bas du panneau Apparence, puis sélectionnez Styliser> Ombre portée et entrez les options décrites dans la capture d'écran ci-dessous. Nous pouvons également utiliser l'outil de sélection (V) pour faire glisser la forme de la flèche à l'emplacement souhaité dans la forme de bulle.
Avec le pop up. section terminée, activez l'outil de sélection (V) et faites glisser une sélection sur tout le menu déroulant. objets pour les sélectionner tous simultanément. Maintenant, allez à Objet> Grouper (Commande + G) dans le panneau de menu pour regrouper ces objets. Nous pouvons ensuite faire glisser ce groupe au-dessus de l'icône de l'indicateur et le centrer pour qu'il ressemble à la capture d'écran ci-dessous. Et avec cela en place, nous avons terminé!
J'espère que j'ai pu vous montrer comment utiliser le panneau Apparence pour créer des effets complexes sans recourir à des calques supplémentaires. N'hésitez pas à jouer avec différentes couleurs comme bon vous semble. Avec autant de périphériques indépendants de la résolution qui flottent de nos jours, il est vraiment formidable de pouvoir utiliser des objets infiniment évolutifs pouvant être utilisés et réutilisés dans vos conceptions d'application..
Accentsconagua