Concevoir une icône de lanceur d'applications pour IOS (Iphone) et les appareils Android

1. Ce que nous allons couvrir dans ce cours ?: Dans ce cours, vous allez apprendre à créer impressionnantes et cool look et icônes d'application de lanceur pour les appareils Android et iOS. Maintenant, nous allons créer toutes les différentes tailles d'icônes d' application à partir de petits appareils et de grands appareils et appareils tetra, 3x, 2x et 1x. Cela va être automatiquement. Vous devez juste apprendre à utiliser les modèles que je vais vous montrer. Vous avez besoin d'une partie de l'expérience avec Photoshop et Illustrator. Voyons ce que nous allons couvrir dans ce cours. Maintenant, laissez-moi vous montrer ce que nous allons faire dans ce cours. Tout d'abord, nous allons concevoir l'icône de l'application iOS, qui sera notre icône de boîte aux lettres et nous allons générer toutes ses différentes tailles nécessaires pour différents appareils iOS. Ensuite, nous allons passer aux icônes de l'application Android et nous allons générer une icône de l'application d'hydratation très agréable et cool look. En fait, nous allons concevoir à différents thèmes pour cela. L' un est ce cœur et le second est cette icône d'application en verre. Au cours de ce cours, je vais également vous montrer comment je suis venu avec les premiers croquis de cette application d'hydratation et comment vous allez utiliser la même technique pour faire courir quelques idées et des jus créatifs qui coulent. Ensuite, à la fin, nous allons également concevoir des maquettes mobiles pour montrer à nos clients parce que les clients ne vont pas aimer les icônes simples. Donc nous allons leur montrer quelque chose de cool. Maintenant, la question est, pourquoi ai-je besoin d'apprendre cette compétence ? Quelle est la demande du marché de cette compétence ? La demande du marché est, laissez-moi vous montrer seulement deux sites Web et c'est 99designs site du concours. Vous pouvez y voir différents concours pour la conception d'icônes d'application allant de 200$ à 999$. Entre les deux, il y a 600$ pour juste une icône d'application. Vous pouvez voir ici, ils sont des icônes simples et le prix est, vous pouvez voir ici 999$. Ensuite, nous avons ce studio Envato et ils offrent différents designs d'icônes d' application avec différentes gammes de prix. Vous pouvez voir ici à 150$, 65$, 200$, 300$, 390$. Donc, la moyenne est presque supérieure à 100$. Vous pouvez facilement gagner 100$ en seulement une ou deux heures. Ce n'est pas très difficile. Je sais que vous êtes déjà convaincu et que vous avez vraiment besoin de commencer ce cours, alors commençons et concevons quelques icônes d'application impressionnantes. 2. Pourquoi nous avons besoin d'icônes d'applications: Alors parlons de pourquoi avons-nous vraiment besoin d'une icône d'application. L' icône de l'application est la toute première chose que votre utilisateur de l'application va regarder. Donc, si vous voulez un bon impact initial sur vos utilisateurs, vous devez avoir une icône d'application très agréable et élégante. Maintenant, les mauvaises icônes sont l'une des trois grandes raisons de rejet d'applications. Nous avons donc vraiment besoin d'une bonne icône d'application pour éviter tout rejet. Maintenant, du point de vue de la vente, une bonne icône d'application est un must have. Si vous voulez vraiment vendre votre application, personne ne prendra jamais la peine de télécharger votre application ou même de la regarder si l'icône de votre application est boiteuse et pathétique. Donc c'était tout sur la raison pour laquelle avons-nous vraiment besoin d'une icône d'application belle. Passons à la prochaine conférence. 3. Qualités de bonnes icônes d'application: Maintenant, parlons de quelques qualités de bonnes icônes d'application. Maintenant, la première chose est d'abord, vos icônes, icônes d'application doivent être facilement reconnaissables. N' importe qui peut facilement le distinguer de toute autre icône instantanément et facilement. Sachez que vos icônes doivent être facilement mémorables, et si quelqu'un vous joue un jeu ou vous télécharge une application, ils voient instantanément et disent, « Oh oui, j'ai utilisé cette application une fois, c'est une très belle application. » Ils doivent être esthétiquement attrayants. S' ils ont l'air horribles et moches, je ne pense pas que personne ne les regardera ou même les téléchargera. L' icône de votre application doit se démarquer de la foule. Ainsi, les personnes qui naviguent, l'App Store ou tentent de télécharger votre application, utilisent et téléchargent votre application au lieu des autres applications similaires. C' est un point très important, qui est votre icône de l'application doit être simple et devrait utiliser un très simples formes et couleurs. C' est tout au sujet des qualités d'une bonne icône d'application. Maintenant, nous devrions passer à la prochaine conférence. 4. D'autres conceptions d'icônes d'application: Parlons de certains de ces ne pas faire de conception App Icône. J' ai énuméré quelques choses ici des directives IOS par Apple, alors parlons d'eux. Règle numéro 1 ; ne jamais essayer de mettre du texte sur vos icônes, car comme vos icônes vont devenir plus petites, les textes nous seront illisibles. Donc, il n'y a pas de sens à mettre beaucoup de textes sur les icônes de votre application. Si vous essayez d'utiliser beaucoup d'objets dans un seul morceau de petite icône d'application, vous donnez beaucoup de points de focus dans un design. Il ne fera que distraire les yeux de vos utilisateurs, et ce n'est pas une très bonne pratique de conception, alors essayez d'éviter cela. N' utilisez pas de couleurs ternes dans la conception de l'icône de votre application. Nos yeux négligeront ces couleurs ternes alors essayez de les éviter. Ne concevez pas vos icônes d'application uniquement pour les grands écrans ou les derniers appareils IOS. Lors de la conception d'icônes d'application, gardez toujours à l'esprit tous les autres petits appareils aussi. N' essayez jamais d'utiliser la photo de votre animal de compagnie comme icône d'application, ou une photo que vous avez prise il y a quelques années. Ils peuvent mal guider votre utilisateur, et ils peuvent ne pas décrire ce que fait réellement votre application. Évitez de créer des icônes qui ressemblent aux icônes par défaut des applications IOS. Cela créera beaucoup de confusion dans l'esprit de votre utilisateur. Celui-ci est un peu technique ; évitez la transparence dans n'importe quelle icône d'application IOS que vous concevez, puis vous essayez de télécharger vos icônes d'application sur App Store. n'y a pas de support pour PNG, ni pour les fichiers transparents. Si vous voulez en savoir plus à ce sujet, j'inclurai le lien dans les ressources pour les directives de conception IOS. Essayez de lire cette ligne directrice Apple IOS à fond sur les icônes d'application, sorte que vous pouvez concevoir des icônes d'application impressionnantes, et ne pas répéter les erreurs de beaucoup de concepteurs font ces jours-ci. 5. Fait de la conception d'icônes d'application: Parlons de ce que vous devez vraiment faire lors de la conception d'icônes d'application. couleurs vives et nettes saisissent l'œil de l'utilisateur et captent son attention. C' est un must have. Utilisez des couleurs vives et nettes autant que vous le pouvez. Utilisez un objet dominant unique au milieu pour concentrer vos spectateurs vers celui-ci. Toutes les applications populaires partagent la même qualité, alors utilisez-la à bon escient. Vous pouvez également utiliser un symbole de lettre si vous ne pouvez pas penser à autre chose. Parfois, cela arrive avec tous les concepteurs. Cela fonctionne très bien si vous êtes une grande marque. Votre cerveau peut comprendre des formes simples plus facilement que les formes complexes. Utilisez-les dans les icônes de votre application. N' essaie pas d'être un Picasso. C' est un point technique. vecteurs sont des formes qui peuvent se développer ou se contracter sans perdre de qualité. Essayez de les utiliser lors de la conception dans Photoshop. Nous n'utiliserons que des formes vectorielles dans Photoshop lorsqu'il s'agit de concevoir des icônes d'application. Ce sont les points clés que vous devez garder à l'esprit tout en concevant des icônes d'application géniales et impressionnantes. 6. Spécifications de taille IOS (Iphone) IOS: Parlons de certaines spécifications de taille d'icône. Voici quelques-uns des quelques guides sur les tailles d'icônes de l'application iOS et je voudrais les partager avec vous. C' est l'un d'eux de ce type Ivo, je ne connais pas son nom complet. J' inclurai également les liens dans la section Ressources, alors assurez-vous de les consulter. Maintenant, ne vous inquiétez pas que vous avez besoin de mémoriser ces tailles d'icônes, il vous suffit de les regarder pour savoir quelles tailles d'icônes sont normalement utilisées. C' est donc un guide, alors c'est un autre. Il y a peu de tailles d'icônes pour iPhone. Ne vous inquiétez pas des points et pt et ceci au taux de 2x et au taux de 3x. Nous utiliserons uniquement ces tailles de pixels et nous utiliserons un modèle pour rendre automatiquement toutes les différentes tailles d'icônes. Ne vous inquiétez pas pour eux. Jetez un oeil à eux afin que vous sachiez quelles tailles sont communes. Ensuite, si vous voulez entrer dans beaucoup de détails, vous pouvez lire ce guide Apple iOS Human Interface Guideline sur toutes les tailles d'icône et d'image. C' est une très grande liste. Tout cela sur les tailles d'icônes. Passons à la prochaine conférence. 7. Conception toujours en carré pour IOS: Chaque fois que vous concevez une icône d'application iOS, pensez toujours en carré. Donc, ce que cela signifie est de ne jamais essayer d'utiliser cette forme comme base d'icônes, car les icônes de l'application iOS ne prennent pas en charge la transparence ou le PNG. Cet écrêtage est automatiquement appliqué par les systèmes d'exploitation iOS ou iOS. Alors ne vous inquiétez pas de cette rondeur de vos icônes. Il suffit de concevoir en carré et votre rondeur sera appliquée automatiquement. Ceci est une bande très importante parce que la plupart de la bigness qu'ils essaient de concevoir dans cette forme, qui finit par très laid en montrant écran noir derrière l'icône de votre application. Alors gardez cela à l'esprit et passons à la prochaine conférence. 8. Utiliser l'espace et le point de point de focale d'icône: Laissez-moi partager un autre conseil avec vous, pendant que vous concevez l'icône de l'application IOS. Assurez-vous d'utiliser autant d'espace que possible dans ce canevas. Lorsque vous concevez, si vous avez un objet principal comme n'importe quelle chose ici, essayez d'utiliser autant que vous le pouvez, parce que lorsque nous essayons d'aller aux petites tailles, il sera beau. Si votre objet est très petit, comme quelque chose au milieu, peut-être comme ce cercle, comme ça. Laisse-moi le déplacer au milieu. Lorsque nous essayons d'arriver à des tailles très petites, l'objet principal de notre conception deviendra de plus en plus petit. C' est donc un conseil très important, essayez toujours d'utiliser autant d'espace que vous le pouvez. Pensez toujours aux petites tailles aussi. Ne concevez donc pas seulement des canevas de 1024 pixels par 1024 pixels, essayez toujours de voir les tailles plus petites ou zoomez et zoomez encore et encore pour voir que votre design est parfait dans presque toutes les tailles. Voici quelques conseils sur la conception des icônes de votre application IOS dans Photoshop. Passons maintenant à la prochaine conférence. 9. Utiliser des outils et des formes vectoriels pour les icônes de l'application: Essayez toujours d'utiliser des formes vectorielles dans Photoshop lorsque vous concevez des icônes d'application iOS ou d'autres icônes d'application. Maintenant, ce que je veux dire par formes vectorielles, nous allons utiliser principalement ces outils, ces outils de forme. Ensuite, nous allons utiliser cette sélection de barre et peut-être cet outil de stylo. Ce sont les outils que nous utiliserons la plupart du temps. Si vous ne faites pas une illustration ou un objet 3D ou quelque chose comme ça, nous aurons seulement besoin de ces outils. Passons à la prochaine conférence. 10. Taille d'icônes et grille d'application: Maintenant, la question est, « Quelle taille pour commencer votre conception ? » La réponse est que vous devez concevoir dans la plus grande taille, qui est celui-ci, 1024 pixels par 1024 pixels, qui est une exigence pour l'icône App-Store, et laissez-moi vous montrer comment je l'ai configuré dans Photoshop. Maintenant, j'ai utilisé ce tableau carré de 1024 x 1024 pixels, et c'est ainsi que j'ai mis en place cette grille. Laisse-moi te montrer. Allez à modifier, les préférences, puis classer les guides et les tranches, et allez à cette partie. Ce que j'ai utilisé, c'est que j'ai utilisé cette ligne de création après tous les 64 pixels et les subdivisions à deux subdivisions pour cela. Chaque petite boîte est de 32 pixels et chaque grande boîte est de 64 pixels. C' est ma configuration pour la conception d'icônes d'application, et que vous utilisiez Illustrator ou Photoshop, utilisez toujours cette toile de 1024 pixels par 1024 pixels pour vos conceptions d'icônes d'application. Maintenant, nous connaissons la taille que nous allons utiliser pour la conception. Passons à la prochaine conférence. 11. Configuration de document pour la conception d'icônes IOS App: Je voulais vous montrer ma configuration de fichier pour une icône d'application, qui est 1024 par 1024 pixels et la résolution définie sur 72 pixels, mode couleur sur RVB, et l'arrière-plan doit être transparent. Assurez-vous que votre profil de couleur est défini sur « Ne pas colorier gérer ce document ». C' est un point très important. Il s'agit de mes documents configurés pour l'icône de l'application. Vous vous demandez peut-être ce que j'ai utilisé dans la résolution ou le profil de couleur, donc c'est la réponse. Passons à quelques-unes des prochaines conférences. 12. Comment utiliser le modèle PSD d'icône gratuite: Voyons ce qu'il y a à l'intérieur de ce modèle d'icône d'application. Ouvrez-le dans Photoshop. Je l'ai ouvert dans Photoshop ici. Ok, maintenant c'est le fichier principal, mais nous allons l'utiliser. Éditez-moi et Enregistrer Photoshop Smart Object, double-cliquez dessus et vous pouvez voir ici est notre icône carrée. Fondamentalement, ce sont quelques masques pour la rondeur. Nous les utiliserons pour aider notre rondeur. C' est la rondeur qui sera appliquée une fois que l'icône de l'application est téléchargée sur le site iOS. C' est un masque interne et c'est un masque externe. On doit cacher celui-ci à la fin. Ce sont quelques dégradés et couleurs iOS pour les arrière-plans. Si vous voulez utiliser une couleur unie, vous pouvez utiliser ces couleurs, n'importe laquelle de ces couleurs ou si vous voulez utiliser un dégradé, vous pouvez utiliser un dégradé ici comme ça. C' est tout au sujet de ce modèle d'application icône, donc nous allons utiliser celui-ci pour accomplir notre tâche de conception de l'icône ISFP dans Photoshop. Passons à la prochaine conférence. 13. Mise à jour des modèles d'icônes d'application: Bonjour, tous les concepteurs d'icônes d'application. Depuis ces derniers mois, beaucoup d'étudiants se plaignent de ne pas pouvoir télécharger des modèles d'icônes d'applications. Maintenant, le problème est que ce gars qui possède le modèle d'icône de l'application l'a converti en un site payant. Vous pouvez voir ici aller pour appliquer des pixels. Si vous allez sur ce site, vous pouvez voir ce sont tous les modèles d'icônes d'application et vous devez payer au moins 9$ par mois ou par année, 60$ pour obtenir ces. Comme mon cours était gratuit, j'ai donc tendance à utiliser des modèles gratuits. J' ai déjà un modèle gratuit. Je l'ai téléchargé sur ma Dropbox et je vais partager un lien avec vous mais sa version 5, je ne sais pas si ce concepteur a des modèles plus mis à jour. Mais pour ce cours, vous pouvez utiliser celui-ci ou vous pouvez aller sur ces sites, iosicontemplate.com. Vous pouvez voir ici, je vous ai montré la méthode alors ne vous inquiétez pas, tous ces modèles d'icône d'application, ils ont presque la structure similaire de travail comme vous pouvez le voir ici il y a différentes tailles de la même application. Ensuite, nous avons ceci, un autre de everyinteraction.com. iOS 9 App Icône Template et il a été mis à jour le 12 Octobre 2015 dernière mise à jour et ceci est le fichier. Vous pouvez télécharger ce fichier et ce sont toutes les tailles d'icônes qu'il peut générer. Il a aussi une maquette avec elle. Je pense que toutes les instructions seront à l'intérieur de ces PSD alors ne vous inquiétez pas. Le troisième que je veux te montrer est ce Bjango. Ce sont, je pense, gars très geeky du point de vue de la conception de l'interface utilisateur. Ils ont beaucoup d'actions et de ressources différentes. Ils ont ce modèle d'icône d'application dans Illustrator, Sketch Affinity Designer et Photoshop. Android, iOS, macOS, Apple TV, Apple Watch, iMessage, beaucoup de modèles différents. Vous pouvez les télécharger ici et essayer d'utiliser ceux-ci. Ils peuvent avoir les actions avec elle parce qu'ils ont beaucoup d'actions. Vous pouvez voir ci-dessous sont les actions Bjango. C' est la mise à jour que je voulais vous transmettre. Je vais télécharger ce modèle d'icône d'application de lien version 5 lié à ma Dropbox et je vais partager ce lien. Gardez toutes les options à l'esprit. Vous pouvez, si vous voulez payer et obtenir ces grands mis à jour, vous pouvez aller sur ce site, si vous voulez rester avec des sources gratuites, vous pouvez utiliser ces trois sites et l'ancien modèle que je vais télécharger en ce moment. C' est la mise à jour que je voulais vous donner les gars, alors continuez à concevoir. Montre-moi ton travail. Téléchargez-le sur cette URL, bit.ly/uistudents. Téléchargez vos icônes ici, téléchargez-les sur cette page et je vais passer en revue vos icônes d'application. Vous pouvez voir ici, c'est ma photo, oubliez pas toujours de mettre votre nom à la fin de votre fichier, comme l'icône de l'application soulignent le nom de l'étudiant. Votre nom, naviguez et téléchargez votre fichier. Ce sont les choses que vous pouvez faire ici. Je serai impatient de voir vos créations créatives et impressionnantes. Restez à l'écoute et faites-moi savoir si vous avez besoin de quelque chose de moi ou des questions que vous voulez poser. Passons à la leçon suivante. 14. Concevoir la base surélevée 3d de l'icône IOS App: Dans cette leçon, nous allons d'abord créer cette base de cette icône. C' est essentiellement cette forme rectangulaire et son élévation et ses ombres et tout. Commençons et faisons un nouveau fichier de 1124 pixels par 1124 pixels. Laissez le reste des paramètres comme celui-ci, résolution 72, ne gérez pas la couleur de ce document. Gardez toujours à l'esprit que lorsque vous concevez des applications mobiles ou web design, n'utilisez jamais de profil de couleur, il suffit de l'utiliser. Ne coloriez pas Gérer ce document. D' accord ? Appuyez sur « OK ». C' est notre calque d'arrière-plan, allons en faire un calque d'arrière-plan, Nouveau calque, Arrière-plan à partir du calque. Ce calque est maintenant transformé en arrière-plan. Changeons la couleur en appuyant sur « Alt Del ». Cela va passer à cette couleur de premier plan, qui est blanche, puis nous allons créer un rectangle arrondi. Sélectionnez le « Rectangle arrondi » cliquez n'importe où, un seul clic, et choisissez la hauteur et la largeur à 1024 par 1024 pixels et la rondeur, vous utiliserez sera ce 232 pixels. Presque et 32, 32 et 32. Appuyez sur « OK » et changeons sa couleur en E, C, F0, F1. D' accord. C'est un peu de couleur bleu grisâtre. Sélectionnez « OK », puis nous allons les sélectionner tous les deux et la ligne centrale. Ensuite, nous allons rapidement créer des guides autour de notre forme, comme ça. C' est, j'utilise un guide rapide plug-in. Maintenant, nous avons défini notre forme et nos guides. Ajoutons quelques styles à ce calque. Pour le style, nous allons ajouter va être biseau et emboss. Maintenant, laissez-moi vous montrer les paramètres que j'utilise. Utilisez le style comme biseau intérieur, Techniques, profondeur lisse, déplacer la profondeur à 100 pour cent. Utilisez une direction vers le haut. La taille doit être de 16 x 16 pixels. Utilisez toujours des nombres pairs parce que nous allons réduire nos icônes, sorte que même les nombres fonctionnent mieux. Utilisez donc toujours des nombres pairs dans vos styles. Ensuite, nous utiliserons cet angle à 90 et cette altitude à 21 pour cent ou degré. Ok, ce mode de surbrillance devrait être réglé sur l'écran et la couleur devrait être blanche, et déplacer son curseur à 55 pour cent. Ok, maintenant pour la couleur de l'ombre, j'utilise cette couleur B, D, C, 3C, 7. Définir cette couleur comme mode d'ombre pour le biseau interne et le mode d'ombre doit être normal ne pas multiplier et glisser son opacité 200 pour cent. Ok, c'est ça. Ajoutons maintenant de l'ombre intérieure à ce calque. Allez à Calque. L'étape 2 est Ombre intérieure. intérieure, ombre intérieure et ombre intérieure. Ombre intérieure, la couleur sera la même que ce biseau et gaufre l'ombre. Donc j'utilise la même couleur B, D, C, trois, C, sept. Appuyez sur « OK ». L'opacité devrait être de 100 pour cent et l'angle sera de moins 90. Gardez toujours à l'esprit que nous produisons de l'ombre de ce bas vers le haut. Donc, cet angle est de moins 90 degrés, il vient du bas. La lumière est en bas, donc l'ombre devrait être ici OK, alors la distance devrait être de 32 pixels, ce qui est aussi un nombre pair. Gardez toujours à l'esprit pourquoi j'utilise des nombres pairs parce que nos icônes seront produites dans des tailles plus petites, donc nous ne voulons aucun problème dans nos calculs. Donc, utilisez des nombres pairs. Appuyez sur « OK ». Essayons d'ajouter une superposition de dégradé à ce calque. Accédez à Style de calque, Incrustation de dégradé. Vous pouvez voir dès que j'ai activé cette option sur Gradient Overlay, nous avons quelques ombres ici, les ombres intérieures sont très subtiles. C' est donc la raison pour laquelle j'utilise ce style de calque de superposition de dégradé. Permettez-moi de vous montrer les paramètres de ce style de calque. Le mode de fusion devrait être normal, opacité devrait être de 60 pour cent, et ce dégradé est fondamentalement, laissez-moi vous montrer la couleur que j'utilise pour ce dégradé. La couleur est B, quatre, B, D, C, six. Il est sur la portée gauche de cette couleur est presque 19 pour cent ou 18 pour cent. Nous utilisons cette couleur blanche plus et cette couleur bleue grisâtre et moins. C' est essentiellement la couleur blanche et c'est l'opacité est un 100 pour cent. Cliquez sur « OK » et assurez-vous que vous avez appuyé sur cette inversion. Nous utilisons cet inverse ici. Ensuite, le style que nous utilisons le style Radial, notre angle de ces gradients radiaux est 140 et l'échelle est définie à 121 pour cent. Ce sont les paramètres de ce style de calque de superposition de dégradé et c' était la dernière étape de notre exercice de création de base. C' est tout au sujet de la base pour cette icône d'application. Passons à la prochaine conférence. 15. Concevoir la base plate de l'icône IOS d'application IOS: Nous allons également créer un autre arrière-plan pour cette icône qui sera un fond simple. Donc dupliquez ce rectangle sonné et masquez celui-ci et nous allons utiliser zéro pixels pour la rondeur. Nous n'allons pas utiliser de rondeur. Cachez cet effet biseau et aussi cette ombre intérieure. Nous utiliserons donc uniquement cette forme de plan pour le dégradé et l'apparence de l'icône. Je vais expliquer cette technique dans l'environnement lorsque nous allons exporter toutes les icônes parce que iOS n'utilise pas ou n'applique aucun PNG. On a besoin d'une icône carrée. Donc, nous allons utiliser ces deux pour créer nos icônes. Ce sera pour l'effet arrondi et nous allons également créer, utiliser celui-ci pour une icône simple. Donc, tout cela est à propos de cette base de création de cette icône. Nous avons créé deux bases dans cette conférence, celle-ci et celle-ci. Nous pouvons également déplacer l'angle de ceci dans ce fond carré. Peut-être comme ça. On peut le changer en mode linéaire peut-être, et changer l'angle à 90 pour cent et le rendre normal comme ça. Ok, c'est mieux maintenant. Donc, pour la forme carrée, nous utilisons un dégradé différent, qui est celui-ci. Dégradé linéaire avec élimination de cet inverse, il sera du blanc à l'obscurité. Donc échelle, si vous voulez changer l'échelle, je suppose que 130 pour cent est bon. Nous ne voulons pas beaucoup de couleur ici parce que notre forme principale sera ici. Appuyez sur « OK », et tout cela est pour cette conférence. Passons à la prochaine conférence. 16. Concevoir la forme des formes d'enveloppe dans Photoshop: Dans la dernière conférence, nous avons créé notre forme de base. Créons notre forme d'icône principale en ce moment. Je vais commencer par le rectangle arrondi. Aller à la touche « U » pour sélectionner l'outil de forme et le rectangle arrondi. Maintenant, je vais régler le rayon à 24 pixels et cliquer une fois sur cette toile. Maintenant, la taille pour cela est de 736 pixels de large et la hauteur est de 444 pixels. Alors définissez cette taille et cliquez sur OK et sa couleur est celle-ci. La valeur est 242d36 ou 242d36. Définissez la couleur. Laisse-moi en parler pour que tu puisses le voir. Je vais l'aligner au milieu. J' utilise des touches de raccourci personnalisées. Vous pouvez utiliser celui-ci d'ici. Appuyez sur l'outil Déplacer et vous pouvez utiliser cet alignement pour descendre ici. Je l'ai aligné au milieu et pour la partie supérieure de l'enveloppe, je n'utiliserai pas Photoshop parce que ce n'est pas un outil précis pour créer une telle forme de triangle, triangle arrondi. Nous allons utiliser Illustrator pour ça. Mais pour le reste des formes et les formes inférieures, nous utiliserons Photoshop. Dessinons d'autres formes comme 2 barres ici, comme ça. Je vais utiliser cette couleur, qui est 3498db pour la couleur bleue. Je pense que le premier était plus sombre et le reproduisait, « Control J ». Je vais utiliser le plus léger et nous allons les séparer de 1020 pixels. Je le déplace juste 20 pixels du premier. Maintenant, nous allons les sélectionner tous les deux et nous allons les regrouper en barres. Ensuite, nous allons l'aligner au bas de cette forme comme ça. Maintenant, faisons une autre forme qui était essentiellement la forme du timbre. Utilisez votre outil de forme personnalisé de Photoshop par défaut. Si vous ne voyez pas toutes les formes, cliquez ici et cliquez sur « tous ». Vous pourrez voir toutes les formes ici. Pour le timbre, si vous voulez le timbre rond, vous pouvez utiliser le timbre rond ici comme ça et le colorer. Celui-ci, sa couleur est 34495e. Si vous voulez utiliser celui-ci, vous pouvez l'utiliser. Ou vous pouvez sélectionner l'autre qui était une forme peu rectangulaire. Je crois que c'est par ici. Oui. Celle-là. Vous pouvez sélectionner celui-ci et masquer celui-ci. Nous avons presque fini avec nos formes pour notre icône principale, nous sommes presque complètement fait dans Photoshop en ce moment. Pour la forme suivante de l'enveloppe, nous allons utiliser Illustrator pour cela. Voyons dans la prochaine conférence comment nous allons utiliser Illustrator pour concevoir la partie supérieure de notre enveloppe. 17. Utiliser Illustrator pour la forme d'une enveloppe: Ok, maintenant, avant de commencer notre conception dans Illustrator, nous devons apporter quelques changements. Accédez à Modifier les préférences, puis accédez aux guides et notes. J' ai défini ma ligne de grille après tous les 24 pixels et la subdivision à 12. Il est fondamentalement chaque petites boîtes deux pixels, et chaque grande boîte 24 pixels. Aussi, nous allons définir nos unités en pixels, trait, général et type. type devrait être en points et n'a pas d'importance parce que nous n'allons pas utiliser de police en ce moment, ou de texte en ce moment. Ce sont deux unités de réglage. Convertissez vos unités en pixels parce que nous concevons en pixels, puis votre grille puis guide, configuration, certains guides en nombres pairs. Cliquez sur OK. Je vais ouvrir un nouveau fichier, nouveau et ensuite nous allons utiliser des pixels dans les unités 1024 par 1024. Le mode couleur est RVB. Aligner de nouveaux objets à la grille de pixels, ok et ceci est notre toile. Je vais activer ma grille en ce moment en cliquant sur contrôle et guillemets sur mon clavier. Maintenant, nous allons concevoir notre forme principale et nous aimerions nous façonner ici. Pour les faire correspondre parfaitement d'abord, nous allons dessiner un rectangle arrondi juste pour mieux l'aligner, donc 736 était la largeur et la hauteur était 444 pixels et la rondeur était de 24 pixels. Notre forme, la forme principale est faite ici. Supprimez ce contour d'ici. C' est essentiellement le contour du trait. Je l'ai enlevé et donne à celui-ci un peu de couleur, peut-être que le blanc est correct, je suppose. Maintenant, c'est notre forme principale et mon art d'ordinateur portable pour ça, nous allons utiliser l'outil polygone. Cliquez sur l'outil polygone et cliquez ici. Entrez trois côtés dans le polygone, puis cliquez sur OK. Notre triangle est là, faisons-le tourner. Appuyez sur Maj, de sorte qu'il est tourné dans certains angles spécifiques. Cachons le guide maintenant, et colorons quelque chose d'autre pour que nous puissions le voir correctement et aussi celui-ci. Maintenant, nous allons transformer ce triangle, cliquez dessus et allez dans ce panneau Transformation. Nous allons utiliser 736 pixels pour la largeur et 224 pixels pour la hauteur. Mettez-le comme ça et déplacez-le ici. Maintenant, ce que nous allons utiliser, c'est essentiellement des coins en direct. Pour y accéder, nous allons utiliser cet outil de sélection Trek. Vous pouvez voir maintenant ces coins en direct sont actifs ici. Vous pouvez voir de petits cercles à l'intérieur de ce triangle. Vous pouvez double-cliquer sur l'un d'eux et entrer votre valeur de pixel pour votre coin autour de nous. J' ai entré ce 24 pixels et appuyez sur OK. Dès que vous appuyez sur OK, cela est essentiellement réduit à une autre taille. La première étape est que nous allons faire un avantage pour ce coin. Pour faire cela, nous allons sélectionner un point d'ancrage ici pour rendre cela actif, puis cliquez et faites glisser ceci dans ce coin. Une fois que nous voyons le pixel zéro, relâchez-le. Maintenant, pour le dimensionner, nous allons utiliser notre outil Déplacer puis transformer. Nous allons utiliser 736 pixels. Assurez-vous de vous aligner sur l'échelle de grille de pixels et tous ces éléments sont désactivés. Maintenant, appuyez sur Entrée et nous avons notre forme. Alignons-le en fonction de notre forme de fond. Déplacez-le un peu comme ça et il est presque parfaitement réglé là-dessus. J' ai appuyé sur le contrôle via pour venir cela dans ce mode contour, alors gardez à l'esprit en appuyant sur le contrôle via à nouveau. Maintenant, je vais copier cette forme. Copier et nous allons le coller dans la boutique photo. Nous allons utiliser Shape Layer. Appuyez sur OK et nous avons notre calque Shape ici, comme ça. Vous pouvez voir qu'il est parfaitement en forme. Nous allons créer un hangar par ici. Maintenant, pour l'ombre portée, nous allons utiliser des valeurs qui sont un peu comme la distance est 42, taille est quelque chose comme 764 peut-être. L' angle est 90 et le mode de fusion est multiplier Opacité. Vous pouvez utiliser l'opacité, ce que vous voulez. Si vous voulez une ombre dure, vous pouvez la définir sur 55 ou peut-être plus que cela. C' est la taille du flou, combien il va flou autour cette ombre et c'est essentiellement la distance du haut. Gardez-les un peu plus près pour que vos ombres ne fuient pas de cette zone. Les ombres devraient être ici. Appuyez sur OK et notre forme d'icône principale est terminée. Nous avons utilisé Photo shop et Illustrator pour créer cette forme. Maintenant, nous allons les regrouper en un seul groupe pour les gérer facilement. Nous avons cette forme et puis nous avons ceci et voici les barres. Sélectionnez-les tous en appuyant sur la touche Ctrl et Control G pour les regrouper. Je vais le nommer icône de courrier et puis nous avons également besoin de l'aligner un peu au milieu, contrôle cliquez sur les deux d'entre eux. Alignez-les au milieu. Il est presque au milieu en ce moment donc il n'est pas aligné ou déplacé lorsque j'ai appuyé sur mes outils d'alignement. C' est parfait. Nous avons terminé notre conception pour cette icône. Passons à la section où nous exporterons nos icônes dans différentes tailles et quels problèmes la plupart des designers et nouveaux designers rencontrent lors de l'exportation de leurs icônes. 18. Touches de conception finale: Maintenant, nous allons utiliser l'application de modèle d'icône. Nous l'avons téléchargé lors de nos dernières conférences, et nous allons l'utiliser pour exporter l'icône de l'application dans différentes tailles pour iPhone et iPad. J' ai ouvert mon modèle d'icône d'application, fichier psd. Allez dans ce « Éditez moi » et enregistrez. Cliquez sur « OK » s'il s'agit d'une incompatibilité de profil de couleur. Ne vous inquiétez pas pour ça. Maintenant, je vais aller à cette fenêtre, et arranger, et carreler tout verticalement. Maintenant, pour ça, ma forme d'icône, allez à ça. Je vais les regrouper tous, et je vais les faire glisser ici sur ce fichier Icône 1.psd. Maintenant, je vais fermer celui-ci, et nous allons à nouveau les carreler en onglets. Maintenant, tout d'abord, nous allons supprimer cette icône de l'application supérieure Template Glyph, et puis nous allons convertir cette icône de messagerie d'application en objet intelligent, alt F5, ou vous pouvez cliquer avec le bouton droit de la souris et convertir en objet intelligent comme ça. Convertissez en objet intelligent, puis nous allons faire quelques changements supplémentaires, masquer ces dégradés en ce moment, et activer cet arrière-plan, et les aligner tous au milieu, comme ça. Ctrl D pour désélectionner. Maintenant, laissez-moi vous montrer comment nous allons utiliser ça. Tout d'abord, nous allons simplement enregistrer Ctrl S et voir ce qui se passe dans notre icône d'application pendant que notre icône d'application est ici. Vous pouvez voir comment nos coins arrondis fonctionnent ici. Mais juste pour les réparer, laisse-moi te montrer le truc. Cachons l'arrière-plan dégradé, l'arrière-plan pleine échelle, et accédez à ce masque externe. Le masque extérieur est parfait. Prenez ce calque de masque intérieur et déplacez-le vers le bas de votre rectangle arrondi, qui est votre arrière-plan. Cette base 3D surélevée. Déplacez ce masque intérieur en dessous de cela. Masque intérieur est fondamentalement cette forme pour cette icône, donc ce que nous allons faire est, nous allons découper notre forme dans ce masque intérieur. Cliquez dessus. Maintenant, notre forme apparaît sur le dessus de l'art du masque intérieur, et nous allons couper ces deux-là comme ça. Cela va être une icône d' application parfaitement arrondie parce que nous l'avons coupé dans la forme interne comme nous savons que cette forme d'icône d'application d'iOS n'est pas fondamentalement une forme arrondie simple, donc nous devons le clipser comme ça. Ctrl S, et nous en avons presque fini. Maintenant, si vous voulez l'autre version de l'icône de votre application, vous pouvez facilement masquer ces deux, et vous avez cet arrière-plan ici. Vous pouvez également changer le dégradé de Radial à Linéaire comme ça et supprimer cette Inverse et utiliser ce curseur à une valeur un peu plus élevée, comme 145. Si nous l'enregistrons maintenant comme ça, vous pouvez voir toujours notre icône d'application est dans la forme arrondie, et il est vraiment génial. C' est pourquoi j'ai créé ce fond de dégradé simple en premier lieu parce que je pense qu'il est plus, vous pouvez le voir, selon les lignes de cette différence, et il est plus moderne que l'autre, le haut. Pourtant, notre icône de l'application est très impressionnant. Passons à la prochaine conférence où nous allons utiliser l'action pour exporter toutes ces icônes dans différentes tailles. 19. Exporter des icônes d'application IOS de toutes tailles: Exportons notre icône dans différentes tailles d'icône d'application. Pour ce faire, nous allons utiliser notre fichier d'action de modèle d'icône d'application. Si vous ne voyez pas d'actions ici, ce bouton de style de lieu, vous pouvez aller à « Windows » et cliquer sur ce « Actions » et il apparaîtra ici. Ce que nous allons faire, c'est que j'ai déjà chargé mes actions ici. Si vous ne les voyez pas ici, cliquez sur [inaudible] et allez dans « Charger les actions » et nous allons parcourir ces actions de modèle d'icône d'application et cliquez sur « Charger ». Comme ça. Vous pouvez voir le second chargé ici en ce moment. Ce que nous allons faire maintenant, c'est que nous allons utiliser ce modèle d'icône d'application, fichier d'action, et cliquez sur ces icônes « Exporter Square » parce que, nous allons exporter des icônes carrées parce que iOS ne supporte pas la transparence. Tout d'abord, nous allons exporter les icônes carrées, cliquer dessus, jouer, comme ça. Il vous montrera la boîte de dialogue Enregistrer pour le Web. Attendez et cliquez sur le « Enregistrer ». Je vais l'enregistrer sur le bureau tout de suite. Cliquez sur « Enregistrer » comme ça. Il va créer un nouveau dossier pour enregistrer toutes ces tailles. Laisse-moi aller à ce dossier. Vous pouvez voir toutes nos icônes de tailles différentes sont générées et notre icône de l'application de messagerie est même belle dans les petites tailles aussi. Vous pouvez reconnaître instantanément ce symbole. C' est donc la qualité d'une bonne icône d'application. Toutes nos tailles carrées ont été générées. Générer les arrondis. OK, cliquez sur ce « Arrondi » et jouez cette action. Attendez que la boîte de dialogue termine l'action. Ok, ça prend du temps. Encore une chose, il suffit d'éteindre cette conversion en SRGB. C' est mieux lorsque vous exportez. Je viens d'avoir ce très bon conseil. Sinon, ce sera un problème lorsque vous essayez de le voir sur d'autres appareils. Voyons maintenant à quoi ressemblent nos icônes arrondies. Ok, ce sont nos icônes arrondies. Ce sont essentiellement des icônes lorsque nous utilisons la superposition de dégradé ou l'arrière-plan de dégradé. C' est un simple arrière-plan. Si vous voulez voir à quoi ressemblent vos icônes dans cet arrière-plan, 3D arrière-plan élevé, masquer celui-ci, ou si l'un d'entre vous voulez le montrer, montrez-le comme ça et « Enregistrer ». Maintenant, nous allons exporter nos icônes dans ce style 3D. Maintenant, cliquez sur ce « Arrondi » et cliquez sur ce bouton « Exporter ». Jouez à cette action et nous allons la sauvegarder dans notre look 3D élevé. Nous allons utiliser la transparence, bien que iOS ne le supporte pas. Mais nous voulons le montrer à nos clients. Ils sont donc impressionnés par nos designs. Donc c'est l'astuce, juste pour leur montrer ceux qui sont élevés. Maintenant, laissez-moi voir à quoi ressemblent ces élevés. Ils ont l'air génial. C' est donc le processus de génération d'icônes d'application que j'utilise. Si vous voulez vraiment utiliser ce [inaudible] ou élevé dans votre conception finale, assurez-vous simplement de tourner cet autre arrière-plan aussi et de générer vos icônes dans cette icône carrée. N' essayez pas d'exécuter votre action lorsque vous êtes dans ce fichier ou cette icône PSP. Passez d'abord à ce modèle d'icône d'application, puis essayez d'appuyer dessus. Ne l'enfonce pas à l'intérieur. Je vais décocher cela ; convertir en SRGB. Maintenant, j'utilise un masque pour montrer ces coins arrondis, donc je pense que ceux-ci seront parfaits, ne vous inquiétez pas pour eux. Cliquez sur « Enregistrer », « Remplacer ». Laissez-moi voir à quoi ressembleront nos icônes. Nos icônes ressembleront à cela parce que iOS appliquera la rondeur de son propre côté et sur son système d'exploitation. Donc, nous allons voir les icônes au carré. Pour la sortie finale, si vous voulez cet effet élevé, utilisez toujours la sortie carrée. Pour télécharger vos icônes, vous devez toujours utiliser l'extraction au carré. Donc, utilisez l'action d'exportation qui est carrés icônes d'application. N' utilisez pas les arrondis. Tout ça, c'est à propos de mon cours. Si vous voulez un arrière-plan simple derrière, vous pouvez masquer celui-ci et vous pouvez utiliser n'importe quel autre dégradé. Essayez également de masquer cette grille. On n'a pas besoin de cette grille. Les couleurs iOS vont à « couleurs iOS ». Je pense que si vous voulez celui-ci élevé, vous pouvez cacher toutes ces couleurs et juste laisser le gris et cliquez dessus pour le déplacer en couleur blanche, comme ça et générer, exporter vos icônes. Donc, dans cette leçon, ce que nous apprenons, nous avons exporté nos icônes avec rondeur et en carrés. En fin de compte, nous utiliserons uniquement les icônes exportées carrés. Cette conférence conclut mon cours pour cette conception d'icône d'application. J' espère que vous avez apprécié cette leçon et ce cours. N' oubliez pas de passer en revue ce cours. Ou si vous voulez ajouter quelque chose pour essayer d'utiliser les discussions. Vous pouvez toujours m'envoyer un message directement. Je suis là pour vous aider de toutes sortes de façons. Alors prends soin de toi et au revoir. 20. Introduction à la conception d'icônes du lanceur Android: Bienvenue dans la nouvelle section de ce cours, qui va être Android Launcher App Design, et nous allons créer beaucoup d'options de conception différentes pour la même icône d'application, qui est essentiellement Hydration App, ou vérifier votre niveaux d'eau corporelle. Laissez-moi vous montrer et vous présenter ce que je vais couvrir dans toute cette section. Alors voyons ce qu'il y a à l'intérieur. Ici vous pouvez voir l'écran principal Google Nexus et vous pouvez voir ici nous avons créé trois icônes, ce Liquimeter, et les deux autres sont cette Hydration et Dropify. Ce sont la même icône d'application, des idées différentes. Ils ont tous l'air cool. J' adore le cœur. Vous pouvez également utiliser ce Liquimeter, qui est une icône en verre, et je pense qu'ils vont tous bien. Laissez-moi vous montrer ce que nous allons couvrir dans toute cette section. Vous pouvez voir ici, nous allons utiliser ce modèle qui va générer différentes tailles, qui sont essentiellement six tailles pour toutes les exigences de l'application Android et des appareils différents, et nous allons créer trois thèmes différents . L' un est ce verre, puis nous avons ce cœur, et ensuite nous avons cette icône de goutte. Dans le processus de création de ces trois icônes, j'ai créé beaucoup d'icônes flop comme vous pouvez le dire, que nous ne sommes pas très bons. Donc c'est l'un d'entre eux. C' est l'un des ratés. Je n'ai pas aimé ça. Il y avait des barres pour mesurer le niveau d'eau, mais il ressemblait, je ne sais pas, peut-être que ce n'était pas très bon. Alors je l'ai laissé tomber. Laissez-moi vous montrer quelques-unes des options les plus précoces que j'ai essayées. Ce sont quelques autres options. Vous pouvez voir ici que j'ai dessiné cette forme de verre dans Illustrator, mais à la fin, les bords étaient très saccadés quand l'icône était très petite, donc je l'ai laissé aller et je ne l'ai pas utilisé. C' est une autre idée et je l'ai rejetée. Donc, vous pouvez voir si vous allez concevoir une icône d'application très agréable ou quelque chose de cool, vous devez passer par un processus entier. Dessiner, améliorer, générer de nouvelles idées, essayer de voir lequel s'améliore ou choisir la dernière. Donc, nous allons couvrir tout cela dans ces sept ou huit prochaines leçons, alors laissez-moi vous montrer comment nous allons créer ces trois icônes cool pour Hydration App. Alors commençons et passons à la leçon suivante. 21. Specs et tailles d'icônes d'applications Android: Maintenant, dans cette leçon, nous allons discuter des spécifications de l'icône de l'application, comme quelles sont les différentes tailles de ces icônes de l'application lanceur pour la plate-forme Android. Ensuite, nous allons discuter de la taille que nous devons soumettre à l'App Store ou Google App Store. Ensuite, nous allons voir si nous pouvons utiliser la transparence et les canaux alpha dans ces icônes. Comme nous pouvons utiliser seulement deux ou trois formes ou nous pouvons utiliser n'importe quelle transparence ou fond transparent dans ces icônes. Commençons. Fondamentalement, chaque application Android a besoin de six tailles d'icônes différentes , 512 pixels, qui est le plus grand que vous pouvez voir ici. Il est essentiellement pour Google App Store. Les autres sont pour d'autres résolutions Google Android. Si vous voulez en savoir plus sur ces densités, résolutions d'écran, vous devez suivre mon cours de typographie. Il y a une section complète sur tous ces trucs Android et iOS et ils sont différentes tailles d'écran et comment concevoir pour eux. Dans ce cours, vous n'avez pas besoin de vous soucier beaucoup d'eux si vous vous concentrez simplement sur la conception d'icônes. Ce sont six tailles. Permettez-moi de vous montrer quelques ressources en ligne comme celle-ci. Je vais partager ces liens avec vous. Ce sont les tailles d'icônes de l'application, 48 x 48 pixels et ils seront tous au format PNG, format transparent. Ceci est pour hdpi 72 pixels par 72 pixels. Ce sont toutes les tailles carrées et 144 par 144, 192, 512 pour Google Play Store. D' accord ? Ce sont toutes les tailles d'icônes. Une chose que vous devez vous rappeler est que ceux-ci sont appelés icônes de lanceur. D' accord ? Ce ne sont pas d'autres icônes comme vous pouvez voir ce que la barre d'action dialogue et nos icônes d'onglet. Ces icônes sont appelées icônes de lanceur ou icônes d'application. Gardez à l'esprit que nous avons besoin de six tailles différentes pour eux. Je vais également partager ce document et il a toutes les tailles pour toutes les différentes icônes de l'application, iOS, Android, BlackBerry, même Web OS, Windows Phone. Vous devez conserver ceci dans vos URL et enregistrer ce document. Maintenant, la chose la plus cool à propos de ces icônes d'application Android est qu'ils vous donnent pleine autorité que vous pouvez utiliser la transparence autour de l'icône. Vous pouvez créer n'importe quelle forme d'icône comme vous pouvez le voir ici. Je viens de créer cette icône en verre et il n'y a rien autour d'elle. Nous sommes libres d'utiliser les canaux alpha, PNG. Dans le cas des conceptions iOS, vous savez que nous ne pouvons pas utiliser de telles astuces là-bas. Vous pouvez voir ici dans l'icône du cœur, il a l'air vraiment cool parce qu'il est transparent sur les côtés et nous utilisons cette forme. Vous pouvez voir ici dans le coin gauche de cette icône de téléphone, icône téléphone Android il est vraiment cool parce qu'il a la transparence autour d'elle et nous pouvons juste voir le réglage de l'icône sur ce fond. Ce sont quelques différences par rapport à l'icône de l'application iOS. Ce sont des tailles différentes, nous pouvons utiliser la transparence et vous pouvez voir ici nous sommes libres d'utiliser la transparence autour d'elle. C' est la chose la plus cool à propos de ces icônes d'application Android. Je crois que c'est tout. Nous devrions passer à la prochaine leçon maintenant. 22. À faire et à partir d'icônes d'applications Android: Maintenant, dans cette leçon, je vais discuter quelques-uns des choses à faire et à ne pas faire de l'icône de l'application Android. Ils sont presque les mêmes que nous avons discuté dans les icônes d'application iOS, mais certains d'entre eux sont différents. Google Material Design et leurs directives de conception sont vraiment créer et le tout élaboré en détail. Voyons ce que sont les directives et les choses à faire et à ne pas faire de ces icônes d'application. Maintenant, nous allons d'abord lire à propos de ces icônes de lanceur et il ya un guide API sur le forum des développeurs Google, Android.com. Il va vous montrer quelques-unes des meilleures pratiques. Maintenant, vous pouvez voir à droite que vous allez voir les écoles de l'icône du lanceur, faire et ne pas faire, taille et formats. La taille et le format que nous avons déjà discuté c'est PNG et il y a six tailles différentes. Allons dans les écoles de l'icône de l'application lanceur. C' est la même chose que l'icône de votre application va raconter l'histoire de votre application. Assurez-vous de le concevoir dans un sens que c'est comme la couverture d'un livre. Si vous prenez une couverture de fin de livre est très jolie et quand vous ouvrez, il y a une histoire différente que vous allez ne pas aimer. Même chose est le problème avec ces icônes de lanceur. Assurez-vous que l'icône de l'application Google Play ou l'icône de l'application Android va raconter l'histoire de l'application. La plupart du temps, nous rapprochons également le schéma de couleurs de l'application. Si l'icône de l'application a couleurs très étranges et lorsque vous ouvrez l'application et qu'elle est très différente, ou c'est 3D et l'icône de l'application est plate, ou l'application est plate et l'icône de l'application est 3D. C' est un peu d'inadéquation. Peu de choses que vous devez garder à l'esprit, c'est que vous allez aligner l'icône de votre application sur votre marque. Il devrait être très proche de vos lignes directrices de conception de marque ou des couleurs de marque. Ensuite, il devrait être facilement découvert par différents utilisateurs sur Google Play. C' est la même chose que je vous ai montré dans les leçons précédentes, qu'il devrait être perceptible parmi les différentes icônes. Les mêmes choses qu'ils répètent ici, vous pouvez voir promouvoir l'histoire de la marque, créer une icône qui est unique et mémorable. Il s'applique à toutes les icônes de l'application, c'est un fait universel. Aussi le schéma de couleurs qui est aligné avec votre marque. Ensuite, nous n'avons pas essayé de trop communiquer avec l'icône. Ça veut dire que ça ne rend pas trop complexe. Beaucoup de formes différentes n'essaient pas d'utiliser trop de formes. L' icône simple sera plus impactante et plus de respect et plus mémorable. Gardez à l'esprit, c'est pourquoi j'utilise des formes très simples, comme nous avons utilisé une goutte et un cœur et un verre. C' est très simple, la simplicité va gagner à la fin. Alors la même chose qu'ils ont répétée ici, n'essayez pas d'utiliser le nom de l'application ou le texte dans votre Pyçon, c'est la même chose que nous avons discuté plus tôt. Peu de choses que nous avons déjà discuté de cette fonction bien dans la fente dans le lanceur, a essayé de lire ceci. Maintenant, communiquez [inaudible] à petites tailles. C' est le principal problème, plupart du temps que nous avons. J' ai jeté beaucoup d'icônes quand je concevais les icônes l'application Glass parce qu'elles étaient déchiquetées sur de petites tailles. C' est pourquoi j'ai pris des formes entières comme du verre rempli ou du cœur ou peut-être une gouttelette. Voici un très bon point, travailler sur une grande variété de milieux. Gardez à l'esprit que vos utilisateurs vont créer beaucoup de différents types d'arrière-plans et leurs papiers peints mobiles seront différents. Gardez à l'esprit que vos couleurs sont si vibrantes et qu'elles peuvent être utilisées sur n'importe quel arrière-plan. C' est le conseil principal. Voici une chose de plus, refléter le modèle d'éclairage implicite du lanceur. Il est fondamentalement que la lumière sur l'icône de l'application va être du haut, donc il devrait générer de l'ombre en bas. Cette ligne signifie que, la lumière viendra à l'angle de 90 degrés par rapport au haut. Si l'icône est 3D, utilisez la perspective. N' essayez pas d'utiliser trop de prospective, sinon il ne sera pas reconnaissable. Vous pouvez voir ici cette icône de téléphone est un peu en perspective et cette icône de l'application de film. Normalement, je vais avec les icônes simples. Je ne suis pas très douée en perspective. J' ai essayé de concevoir des icônes simples, je pense que si vous êtes limité avec comme moi, vous devriez essayer de concevoir comme ceci. Maintenant, le dernier point est que, essayé de peser votre icône et utiliser tout l'espace. Maintenant à ce sujet, nous allons couvrir dans la prochaine leçon, qui est sur les lignes directrices de conception de matériaux de ces icônes d'application Android. Nous allons discuter de leur grille, sorte que vous pouvez voir à droite, c'est le grand, nous allons en discuter en détail dans la prochaine leçon. Ce sont toutes les choses à faire et à ne pas faire. Vous pouvez voir ici qu'ils vous ont montré certaines des choses. Comme si vous créez des détails trop petits, comme vous pouvez le voir ici sur de petites tailles, ils ne seront pas visibles. Vous pouvez voir ici qu'ils viennent de créer trois, ces barres et ils sont facilement visibles. Aussi, vous pouvez voir essayé n'essayez pas de cacher votre forme d'icône principale. Il suffit de l'utiliser et de laisser le reste. On n'a pas besoin de ça. N' essayez pas d'utiliser pour les lignes minces. Vous pouvez voir ici, la ligne très mince ne va pas très bien montrer. C' est le problème que j'avais avec l'icône en verre. Il est dessiné avec des lignes sur les côtés, j'ai dû rendre les lignes très épaisses. Aussi la chose est que si vous pouvez utiliser un effet de papier ou un effet incurvé avec des canaux alpha, vous pouvez voir ici essayé d'obtenir le plein bénéfice de vos canaux alpha et la transparence. Passons à la prochaine leçon où nous allons discuter de la conception des matériaux. 23. Lignes de conception matérielles: Voyons maintenant ce que les concepteurs de Google disent à propos de leurs directives de conception et comment nous pouvons les suivre pour améliorer notre processus de conception d'icônes d'application, commençons. Maintenant, si nous allons à ce matériel .io/guidelines, ils appellent ça des icônes de produit. Maintenant, l'essentiel est que vous pouvez voir sur le côté droit il y a une grille complète sur la façon de disposer cette icône de l'application, alors voyons ce qu'ils ont. Maintenant, je vais d'abord vous dire quelle est leur approche de conception. L' approche de conception signifie, quelle est la pensée ou pensée de conception ou la ligne directrice derrière leur conception de matériel Google. La conception matérielle est essentiellement du papier sur un autre papier. Tout leur design est basé sur des papiers empilés, un papier jette de l'ombre sur l'autre papier comme vous pouvez le voir ici dans l'étude d'éclairage, que ce papier surélevé jette de l'ombre ici. Il y a aussi de la lumière sur cette zone par ici. Vous pouvez voir que cette zone est un peu plus lumineuse et éclairée par la lumière. En outre, ils ont deux angles de lumière de 90 degrés et 45 degrés, alors gardez cela à l'esprit aussi. Vous pouvez voir ici il y a le prototype de matériau puis ils ont ajouté des couleurs à elle. C' est ainsi que leur philosophie ou approche conçue fonctionne spécifiquement. Pour moi, je pense que leur approche du design est similaire à l'art origami du japonais. Ils créent beaucoup de formes différentes à partir de papier. Maintenant, en arrivant à la grille, comment nous allons utiliser cette grille. Cette grille est fondamentalement sont divisés en quatre. Je pense, maintenant, la principale chose que vous devez garder à l'esprit sont ces lignes clés. Vous pouvez voir, n'ayez pas peur de tout ce design ou de toute cette grille. Fondamentalement, ce qu'il dit est que, si vous allez rester dans l'une de ces formes. Maintenant, si vous concevez une icône d'application arrondie, vous devez rester dans cette zone. Si vous concevez un rectangle, vous devez suivre ces formes qui sont rectangle, ce rectangle supérieur, peut-être que vous pouvez concevoir une application de document, ou icône d'application de document, vous allez utiliser ce rectangle. En outre, il y a un carré à l'intérieur, donc ce n'est pas trop un souci. Ce milieu est fondamentalement point focal si vous utilisez quelque chose que vous pouvez utiliser cette zone ici. Ceux-ci sont appelés keylines, gardez votre design en fonction de ces keylines. Vous pouvez voir ici qu'ils montrent leurs formes de lignes clés séparément. C' est carré, c'est un cercle, c'est un rectangle, c'est un autre côté du rectangle. Ensuite, ils montrent que leur grade d'unité DP, ne vous inquiétez pas pour les PDD, fondamentalement tout est en nombre pair multiplié principalement par quatre ou deux, divisible par quatre ou deux. Ensuite, voici leur étude de géométrie, vous pouvez voir qu'il ya différentes icônes là montrant que, comme celui-ci est icône Chrome, Il est construit sur cette géométrie. Similaires sont ces géométries, ils utilisent des formes rectangulaires. Maintenant, discutons de l'anatomie de l'icône de produit, anatomie fondamentalement il y a différentes parties qu'ils ont donné que vous devez les utiliser de cette façon et le seul numéro est fondamentalement le brillant que vous pouvez voir ici. Le brillant de la finition, qui est fondamentalement votre icône de l'application briller ou peut-être un peu de lumière, ou peut-être quelques ombres en haut, ou peut-être une finition brillante. Certains brillent sur votre icône, puis deux et trois sont l'arrière-plan matériel et le premier plan. Vous n'avez pas besoin de vous inquiéter pour eux, c'est l'arrière-plan, c'est le premier plan. Quatre est essentiellement votre zone focale ou votre couleur principale que vous utilisez pour l'objet principal, cinq est essentiellement votre ombre. Ne vous inquiétez pas à ce sujet, Il est très simple ils montrent tout, leur guide de conception des matériaux est très élaboré, très détaillé., vous devez le lire attentivement. Mais je pense que pour la conception d'icônes, les seules principales préoccupations sont de commander ces ombres, et comment nous allons utiliser toute la zone de forme, cette grille efficacement. Si vous voulez lire tout cela, vous pouvez lire toutes ces lignes directrices, je pense que c'est mieux si vous le lisez à fond et ils ont beaucoup de directives de conception de matériaux différents. Une autre chose que je veux vous montrer, c'est les statistiques de l'ombre portée. Maintenant, les ombres portées sont très calculées, vous pouvez voir ici qu'elles montrent une opacité de 20 pour cent. Le décalage X est essentiellement de l'axe des x, donc il ne va pas se déplacer à droite ou à gauche. Il sera de haut en bas, donc il se déplacera sur l'axe y 4dp, et le flou va être 4dp. Si vous concevez en 512 par 512 pixels, alors ce 4dp signifie 16 pixels ou huit pixels. Laissez-moi vous montrer avec un exemple dans Photo shop. Vous pouvez voir ici, dans cet exemple, j'utilise la même technique. Maintenant, si vous sélectionnez ce cercle, vous pouvez voir que je vais appliquer une nouvelle ombre portée ici, alors supprimez cet effet et appliquez une nouvelle ombre portée. Maintenant, vous pouvez voir que j'utilise seulement 20 pour cent d'opacité, huit distance et huit pixels taille, donc vous pouvez augmenter la taille en huit comme ça, 16, vous pouvez voir que ça coûte une très belle ombre subtile, comme une ombre portée de conception des matériaux. En outre, il y a plus d'études de conception de matériaux que vous pouvez voir ici. Il y a différents styles, je vais partager les liens pour ces ressources. Vous pouvez simplement les saisir, vous pouvez voir ici, il y a différentes couches d'ombres. Si un élément est plus élevé ou plus au-dessus dans la pile, il va coûter plus d'ombre comme ça. C' est ainsi que ces matériaux de conception fonctionne essentiellement, Il est essentiellement des ombres et des lumières et des papiers empilés les uns sur les autres. Je pense que c'est tout au sujet de cette icône de l'application, Si vous voulez lire un tout ce document, vous pouvez le lire à fond. Aussi, vous pouvez voir qu'ils ont donné quelques couleurs, nous pouvons aussi choisir les couleurs d'ici, mais je l'ai choisi ailleurs, je vais vous montrer que aussi. C' est tout sur les lignes directrices de conception de matériaux, je vais partager avec vous cette ombre de conception de matériaux, étude et vous pouvez télécharger le PST de ce gars et appliquer différentes ombres. Passons à la leçon suivante. 24. Idée et croquis initiales pour l'icône d'application: La première partie de toute conception, qu'il s'agisse d'une illustration ou d'une icône d'application ou de web design est l'esquisse. Alors allez-y avec du papier et un crayon et essayez quelques croquis. Je vais vous montrer mes croquis ici. Alors voyons les. Voici mes quelques croquis initiaux, J'ai utilisé peu de choses liées à l'hydratation, qui était le verre ou l'eau, goutte d'eau, une feuille remplie de vagues d'eau et un bécher avec certains, vous pouvez voir ici, j'ai utilisé des marqueurs ou des marques sur elle pour mesurer les niveaux d'eau. Ce sont les quelques idées initiales que j'avais dans mon esprit, je viens de les avoir sur papier. Donc, si vous n'avez aucune idée ou que votre esprit est vide, alors il y a une autre technique qui est la recherche sur Google et obtenir de l'inspiration ou des idées liées à ce concept. Donc, ce que nous allons faire est que nous allons aller sur Google et rechercher différentes vagues d'eau et applications d'eau, des applications similaires. Maintenant, vous pouvez voir ici que nous avons dans Google, J'ai cherché l'application de l'eau et vous pouvez voir qu'il y a beaucoup d'applications d'eau différentes. Leurs icônes apparaissent également, aussi à quoi ils ressemblent et leur tableau d'humeur. Vous pouvez préparer un tableau d'humeur pour cela. Donc nous avons des gouttes d'eau, des bouteilles par ici, un verre, et si nous descendons en bas, il y a plus de gouttelettes d'eau, et il y a une drôle de goutte d'eau ici. C' est une autre idée que l'illustration d' un homme ou d'une femme ou d'une personne se remplit d'eau. Mais je pense que pour une icône d'application qui est très petite image, vous ne pouvez pas utiliser quelque chose comme ça. J' ai eu cette idée mais je l'ai rejetée parce que nous avons besoin d'idées très simples et basiques, donc juste en regardant l'icône, l'utilisateur devrait être capable de deviner ce que cela va être. Ce sont peu d'idées. J' aime vraiment cet hydrate et leur niveau d'eau, donc c'est une nouvelle bonne vague. Une autre chose maintenant à propos du schéma de couleurs. Si vous voulez concevoir en une seule couleur ou deux couleurs, c'est à vous de décider. Mais j'aime les bonnes couleurs, bonnes couleurs vibrantes pour attirer l'utilisateur vers l'icône, sorte que vous pouvez voir ici, ils ont juste utiliser une couleur ici. Aussi dans cette icône de l'application, vous pouvez voir presque un dégradé de couleur, et puis nous avons un autre qui blanc et bleu, juste une couleur fondamentalement. Je suis allé chercher sur Google Play pour quelques applications d'eau pour des idées que vous pouvez voir nous sommes ici rappel de boisson d' eau et puis nous avons sur le côté droit beaucoup d'autres applications similaires, donc la plupart d'entre eux utilisent un verre peut-être minuteur, je n'aime pas l'idée de minuterie, je pense qu'il devrait être lié à la santé. C' est pourquoi mon idée initiale avait ce cœur en elle, parce qu'elle est liée à la santé. Donc l'eau est bonne pour votre santé, c'est pourquoi j'utilise le symbole du cœur. Maintenant, si vous allez à ce iTunes, Il y a beaucoup d'applications sur Apple et vous pouvez voir ici ils ont encore la bouteille, Je pense que c'est le même, alors nous avons des gouttes, gouttes bouteille. Donc, les concepts principaux sont tout autour des niveaux d'eau et des gouttes d'eau, des verres et quelques bouteilles. Donc je pense que la bouteille a besoin de beaucoup de détails. Vous pouvez voir ici quelques courbes une autre chose et ils ont déjà cela et je pense que cela va mieux leur convenir parce que leur application montre également une bouteille. Donc, pour les couleurs, vous devez rechercher des vagues d'eau. Lorsque vous allez chercher des vecteurs d'onde d'eau, vous allez voir beaucoup de grandes couleurs comme vous pouvez le voir ici. Un peu d'eau d'ombre violacée et nous avons beaucoup d' éclaboussures alors nous avons d'autres idées comme vous pouvez voir ici quelques gradients de foncé au bleu, donc un peu d'une couleur violacée avec du bleu, ils sont superbes. J' ai donc essayé de choisir des couleurs à partir de ces images. J' ai sélectionné peut-être une, deux ou trois couleurs d'ici, et une couleur de peut-être cette couleur pourpre, et les utiliser comme mes quatre couleurs, ok, pour l'icône de l'application. Pour les vagues, vous allez obtenir quelques couleurs et idées d'ici, comme vous pouvez le voir c'est aussi une très bonne vague, vague océanique. C' est très unique, je pense, je ne pense pas que ce soit très facilement reconnaissable. Ensuite, vous pouvez voir qu'il y a plus d'idées sur vagues, les types d'ondes, un, deux, trois et quatre types différents et puis nous avons aussi cette idée, des vagues au-dessus de [inaudible]. C' est celui que j'ai utilisé dans mon icône d'application, donc pour les idées et les esquisses, vous devez voir les idées d'autres applications et d'autres concepteurs, c'est ainsi que le monde fonctionne, vous regardez la voiture de quelqu'un d'autre et concevez la vôtre, ou peut-être conçu mieux qu'eux, donc c'est ainsi que nous allons obtenir notre schéma de couleurs et nos principaux symboles. Maintenant, dans la leçon suivante, nous allons concevoir nos principaux symboles dans Illustrator. Passons donc à la leçon suivante. 25. Comment utiliser des ressources d'icônes d'application et des modèles d'icônes: Dans cette leçon, je vais vous partager et vous montrer les ressources que nous allons utiliser dans ce cours et ce modèle d'icône de produit Android que nous allons utiliser. Il n'y en a que peu. J' ai trouvé des données vraiment professionnel et vous aide à générer des icônes d'application facilement et vous permet de gagner du temps. Si vous voulez gagner du temps, vous devez utiliser ces modèles. Vous pouvez également créer toutes ces tailles, même à partir d'Adobe Illustrator et même de Photoshop. Il suffit de créer l'un d'eux et de les exporter dans différentes tailles. Mais je pense qu'il est préférable que vous utilisiez ce genre de modèles. Ils peuvent générer ces icônes en un rien de temps. En outre, ils peuvent vous montrer cet aperçu qui est très pratique. Deux d'entre eux, j'aime vraiment, je vais partager les URL de ces modèles d'icône d'application. Allons à notre navigateur. Notez le premier, le meilleur professionnel est ce applypixels.com. Auparavant, c'était un modèle révolu, avant qu'il soit gratuit, maintenant il est payé. Vous devez payer 9$ par mois pour obtenir ces modèles d'icône d'application impressionnants. Je suis un fan d'outils gratuits comme ça, donc j'ai la version 2 pour cette icône de produit Android. En ce moment, la version actuelle est trois et il y a quelques changements. Comme une édition de taille de plus qui est 114 pixels, ce qui est pour Amazon, vous pouvez voir ici. Vous pouvez également le voir dans le journal des modifications ajouté une nouvelle taille. Ceci est l'un d'eux si vous allez gagner en utilisant ces modèles et vous devez concevoir des icônes d'application pour gagner et c'est votre profession, alors je pense que vous devriez acheter la licence pour cela. Je vais partager la version gratuite avec vous, alors n'oubliez pas de la télécharger, c'est la version 2.0. Le second vient de ce type. Ce sont plusieurs propriétaires, c'est de Behance et celui-ci est aussi très bon modèle, très facile à utiliser. Il y a des défauts, donc je vais en discuter dans une minute. Ici, il est, vous pouvez voir ici différentes tailles. Beaucoup de bons aperçus, même Google App Store. Ensuite, il est dans ces applications et il est sur le bureau ou tout ce que vous appelez l'écran de bureau mobile. Le troisième que je vais vous montrer est de ce android developer.android.com. Si vous allez dans cette zone ici, sur le côté droit, vous pouvez voir ici dans les téléchargements « Android Icône Template Pack ». Si vous cliquez ici, il va télécharger le modèle. C' est essentiellement des gars de Bjango, je suppose. Je n'aime pas beaucoup, mais si vous voulez le télécharger à partir de frais généraux, vous pouvez l'utiliser. Tous ces modèles d'icônes, ils ont des personnalités similaires. Leurs techniques sont presque les mêmes. Vous créez juste une taille et ils vont en extraire tous les autres. Ne soyez pas confus que si vous téléchargez un autre modèle, vous n'allez pas travailler avec. Maintenant, je vais passer à mon Photoshop et voyons ce que nous avons dans ces modèles. Vous pouvez voir ce que ici, il s'agit d'un modèle d'icône de produit Android à partir du modèle d'icône de l'application Pixelresort. Le site que je vous ai montré, il est la version 2 qui est gratuite, et vous pouvez voir ici il y a différentes tailles, un aperçu, et très clairement il est montré ici 512 taille et « Éditez moi et enregistrez ». Fondamentalement, vous allez double-cliquer dessus et éditer tout ici. Il a une grille d'icône, icône de cercle, et rectangle vertical, rectangle horizontal. C' est juste une icône d'application simple en ce moment. Donc, si vous voulez utiliser l'un d'entre eux et vous pouvez allumer et éteindre la grille très agréable. Je pense que ce type l'a rendu très professionnel. Nous avons l'ombre supérieure ici, qui est si vous cliquez ici, vous pouvez voir que c'est « Edge Indigo 900 », donc c'est le bord. Si vous voulez changer la couleur du bord, vous pouvez aller en gris ou quelque chose comme ça. Chaque fois que vous utilisez l'un de ces choix comme carré ou cercle, vous devez tout éditer ici. Si vous souhaitez intégrer votre design dans une icône d'application basée sur un cercle, vous devez faire glisser vos créations ici. Si vous voulez cacher cela, vous pouvez le cacher et commencer à faire l'icône de l'application ici, ou normalement je vous suggère de dessiner votre forme principale d'icône de l'application dans Illustrator, puis de l'amener ici. Ceci est fondamentalement une atomie de ces modèles d'icône d'application. Il existe différents types et vous pouvez voir ici, il y a des ombres et vous pouvez également activer la version alpha et les versions bêta, ce sont des balises différentes. Il s'agit de tout ça. Laisse-moi aller à l'autre. L' autre que j'aime, c'est celle-là. Il a cette taille 1080, donc si vous double-cliquez, c'est essentiellement en 1080. Il a aussi, vous pouvez le voir ici, c'est un masque de grille, donc c'est fondamentalement la grille d'icônes. Ensuite, nous avons cette icône par ici. Je viens de faire glisser cette icône d'application que j'ai faite dans Illustrator ici, c'est essentiellement des formes illustrateur. C' est celui que j'ai essayé avant, c'est moche, c'était l'un des rejetés. moment, j'utilise ce cercle, il y a un défaut avec cela, qui est fondamentalement, que si j'essaie de tourner le « Ombre portée » ici, donc si je l'sauvegarde avec une ombre portée, vous pouvez voir dans le, laissez me zoomer, vous pouvez voir pour les très petites tailles comme celle-ci, 96 et 72 pixels par 72 pixels, il y a une ligne déchiquetée autour de mon design. Il ne montre pas correctement mon ombre portée. Si vous souhaitez utiliser ce modèle d'icône d'application, je vous suggère de ne jamais utiliser l'ombre portée sur cette forme ici. Si vous voulez utiliser un AVC, c'est à vous de décider. Cela va vraiment très bien fonctionner. Vous pouvez voir ici, mais il a des bords dentelés. Je pense que vous devriez juste rester avec celui-ci et ne pas utiliser de forme ou d'ombre autour de cette plus grande forme. Si votre icône d'application forme, et si je l'enregistre, vous pouvez voir l'aperçu ici. Laissez-moi vous montrer l'aperçu. Ici, c'est. Laisse-moi zoomer à 100 pour cent. Voici à quoi ressemblera l'icône de votre application. Il a de très belles aperçus mais l'extraction, lorsque vous extrayez vos icônes d'application, ils vont regarder laid si vous utilisez un peu d'ombre ici. N' essaie pas d'utiliser les ombres ici. Ce sont les deux modèles que je recommande. L' un est ce modèle d'icône de produit Android du site je suppose applypixel, c'est le gars Michael Flarup, je suppose. C' est le gars qui a créé ça, et je pense que c'est mieux que n'importe lequel d'entre eux. Vous pouvez voir qu'il y a peu d'erreurs et de défauts dans cela comme ombres portées ne sortent pas très bien, donc c'est tout. Si vous voulez utiliser uniquement le modèle gratuit, vous allez à ce modèle d'icône de conception de matériau et utilisez celui-ci. Si vous voulez utiliser le payant, la version la plus mise à jour 3.0 pour celui-ci, alors vous allez et payez pour cela. Je vais partager cette 2.0. et tous ces modèles avec vous, alors ne vous inquiétez pas à ce sujet. Je vais juste faire ce cours avec des ressources gratuites. Dans la leçon suivante, nous allons créer les formes de base de l'icône de notre application dans Illustrator. Passons à la leçon suivante. 26. Concevoir une forme de verre dans Adobe Illustrator: Commençons à concevoir notre icône d'application. Tout d'abord, nous allons concevoir cette forme de goutte. Cette forme de gouttelettes est déjà disponible dans les formes de base Photoshop. Vous pouvez cliquer ici. Vous pouvez voir dans le panneau Formes, si vous allez de l'avant et sélectionnez Toutes les formes que vous allez voir. Il y a une gouttelette par ici. Laisse-moi te montrer. Ici, c'est. Aussi, nous avons ce cœur ici. Pour ces deux formes, nous ne les dessinerons pas dans Illustrator parce que je crois que si vous avez déjà une lettre, vous ne devriez pas la reconstruire. Ensuite, nous avons ces vagues. Nous sommes restés avec ces vagues et cette icône de verre ou de conteneur. Cette forme de verre et cette forme de vague, ces vagues d'eau, nous allons les concevoir dans Illustrator. Passons à l'Illustrator, et je vais configurer Illustrator quelques réglages en fonction de ces directives de conception et de notre système de grille. Ensuite, nous allons le concevoir. Passons à Illustrator. Maintenant, j'ai ouvert Illustrator. Si vous accédez à Modifier et Préférences, accédez à Général. Ce que j'ai fait ici est dans les Préférences, j'ai défini cet incrément à deux pixels et le rayon de coin à 16 pixels. Tout est en nombres pairs, ou vous pouvez voir que cette grille est construite sur 16 pixels. C' est vraiment bon parce que votre icône principale va être convertie en beaucoup de petites tailles. 16 est divisible par 2 plusieurs fois. C'est une chose. Ensuite, allez dans Guides et grille, et grille tous les 32 pixels et subdivisions quatre. C' est ainsi que j'ai défini mes grilles et mes incréments de pixels du clavier. Voici les paramètres que vous devez effectuer pour votre Illustrator. Je vais appuyer sur « OK ». Maintenant, nous allons ouvrir un nouveau fichier, « Nouveau ». La taille sera de 512 pixels, car c'est la taille principale. C' est la plus grande taille, et utilisez le mode RVB. Nous allons concevoir pour les appareils numériques RVB. Le mode Aperçu doit être en pixels, les effets raster doivent être un écran. Aligner les nouveaux objets sur la grille de pixels est préférable si vous cochez celle-ci car vos éléments ou vos éléments de conception vont coller aux lignes de la grille. C' est donc mieux pour un meilleur alignement. En outre, nous allons passer à Pixels, parce que nous concevons tout en pixels. Appuyez sur « OK ». Ici, nous avons notre toile. Zoom avant et zoom arrière. Comme vous pouvez le voir ici, nous avons notre grille disposée, il est plus facile de concevoir de cette façon. Maintenant, nous allons dessiner notre forme de verre. On va prendre notre outil de stylo. abord, nous allons dessiner juste une forme simple, des lignes droites. Alors on va l'étendre ici. Des lignes droites, comme ça. Cliquez ici, puis cliquez ici, puis cliquez dessus. Nous avons juste un carré, ou comme vous pouvez le voir un rectangle. Nous allons appuyer sur la touche « A » de votre clavier pour sélectionner cet outil de sélection directe. Nous allons d'abord sélectionner celui-ci. Je vais le déplacer 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Donc 10 fois par ici. Je pense qu'il a déplacé 20 pixels, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Comme ça. Si vous voulez le déplacer plus, vous pouvez le déplacer plus. 1, 2, 3, 4, 5, 6, 7, et 1, 2, 3, 4, 5, 6, 7. On a presque une très belle forme de ce verre ici. Ce qu'on va faire, c'est faire le tour de ces deux coins. Si vous voulez les arrondir, vous pouvez les arrondir. Juste une simple forme de verre droite, vous pouvez le laisser comme ça. Ce que je vais faire, c'est que je vais appuyer à nouveau sur « A », et je vais sélectionner ce coin ici. Vous pouvez voir ici, il y a une petite icône ici qui est ceci. Chaque fois que je survole ce point, je peux le faire glisser comme ça ou cliquer dessus. Si vous double-cliquez dessus, vous pouvez voir ici est le rayon. Je vais le mettre à 32. Aussi celui-ci, je vais double-cliquer et le définir sur 32. Tout est en nombre pair. Il y a encore une chose. Allez dans le Stroke et faites-le au moins 32 pixels. Comme ça, très épais. Ou si vous voulez, vous pouvez aller aux 24 pixels, mais pas moins de 20 pixels. Gardez également cela en nombre pair. C' est notre forme principale. Si vous voulez, vous pouvez simplement enlever cette couleur intérieure ici et garder ce trait ici. On a cet accident vasculaire cérébral. Si vous voulez déplacer le trait à l'intérieur ou à l'extérieur, vous pouvez le déplacer ici comme ceci. Il a l'air bien. Si vous voulez faire quelque chose comme ça, alignez le trait à l'extérieur, au milieu ou à la position que vous voulez. Je l'ai dessiné ici comme ça, donc je vais le garder comme ça. Notre forme de verre principale est faite. Pourquoi je l'ai fait en toile 512 et 512 pixels ? Parce que notre icône principale va être 512 par 512. J' ai besoin de voir combien d'espace ça va prendre. Si j'ai besoin, je peux l'étendre en appuyant sur « Maj » et « Alt » ou « Touche Option », et voir où je peux le faire combien plus grand. Aussi, je peux enlever le coup si je veux, comme ça. C' est de voir combien d'espace il va occuper. C' est vraiment une bonne forme. Une forme est faite. Nous avons créé cette forme ici. Je vais l'enregistrer dans le bureau. Je l'ai déjà construit, donc ne vous inquiétez pas. Forme de verre. Pourquoi j'ai construit ces formes dans Illustrator ? Parce que l'Illustrator est fondamentalement le véritable outil pour tous ces objets vectoriels et beaux coins, nets et vraiment bons. Photoshop est un logiciel raster, il va donc montrer quelques problèmes. Comme des bords dentelés ou quelque chose comme ça. Aussi, vous pouvez voir ici le coup est un peu même pas donc je vais en faire un nombre pair, peut-être 32. Gardez à l'esprit que tout est toujours design en nombre pair afin qu'il soit parfait. Passons à la leçon suivante. Nous allons concevoir nos formes d'eau ou nos vagues. 27. Concevoir des vagues d'eau dans Illustrator: Dans cette leçon, nous allons créer ces belles vagues d'eau dans Illustrator. Alors entrons dans l'illustrateur et commençons à construire cette forme. Maintenant, encore une fois, je vais créer un nouveau fichier avec les mêmes dimensions, 512 pixels par 512, RVB, 72 pixels écran et mode d'aperçu pixel et appuyez sur « OK ». Je vais allumer ma grille ici. Cela n'a pas beaucoup d'importance de la grille, mais il vous aide à utiliser l'outil de pliage dans beaucoup de facilité. Il est très facile d'utiliser l'outil de pliage comme celui-ci. Je vais faire glisser mon jeu de couleurs ici. Je vais m'ouvrir et vous pouvez voir quoi ici, Water Waves Deformed. J' ai ce schéma de couleurs. Si vous allez à ce « Nuancier », vous pouvez voir là-bas que je l'ai chargé ici. Si vous ne l'avez pas ici, vous pouvez le charger ici. Vous appuyez sur « Other Library » et allez dans « Desktop » ou partout où vous avez enregistré ce fichier, et Water Waves et « Open » et il sera chargé ici comme ceci. Vous pouvez le faire glisser ici comme ça. Je suis prêt à l'avoir ici, donc je vais utiliser ces quatre couleurs. J' ai chargé ces quatre couleurs dans mes échantillons. Si vous ne savez pas comment charger, je vous ai tous montré que vous devez les charger. Vous pouvez voir ici Water Waves Deformed. Si je clique ici, vous pouvez voir, il va charger ma bibliothèque. Je vais partager ce fichier de couleurs avec vous, alors ne vous inquiétez pas à ce sujet. Voici mes couleurs arrangées et ceci est mon fichier ou toile principale. Je vais prendre mon stylo. Il suffit de penser que c'est l'icône de votre application principale. Je vais commencer à dessiner ici, peut-être à partir de ce point ou de ce point. Si vous voulez être très précis, vous pouvez dessiner d'ici et cliquer ici comme ça. Faites glisser et assurez-vous de faire glisser votre doigt jusqu'aux extrémités de ces petites cases. Vous pouvez voir qu'ils sont tous les deux identiques des deux côtés et partir et puis je vais cliquer une fois par ici ou par ici. Ici, c'est logique. C' est vraiment symétrique, donc je vais cliquer ici. Je vais répéter ça encore et encore. Désolé. « Contrôle Z » ou « Commande Z » pour revenir en arrière. Donc, je vais le faire à nouveau et je vais cliquer ici. Maintenant, nous allons cliquer à l'extérieur de cette toile comme ça juste pour la remplir parce que nous allons découper cette forme dans une autre forme, qui est notre icône principale, ou peut-être du verre ou quelque chose comme ça ou même du cœur. On n'a pas besoin de précision ici. Je vais cliquer sur ça. Nous allons enlever le coup. Nous n'avons pas besoin d'accident vasculaire cérébral ici, alors assurez-vous que vous n'avez pas d'accident vasculaire cérébral. Maintenant, sélectionnez ce calque et nous allons aller dans Nuancier, et nous allons utiliser cette couleur. En fait, le coup a été sélectionné, donc je vais passer à celui-ci. C' est notre couleur de premier plan et retirez à nouveau le trait et nous allons utiliser cette couleur ici. Je vais appuyer sur ma touche « Option » ou « Alt » pour le dupliquer comme ça. Glissez-le ici, faites-le glisser vers le bas. Vous pouvez également appuyer sur « Maj » pour le faire aligner sur la même ligne. Ici, nous avons le deuxième. Passez à la deuxième couleur, puis répétez ceci encore et encore. Nous allons sélectionner la troisième couleur, qui est cette couleur forte. Nous allons créer une autre copie, qui est la dernière, et nous allons sélectionner cette couleur plus foncée. Vous pouvez voir que nous avons créé nos vagues. Ils sont un peu pointus. Si vous voulez un changement ou un drame ajouté à cette forme, vous allez la déformer. Pour la distorsion, il y a beaucoup d'effets. Comme vous pouvez aller à « Distort & Transform » et vous pouvez utiliser ce zigzag. Activez l'aperçu et le rendre lisse et réduire les crêtes de taille par segment zéro, parce que nous avons tous prêts à avoir des crêtes. Vous pouvez voir ici, ce sont des vagues totalement différentes. Vous pouvez jouer avec la taille. Quelle que soit la taille que vous voulez, vous pouvez aller de l'avant avec. Je peux y aller avec deux ou peut-être un point. C' est à vous de décider. Ce sont des vagues totalement différentes. Il y a un autre effet que j'ai utilisé est aller à « Transformer » et aller à « Shear ». J' ai utilisé le cisaillement parce que je vais les déformer. Je vais montrer que ça bouge. J' utilise cet angle. J' utilise cet angle avec, je suppose, 60 pour cet axe. Voyons l'aperçu. Mes vagues ont cisaillé ou bougé, se sont déformées. C' est le but principal, pendant que vous créez vos éléments d'icône, vous pouvez les déformer ou les utiliser. Créer un peu d'intérêt pour elle. Cliquez ici comme ça. Essayez d'expérimenter avec, si vous aimez un angle par ici, vous pouvez l'utiliser. Aussi, nous pouvons le déplacer à l'endroit comme ça. Voyez l'effet quel effet est fondamentalement à venir. Il y a peu de choses comme si vous voulez des coins arrondis ou quelque chose comme ça, vous pouvez aller à ce « Styliser », et vous pouvez arrondir les coins. Aperçu. Donc dix points ou peut-être 20 points ou tout ce que vous pouvez voir ici. Maintenant, les coins sont arrondis et ils ont l'air très lisse et très agréable. Il y a plusieurs façons d'utiliser ces vagues d'eau et d'essayer de les arrondir ou d'essayer de créer des variations les déformant ou en utilisant d'autres effets comme celui-ci. Je t'ai montré ce zigzag. Vous pouvez également utiliser ces autres effets comme cette « Wave ». Si je passe à cette vague, désolé, je n'ai sélectionné aucun calque ou objet. Je vais aller à cette « Wave ». Voyons ce que ça va nous montrer. Maintenant, vous pouvez voir qu'il y a plus de drame dedans. Peu de vagues sont hautes et peu sont très basses. Vous pouvez les utiliser comme ça. Vous pouvez également sélectionner des calques simples. Si vous voulez obtenir une variation dans celui-ci ou celui-ci, vous pouvez sélectionner ceci et aller à cet effet d'onde et essayer de le plier ici. Peut-être que vous pouvez utiliser quelque chose comme ça. Maintenant, vous pouvez voir ici que nous avons beaucoup plus de différence comme ça. Aussi, vous pouvez sélectionner celui-ci et utiliser la même application. Nous avons des effets différents sur ici. Vous pouvez enregistrer le formulaire de cette vague et nous pouvons l'utiliser dans notre icône finale de l'application. Nous allons accrocher ces quatre vagues dans notre forme de cœur et de gouttelettes ou même dans notre verre. Ceci met fin à notre création de formes principales, notre principale partie Illustrator de cet exercice. Je vais le sauver et nous allons passer à la prochaine leçon. Voyons ce que nous pouvons faire dans Photoshop enfin, pour les convertir et les découper en icônes de belles applications. Restez à l'écoute et si vous avez des questions, n'hésitez pas à me poser. Je suis toujours là. Je vais t'aider dans tout. Si vous ne savez pas grand-chose sur Illustrator, je peux vous guider où obtenir des tutoriels ou peut-être de bons cours sur les bases de l'illustrator. Passons à la leçon suivante. 28. Concevoir l'icône de cœur: Maintenant, nous allons entrer en action et nous allons saisir ces vagues et nous allons les amener dans Photoshop. Nous allons d'abord créer l'icône du cœur, puis la gouttelette. Ils sont tous les deux fondamentalement les mêmes. Je vais créer le cœur, puis je vais vous donner la gouttelette, icône de goutte, icône de l'application pour l'exercice. Ce que nous allons faire, c'est que nous allons tout sélectionner. Contrôlez A et nous allons le copier et ensuite nous allons passer à Photoshop. Ici, nous avons ce modèle d'icône de produit Android. J' utilise ce 2.0 qui est libre d'appliquer des pixels. Auparavant, il était appicontemplate.com. sur le côté droit, vous pouvez voir ici nous avons 512 et éditer moi et enregistrer. Double-cliquez dessus. C'est une couche intelligente. Si vous ne savez pas ce qu'est un objet intelligent ou une couche intelligente, alors vous devez voir mon autre cours. D' abord, nous allons aller sur cette place. Allumez la grille et nous allons cacher tout ce glyphie et aussi je vais cacher ce fond, et avec ces bords, et celui-ci aussi. Ce que je vais faire, c'est que je vais sélectionner cet outil, cet outil de forme personnalisée, et je vais sélectionner mon cœur ici. Ce n'est pas mon coeur, mais c'est du type d'un Photoshop. Il l'a laissé ici. Nous allons, si vous ne voyez pas ce cœur ici, vous pouvez tous les sélectionner et ils vont montrer toutes les formes. Il s'agit des formes par défaut avec Photoshop. Je vais cliquer sur ce cœur et on va l'utiliser ici. Appuyez sur « Maj » pendant que vous le faites glisser ici. Si vous en voulez plus, je pense que je peux aussi le laisser si je veux l'élargir ou le rendre hors proportion. Comme ça. Ça a l'air bien. Maintenant, je vais utiliser cette grille. Je vais le dimensionner, Control t ou Command t, et je vais le dimensionner aux coins de ces cercles. Il a l'air vraiment bon, de bonnes proportions. Ces grilles vont essentiellement nous aider à construire une icône proportionnelle. Il a l'air très bien équilibré et agréable. Je vais l'aligner au centre. C' est notre principale icône ou forme de cœur. Ensuite, on va le déplacer en blanc, couleur blanche. Maintenant, l'étape suivante est que nous allons le désélectionner et nous allons coller notre calque que nous avons copié notre objet, nous avons copié à partir d'Illustrator. Lorsque nous appuyons sur « Coller » ou « Control v » ou « Command v », nous allons utiliser cet objet intelligent. Comme ça, et nous allons l'aligner ici, comme ça. Maintenant, vous pouvez voir sur le côté droit l'icône du cœur est ici, et l'objet intelligent, notre objet intelligent vectoriel transporté par Illustrator est ici. Astuce simple est que nous allons appuyer sur « Option » ou « touche Alt » et entrer entre ces deux couches et cliquer une fois, et il va couper à l'intérieur de cela. Maintenant, c'est comme ça que nous allons couper cacher cette grille. Vous pouvez voir notre icône du cœur est presque prêt maintenant. Encore peu de choses que nous pouvons faire. Maintenant, il est coupé. On peut le déplacer, peut-être qu'on a besoin, désolé, Contrôle t et on peut le faire tourner comme ça. Peut-être comme ça. Nous pouvons aussi le redimensionner comme ça. Ça a l'air très bien, peut-être quelque chose comme ça. Ces vagues ont l'air vraiment cool. Le plus amusant, c'est que tout laisse ici. Maintenant, si je vois un problème, comme si je veux, obtenir plus de distance entre ces calques, je vais double-cliquer dessus et il va s'ouvrir dans Illustrator. Je peux juste le réparer comme ça. Je vais le déplacer comme ça, déplacer celui-ci un peu vers le bas comme ça et Control s, fermer et il va être mis à jour dans Photoshop instantanément. C' est vraiment cool que vous puissiez travailler avec Illustrator et Photoshop en même temps. Je vais à nouveau double-cliquer et je vais obtenir cette distance mieux. Ça m'a l'air un peu bizarre. Allons à Photoshop. C' est vraiment cool. Si vous voulez le déplacer plus bas, vous pouvez utiliser quelque chose comme ça. En outre, vous pouvez réduire la taille, la taille des vagues, comme ceci. Maintenant, je pense que notre icône principale est presque complète. Fermez-le et cliquez sur « Oui » pour l'enregistrer. Si vous revenez à ce modèle Illustrator, désolé, icône de produit Android, vous pouvez voir l'icône de votre application ici. Il est vraiment superbe dans toutes les tailles. Très croustillant, très gentil. Vous pouvez voir ici quelque chose à l'intérieur de cette chose, nous allons l'enlever. Je pense que c'est une couche finie. Ce sont des couches finies et brille. Si vous voulez les utiliser, vous devez faire glisser votre design. Je vais le regrouper. C' est mon design, et je vais l'attraper et l'enlever vers le bas, là où nous avons eu ça. Je vais cliquer dessus et aimer ça. Peut-être au-dessus ou au-dessous, comme ça. Je vais l'enlever, ne sais pas qu'il arrive à l'intérieur de ce glyphie. Je vais le déplacer ici. Je ne sais pas pourquoi il utilise une sorte de carré par ici. Peut-être que je dois le déplacer en dehors de ces soins. Nous n'utilisons pas ce soin, mais nous utilisons essentiellement le cercle ici. Si vous voulez, vous pouvez le déplacer vers la zone du cercle ici comme ça. Je vais utiliser le cercle au lieu de ce carré. J' ai déménagé par le design ici et j'ai besoin que mon design soit déplacé ici comme ça, et je vais cacher la base. C' est parfait, et je vais cacher la grille. Ça a l'air super. Je ne sais pas pourquoi il montrait quelque chose en arrière-plan. Il y avait des couches, beaucoup de couches. Assurez-vous que tout est parfait. Si vous voulez l'alpha et la bêta ici, vous pouvez l'utiliser. Si vous ouvrez ce dossier, vous pouvez utiliser des versions bêta ou alpha si vous le souhaitez. Ensuite, l'icône de votre application sera comme ceci. Je le préfère sans rien. C' est notre icône principale. Nous avons conçu notre icône principale. Maintenant, pour extraire toutes ces icônes, je vais vous montrer tout dans la dernière leçon. Restez à l'écoute. Dans la leçon suivante, nous allons créer l'icône de l'application de ce verre avec l'eau, et nous allons utiliser un autre modèle. Passons à la leçon suivante. 29. Finalisation de l'icône de verre dans le modèle Photoshop: Maintenant, dans cette leçon, nous allons utiliser notre icône de forme de verre que nous avons créée dans Illustrator, et nous allons l'apporter dans Photoshop et nous allons utiliser un autre modèle d' icône d'application, qui est Material Design Icône Template et il est totalement gratuit. Il y a très peu de problèmes avec elle, mais je pense quand même que c'est l'un des meilleurs et c'est gratuit. Donc, nous allons commencer avec cette icône vide et maintenant si vous ouvrez le panneau des calques latéraux droit et allez à ces icônes en bas, vous allez voir ce 1080 et il est dit, éditer. Nous allons tout faire dans cette zone double-cliquez sur ce « Modifier » et fondamentalement c'est un objet intelligent. Maintenant, nous allons créer celui-ci. Nous allons aller à Illustrator et nous allons saisir cette couche, nous concevons cette forme de verre et la copions. Nous allons le coller ici dans Photoshop en tant qu'objet intelligent « Control A » et aussi nous pouvons utiliser cette grille avec une précision comme celle-ci. Donc j'aime vraiment cette grille. Vous pouvez voir tout ici, j'utilise ces lignes intérieures pour aligner cette icône de l'application et ce verre. Je vais cacher cette grille. Si j'ai raison, je vais utiliser ma petite éclipse, désolé. Je vais utiliser ma grande éclipse et si c'est la couleur est autre chose, double-cliquez dessus et utilisez la couleur blanche. Retirez tous les effets sur elle. Donc, s'il a un trait ou la superposition de couleur ou l'ombre portée, il suffit de les supprimer. En outre, si vous voyez ici les couleurs ne fonctionnent pas, assurez-vous que ces deux opacité et remplissage sont réglés à 100 pour cent. Donc c'est tout et nous avons déjà utilisé celui-ci. Maintenant, nous allons à nouveau voir cet Illustrator, et nous allons ouvrir nos vagues d'eau, copier celles-ci. Nous allons également les importer dans Photoshop, les coller ici et nous les avons déjà collés ici comme ça. Ce qu'on va faire, c'est qu'ils vont prendre derrière cette forme vectorielle, comme ça. Maintenant, sélectionnez cet objet intelligent vectoriel et appuyez sur « W » pour sélectionner la police magique sur Photoshop et sélectionnez cette section interne de cet objet intelligent vectoriel. Sélectionnez, modifiez et développez la sélection d'un pixel. Je vais créer un autre calque ici comme celui-ci. Appuyez sur « G » et on va avoir de la couleur ici, qui va être blanche. Donc comme ça, nous avons de la couleur blanche à l'intérieur de ceci et ce que j'essaie de faire, c'est que je vais le clipser à l'intérieur de cette couche intérieure. Donc, je vais couper ceci avec la touche d'option Alt et c'est ainsi qu'il a été coupé. Vraiment superbe. Donc, si vous voulez utiliser des vagues d'eau, vous pouvez le contracter et l'étendre tout ce que vous voulez. Vous pouvez voir ici, maintenant j'utilise quelque chose comme ça. Aussi, si vous voyez dans mon design d'icône d'origine, j'ai supprimé la quatrième couleur ici. Donc, ce que j'ai fait est que j'ai double-cliqué dessus et que je supprime cette quatrième couche et « Control S » ou « Command S » et je vais revenir en arrière. Vous pouvez voir que nous n'avons que trois couleurs. Si vous voulez les déplacer plus, vous pouvez les déplacer comme ça. Rendre la distance un peu plus grande, comme ça. Parce que c'est un verre, ça aura l'air vraiment cool si on a plus de distance. En outre, vous pouvez le faire pivoter peut-être pour créer une attraction ou quelque chose comme ça. Alors peut-être quelque chose de plus proche de ça, déplace-le comme ça ou quelque chose comme ça ici. Donc ces bons réglages, ils vont prendre plus de temps. Pour moi, au moins cela prend plus de fois jusqu'au moment où je ne suis pas satisfait. Donc je continue à bouger ça. C' est ainsi que va être notre icône d'application. Maintenant, vous pouvez également utiliser la transparence sur cette grande éclipse. Donc je vais régler cette opacité à 50 pour cent, comme ça. Encore une chose, je pense que c'est un peu au-dessus, donc je vais le déplacer un peu vers le bas. Il y a mes trois couches. Alors je vais essayer de les regrouper. Il est préférable que votre conception soit dans un groupe et que vous pouvez le déplacer vers le bas comme ceci et « Control S » essayer d'utiliser la grille, voir où elle se trouve dans la grille. Peut-être que nous pouvons l'étendre un peu plus. Utilisez plus de zone autour d'elle. Cachons cette chose « Control S » et voyons à quoi il ressemble. Alors nous allons zoomer et il est vraiment super sur toutes les tailles. Vous pouvez voir ici, voici l'icône de notre application. Nous avons cela sur ce point de vue. Ensuite, nous avons comme celui-ci sur notre MyApp Store sur Google App Store et il semble vraiment cool sur notre écran principal et je pense que c'est tout. Maintenant, pour vous les gars, je vais vous donner le défi de créer l'icône de goutte en utilisant la même technique. Vous pouvez télécharger ces designs sur l'URL que je vais partager avec vous. Alors téléchargez votre travail ici. Je vais évaluer votre travail et voir comment vous allez faire. Alors, que le défi commence. 30. Extraction des tailles d'icônes pour les appareils Android: Ok, maintenant dans cette dernière leçon, je vais vous montrer comment extraire toutes ces icônes, à partir de ces deux modèles. J' ai donc utilisé ce modèle d'icône de conception de matériel et modèle d'icône d'application Android 2.0. Vous pouvez également télécharger la version 3.0., mais la méthode sera la même, pour ce gars, Michael Flarup, il a conçu le fichier d'action. Si vous passez à ces actions, si vous ne voyez pas d'actions ici, vous pouvez aller à Fenêtre et activer ces actions. Dans les actions, j'ai copié ces actions ici. Si ces actions ne s'affichent pas, vous pouvez cliquer dessus et charger des actions. Accédez à ces actions de chargement et parcourez ce fichier. J' ai ce modèle d'icône de produit Android 2.0. fichier ATN. Les fichiers d'action ont cette extension ATN. Vous devez le charger et ce sera comme ça. Une fois que vous avez chargé ceci, assurez-vous que vous avez votre icône. n'y a rien autour d'elle ou rien de plus autour elle comme cela créer l'éteindre ou des ombres ou des problèmes. Assurez-vous que c'est bon. Ensuite, nous allons l'utiliser sur ce dossier. Alors allez dans ce fichier et cliquez simplement sur cela et, allez à cela. Le premier est d'exporter toutes les tailles, c'est l'action de base. Il s'agit du dossier d'action, si vous cliquez ici, vous pouvez voir que le dossier se ferme et s'ouvre. Maintenant cliquez dessus et appuyez sur Play et nous allons voir ce dialogue et nous allons le sauvegarder comme ça. Je vais l'enregistrer sur le bureau. Voyons voir, j'ai beaucoup de dossiers ouverts. Ce sont les tailles qu'il a générées 512, 192, 144, 96, 72, 48. Maintenant, une taille est manquante, qui est 114. Si vous voulez le générer. Ne vous inquiétez pas pour ça. Je vais utiliser ce 512 et je vais l'importer ici comme ça et je vais exporter la taille, qui va être 114, comme ça et économiser. C' est ainsi que vous allez créer la taille 114, qui est manquante dans ce modèle. Maintenant, je vais le faire glisser à l'intérieur de ceci et j'ai un ensemble complet, 114, 512, 192, 144, 96. Donc, c'est 114. C' est ainsi que vous allez créer la taille manquante ici. C' est juste un peu de mal de tête, mais je pense que ça vaut la peine si vous n'avez pas besoin de dépenser 10$ par mois. Maintenant venu à ce modèle d'icône Material Design, il est construit sur la même technologie. Donc, ce que nous allons faire est que nous allons simplement utiliser File Export, Save for web et il va se charger de la même manière que nous allons l'enregistrer comme ceci, enregistrer et ce sont tous les fichiers. Je vais les remplacer et nous allons voir les images. Donc nous avons cette icône 512, je pense que je viens de choisir le carré. Je ne sais pas. Laisse-moi y aller. Donc, ce qu'il dit, c'est que cacher ce fond. Essayez donc de masquer cet arrière-plan avant d'exporter, comme ça. C' est vraiment bien si vous savez comment le faire. Enregistrez, enregistrez et remplacez. Donc maintenant vous pouvez voir que j'ai ces icônes et elles sont transparentes sur les côtés. Donc, si je le fais glisser dans Photoshop, il va être transparent de tous les côtés. J' adore cette zone transparente autour de cette zone blanche. Il est vraiment cool même dans la capture d'écran ici. Je pense que si je l'ai fait pour l'un de mes clients, je pourrais lui avoir facturé au moins 200$ pour cette icône d'application ou peut-être plus. Maintenant, c'est la dernière leçon pour ce cours. Votre défi est de créer une icône d'application similaire avec une goutte en utilisant la forme de gouttelette. Si vous avez des problèmes, faites-le moi savoir. C' est une échelle vraiment solide. Je pense que normalement, montant minimum pour une icône d'application, vous devriez facturer au moins 100$ pour la création d'une icône d'application, parce que nous allons créer comme cinq ou six tailles pour toutes les différentes plates-formes ou résolutions pour Android ou même pour iOS, vous allez créer pour trois ou quatre tailles. Donc, je vais essayer de vous mettre à jour les gars ou si j'ai quelque chose de nouveau, je vais l'ajouter à ce cours. C' est la dernière leçon. Je suis impatient de voir vos dessins et j'attendrai. Passons à de nouvelles compétences géniales. Vérifiez mes autres cours et au revoir, prenez soin et passez une belle journée.