Share
Nous avons déjà traversé beaucoup de choses dans cette série. J'aimerais penser que, d'après ce que nous avons couvert jusqu'à présent, vous pouvez commencer à concevoir des trucs plutôt cool! Pour ce tutoriel sur les boutons, je vais vous montrer comment créer une icône en utilisant seulement quatre cercles. Oui, ça y est, juste quatre! Tandis que quatre cercles vous donneront quelque chose d'assez cool, je vous en donnerai encore plus pour votre argent en vous montrant comment améliorer le graphique en ajoutant deux cercles supplémentaires. Allons dessiner!
C'est ce que nous allons finir avec. Cette même technique fonctionnera pour à peu près toutes les formes. Vous pouvez ainsi créer un carré ou un rectangle aux angles arrondis une fois l'opération terminée. Expérience. Changer les couleurs doit être assez simple, donc si vous n’êtes pas en bas du vert, changez-le. Apprenez un peu la théorie des couleurs dans l'un de mes précédents articles pour optimiser l'effet souhaité.
J'ai utilisé les préréglages ci-dessus pour simplifier et depuis je veux ces icônes dans mon application mobile. Les préréglages devront peut-être être modifiés en fonction de la manière dont vous souhaitez utiliser vos boutons..
Vous pouvez également choisir l'outil Ellipse dans la barre d'options en haut..
Cela va être la taille de votre bouton alors jugez la taille en conséquence. Un nouveau calque nommé Shape-1 aurait dû être créé dans votre palette..
Donnez à votre couche un nom descriptif ou facile à mémoriser. J'ai nommé ma base parce que c'est la couche de départ et que tout sera construit à partir d'ici.
Nous allons créer les jolis petits rehauts et ombres que vous voyez dans la pièce finie. Les dégradés sont parfaits pour cet effet et peuvent être utilisés de différentes manières créatives..
Ici, nous allons ajouter trois couleurs à notre dégradé, une surbrillance, une nuance et quelque chose entre les deux. La signification en surbrillance permet d'ajouter un peu plus de vert et de blanc et moins de rouge et de bleu. Shade signifie sortir du vert et du bleu. J'ai utilisé le point culminant - # 00ff24, quelque chose entre- # 00bb23 et ombre- # 00891a.
Ça a l'air bizarre maintenant, hein? Faisons un autre cercle là-bas rapidement.
REMARQUE: Commencez par le haut et utilisez la barre d'espace pour dessiner ou cochez l'option "depuis le centre" depuis les options de forme et alignez-la avec le milieu du cercle précédent..
Un nouveau calque nommé Shape-1 aurait dû être créé dans votre palette..
Donnez à votre couche un nom descriptif ou facile à mémoriser. J'ai nommé le mien radial et cela fera un peu plus de sens ici dans une seconde.
Donc, vous devriez maintenant avoir deux calques, base et radial dans votre palette de calques.
Nous allons maintenant utiliser deux couleurs. # 1be220 pour le point culminant et # 529655 pour la couleur plus foncée.
Maintenant, ça commence à bien paraître. Deux cercles en bas, un pour aller. Nous allons ajouter un autre cercle qui sera notre point fort.
Nous procédons de manière un peu différente pour vous montrer comment appliquer des effets similaires avec des outils différents. Pour les reflets, je trouve que l'outil de sélection est un peu plus facile à utiliser que l'outil de forme.
Gentil hein? Nous voudrons peut-être un peu plus de subtilité, alors ajustons un peu l'opacité. Avec le calque en surbrillance toujours sélectionné:
Voilà. Trois petits cercles avec des styles différents et nous avons une petite icône douce. À propos du bouton le plus simple que vous puissiez créer, qui a de toute façon une belle apparence.
Si vous voulez donner un peu plus à vos icônes, ajoutons un peu plus de profondeur. Une petite ombre portée devrait faire l'affaire. Deux autres cercles?
Au lieu de renommer la couche, nous allons simplement utiliser le nom par défaut et utiliser la couleur pour les différencier.
Remarque: Tu ne verras pas encore de changement dans l'image.
Nous venons de déplacer le calque un peu plus bas (3 pixels) afin que nous ayons peu d'ombre qui pointe derrière le calque de base.
Une ombre de plus à parcourir et nous avons terminé. C'est un terme de l'industrie.
Remarque: Faites glisser le calque vers le bas de la palette, sous le cercle noir que nous venons de créer s'il ne l'est pas déjà..
Cela va faire ressembler le bouton est assis sur une surface.
Comment s'est passé le vôtre? Comme vous pouvez le constater, vous pouvez superposer n'importe quel type d'icône ou de forme Photoshop sur ce bouton et créer un joli petit jeu d'icônes à utiliser pour votre application..
Tu vois ce que je veux dire?
Une des raisons pour lesquelles j'aime utiliser l'opacité des ombres au lieu de choisir uniquement une couleur grise est que, lorsque nous enregistrons cette opération, nous souhaitons utiliser un format prenant en charge les transparences. L'opacité sera préservée et quelle que soit la couleur de fond, les ombres seront belles.
J'espère que vous avez trouvé ce tutoriel utile.
Ensuite, nous examinerons l'optimisation des images pour les appareils mobiles ainsi qu'un outil peu connu dans Photoshop qui facilite le prototypage..
Accentsconagua