Share
Construisons nous-mêmes un élément de l'interface utilisateur de mauvaise humeur. Nous utiliserons Photoshop pour explorer des textures subtiles et assembler un superbe cadran de volume. Allons-y!
Ouvrez un nouveau document RVB d'une taille de 800 x 600 pixels et d'une résolution de 72 dpi.
Sélectionnez une couleur bleu sombre sombre pour l'arrière-plan (dans ce cas, le code de couleur est # 1b1c20), puis utilisez l'outil Pot de peinture pour remplir l'arrière-plan..
Appliquez du bruit sur le fond pour lui donner une texture douce (1% de bruit gaussien et monochromatique).
Maintenant, vérifiez le téléchargement source - vous y trouverez un fichier de motif dans lequel vous devrez double-cliquer pour l'installer dans Photoshop. Appliquez le motif à un nouveau calque et remplissez le calque entier avec le motif.
Tournez l’opacité de superposition du motif à 15-20% selon vos préférences pour obtenir quelque chose comme ceci:
Créez un nouveau groupe avec le nom "bouton" et ajoutez une forme de cercle (sélectionnez l’outil Forme elliptique et maintenez la touche Maj enfoncée pour le rendre parfaitement circulaire). Donnez-lui une couleur vive pour que vous puissiez voir le calque clairement plus loin dans la ligne?
Réduisez l'opacité de remplissage du calque jusqu'à 0% et appliquez une ombre portée avec les propriétés suivantes:
Appliquez ensuite une légère ombre intérieure pour lui donner un aspect indenté..
Après cela, appliquez une lueur intérieure pour que la base paraisse pleine.
Pour l'étape suivante, créez un autre cercle et donnez-lui une couleur blanche. Il s'agira de la forme de base de notre élément d'interface utilisateur. Elle servira à ajouter plusieurs couches de détails. Créez donc une taille qui vous fera vraiment plaisir! Nommez-le "base de bouton" ou quelque chose de similaire.
Appliquez un calque dégradé en angle, commencez par le blanc et ajoutez deux arrêts de couleur gris clair. Utilisez les deux blancs au centre pour jouer avec la netteté du bouton et continuez à prévisualiser l'élément pour voir à quoi il ressemble.
Appliquez un biseau et embossez à la base pour lui donner un aspect un peu 3d.
Maintenant pour les détails. Faites une copie du calque de base et placez-le sous la base du bouton. Tournez maintenant le remplissage à 0% pour afficher uniquement les filtres que vous appliquez à ce calque, et non le contenu. Créez une ombre portée avec les paramètres suivants:
Pour que le bouton sorte un peu plus, copiez à nouveau la base du bouton, en le plaçant sous la base du bouton et au-dessus de l'ombrage. Donnez-lui une superposition de couleur sombre pour le rendre superbe.
Créez maintenant une autre copie du calque de base des boutons, mais augmentez-la. Placez-le sur le calque de base du bouton et rastérisez-le.!
Ceci fait, allez dans le panneau des filtres et donnez-lui un filtre anti-bruit maximum (afin de penser que vous regardez un téléviseur cassé).
Ensuite, appliquez un filtre de flou radial et réglez-le sur la valeur maximale pour obtenir un bel effet..
Vous devez baisser l'opacité de ce calque à environ 20-40%, puis centrer le milieu avec le bouton. Lorsque vous l'avez au centre, sélectionnez le calque de boutons et sélectionnez> inverse. Ensuite, sélectionnez la couche à gratter et appuyez sur Supprimer. Vous devriez être laissé avec un bel effet rayé sur le bouton.
Pour vérifier que tout se passe bien, vous devriez avoir quelque chose de similaire à ceci:
Faites un petit cercle pour l'encoche (ou l'indicateur) sur le bouton.
Donnez-lui une ombre portée blanche pour lui donner un aspect en relief.
Donne à l'encoche une petite ombre intérieure.
Et enfin donnez-lui vie avec une couleur de votre choix.
Vous devriez avoir quelque chose comme ça:
Maintenant, restons coincés dans les derniers petits détails! Faire un petit rectangle pour les encoches à la base du bouton.
Baissez le remplissage à 0% et donnez-lui une ombre portée blanche.
Il faut aussi un peu d’ombrage à l’intérieur, alors donnez-lui une petite ombre intérieure..
Maintenant, copiez-le et retournez-le de l'autre côté.
Mettez votre contenu textuel dedans, en utilisant une police de votre choix (j'ai opté pour Myriad Pro).
Appliquez une ombre portée au texte pour lui donner un aspect en retrait.
Puis appliquez une légère ombre intérieure.
Cela devrait être ce que vous voyez dans votre fichier:
Et ceci est notre dernier élément d'interface utilisateur, un simple cadran de volume pour gonfler la musique!
J'espère que vous avez aimé ce tutoriel, ce sera le premier d'une longue série, alors n'hésitez pas à me suivre sur Twitter ou à vous abonner à la newsletter de mon site. Bonne conception et reste cool!
Accentsconagua