Share
Avec la sortie du dernier système d'exploitation mobile Apple iOS 7, je pensais qu'il serait intéressant de créer des icônes de barre de tabulation personnalisées conçues pour ce nouveau système d'exploitation. Dans ce didacticiel, nous allons créer des icônes dans le style plat et fin utilisé dans iOS 7. Nous allons créer des états normal et sélectionné pour ces icônes dans Adobe Illustrator. N'hésitez donc pas à suivre.!
Commençons par créer notre barre d'onglets de base. Nous devrons créer un nouveau document qui est 640 x 98 pt. S'il vous plaît noter que nous utilisons "Points"pour ce tutoriel. Nous allons également activer Aligner sur la grille ainsi que d'ajuster la grille de document pour être chaque 1 pt.
Avec le document mis en place sélectionnez le Outil Rectangle (M) et dessinez un rectangle de la même taille que l'Artboard, puis ajustez la couleur comme indiqué ci-dessous.
Pour finir l’arrière-plan de la barre d’onglet, nous ajouterons une barre de séparation de la même largeur que le Artboard, mais uniquement 2 pt haut puis alignez-le sur le haut de la planche et remplissez-le avec la couleur suivante
Ceci complètera la barre d'onglets. Une fois que vous aurez terminé, n'hésitez pas à verrouiller le calque afin de ne pas le sélectionner accidentellement par la suite..
Sélectionnez le Outil Rectangle Arrondi et créez un nouveau rectangle comme indiqué ci-dessous. Maintenant, enlevez le remplissage et ajustez le Accident vasculaire cérébral à ce que vous voyez ci-dessous.
Activer le Outil Ellipse (L) et créez un cercle avec le même trait qu'auparavant et centrez-le à l'intérieur du rectangle arrondi, comme indiqué ci-dessous..
Avec le Outil Ellipse (L) toujours sélectionné, créez deux autres cercles avec les tailles suivantes et alignez-les comme indiqué ci-dessous. Remplissez-les avec la même couleur que le trait et supprimez-le.
Pour cette partie suivante, vous voudrez zoomer un peu pour que vous puissiez voir ce que vous faites. Activer le Outil stylo (P) et cliquez pour créer quatre nouveaux points d'ancrage en haut du rectangle arrondi. Groupe (Commande + G) ensemble par deux et les deux points les plus proches devraient être 3 pt à part avec un grand écart entre les deux groupes.
Basculer vers le Outil de sélection directe (A) et sélectionnez les deux points intermédiaires que nous venons de faire et avec le bouton fléché du clavier les pousser vers le haut 5 pt.
Activer le Outil Rectangle (M) et créez un nouveau rectangle, remplissez-le et alignez-le comme indiqué ci-dessous.
Avec cela, l'icône elle-même est à peu près complète. N'hésitez pas à sélectionner tout l'élément et Groupe (Commande + G) eux autres ensemble.
Activer le Outil de type (T) et nous ajouterons une étiquette. "Helvetica Neue" est la police par défaut pour iOS 7, qui doit être une police préinstallée. Nous allons rendre la couleur identique à celle de l'icône et ajuster les paramètres comme indiqué ci-dessous.
Avec cela, notre icône de caméra est à peu près complète, mais allons un peu plus loin et concevons également un état sélectionné / activé.
Pour ce faire, dupliquez l’icône de l’appareil photo et masquez l’original dans le dossier. Couches panneau. Sélectionnez ensuite le rectangle arrondi qui constitue le corps de l'appareil photo, ainsi que le petit rectangle indiquant le bouton de l'obturateur, puis supprimez le trait et ajoutez la couleur de remplissage de votre choix. Je vais utiliser une belle couleur bleue
Sélectionnez le grand cercle qui a un trait et visitez Objet> Développer l'apparence convertir le trait en forme.
Avec cette nouvelle forme sélectionnée, sélectionnez également les petits cercles et visitez Objet> Chemin composé> Marque joindre ces formes en une seule. Maintenant, sélectionnez les cercles et le corps de la caméra et sous le Éclaireur panneau (Fenêtre> Pathfinder) sélectionnez Minus Front enlever les cercles du corps de la caméra.
Vous pouvez maintenant copier l'étiquette de texte et ajuster la couleur pour correspondre à la nouvelle couleur de l'icône
Avec le Outil Ellipse (L) activé pour créer deux cercles et les centrer l'un avec l'autre, comme indiqué ci-dessous.
Basculer vers le Convertir l'outil Point d'ancrage et cliquez sur le point d'ancrage le plus bas pour le cercle le plus grand afin de créer un point. Ce point étant toujours sélectionné, maintenez la touche Maj enfoncée et appuyez sur la touche Flèche vers le bas sur votre clavier deux fois pour déplacer ce point vers le bas 20 pt.
Je ne suis pas un grand fan de ce que la courbe du cercle fait à la moitié inférieure de la broche, ajustons donc cela un peu.
Basculer vers le Outil stylo (P) et où le centre de la forme de la goupille est de créer un nouveau point d'ancrage en cliquant sur le chemin.
Avec ce nouveau chemin d’ancrage créé, passez à la Outil de sélection directe (A) et sélectionnez la poignée inférieure et faites-la glisser vers le point d'ancrage lui-même afin qu'il n'y ait pas de poignée inférieure.
Maintenant, ajustez la poignée supérieure de ce point d’ancrage de façon à ce qu’elle soit vers le bas et un peu plus puis abaissez la poignée du point d’ancrage du côté du cercle une fois..
Assurez-vous de dupliquer ce processus du côté opposé avant de poursuivre..
Vous pouvez maintenant ajouter une étiquette à cette icône comme vous l'avez fait auparavant avec l'icône précédente. N'hésitez pas à regrouper également les formes d'icônes.
Pour créer la version sélectionnée, dupliquez la forme de l'icône et remplissez-la de la couleur de surbrillance.
Sélectionnez le petit cercle et ajustez la taille pour 12 x 12 pt. Maintenant, sélectionnez le cercle et la forme de la goupille ensemble et choisissez Minus Front du Éclaireur.
Maintenant, ajustez la couleur du texte de l'étiquette.
Sélectionnez le Outil Rectangle Arrondi et créez un rectangle avec un trait intérieur comme on le voit ci-dessous.
Basculer vers le Outil Rectangle (M) et créez un rectangle de la même largeur que celui arrondi ci-dessous et alignez-le sur le haut du rectangle arrondi.
Sélectionnez le rectangle arrondi et le rectangle le plus petit et choisissez Unir du Éclaireur panneau.
Avec le Outil Rectangle (M) toujours sélectionné créer trois autres rectangles qui sont 2 x 40 pt et les centrer à l'intérieur du grand rectangle.
Sélectionnez ces rectangles et Groupe (Commande + G) eux autres ensemble. Avec le groupe sélectionné visite Effet> Warp> Coquille supérieure et appliquer les paramètres suivants.
Avec cette visite choisie de forme déformée Objet> Développer l'apparence pour le convertir en forme.
Passons maintenant au Outil de sélection directe (A) et sélectionnez les chemins en haut et supprimez-les.
Revenez à la Outil Rectangle (M) et créer un rectangle qui est 46 x 2 pt et alignez-le en haut de l'icône.
Activer le Outil Rectangle Arrondi et créez un rectangle arrondi avec un trait intérieur et alignez-le comme on le voit ci-dessous.
Dessinez un autre rectangle directement sous le dessus du couvercle de la corbeille et assurez-vous qu'il couvre la zone de la poignée inférieure.
Sélectionnez à la fois la poignée et le nouveau rectangle et sélectionnez Minus Front du Éclaireur panneau.
Groupe (Commande + G) les éléments d'icône de corbeille ensemble et vous pouvez maintenant ajouter une étiquette ci-dessous, comme vous l'avez fait auparavant.
Dupliquez le groupement d'icônes de la corbeille et ajustez la couleur de remplissage à la couleur de surbrillance
Basculer vers le Outil de sélection directe (A) et sélectionnez un point d'ancrage dans la forme du contour de la corbeille et appuyez deux fois sur la touche Suppr du clavier pour créer une forme remplie..
Sélectionnez les trois rectangles à l’intérieur de l’icône de la corbeille (je les ai coloriés de nouveau pour pouvoir les voir dans les captures d’écran) et visitez Objet> Chemin composé> Marque. Maintenant, sélectionnez la forme de l'icône de la corbeille et les trois rectangles et sélectionnez Minus Front du Éclaireur panneau.
Veillez également à ajuster la couleur de surbrillance de l'étiquette..
Sélectionnez le Outil Ellipse (L) et créer un cercle qui est 52 x 52 pt et a un trait inter, comme les autres icônes.
Avec le Outil Ellipse (L) toujours activé créer un nouveau cercle qui est 8 x 8 pt remplissez-le de notre couleur grise et placez-le en haut au centre de notre grand cercle. Passons maintenant au Outil de sélection directe (A) et sélectionnez le point d'ancrage le plus bas et déplacez-le 3 pt en appuyant Up sur le clavier trois fois. Dupliquez cette forme bosselée et faites-la pivoter puis placez-la au bas du grand cercle.
Sélectionnez les deux formes bosselées et Groupe (Commande + G) eux autres ensemble. Avec ce groupe sélectionné clic-droit et visiter Transformer> Transformer chaque et entrez les paramètres suivants puis cliquez sur Copie. Une fois que cela a été copié, appuyez sur Commande + D sur le clavier pour dupliquer cette fonction copie / rotation quatre fois de plus afin de créer toutes les dents de l’engrenage.
Sélectionnez le Outil Ellipse (L) et créer un cercle qui est 12 x 12 pt avec notre trait interne comme avant et le centrer dans le grand cercle.
Basculer vers le Outil Rectangle (M) et dessinez un rectangle qui est 2 pt large et couvre le rayon du cercle intérieur au cercle extérieur et le remplit de notre couleur grise
Avec ce rectangle sélectionné, passez à la Outil de rotation (R). Tout en tenant le Option clic clé au centre des cercles où vous voulez que l'axe de rotation se produise puis saisissez 120 dans la case Angle et appuyez sur Copie. Recommencez avec la copie sélectionnée pour créer votre troisième et dernier rectangle..
Vous pouvez également ajouter votre étiquette dans le même style que les autres.
Groupe (Commande + G) les éléments ensemble et les dupliquer et ajuster la couleur afin que nous puissions créer notre version en surbrillance.
Sélectionnez les deux cercles qui composent le corps de l'engrenage et visitez Objet> Développer l'apparence pour les convertir en formes.
Sélectionnez le petit cercle et les trois rectangles et Unir les de la Éclaireur panneau.
Basculer vers le Outil de sélection directe (A) et sélectionnez un point d'ancrage dans la partie intérieure du grand cercle, puis appuyez sur Effacer sur le clavier à quelques reprises pour l'enlever afin que vous restiez avec un grand cercle rempli.
Sélectionnez le grand cercle ainsi que les dents de l'engrenage et Unir les de la Éclaireur panneau.
Sélectionnez à la fois la forme de l’engrenage, les barres intérieures et la forme du petit cercle, puis sélectionnez Minus Front les de la Éclaireur panneau.
Veillez également à ajuster la couleur de l'étiquette
Avec le Outil Rectangle Arrondi créer une forme de pilule de la taille suivante et de notre trait interne.
Dessiner un autre Rectangle arrondi avec les informations suivantes et la position comme vu ci-dessous. Avec cette nouvelle forme de pilule visite sélectionnée Objet> Développer l'apparence convertir le trait en forme.
Basculer vers le Outil Rectangle (M) et dessinez un rectangle de sorte qu'il recouvre la moitié supérieure de la forme de la pilule que nous avons faite à l'étape précédente.
Sélectionnez le rectangle et la forme de la pilule, puis sélectionnez Minus Front du Éclaireur panneau.
Basculer vers le Outil Rectangle (M) et créez un rectangle avec les dimensions suivantes et positionnez-le comme indiqué ci-dessous.
Créez un autre rectangle avec les informations et le positionnement suivants.
Faire un dernier rectangle avec les informations suivantes et le positionnement.
Basculer vers le Outil Ellipse (L) et créer un 3 x 3 pt cercle et le centrer à l'intérieur de la forme de la pilule à deux points de l'intérieur du sommet.
Dupliquez le cercle neuf fois et espacez-les de deux points. Vous pouvez maintenant ajouter votre étiquette ci-dessous.
Groupe (Commande + G) les éléments de microphone ensemble et les dupliquer et le changer à notre couleur de surbrillance
Sélectionnez les points et le rectangle intérieur ensemble et visitez Objet> Chemin composé> Marque
Sélectionnez la forme de la pilule et réglez le trait sur le remplissage de notre couleur de surbrillance. Sélectionnez ensuite la forme de la pilule et les cercles / rectangle, puis choisissez Minus Front du Éclaireur panneau.
Veillez également à ajuster la couleur de l'étiquette.
Votre barre d’onglet est terminée et prête à être ajoutée à votre prochain projet de conception iOS 7. J'espère que j'ai pu vous montrer quelques techniques de création d'icônes minces inspirées par iOS 7 que vous pouvez facilement dupliquer pour obtenir d'autres formes qui conviendront à vos besoins en icônes d'application..
Accentsconagua