Créez votre propre pack d'icônes iOS

1. Intro: Hey, ce qui se passe, tout le monde ici seulement. Je suis donc designer et entrepreneur du Royaume-Uni. Et cela a été un tutoriel très demandé sur la façon de faire vos propres icônes iOS. Depuis que j'ai sorti mon propre pack d'icônes iOS, j'ai fait plus de 30 000$ et j'ai eu beaucoup de demandes de gens demandant comment ils peuvent faire leurs propres packs d'icônes et soit comment ils peuvent faire leurs propres icônes en général. Donc, ce genre de guide est un très, très rapide sur la façon de faire le vôtre. Alors, allons y entrer. 2. 1ère partie Configurer votre icône: Donc on va commencer à Sigma. Si vous n'avez pas de compte figure, veuillez vous inscrire. Il est gratuit de s'inscrire et il est libre d'utiliser. On va faire un nouveau document. Et puis nous allons faire un cadre en appuyant sur f. Il suffit de faire un cadre, un hors-bord où nous pouvons faire nos icônes. Et ce que j'aimerais faire en premier, c'est que je voudrais apporter une capture d'écran de mon écran d'accueil , par exemple, comme apporter ceci. Donc, c'est actuellement au double de la résolution. On peut changer ça en allant à la largeur, en mettant une barre oblique, puis en vous mettant, et ensuite je vais la moitié de la largeur. Et ce que nous faisons à partir d'ici, c'est que vous pouvez voir que ces icônes ont un rayon de bordure. Donc nous allons copier ce rayon de frontière. Donc, nous allons faire une prière rectangle en appuyant sur r. Faire autour de la même taille que celui-ci. Faisons en sorte que c'est ici en dessous. Dans le cadre. Ils sont comme, oh, allez. On y va. Donc on veut s'en assurer. Donc on va zoomer. Et il est parfaitement aligné. Et puis ajustons la largeur pour être parfaite. 9091 n'est pas correct. 90 par 91, ça ne voit pas ma boue. Va le faire par 90, par 90. Donc c'est fait. Et puis nous pouvons faire baisser le rayon en allant à n'importe quel autre coin de la forme, en abaissant cela et en l'approchant le plus possible de l'icône iOS. Je pense que c'est assez proche. Donc maintenant que nous avons fait ça, nous pouvons écarter ça. Et nous pouvons commencer à faire notre première icône. 3. 2e partie de créer votre première icône: Donc mon pack d'icônes était principalement des icônes noires. Donc je vais faire des icônes noires ici aussi. Alors faisons que la couleur de remplissage est noire. Et commençons par quelque chose de simple. Donc, par exemple, si je regarde les icônes que nous avons ici sur la droite, commençons par l'application de rappels que nous voyons ici. Alors je vais faire un petit cercle. Fais ce cercle blanc, je crois. Oui, faisons-le blanc. Et faisons-le dix par dix. On y va. Donc mon but ici n'est pas que les icônes soient des répliques exactes de ce que vous voyez ici. Je veux que ces icônes aient l'esprit ou le style et le goût pour eux. Donc je vais chercher un look monochromatique, comme vous pouvez le voir ici. Donc c'est ce que nous allons faire et nous pourrions même rendre les choses plus simples. Ainsi, par exemple, l'application de rappels a trois points avec les anneaux autour d'eux. Je ne mettrai peut-être même pas les bagues. Donc, copions-le et collons-le. 12345678. Ouais, je pense que ça a l'air sympa. Et puis nous pouvons déplacer la deuxième ou la troisième forme même à huit. On y va. Et puis nous assurons que c'est centré. Joli. Et puis mettons-nous une ligne. Donc, j'aimerais mettre une ligne avec un rectangle parce que la ligne va être, eh bien, c'est fondamentalement un rectangle de toute façon. Faisons 49. En fait, rendons ça un peu plus court, lui largeur. Faisons 34, puis deux pixels de haut. Et puis nous allons le faire blanc, enverra à lui avec notre cercle, 12345678 année. Je pense que ça marche. Et ensuite on peut faire la même chose ici. Nous avons notre première icône. Très simple, très facile, vraiment aussi simple que ça. Laissez-moi, eh bien, nous allons facturer l'interface graphique en rappels. Alors maintenant que nous savons que notre application Rappels. 4. Partie 3 Réalisez l'application Notes: Ensuite, faisons l'étape suivante que vous voyez ici. Donc, nous allons simplement copier et coller nos rappels icône 1234. Donc, pour déplacer une icône dix pixels à chaque fois que vous maintenez la touche Maj enfoncée, puis vous appuyez sur la touche fléchée gauche ou droite, et il va le déplacer le long de dix pixels. Dites, passons à cela, et faisons l'application Chevaliers. Alors nous allons zoomer. On a fait ce bureau, et on prendra cette forme ici. Mettez-le ici, et nous l'apporterons, bien qu'Erlang, gentil. Donc, le WhatsApp a une sorte de venir en haut et ensuite aligné ainsi du haut du bloc-notes et il a deux lignes. Donc vous essayez de comprendre ce qui aurait l'air bien ici. Peut-être qu'on ne devrait pas en faire toute la largeur. Les lignes, je veux dire, donc on a fait celle-là et on va choisir notre ligne. Peut-être qu'on va le faire pour qu'il fasse 90 largeur maintenant, diminuons-la de deux. Donc, diminuons la largeur à 70, centrons-la. Et puis mettons-nous ouais, tu sais quoi, je pense que ça peut marcher. Et puis je verrai que nous avons trois lignes ici maintenant que j'ai copié et collé. Nous pouvons changer la largeur entre eux chacun en allant du côté droit ici et en la changeant à ce que nous pensons être approprié. Je pense que 12 a l'air bien. En fait, je veux également changer la largeur des icônes à nouveau. Alors ramenons ça peut-être à 60. Et puis nous allons envoyer aux icônes. Maintenant, nous sommes en fait penser que semble assez bon à elle comme une application de notes. Encore une fois, très, très simple. Ça n'a pas à être compliqué. Je pense que c'est la chose principale. Rendre les icônes aussi simples que vous le souhaitez, surtout quand vous commencez à faire les icônes parce qu'il est très facile de se compliquer avec les icônes et vraiment entrer dans le design parce que je connais certains concepteurs de lichen peut vraiment passer des heures juste sur une icône lorsque vous commencez la première fois, je vous recommande fortement de commencer simple avec des icônes comme celles-ci. 5. Partie 4 : Créer une icône pour votre application préférée: Maintenant, que se passe-t-il si vous voulez faire une icône de votre application préférée comme Twitter ? Donc ce qu'on va faire, c'est qu'on va copier. En fait, nous avons besoin d'un nom, notre icône aussi. Alors appelons-le celui-là, notes. Et nous allons nommer celui-ci Twitter. Donc, ce que nous faisons est de chercher Twitter, logo, SVG, peut-être aussi probablement la meilleure façon de le faire. Nous allons porter la ressource brune d'Epsilon que j'ai ici. Ensuite, nous pouvons télécharger le logo Twitter. Une fois que vous enregistrez le logo Twitter, vous allez vouloir revenir à votre chute FISMA, va supprimer ces lignes ici rapidement zone. Et puis nous pouvons glisser dans le fichier SVG ici. Une fois que vous avez un drag, Dan est assez grand, certainement beaucoup trop grand pour tenir sur l'icône elle-même. Et vous pouvez également voir que le SVG Twitter a en fait deux formes là-dedans et leur espacement autour de l'icône Twitter réelle. Donc on peut enlever cette forme. Nous pouvons prendre l'icône Twitter ici et la faire glisser dans notre icône Twitter ici. Et puis nous pouvons changer la taille de celui-ci. Oh, je change la taille de toute la forme. En fait, il suffit de changer la taille du vecteur. Maintenant, quand il s'agit de la taille de l'icône Twitter réelle devrait être relative à l'icône, c'est totalement à vous de décider. Mais ce que je recommande est si vous avez des formes comme celle-ci, comme l'icône Twitter, et que vous allez être plus icônes qui sont au milieu de l'icône elle-même, est d'essayer de garder à la même largeur et hauteur relativement, donc nous savons que notre icône est 90 par 90. Changons la largeur de cette petite icône à peut-être 48, par exemple. En fait, nous devons les lier donc nous assurer que les proportions sont limitées. Vous appuyez sur ce bouton ici pour faire ça. Mais ouais, changeons ça en 48. Et nous pouvons le centrer, il changera également la couleur de celui-ci. Et oui, je pense que ça ressemble plutôt bien comme une icône Twitter. Maintenant, nous pouvons voir la hauteur et la largeur de celui-ci est différente. Mais tant que nous restons à un maximum relatif de 48 et une largeur relative de 48, quel que soit le côté le plus long. Je pense que c'est un bon moyen de s'assurer que toutes vos icônes ont l'air en proportion et que vous obtenez une sorte de look plus cohérent et cohérent entre elles. 6. Partie 5 : Créer un icône de messages: Pourquoi ne pas faire l'icône des messages ensuite. Alors copions celui-ci. Apporter la RVI. Et on fait les messages que j'ai reçus. Donc, nous allons supprimer l'icône 2s à l'intérieur, va renommer notre groupe. Ce qu'on fait aujourd'hui, c'est qu'on va insérer un cercle. Donc on peut le faire en allant ici, ou on peut juste appuyer sur le clavier. J' avais un mec. Et puis faisons l'icône des maillages. Donc je vais très rude ici. Donc j'essaie juste de trouver plus de jambes, non ? Et ce qu'on va faire, c'est amener un vecteur. Donc nous utilisons l'outil de stylo ici que vous pouvez voir p. Et ensuite ce que nous ferons c'est que nous allons faire une forme comme ça. Oh, désolé, tu t'es connecté. Mais notre forme n'a évidemment qu'une grève. On doit lui donner un remplissage. Donc on a enlevé la grève et on va le remplir. Nous y sommes. Nous sommes en fait assez module déjà là. Alors ce que nous faisons, c'est nous prenons ces deux formes et nous les transformons en une seule. Donc on monte ici et tu peux faire la sélection syndicale et je vais faire la forme en une seule. Ensuite, nous pouvons changer la couleur de celui-ci à y. Maintenant, nous sommes, c'est notre icône mailles fait très rapide et facile. 7. Partie 6 de l'exportation: Pour exporter vos icônes, il vous suffit de sélectionner chacune d'elles. Comme ça. Vous allez à plus sur l'exportation. J' aime généralement les exporter à des résolutions assez élevées. Alors faisons quatre fois. Et puis vous pouvez faire des PNG facilement fonctionné le mieux. Vous exportez quatre couches, puis vous les enregistrez simplement où vous le souhaitez. Et c'est aussi simple que ça. Vous pouvez essentiellement passer sur toutes les icônes, toutes les icônes préférées de l'urine, et les copier. Faites-les simplement utiliser des outils vectoriels et des outils de forme pour les copier autant que vous le souhaitez. Et vous pouvez également obtenir des logos de marque comme Facebook, Twitter, Tesla, d'autres logos sur Internet. Glisser-déposer ne changez pas la couleur de ceux-ci, placez-les au-dessus de l'icône. Et c'est à peu près tout. Bien sûr. Ça prend du temps et c'est l'essentiel. Il ne prend quelques heures pour faire toutes les icônes pour toutes vos applications préférées. Mais avec le temps, vous pouvez le faire et vous pouvez avoir n'importe quelle sorte de chance comme. Donc, j'espère que vous avez apprécié ce tutoriel et merci de regarder.