iPod - Partie 2

La première partie de ce billet a été publié la semaine dernière sous le nom iPod - Partie 1.

Les indications

Ici, j'ajoute à la plume les formes de la flèche de lecture et de la pile (qui compte en fait deux calques: le culot et le corps de la pile). Les guides qui me servent à garder les proportions se basent sur l'image initialement trouvée sur le web.

Les indications

Afin de travailler proprement mes couleurs, j'efface tous les guides et je travaille alternativement sur deux zooms différents: le premier très important pour soigner les détails (particulièrement sur le culot de la pile) et le second comme sur la capture pour avoir un aperçu de ce que cela donnera au final (surtout parce que l'iPod sera réduit pour être intégré au site).

La molette

La première fois que j'ai réalisé un iPod, je n'ai pas réussi à trouver une police qui se rapproche de celle utilisée par Apple. Il me semble que j'avais utilisé une Helvetica mais cela ne collait pas trop au niveau du M. Depuis, j'ai réussi à trouvé que la police utilisée par Apple pour les noms de ses produits. Il s'agit de Kozuka Gothic. Seulement, c'est une fonte payante. En travaillant sur le fond d'écran I'm a Mac, j'ai trouvé mon bonheur: Myriad Pro. Le reste des indications de la molette a été réalisé à la plume.

Corrections

Petite pose avant d'attaquer le contenu de l'écran. Je corrige ici l'ombre supérieure qui ne me plaît plus à ce moment là car trop sombre (d'ailleurs, je n'en suis toujours pas tout à fait satisfait...). J'aplatis la flèche et la pile de la barre supérieure afin d'ajouter sur chacun un effet de biseau. J'en profite également pour les placer au bon endroit sur l'écran. Pour cela, j'utilise une photo de l'écran de mon propre iPod. Photo qui me sert également à placer les quelques guides nécessaires à la suite de mon travail (positions de la pochettes, des informations du fichier et du lecteur).

La pochette

Ici, j'utilise la pochette du paquet de l'iTunes Project (j'en ai profité pour faire la version sans nom d'artiste). La déformation se fait sans réelle difficulté. Par contre, je me demande toujours quelle est la perspective choisie pour le reflet car j'ai eu l'impression que ce n'était pas la même que celle de la pochette.

Le texte

Pas grand chose à dire ici. La police utilisée est Helvetica. Remarquez que je rajoute encore des guides...

Le lecteur

La même photo me sert ici à placer les chiffres sur l'écran. J'utilise également une capture du dewPlayer qui me servira pour la lecture du Journal. Je l'étire en largeur afin qu'il coïncide avec la barre d'avancement de l'iPod. Cela n'est pas gênant car cette capture ne sera pas sur l'image finale. En effet, elle me sert simplement à calculer la réduction que j'appliquerai à l'étape suivante afin de mettre l'iPod aux mêmes proportions que celle du lecteur flash.

La préparation

Dernière étape avant la mise en ligne, je réduis la taille de mon image et je prépare soigneusement la découpe à effectuer. Bien plus pertinente sur cette version, j'ai ainsi pu gagner une bonne heure sur la mise en place du code html. Je n'efface pas immédiatement tout le contenu "utile" de l'écran. Cela me permet de savoir où placer mes éléments via ma feuille de style. Une fois que tout est correctement adapté sur MacP3 et que j'ai vérifié le rendu sous Firefox (je n'utilise quasiment que Safari pour naviguer sur internet), je fais une nouvelle découpe sans les éléments superflus. J'ajoute également un profil ICC à mes .png à l'aide de Aperçu. Je privilégie dès le début le sRGB IEC61966-2.1 car il est le plus restrictif mais aussi le plus répandu parmi les usagers du web. L'ajout du profil est surtout destiné au confort des utilisateurs du butineur d'Apple (et par conséquent du mien) car il est pour l'instant le seul à savoir le gérer.

Ici, je viens de passer entre 7 et 8 heures sur deux jours à travailler sur cette réalisation. Et je crois que je peux aller me reposer sans avoir à rougir du travail effectué...