Bienvenue à nouveau.
Créons une icône d'application qui sera utilisée sur Google Play, mais qui peut être utilisée sur n'importe quel magasin d'applications.
En fin de compte, nous allons utiliser Keyboard Plus, une application créée par mon ancienne société de conception
d'applications.
Si nous consultons le Play Store, il est toujours préférable de voir ce que les gens utilisent.
Par exemple, SwiftKey utilise celle-ci.
Passons maintenant à Photoshop et ouvrons un nouveau projet de 512 par 512.
Pas d'artboard.
Maintenant, prenez l'outil Ellipse et cliquez une fois.
Nous allons introduire les chiffres suivants.
La norme est la suivante : 512.
Ceci est valable pour les deux champs.
Utilisez maintenant Ctrl A et centrez la forme sur le canevas comme d'habitude.
Nous n'avons pas besoin d'arrière-plan car la plupart des icônes doivent avoir un arrière-plan transparent.
Maintenant que le cercle est sélectionné, allez en bas du panneau des calques et ajoutez le dégradé.
C'est assez simple pour que nous puissions en faire quelque chose d'agréable.
En ce qui concerne les paramètres, nous allons nous en tenir à des éléments de base.
Nous allons utiliser le mode de mélange normal avec une opacité de 100 %.
Nous voulons un gradient linéaire dont l'angle est fixé à zéro degré.
Il s'agit essentiellement d'un dégradé horizontal, et non vertical, qui est très à la mode en
ce moment.
Commencez par un dégradé de base, rien de spécial.
Nous allons changer cela dans une seconde.
Pour le côté gauche, je vais utiliser le code couleur suivant.
Il s'agit du DC16F3.
Il s'agit d'un mélange de rose et de violet utilisé dans l'ensemble de l'application.
L'objectif est de le faire ressortir.
Il doit être frappant et mémorable.
Pour le côté droit, nous allons utiliser le code couleur suivant.
Il s'agit de F316 b8.
Il s'agit plutôt d'un rose.
Comme vous pouvez le constater, ce dégradé est assez subtil.
Et c'est exactement ce que nous voulons.
Les icônes des applications sont aujourd'hui très simples.
C'est le minimalisme.
Dans le passé, nous avons eu de belles icônes.
Ce style s'appelait le skeuomorphisme et je sais que vous aimez probablement ce style.
J'aime cela aussi, mais de nos jours, on ne le voit plus vraiment.
C'est le nouveau style.
Minimal, simple.
Super propre.
D'accord, revenons-en au sujet.
Ajoutons une ombre intérieure.
Voici ce qu'il en est.
Il ne s'agira pas d'une ombre à proprement parler.
Faisons donc la chose suivante.
Changeons le mode de mélange en mode écran ok maintenant l'opacité 35%.
Et au lieu du noir, nous allons faire quelque chose de très intéressant.
Nous allons utiliser du blanc pur.
Passons maintenant à la distance de 20 pixels.
L'idée est de créer une sorte d'effet de surbrillance pour que l'icône ne paraisse pas si simple.
Nous voulons qu'il soit propre, mais nous ne voulons pas qu'il soit sous-conçu, si cela a du sens.
C'est simple, mais pas simpliste.
Ajoutons maintenant une autre ombre intérieure en cliquant ici sur l'icône plus.
Elle sera située sous la première.
Et nous allons procéder comme suit.
Nous allons donc changer le mode de mélange en mode multiplicateur et l'opacité
en mode 40%.
Cela va nous aider à créer un effet de contour.
En ce qui concerne l'angle, c'est très important.
-90 degrés.
Pour ce qui est de la couleur, je vais rester dans la même région rose.
Le code couleur est le suivant.
Il s'agit du C20B 91.
Et avec cela, nous avons une base fantastique, une bonne fondation solide. Ok, ensuite ajoutons un K majuscule, comme
dans clavier.
Pour la police, nous allons utiliser ce qui suit.
C'est ASAP bold.
Il s'agit d'une police Google, vous pouvez donc facilement la télécharger et l'installer.
Si ce n'est pas le cas, vous pouvez utiliser quelque chose de différent.
Je vais maintenant le rendre assez grand, environ 360 pixels, et je vais le rendre blanc.
Bien entendu, nous devons le centrer horizontalement et verticalement.
Ce contraste est fantastique.
C'est exactement ce que je recherche.
Mais ajoutons un petit quelque chose de plus.
Lancez donc la fenêtre Styles de calque et ajoutons un effet d'ombre intérieure.
Ne vous inquiétez pas, nous n'ajouterons pas d'effet noir désagréable.
Au lieu de cela, nous allons procéder comme suit.
Le mode de fusion se multiplie donc.
Pour le code de couleur, nous allons utiliser ce qui suit.
C'est facile pourtant zéro c a7 pour l'opacité, 15% angle -90 degrés distance huit pixels.
Cela nous donne en quelque sorte un effet 3D.
Ensuite, je vais ajouter un symbole plus parce que le nom de l'application est Keyboard Plus, ce qui est logique.
Ce plus doit être placé quelque part en bas à droite.
Il ne doit pas faire concurrence à la clé elle-même.
Nous allons donc en faire un plus petit, de la moitié de sa taille.
Donc 180 pixels, c'est pas mal.
Passons maintenant au style de calque.
Copions-le pour le coller, car nous voulons obtenir le même effet d'ombre intérieure que celui que nous avons créé précédemment.
Aujourd'hui, même en blanc sur blanc, cela ne fonctionne vraiment pas.
Mais voici ce que nous allons faire.
Contrôle.
Cliquez.
Cette vignette du symbole plus.
Il s'agit donc d'une sélection.
Le contrôle se fait donc par un clic droit.
Nous voulons ensuite élargir la sélection.
Nous voulons l'agrandir légèrement.
Nous voulons un petit écart.
Voici ce qu'il en est.
Allez dans le menu supérieur pour sélectionner.
À partir de cette liste, cliquez sur "Modifier".
Enfin, choisissez l'extension.
Et cela va nous aider.
Il s'agit donc à nouveau d'élargir notre sélection.
Mettons donc cinq pixels.
Cela devrait suffire.
Passez maintenant au calque.
C'est très important.
Nous avons donc sélectionné ce calque.
Allez maintenant au bas du panneau des calques.
Maintenez la touche Alt enfoncée et cliquez sur le masque.
Pourquoi maintenons-nous la touche Alt ? Parce que nous voulons un masque inversé.
Et c'est fantastique.
C'est très bien.
Il s'agit en fait de l'icône elle-même.
Nous pourrions en faire beaucoup plus, mais pour l'instant, j'en suis totalement satisfait.
Il est maintenant temps d'introduire les objets intelligents.
Vous vous dites peut-être : si le travail est déjà fait, pourquoi avons-nous besoin d'objets intelligents ?
Dans la plupart des applications, vous aurez besoin de plusieurs tailles.
Il s'agit du plus grand 512 par 512, mais nous avons également besoin de quelques autres 256 par
deux, cinq, six, un, deux, huit, 64 et 32 par 32.
Cela signifie que nous allons devoir créer plusieurs copies de la même icône.
Mais dites-vous qu'au bout d'un certain temps, vous voudrez peut-être changer quelque chose.
Peut-être la police de caractères, peut-être le dégradé de rose, cela signifie-t-il que
vous allez devoir changer toutes les icônes ?
Ce serait très pénible.
C'est là que les objets intelligents interviennent et sauvent la situation.
Je vais maintenant prendre toutes ces couches.
Je vais faire un clic droit dans le panneau des calques.
Ensuite, je vais choisir Convertir en objet intelligent.
Il s'agit d'une première étape très importante.
Ensuite, vous pouvez augmenter considérablement la taille de la toile.
Vous pouvez également passer à un nouveau projet dans un nouvel onglet.
Ok, maintenant dupliquez cette icône quatre fois et placez les copies autour du canevas.
Dans la plupart des cas, vous voudrez voir toutes les copies côte à côte.
Utilisez maintenant Ctrl T et changez la valeur en pourcentage en pixels en cliquant avec le bouton droit de la souris sur OK.
C'est une bonne chose.
Ainsi, en pixels, assurez-vous que l'icône de la chaîne est appuyée et tapez 256.
Cela s'appliquera également à l'autre domaine.
C'est ainsi que nous avons notre deuxième icône.
Je vais maintenant faire le reste pour toutes les autres tailles.
Cela va prendre un certain temps, mais je vais accélérer les choses dans quelques secondes.
Vous allez voir pourquoi les objets intelligents sont superbes : 128, 64 et enfin 32.
Après toutes ces explications, voici la star du spectacle.
Disons que j'ai changé d'avis : au lieu de ce dégradé rose, je veux peut-être rendre l'icône verte.
Cela ne pose aucun problème.
Je sais qu'il n'y a rien de disponible dans le panneau des calques parce que ce sont tous des objets intelligents.
Mais voilà, vous pouvez double-cliquer sur n'importe lequel d'entre eux à partir de la vignette.
Cela va permettre de lancer un nouveau projet dans un nouvel onglet.
Il s'agira d'un livre du PSB.
Vous avez ici tous les calques sur lesquels vous faites un clic droit et que vous convertissez en objet intelligent.
Voici donc ce qu'il en est.
Nous pouvons désormais effectuer n'importe quel changement.
Par exemple, je vais désactiver le dégradé et je vais changer la couleur de ce cercle.
Je vais maintenant utiliser Ctrl S pour sauvegarder.
Il ne me demande pas l'emplacement ou quoi que ce soit d'autre.
Ensuite, vous pouvez simplement fermer ce projet, fermer l'onglet.
Comme vous pouvez le voir, toutes les copies ont été mises à jour.
C'est ainsi qu'il est vraiment avantageux de travailler avec des objets intelligents.
Il s'agit de clones identiques qui sont mis à jour après la modification de l'un d'entre eux.
Cela signifie que vous pouvez concevoir votre icône à n'importe quelle taille, et vous allez voir à quoi elle ressemble à différentes
tailles.
De belles choses.
Cela fonctionne bien pour les différents projets.
En résumé, il est toujours préférable d'utiliser des objets intelligents, en particulier lorsque vous avez besoin de plusieurs versions
d'un même objet.
Sur ce, nous allons faire une petite pause.