Share
L’un des meilleurs moyens d’apprendre à créer des interfaces étonnantes s’exerce en créant des appareils électroniques dans Photoshop. De nos jours, à peu près tout le monde possède un appareil MP3 pour jouer de la musique. Dans ce didacticiel, nous montrerons comment créer une interface MP3 élégante, élégante et simple dans Photoshop pour lire des fichiers audio pour vos projets Flash..
La première étape consiste à créer un arrière-plan dans lequel nous pouvons appliquer un dégradé radial foncé. Peignez le calque dans n'importe quelle couleur et ajoutez un style de calque avec le dégradé indiqué ci-dessous.
À l'aide de l'outil Rectangle arrondi (définissez un rayon de 20 pixels), créez l'élément principal de l'appareil à l'aide d'un calque de forme (en cliquant sur la première option du menu supérieur)..
Double-cliquez sur le vecteur de cette couche, son éditeur de couleurs s’ouvrira. Nous choisirons une couleur gris clair # E1E0E0 qui nous permettra d'ajouter de la lueur à la surface. Chaque fois que vous voulez créer des objets blancs, vous devrez ajouter un peu de couleur grise pour pouvoir les éclairer ou ajouter une lueur pour rendre ces ressources bien visibles..
Nous allons maintenant créer un biseau autour de l'appareil. Pour ce faire, nous devrons créer des guides de référence à l'aide des règles de Photoshop. Cliquez sur l'angle de convergence des deux règles. En faisant glisser la souris, vous pourrez visualiser les lignes en pointillés qui déterminent avec précision l'emplacement du curseur. Cela nous permettra de créer un biseau équidistant autour du périmètre de l'appareil..
Maintenant que nous avons un nouveau calque de forme pour le biseau, nous devons ramener l'opacité de ce calque à zéro, car nous souhaitons simplement voir un biseau de 2 pixels à la surface..
Appliquez un trait de 1 pixel à la position intérieure en utilisant une couleur plus sombre que celle de l'avant du périphérique. Dans cette étape, nous allons créer une ligne qui représente l’espace commun entre le corps et l’avant du joueur..
Appliquez une lueur interne avec une ligne de 2 pixels en utilisant les valeurs ci-dessous.
Ajouter un dégradé doux pour donner l'idée de convexité à l'avant de l'appareil.
Nous allons maintenant nous occuper du bord du joueur. Pour ce faire, ajoutez une ligne qui fonctionnera comme une extrusion pour donner l’illusion d’un objet 3D. Ajouter un trait gris de 2 pixels en position extérieure.
En utilisant le style Bevel & Emboss, nous ajoutons de la lumière à la partie supérieure de cette ligne. Maintenant, l'objet semble avoir une extrusion vers l'arrière qui reçoit la lumière d'en haut et devient plus sombre à la base.
Ajoutez une petite ombre intérieure douce à ce calque pour mettre davantage en évidence l'avant du joueur..
En dupliquant et en modifiant la couche de biseau du recto, nous générons plus de biseaux qui représenteront les différents boutons de contrôle du périphérique..
Maintenant, éditez le calque de forme pour créer le bouton principal Play / Pause de notre lecteur. Reproduisons le premier biseau et prenons les frontières à l'intérieur pour créer un objet circulaire. Puis agrandissez-le de 10% car nous n'avons besoin que des biseaux horizontaux.
Appliquez un masque souple de 3 pixels à la forme créée à l'étape 13, comme indiqué ci-dessous..
Pour que le masque masque l'objet et son style de calque, cliquez sur l'option «Masquer les effets de masque de calque» dans la fenêtre des styles. Si nous ne choisissons pas cette option, le masque ne fera que masquer l'objet mais affichera l'effet en dehors du masque et nous voulons le garder caché..
Ce même masque sera également utile pour les autres biseaux; nous pouvons le prendre à partir de la couche que nous avons masquée auparavant. En cliquant avec le bouton droit de la souris sur l'icône du masque à l'intérieur du calque, nous choisissons l'option «Soustraire le masque du calque de la sélection». Cela créera une sélection identique à la précédente.
Avec cette sélection, nous répétons l'étape de conversion de sélection de masque.
Nous avons déjà les biseaux de séparation de notre jeu de boutons principal. Nous devons maintenant créer un calque de forme pour l’affichage du lecteur: un écran en acrylique noir sur lequel seront affichés le nom de la chanson et l’heure..
Nous utilisons d’abord l’ombre portée pour créer un biseau inférieur dans lequel la lumière venant d’en haut va frapper. Utilisez les valeurs indiquées sur l'image pour configurer le style afin qu'il soit net et clair et non sombre et flou.
Nous devons maintenant créer un dégradé radial. Placez les couleurs noir et blanc le plus près possible du centre pour qu'il n'y ait pas beaucoup de douceur entre les deux couleurs. Lieu de noir 49%, emplacement de blanc 50%.
Décochez l'option Aligner avec le calque. Si nous ne le faisons pas, le dégradé ne sera que du centre de l'objet aux bords et nous voulons que ce dégradé soit beaucoup plus grand et plus large..
Après avoir créé votre effet brillant, terminez ce style avec quelques biseaux similaires à ceux que nous avons créés pour l’étape du bouton. Utilisez un trait noir de 1 pixel avec le trait aligné à l'intérieur. Utilisez une lueur interne de 2 px de taille avec le mode de fusion défini à l'écran.
Nous avons maintenant terminé le devant de notre lecteur MP3. Maintenant, nous devrons ajouter des icônes aux boutons et du texte à l’écran..
Simulons maintenant le défilement de texte sur notre écran. En utilisant une police pixélisée, nous devons ajouter le nom de l'interprète et le nom de la chanson à jouer. Vous pouvez utiliser cette police gratuite. N'oubliez pas de supprimer le crénelage dans la fenêtre Caractère du menu supérieur de l'outil Texte pour conserver un texte net.
Avec une autre police bitmap, nous créons le chronomètre qui indique le temps écoulé. Cette police est également gratuite et vous pouvez l'obtenir ici.
Maintenant, utilisez une police qui a les icônes et les symboles habituels d’un lecteur audio ou vidéo. Vous pouvez utiliser celui-ci. Une fois installé, utilisez-le pour créer les différents boutons du lecteur. Dans ce cas, le contrôle Lecture / Pause (vous devrez créer deux états pour le bouton lorsque vous développerez ce lecteur. il est pressé et vice versa).
Pour ce symbole, nous utilisons la même couleur que celle que nous avons choisie pour la surface avant de l’objet. Avec l'outil de sélection des couleurs, nous pouvons peindre le texte.
Nous pouvons maintenant inclure différents styles pour que ce symbole ressemble à un bas-relief. Utilisez les valeurs correspondantes ci-dessous pour l'ombre intérieure.
Allégez le biseau inférieur en utilisant ces valeurs.
Utilisez un gradient de largeur doux et petit à la surface de la dépression pour ne pas être si ennuyeux.
Créons le contrôle du volume. Dessinez un petit bouton avec une finition en métal poli. Commencez avec un calque de forme circulaire.
Utilisez une ombre portée pour créer l'illusion d'une grande extrusion.
Avec un dégradé en mode Angle et plusieurs bandes grises et blanches, nous pouvons simuler le poli circulaire de ce type de bouton. Assurez-vous que la couleur grise initiale à gauche est identique à la couleur grise finale à droite.
Enfin, ajoutez un trait avec un remplissage en dégradé. Cela ajoutera le biseau sur le périmètre. Suivez attentivement les valeurs sur l'image.
Nous avons maintenant terminé notre bouton de contrôle du volume, mais nous souhaitons également ajouter un bouton muet. Vous pouvez le faire en utilisant des styles de calque.
Peignez l'ombre du lecteur dans un nouveau calque en utilisant une sélection circulaire adoucie de 2 pixels (voir le menu de valeur supérieure de l'outil)..
Masquer la sélection avec Ctrl + H et utiliser un pinceau de 100 pixels avec 10% du débit de peinture, peindre doucement l'ombre. Cela le rendra plus intense au centre de l'objet.
Ajoutons maintenant une petite lueur sur le bord de l'écran du lecteur. Commencez par peindre une zone lumineuse intense au centre d’une sélection rectangulaire d’une hauteur de 1 pixel. Et puis, avec le même pinceau mais sans sélection, cliquez plusieurs fois pour augmenter l'intensité du centre.
Créez un effet de survol sur le bouton principal pour faire apparaître la surface avant lorsque la souris passe dessus. Nous commençons par créer une forme circulaire derrière l'icône Pause.
Cet effet de dépression peut être utilisé avec: une ombre portée pour assombrir et adoucir les bords de l'objet et un dégradé pour simuler le fait que cette dépression a une zone supérieure qui est dans les tons, lorsque le bouton est enfoncé..
Nous masquons également ce survol avec un masque, comme nous l'avons fait avec les biseaux du jeu de boutons principal. N'oubliez pas l'option de masquer les effets de calque en même temps.
En répétant les étapes précédentes, nous masquons le survol.
Nous allons ajouter deux effets de lumière pour améliorer le basculement. En peignant avec 2 couleurs (# 00CCFF pour le bord de l’effet et blanc pour son centre), nous créons un bord éclairé que nous masquons. Dupliquez le calque et réfléchissez-le verticalement pour lui donner l’impression qu’il s’allume en haut et en bas au passage de la souris. Ce calque doit être réglé sur «Screen» pour mieux intégrer les lueurs.
Enfin, ajoutons un fil fin qui donnera plus de réalisme au joueur. Pour ce faire, dessinez un calque de forme incurvée à l'aide de l'outil Plume..
Portez-le à 0% d'opacité et ajoutez un trait avec le même ton gris de la surface du lecteur.
Séparez le trait du calque de forme que nous avons créé, car nous devons ajouter de l'ombrage à ce fil. Faites un clic droit sur l'icône fx à côté du calque et choisissez Créer un calque.
Cette action sépare le trait dans un nouveau calque sans détruire la forme précédemment dessinée. Utilisez une ombre intérieure pour donner à cette ligne l’idée d’un gaufrage cylindrique..
Notre lecteur MP3 est maintenant prêt à être exporté en tant que fichier PNG transparent et codé en Flash pour être utilisé sur des sites Web. Vous pouvez voir l'image finale ci-dessous ou voir une version plus grande ici.
Accentsconagua