Designer une application iPhone – Partie 4 : la découpe des images

Share

Dernière partie de notre mini-dossier consacré à la création d’un design d’application iPhone : comment découper et enregistrer les images ?

Application Trucmania - AccueilIl s’agit de l’application TrucMania, téléchargeable sur l’AppStore, qui est dérivée du site TrucMania.com. Cette application a été réalisée en partenariat avec WPTechnology.

 

 

 

 

 

Mise en gardeAvertissement : tous les visuels, textes, images dont il est question dans cet article ont été créés spécifiquement pour le site Trucmania.com et son application pour iPhone et ne sont donc PAS libres de droits.
Si vous désirez réutiliser tout ou partie de ce contenu, merci de nous contacter au préalable.

Rappel des contraintes.

Petit rappel préliminaire : pour que l’affichage de l’application soit correct sur les écrans Retina Display et sur les écrans « standards », il va falloir enregistrer 2 fois les mêmes images, l’une à l’échelle 1:1 (écrans standards), l’autre à l’échelle 2:1 (écrans Retina Display).
Le nom de ces dernières devra être suivi de « @2x ». Par exemple : background@2x.png .

Autre contrainte : toutes les images doivent être en PNG 24 bits (avec gestion de la couche Alpha, c’est-à-dire de la transparence).

La découpe proprement dite.

A chaque designer sa méthode pour cela.
Personnellement, voilà comment je procède (valable aussi pour la découpe Web, hormis le redimensionnement) :

  • je travaille au zoom,
  • je pose des repères encadrant l’élément à découper,
  • je découpe avec l’outil Recadrage de Photoshop
  • J’enregistre « pour le Web » (raccourci Ctrl + Alt + Shift + S)
  • Je redimensionne mon image (-50%)
  • Je ré-enregistre sans le @2x
  • Je reviens de 2 étapes dans l’historique (recadrage + redimensionnement) et je recommence

La seule difficulté « réelle » a été pour l’écran annuaire 1, qui propose une roue à faire tourner pour sélectionner un caractère aléatoire : le plus logique côté développeur était de disposer d’une roue complète. Or, ladite roue comporte les 26 caractères de l’alphabet, ce qui suppose une découpe en rayons un peu plus complexe, puisqu’il a fallu calculer l’arc de chaque portion : 360/26=13.846…°

Mais au final, la roue se présente comme ceci :

Roue de l'application iPhone Trucmania

 

 

 

 

 

 

 

 

 

 

 

 

 

Enfin, toutes les images (standards et @2x) sont regroupées par écran (un dossier = un écran) et envoyées à l’équipe de développement qui se chargera de la suite.

Demander un devis

Share

Laisser un commentaire