32
Créer un player MP3 avec le style Appel iTune avec photoshop
Ce tutorial à pour premier but de vous expliquer la méthode de création d’un player pour placer sur un site internet par exemple (possibilité également de l’utiliser sur une application Windows également). Nous n’aborderons ici que l’aspect graphique du player. La partie programmation ne nous intéressera pas !
Le second but pour le designer est d’apprendre à utilise le style d’Apple utilisé dans son logiciel de musique Itune pour créer des compostions graphiques dans l’ambiance Apple tune.
Vous verrez l’aspect général est très simple, sa réalisation un peu plus complexe mais dans l’ensemble le tout est relativement aisé pour un débutant.
ETAPE 1
Je crée un nouveau document que je rempile en arrière plan (avec le pot de peinture) en gris foncé. Dans mon exemple j’utilise la couleur : #8e8e8e.
J’utilise l’outil des formes personnalisées U pour créer un rectangle arrondi. J’applique sur celui-ci plusieurs styles de calques : calque > style de calque > contour, incrustation de dégradé, lueur interne.
Je vous invite à télécharger le fichier source Photoshop que j’ai placé en haut de cette page pour récupérer les styles de calques.
ETAPE 2
Je crée un nouveau calque par-dessus mon rectangle, je récupère la sélection de celui-ci et je le remplis de noir. Je coupe la partie haute pour ne garder que le bas, puis je lui ajoute un style de calque > incrustation de dégradé : gris foncé vers gris très foncé. Je diminue ensuite l’opacité de ce calque à 50%.
ETAPE 3
Je crée par-dessus un nouveau calque et sur celui-ci, grâce à l’outil sélection et pot de peinture deux lignes : gris foncé puis blanche. Comme ci-dessous.
ETAPE 4
Je crée par-dessus un nouveau calque, je récupère la sélection de mon rectangle puis avec un pinceau diffus de 300 pixels je crée une lueur blanche en haut à gauche.
ETAPE 5
Avec l’outil des formes personnalisées je crée une ellipse (de taille parfaite) et je lui ajoute quelques styles de calques : contour, ombre portée, dégradé (à voir dans le .psd).
ETAPE 6
Je prends l’outil plume et je crée une forme blanche comme ci-dessous. Je diminue l’opacité de ce calque en 70%
ETAPE 7
J’utilise l’outil des formes personnalisées pour créer un triangle par-dessus mon ellipse et mon reflet. Je récupère la sélection du triangle (ctrl + clic sur le calque) puis je fais ctrl + c pour copier la partie du reflet qui se situe au dessus de mon triangle. Ensuite je fais ctrl + v et normalement la forme s’ajoute à un nouveau calque par-dessus le triangle. Avec l’outil déplacement, je la replace à la bonne place, et je change l’opacité de ce nouveau calque à 20%.
ETAPE 8
Je fais la même chose pour le bouton suivant et précédent que je place sur la gauche et sur la droite de mon premier bouton.
ETAPE 9
Sur le haut de mon Player j’ajoute un titre : Dans mon exemple j’utilise la police Verdana à 10pt en bold.
ETAPE 10
Avec l’outil des formes personnalisées je crée maintenant un rectangle arrondi qui va me servir d’écran pour mon Plugin. J’utilise un radius élevé pour avoir des bords très arrondis. Je lui ajoute des styles de calque pour le stylisé un peu : ombre interne + incrustation de dégradé.
ETAPE 11
Je vais maintenant devoir créer une bordure blanche et grise sur le bas de mon écran. Pour cela je crée un nouveau calque, je récupère la sélection de mon écran, je remplis de blanc, je déplace la sélection de 1 pixel vers le haut puis je supprime. Même méthode pour créer une seconde bordure grise.
ETAPE 12
J’ajoute le titre du morceau en cours et à droite la possibilité à l’utilisateur d’arrêter la musique. Pour le bouton de droite j’utilise une ellipse de sélection que je remplis de gris (sur un nouveau calque) puis je crée avec l’outil des formes personnalisées une croix. Je récupère la sélection de cette croix, je supprime le calque et appuie ensuite sur le bouton Suppr pour supprimer les pixels de la croix dans le rond.
ETAPE 13
Je vais maintenant attaquer la barre de navigation qui se trouve en bas. Pour cela je crée un rectangle arrondi (radius à 3 ou 4 maximum) que je stylise avec des styles de calques : incrustation dégradé, contour.
ETAPE 14
Je crée un nouveau calque juste en dessous de ce rectangle et je récupère sa sélection. Je fais sélection modifier > dilater > 1 pixels. Je remplis de blanc puis ajoute une incrustation de dégradé de gris clairs vers gris.
ETAPE 15
Avec l’outil plume (et comme pour les boutons) je crée une forme pour le reflet. Je diminue l’opacité de ce calque reflet à 70%.
ETAPE 16
Pour créer ces petites flèches c’est un peu compliqué :
- Je crée un nouveau calque au dessus de la barre de navigation
- Je crée avec l’outil des formes personnalisées un triangle
- Je change le mode opacité du fond à 0%
- J’ajoute une lueur externe noire, je change son mode en normal
- Je crée un nouveau calque par-dessous
- Je fusionne les deux (pour aplatir les styles de calques du triangle)
- Enfin je supprime le bas, le haut et la partie gauche
Je duplique cette flèche une fois pour créer deux séparations.
ETAPE 17
Simplement je termine en ajoutant du texte et un petit symbole de maison pour la page home.
Alors n’est il pas magnifique ce Plugin ? Comment ça personne n’est arrivé jusqu’ici ? Pourtant …
Allez bonne chance à tous pour la réalisation de ce tuto 
N’hésitez pas à utiliser le forum ci-dessous pour vos questions.
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 22 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
28 mars 2008 20:18, par Toinousp
OUi vraiment très bon tuto :p seulement j’ai été un peut surpris quand j’ai découvert le titre : « Player MP3 la musique via aplle Style Plugin » !! il y une grossière erreur « heureusement » pardonnable :p C’EST APPLE PAS APLLE :p mais bon
Répondre
très bon tuto (je me répète :p)-
28 mars 2008 20:36, par IT1
Et puis il manque un « s » à iTunes. Mais sinon, je me répète moi aussi
Répondre : très bon tuto.-
31 mars 2008 10:50, par Wonka
Merci les amis pour ces remarques trèès agréable
Répondre Vous commencer à connaitre mes problèmes d’attention, je m’absorbe dans ma création graphique et oublie le texte J’y a passé pas mal de temps sur ce player et pourtant je n’ai même pas remarqué ce problème.
-
-
-
29 mars 2008 12:33, par IT1
J’ajoute que si vous voulez vraiment « copier » Apple, vous pouvez utiliser la police « Lucida Grande » qui est la police choisie dans les interfaces graphiques d’Apple (fenêtres, menus, boites de dialogues ..).
Voilà pour le conseil
Répondre-
31 mars 2008 10:55, par Wonka
Voila une remarque très utile
Répondre Je ne me rappelais le nom de cette police, bon à savoir pour le prochain tutoriel !
-
-
29 mars 2008 21:29, par johann
j’ai quelques doutes sur l’emploi de ce lecteur, c’est une simple image...
donc, si quelqun pouvait m’aider, ou me conseiller à le rendre utilisable, en html si possible ou bien en flash.
Répondre-
31 mars 2008 11:07, par Wonka
J’ai pourtant bien précisé au début de ce tutorial qu’il s’agit ici que du design du player. La partie programmation ne sera pas traité sur ce site, tout simplement car je ne sais pas le faire. Il te faudra aller sur un site extérieur pour découvrir comment faire cela
Répondre Bonne chance !
-
-
31 mars 2008 23:41, par maniphil
on pourrait peut etre en faire une interface graphique....
mais pas moi ; je suis trop noobs pour ces trucs là
Répondre
-
12 avril 2008 12:02, par IT1
Voilà ma création ! J’ai ajouté dans l’écran du player un compteur de temps et vous savez, cette chose qui se compose de traits qui s’animent et dont le nom m’échappe
. Bon, je vais me prendre pour Wonka et vous expliquer comment faire (c’était mon rêve) !!Tout d’abord, ouvrez un nouveau doc à part et faite un petit rectangle vert foncé (plus foncé que l’écran) avec l’outil rectangle de sélection. Ensuite dupliquez ce calque 5 ou 6 fois vers le haut pour obtenir une colonne. Fusionnez les calques.
Puis, dupliquez cette colonne 5 ou 6 fois également, en laissant un petit espace en chaque colonne. Fusionnez le tout. Vous avez donc un ensemble de traits alignés. Il ne vous reste plus qu’a effacer certains traits pour donnez un aspect inégal. Et le trour est joué !
En espérant vous avoir aidé.
Répondre-
13 avril 2008 12:04, par Wonka
Est bien merci pour ce complément ! Ta composition est très belle
Répondre-
13 avril 2008 13:44, par IT1
Merci, merci !
J’espère que vous avez compris la technique parce que mon explication est un peu brouillon. Si vous avez des questions ...
Répondre
-
-
19 juin 2009 13:57, par Paulad
« J’ai ajouté dans l’écran du player un compteur de temps et vous savez, cette chose qui se compose de traits qui s’animent et dont le nom m’échappe »
Un équaliser.
Répondre
-
-
-
11 septembre 2009 21:16, par Coco
Génial une fois de plus. J’ai préféré le mettre en couleur, mais c’est une question de goût perso, j’ai essayé aussi au mieux de lui donné du volume.En tout cas je me suis régalée comme à chaque fois. Encore merci pour ton travail et tes tutos trop fun à faire. Bisous à tous
Répondre
