Share
Ce que vous allez créerDans ce didacticiel, nous allons créer un ensemble d’icônes plates pour Apple Watch qui se trouvent par défaut dans le menu d’écran d’origine de Apple Watch. Nous utiliserons des formes de base et des effets de Warp, ainsi que des méthodes plus complexes pour créer une interface utilisateur tendance. Commençons!
Les icônes Apple Watch sont conçues dans un style plat branché très similaire aux icônes iOS, que l'on retrouve dans le dernier iOS sur iPhone, iPad ou autres appareils Apple. Il y a pourtant une particularité notable: les icônes sont rondes. Dans ce tutoriel, nous utiliserons une grille ronde pour créer une base unique pour chaque icône. Vous pouvez télécharger un très joli modèle d’icône en vecteur pour faciliter le travail..
Si vous êtes intéressé par une théorie plus approfondie sur la création d'icônes pour Apple Watch, je vous recommande vivement de consulter les instructions et spécifications officielles relatives à l'interface utilisateur d'Apple Watch..
Consultez également ces articles très utiles et descriptifs "Création d'icônes pour Apple Watch" et "Icônes pour Apple Watch - Le guide définitif", où les utilisateurs partagent leurs modèles gratuits et leurs connaissances en matière de création d'icônes personnalisées..
Il est maintenant temps d'aller de l'avant et de créer les icônes Apple Watch! Si vous souhaitez que vos icônes soient plus précises au pixel près et plus fidèles à la réalité, comme les icônes d'origine de Apple Watch, vous pouvez trouver un exemple d'image de l'écran d'accueil Apple Watch dans Google Images.. Fichier> Place sur votre Artboard et utilisez-le comme modèle en y plaçant vos icônes tout en préservant les tailles et les proportions souhaitées. Sinon, suivez simplement ce tutoriel en tant que guide d’inspiration, et non en tant qu’instruction stricte sur la création de copies exactes des icônes originales..
Commencez par ouvrir l’un des modèles d’icônes (pour ce tutoriel, nous utiliserons le 80 x 80 px modèle d'icône pour 38 mm regarder). Aller à Afficher> Masquer la grille pour rendre la grille invisible si elle vous distrait, mais assurez-vous que vous avez le Guides intelligents et Claquer activé (vous pouvez les trouver dans le même menu) pour faciliter le travail avec.
Commençons par créer notre première icône pour l’application Time en plaçant un 4 x 4 px même cercle au centre du modèle. Double-cliquez sur le Outil Ellipse (L) appeler la fenêtre des options contextuelles, puis dirigez-vous vers le Aligner panneau pour aligner le cercle horizontalement et verticalement sur la planche graphique. Remplir le cercle avec de l'orange (# FF9506).
Utilisez le Outil Rectangle (M) créer un 2 x 40 px seconde de notre horloge, remplie de la même couleur orange, et placez-la le long de la ligne de guide centrale, comme indiqué sur la capture d'écran.
Vous pouvez aligner la main à l'objet clé, en cliquant sur le cercle tout en maintenant la Alt clé.
Copions la trotteuse, raccourcissons-la et tournons-la vers -60 degrés, en le plaçant le long du guide, comme indiqué ci-dessous.
Nous allons maintenant former le corps de l'aiguille des minutes. Faire un noir 4 x 30 px rectangle et utiliser le Coins vivants fonction pour rendre les deux extrémités arrondies en tirant les petits marqueurs de cercle avec le Outil de sélection directe (A) à leur maximum (2 px rayon de coin dans notre cas).
Placez la main au bon endroit le long de la ligne de guidage (vous pouvez la réduire un peu pour qu’elle s’adapte au cercle intérieur de la base de l’icône)..
Créer un autre rectangle de 4 x 20 px taille pour l'aiguille des heures. Faites-le arrondi, faites pivoter pour 60 degrés et placez-le sur le côté opposé de l'aiguille des minutes.
Enfin, créez un 80 x 80 px ellipse blanche avec le Outil Ellipse (L) pour la base de l'icône et placez-le sous tous les autres objets. Génial! Notre première icône est prête. passons au suivant.
Nous allons maintenant créer l'icône Mail. Commencez à former l’enveloppe en faisant un 50 x 33 px rectangle de n'importe quelle couleur.
Ajouter un triangle avec 2 pt AVC soit en utilisant un Outil Polygone avec 3 côtés valeur ou avec le Outil stylo (P). Objet> Développer le triangle pour le transformer en courbes.
Ajoutez un autre triangle dans la partie supérieure de la base de l'enveloppe, arrondissez son coin inférieur et développez la forme. Vous pouvez effacer les parties supérieure et inférieure des rectangles avec le bouton Outil Gomme (Maj-E), comme nous n'en aurons pas besoin.
Supprimer la partie supérieure du triangle inférieur avec le Outil Gomme (Maj-E) et Unir les deux parties des triangles Éclaireur. Enfin, faites une copie de la forme de base de l’enveloppe (Control-C> Control-F), sélectionnez à la fois le rectangle et la forme supérieure et utilisez les Couper fonction de Éclaireur couper les parties en dehors de l'enveloppe.
Sélectionnez à nouveau le rectangle et les rayures et appliquez le Minus Front fonction de Éclaireur couper les lignes. Basculez la couleur de l'enveloppe en blanc et ajoutez une base de cercle à notre icône, en la remplissant d'un dégradé linéaire allant du bleu plus foncé (# 2066F0) en bleu plus clair (# 1DD4FD) dans le fond.
Notre prochaine icône est pour l'application Musique, qui se compose du seul élément: un signe de note de musique. Commencez à former la note avec un 27 x 11 px rectangle. Sélectionnez les points d’ancrage sur le côté gauche de la forme avec le bouton Outil de sélection directe (A) et faites-les glisser vers le bas pour rendre la forme asymétrique.
Utilisez le Outil Rectangle (M) créer deux autres formes et commencer à former la «jambe» de la note.
Sélectionnez trois points d’ancrage du carré inférieur avec le Outil de sélection directe (A) et les rendre arrondis. ensuite Unir les formes dans Éclaireur et arrondissez également le coin entre les formes en utilisant le Coins vivants fonctionnalité.
Ajoutez la deuxième partie de la note et rendez la forme générale plus lisse et arrondie. Terminez avec l’icône en faisant la base, remplie du dégradé linéaire de l’orange (# FA5D3B) au rose (# FF2968).
Nous passons maintenant à un ensemble d'icônes liées au temps et créées dans un style unique. Commencez par former un 48 x 48 px même cercle, et un petit cercle à l'intérieur. Utilisez le Minus Front fonction de Éclaireur créer un anneau.
Créez un anneau elliptique plus petit à l'intérieur de la première forme et ajoutez deux lignes croisées alignées au centre..
Ajoutez une ligne horizontale dans la partie supérieure de la forme et courbez-la à l'aide de Effet> Warp> Arc. Met le Courbure horizontale valeur à -35%.
Ajoutez une autre ligne courbée dans la partie inférieure de notre globe et terminez avec cette icône en développant la forme du globe et en formant une base dégradée avec un fond orange foncé (# ff7632) et haut orange clair (# ff9408). Ajouter un cercle plus petit de couleur orange plus sombre (# e45221) et le cacher derrière la forme du globe, ce qui lui donne plus de contraste.
Pour notre prochaine icône, le chronomètre, nous utiliserons la base de l’icône Horloge mondiale que nous avons créée précédemment. Formez le centre du chronomètre en faisant un 8 x 8 px ellipse, aligné avec un 2 x 25 px rectangle pour la montre de seconde main.
Utilisez le Outil Rectangle (M) d'ajouter des détails mineurs au sommet de notre chronomètre. Rendez le bouton du chronomètre plus arrondi, à l’aide des Live Corners et définissez le rayon de coin sur 1,4 px.
Passons à l'icône Minuterie - elle a la même base que l'icône Chronomètre. Former un 2,5 x 13 px rayure dans la partie supérieure centrale de la bague avec le Outil Rectangle (M). Puis prenez le Outil Polygone, la mise en Côtés quantité à 3, ou utilisez le Outil stylo (P) former un triangle. Placez-le comme indiqué sur une capture d'écran ci-dessous, comme s'il s'agissait d'une part du gâteau.
Sélectionnez à la fois l’anneau blanc de base et le triangle et utilisez les boutons Minus Front fonction pour découper la partie gauche de la bague. Ajouter un petit 6 x 6 px cercle au centre de notre icône.
Enfin, faites pivoter le cercle de manière à ce que son point d’ancrage supérieur se situe à environ 45 degrés à gauche. Faites glisser le point d'ancrage avec le Outil de sélection directe (A), prolonger la forme. Convertir le point d'ancrage sélectionné en coin soit avec l'aide du Convertir dans le panneau de commande supérieur ou en cliquant dessus avec le bouton Outil de point d'ancrage (Maj-C), tournant ainsi notre forme dans la main d'une montre.
Notre dernière icône dans cet ensemble est l'alarme. Il a la même base avec l'anneau blanc que les icônes orange précédentes. Les aiguilles de la montre sont formées de deux bandes étroites faites avec le Outil Rectangle (M).
Formons la partie supérieure du réveil en faisant un cercle égal avec le Outil Ellipse (L) et en le divisant en deux parties égales en cliquant sur les points d'ancrage latéraux avec le Outil Ciseaux (C). Placez les moitiés au-dessus de l'alarme et ajoutez deux petites «jambes» dans le bas pour terminer l'icône.
L'icône Cartes est plutôt simple et ne contient pas beaucoup d'éléments. Commencez par former son centre avec un 40 x 40 px cercle d'un bleu (# 087eff) Couleur. Former une flèche de boussole à partir d'un 17 x 25 px triangle, en haut.
Ajouter un beige (# e5decb) base de l'icône. Aller à Objet> Chemin> Ajouter des points d'ancrage etsélectionnez le point d'ancrage au milieu en bas et tirez-le légèrement vers le haut pour former la pointe de flèche.
Placez une large bande verticale, faite avec un 26 x 83,5 px rectangle, à travers l’icône, et associez-le à une autre bande large, en le plaçant perpendiculairement. Cachez la forme croisée derrière le cercle bleu avec la flèche. Sélectionnez à la fois la base de l’icône et les bandes croisées et utilisez les boutons Diviser fonction de Éclaireur diviser la forme en trois parties.
Remplissez les parties de la base des icônes avec du vert (# 78c73d) et rose pâle (# fbc7d2) couleurs.
Passons à l'icône Météo. Remplissez la forme de base du ciel avec un dégradé linéaire de bleu plus foncé (# 2066f0) en bleu plus clair (# 1dd4fd) dans le fond. Ajouter un jaune (dégradé linéaire de # ffc505 à # fee403) cercle pour le soleil dans la partie gauche de l'icône. Commencez à former les nuages avec deux cercles: a 25,5 x 25,5 px cercle au centre du gabarit et un 21 x 21 px cercle plus proche de la partie droite de l'icône.
Créer un 43 x 16 px rectangle et faire ses coins arrondis avec 8 px rayon de coin. Alignez le rectangle avec les cercles et Unir les trois formes dans Éclaireur former un nuage lisse et arrondi.
Remplissez le nuage de couleur blanche et rendez-le semi-transparent, en abaissant le Opacité à 90%.
Passons à l'icône Caméra. Faites un cercle de base gris, rempli d’un dégradé linéaire à partir de gris foncé (# 8e9196) dans le bas au gris plus clair (#dadcdd) en haut et commencez à former la silhouette de la caméra à partir d'un gris foncé (# 3c3c3c) rectangle arrondi.
Ajouter un plus petit 30 x 17 px rectangle en haut et arrondir avec son coin supérieur gauche 7 px rayon de coin. Unir les formes et faire le coin entre les formes arrondies ainsi.
Ajoutez une bande étroite dans la partie supérieure de la caméra et utilisez le Minus Front fonction pour le découper.
Former l'icône d'obturateur à partir d'un 9 x 4 px rectangle et placez-le au centre de notre modèle. Utilisez le Outil stylo (P) ajouter une flèche pointant vers le bas. Met le Poids de l'AVC à 4 pt et faire les bouchons et le coin de la ligne arrondis dans le Accident vasculaire cérébral panneau.
Ajoutez les derniers détails à notre appareil photo: formez un jaune vif (# fac81b) indicateur d'un 6 x 6 px Taille. En outre, créez un grand cercle avec 4 pt de poids. Placez le cercle dans le coin inférieur droit de la caméra, comme indiqué dans la capture d'écran..
Objet> Développer le grand cercle, le tournant dans l'anneau. Sélectionnez la bague et la caméra et appliquez Minus Front découper l'anneau en formant le verre d'objet. Sélectionnez ensuite toutes les parties gris foncé de notre appareil photo et transformez-les en une seule forme composée en appuyant sur Contrôle-8.
Enfin, utilisez le Outil de création de forme (Maj-M) ou la Couper fonction de Éclaireur couper les parties inutiles de l'appareil photo en dehors de la base de notre icône.
Faisons un combiné pour l'icône du téléphone. Créé un 8 x 40 px rectangle et utiliser un Effet de distorsion d'arc avec 27% Courbure verticale valeur pour plier le rectangle sur le côté gauche. Ajouter deux 17 x 20 px des rectangles dans les parties supérieure et inférieure du combiné et arrondir les angles, ce qui rend les formes lisses. Unir toutes les parties du combiné Éclaireur.
Lisser le côté gauche du combiné en supprimant les points d’ancrage inutiles avec le Supprimer l'outil de point d'ancrage (-) et arrondir les coins intérieurs avec le Coins vivants fonctionnalité. Enfin, faites pivoter le téléphone pour 45 degrés et placez-le au-dessus de la base de l'icône, rempli d'un dégradé linéaire à partir d'un vert plus clair (# 86fb71) au vert plus foncé (# 0fd51c).
Formons l'icône Message sur la même base verte que celle que nous avons utilisée précédemment. Faire un 40 x 40 px cercle blanc et l’étendre un peu sur les côtés, en écrasant la forme. 48 x 40 px. Ajoutez un petit triangle dans le bas de la forme blanche, formant une bulle. Rendez le coin inférieur du triangle légèrement arrondi. Utilisez le Effet de distorsion d'arc avec -Courbure verticale de 36% valeur pour rendre le triangle légèrement arqué.
Voici à quoi ressemble l'icône terminée.
Notre icône suivante est l'icône de l'application Remote, qui est également très simple et se compose d'un seul élément. Tout d’abord, formez une base dégradée (à partir de bleu foncé # 2066f0 dans le bas au bleu clair # 1dd4fd) en haut. Ajouter un trait blanc avec 5.3 pt de poids de course et Aligner il à l'intérieur. Placer un 30 x 30 px triangle blanc au centre de notre icône.
Enfin, arrondissez les angles du triangle avec un 2,5 Rayon de coin. Génial! L'icône est prête, alors passons à autre chose.
L'icône d'entraînement représente une silhouette stylisée d'un homme qui court. Créez une base d’icône lumineuse, remplie d’un dégradé linéaire allant du vert jaunâtre (# c2ec38) en haut au vert en bas (# a3fc3f).
Prendre le Outil stylo (P) et créez des lignes séparées pour les bras, les jambes et le torse pliés avec 3 pt de poids et chapeaux et coins arrondis. Augmenter l'épaisseur du Poids de l'AVC de la ligne de torse à 6 pt et ajouter un 9 x 9 px cercle pour la tête.
Objet> Développer les lignes et remplissent les formes avec la couleur noire.
L'icône Réglages consiste en un pignon. Former la base de pignon d'un 48 x 48 px cercle avec un centre de découpe, faisant un anneau. Ajouter trois lignes avec 3 pt de poids, connecté au centre du modèle d'icône.
Nous devons maintenant ajouter des ondulations à notre rouage. Former un 5 x 9 px rectangle et rendre sa partie supérieure un peu plus étroite. Faire ses coins supérieurs arrondis avec 1,6 Rayon de coin. Placez les ondulations sur les parties supérieure et inférieure de la base du pignon.
Utilisons le Outil de rotation (R) ajouter plus d'éléments. Sélectionnez les deux ondulations, double-cliquez sur le Outil de rotation (R) appeler la fenêtre d’options contextuelles et définir le Tourner valeur à 360/18. De cette façon, Adobe Illustrator calculera automatiquement la valeur appropriée pour 18 formes. appuyez sur la Copie bouton.
presse Contrôle-D plusieurs fois pour répéter notre dernière action, en ajoutant plus d'éléments. Pour finir avec cette icône, sélectionnez toutes les ondulations, changez la couleur de remplissage en blanc et Tourner tous ensemble par -10 degrés.
Notre icône suivante est une fleur stylisée pour l'application Photos. Commencez par former le pétale à partir d'un 20 x 30 px rectangle et faire ses coins arrondis avec 10 px Rayon de coin. Dupliquez le pétale et placez sa copie dans la partie inférieure du modèle d'icône, comme indiqué dans la capture d'écran ci-dessous. Sélectionnez les deux pétales et utilisez le Outil de rotation (R) faire huit copies supplémentaires des pétales, en appliquant le Angle 360/8 valeur et en appuyant sur la Copie bouton.
presse Contrôle-D plusieurs fois pour former la fleur à huit pétales. Basculer les pétales sur Multiplier le mode de fusion et baisser le Opacité à 80%. Appliquons la couleur appropriée à chaque pétale, en commençant par celle du haut, en partant du haut et en se déplaçant dans le sens des aiguilles d’une montre: orange (# fa9700), jaune (# f0e22c), vert (# b5d558), turquoise (# 6ec19d), bleu (# 71b5e1), violet (# 8f60c3), rose (# d782a4) Et rouge (# ff2c2c).
Placez la fleur sur la base de l'icône blanche.
L'icône Stocks consiste en un diagramme minimaliste. Commencez à former le diagramme en faisant un bleu vif (# 02a6f5) ligne verticale de 3 pt taille avec le Outil Ligne (\). Placez-le au milieu de notre modèle, sur un fond sombre (# 3f3f3f) base de l'icône.
Ajoutez un petit cercle bleu au-dessus du milieu du modèle et appliquez un gris foncé (# 3f3f3f) 1 pt Accident vasculaire cérébral afin de le séparer visuellement de la ligne. Ajoutez quatre lignes supplémentaires des deux côtés de l’icône, avec un gris plus clair (# 555555) Accident vasculaire cérébral de 3 pt.
Objet> Développer les lignes et couper les parties inutiles en dehors de la base de l'icône, soit avec le Outil de création de forme (Maj-M) ou avec l'aide du Éclaireur.
Terminez avec l'icône en ajoutant une ligne en zigzag avec Accident vasculaire cérébral de 1,5 pt pour le graphique utilisant le Outil stylo (P). Développez la ligne et adaptez-la à la base de l'icône.
L'icône d'activité est plus compliquée et intéressante à créer. Il se compose de trois cercles dégradés colorés. Pour former un tel cercle, nous devons d’abord créer un groupe de fusion.
Faire deux égaux 6 x 7 px rectangles de rose (# ff2b91) Et rouge (# f1281e) couleurs. Sélectionnez les rectangles et allez à Objet> Mélange> Marque. Vous pouvez modifier les paramètres dans Objet> Fusion> Options de fusion, appliquer Couleur lisse faire un beau mélange sans couture. Faites glisser le groupe de raccord créé vers le Des pinceaux panneau et créer un nouveau Pinceau d'art avec les paramètres par défaut.
Créez un gris foncé (# 393839) la base du cercle pour notre icône et placez un autre cercle dessus, en appliquant notre pinceau comme Accident vasculaire cérébral. Ajustez la taille du cercle, de sorte qu'il s'adapte au bord extérieur du modèle d'icône. Met le Poids de l'AVC à 1 pt et Objet> Développer l'apparence transformer le coup de pinceau enforme. Faire pivoter ou retourner la forme avec le Outil de réflexion (O) horizontalement, si nécessaire, de manière à avoir le côté rose du cercle à gauche et le rouge à droite.
Créer un petit rose (# ff2b91) entourez-le et placez-le dans la partie centrale supérieure de l'anneau coloré, de manière à ce qu'il corresponde à la hauteur de la forme, en masquant le lien entre.
Nous devons maintenant ajouter de la dimension à l’anneau en formant une ombre subtile. Comme vous pouvez le constater, la bague a été divisée en plusieurs parties après l’avoir développée. C'est exactement ce dont nous avons besoin! Sélectionnez la pièce rouge supérieure de la bague, copie ça et Coller devant (Control-C> Control-F). Remplissez la copie avec un dégradé linéaire du rouge foncé (# a11b17) en blanc et passez à Multiplier le mode de fusion, rendant ainsi la pointe blanche du dégradé invisible.
Utilisez la même technique pour créer deux anneaux plus colorés dans la première forme. Créez les pinceaux d’art à partir d’un jaune (# d8ff06) et vert (# 86e402) groupe de mélange et d'un turquoise (# 06ffaa) et bleu (# 06e3f9) mélange. Terminez avec l'icône en ajoutant des cercles et en appliquant des ombres douces.
La suivante est l’icône Passbook, composée de quatre minuscules pictogrammes: une carte de crédit, un avion, une caméra et une tasse à café. Ces pictogrammes sont minimalistes et constitués de formes de base à l’aide de Éclaireur et Coins vivants fonctionnalité. Ci-dessous, vous pouvez voir une capture d'écran étape par étape, montrant comment combiner les formes pour chaque pictogramme..
La base de l’icône est composée de quatre bandes de couleurs différentes: rouge (# ff4e46), bleu (# 439eca), vert (# 3dca36) et orange (# ffa02b), chacun des 20 px la taille. Créer un défaut 80 x 80 px la base du cercle pour notre icône et supprimer les morceaux inutiles des rayures à l’aide du Outil de création de forme (Maj-M) en sélectionnant tous les objets et en cliquant sur les parties indésirables tout en maintenant le Alt clé.
Forme un même 3,5 x 3,5 px cercle, en traversant le côté supérieur de la bande orange, et copiez-le à droite en tenant les deux Alt et Décalage et en faisant glisser la forme. presse Contrôle-D plusieurs fois pour faire plus de copies du cercle. Puis sélectionnez toutes les copies et transformez-les en un Chemin composé en appuyant Contrôle-8. Sélectionnez lecercles et la bande orange et appliquer le Minus Front fonction pour découper les trous, rendant la bande perforée.
Enfin, placez les pictogrammes que nous avons créés précédemment et alignez-les au centre de notre icône..
La dernière icône de notre ensemble est l'icône de calendrier. Il consiste en un texte composé de la police Helvetica Neue et d’une simple base d’icône blanche..
Ce fut une quête longue mais passionnante! Nous avons créé un total de 20 icônes d'applications Écran d'accueil, utilisant des formes de base, des effets de déformation, des astuces et des effets. J'espère que vous avez aimé suivre ce guide et trouvé des techniques utiles. Bonne chance avec vos dessins!
Accentsconagua