SonyEricsson Themes Creator 1.50 : Tutoriel

Tutoriel de création de thèmes pour les téléphones mobiles
SonyEricsson
base : K700i
par Arnault P. (nextdrOp)
1- Logiciels requis
Les deux logiciels suivants sont utilisés dans le tutoriel :

Themes Creator Version 1.5,
disponible sur le site http://developer.sonyericsson.com/site/global/home/p_home.jsp. Il suffit
de s'inscrire sur le site pour obtenir ce programme ainsi que des documents PDF sur la création
de thème suivant les différents téléphones de la marque.

Adobe Photoshop 7. Il est tout à fait possible d'utiliser TheGimp ou PaintShopPro ou tout autre
logiciel de création graphique.
2- Pré-requis & rappels
La création de thème nécessite un minimum de connaissance graphique et des différents formats
d'image existant.
Pour une utilisation plus poussée et plus agréable de Photoshop, il est conseillé de réaliser des
scripts. Un exemple sera donné ultérieurement.
Les différents formats d'image et ce qu'ils offrent :
JPEG
+ idéale pour le traitement de photographies
- ne gère pas l'animation
- ne gère pas la transparence (couche alpha)
GIF
+ gère l'animation
les couleurs sont indéxées :
+ idéale pour des aplats de couleurs (taille des fichiers reduit et résultat de
meilleur qualité qu'un jpg lors d'applat de couleur)
- à éviter pour le traitement de photographies
PNG
+ Format libre
+ condensé JPG+GIF (en gros), c'est-à-dire qu'il détecte et optimise la
compression d'une image suivant son contenu ; il différencie les zones
chargées en couleurs des zones composées de peu de couleurs permettant
l'indexation.
+ possède une couche alpha : cela permet de créer une image transparente,
utilisée pour la surbrillance (Highlight dans Themes Creator)
+/- annimation, désolé, j'ai un doute...
- fichiers plus gros puisque nous ne pouvons régler la qualité de la
compression comme en JPEG
Par ailleurs, je suppose dans ce tutoriel que l'anglais n'est pas une langue inconnue et que, vu la
présentation du logiciel du constructeur, aucune explication n'est nécessaire pour son utilisation. Ce
dernier n'étant là que pour vous permettre d'agencer et de visualiser votre travail, et bien sûr de
l'enregistrer dans le format accepté par le téléphone pour lequel vous créez.
3- Onglet Standby
3.1 Présentation de Themes Creator
Themes Creator doit afficher ceci pour le K700 :
Toutes les tailles indiquées correspondent à la largeur x la hauteur.
La seule image pouvant être animée pour ce téléphone est l'image de fond d'écran du thème,
soit : Standby, dont la taille est 176x176 (pixels).
Les images supportées par le K700 sont (source SonyEricsson : Adapting Images - June 2004.pdf,
document disponible après inscription) :
K700
Screen
size
Number
of colors
176x220
RGB bits
R:5
G:6
B:5
Image
support
JPEG
GIF87
GIF89a
WBMP
Yes
Themes
support
65536
(16 bits)
Le format PNG n'est pas préciser, mais celui-ci est belle et bien supporté par le K700i (et par
d'autres modèles de la marque).
3.2 Création de Standby dans Photoshop
3.2.1 Découpage à prévoir & conseils
Pour se repérer le mieux possible, les fichiers créés porteront un nom explicit : Standby.*
Standby-Softkey.* et Standby-Statusbar.* (* pour le format de votre choix : jpg, gif, png)
Il y a, pour la partie Standby, 3 fichiers à créer du fait du découpage indiqué par Themes Creator.
176x18 - Statusbar
176x176 - Standby
176x26 - Softkey
Structure du K700
Quelques conseils à garder en mémoire :

Il faut éviter de surcharger les images Statusbar et Softkey puisque l'une contient des
icônes pouvant prendre toutes la place disponible et l'autre contient du texte

Il est préférable de travailler en RVB avec des images transparences au moment de la
création (ctrl-n), ainsi qu'en 72dpi :
3.2.2 Choix d'une image et recadrage
Il faut maintenant faire un choix de l'image que l'on va mettre pour la page principale de son
thème. Pour un meilleur rendu, l'image ne devra pas faire moins de 176x220.
Prenons le fond d'écran suivant (1024x768) :
A présent, il nous faut choisir l'outil de recadrage
Lors que celui-ci est sélectionné, la barre se trouvant sous les menus change pour donner ceci :
Les champs Largeur et Hauteur permettent de prédéfinir la taille que devra avoir l'image
lorsqu'elle sera recadrée. La résolution doit donc rester sur 72 pixels/pouce (dpi).
Une fois l'outil sélectionné, il ne reste plus qu'à choisir la partie de l'image qui va nous servir pour
réaliser le thème. Du fait d'avoir prédéfinit L et H, la sélection restera proportionnelle quelque soit la
taille que nous lui donnons.
En gardant en tête qu'il faut éviter de surcharger les barres Statusbar et Softkey, on peut obtenir
une sélection similaire à celle-ci :
En appuyant sur la touche Entrée, on obtient alors cette image :
En vérifiant rapidement dans le menu Image > Taille de l'image..., on voit bien que l'image
obtenue fait 176x220.
3.2.3 Définitions des zones à extraire pour obtenir les 3 images.
Pour ce faire, nous allons tou d'abord faire apparaître l'onglet Infos. Cela va nous permettre de
placer des repères sur l'image pour obtenir le découpage de la structure présentée en 3.2.1.
En prenant l'outil Rectangle de sélection, nous allons faire un cadre de 176x18 en partant du
coin en haut à gauche de l'image.
Pensez à agrandir la fenêtre contenant l'image pour pouvoir commencer cette sélection en
dehors de l'image. Cela permet de ne pas passer 5 minutes à chercher le coin. Vérifiez
également que dans le menu Affichage, Magnétisme soit bien coché !
Une fois la sélection effectuée, il ne nous reste plus qu'à placer le 1er repère sur l'image. Placez le
curseur par dessus la règle supérieure, cliquez et maintenez enfoncer le bouton tout en cherchant à
coller le repère à la face inférieur du cadre de sélection.
Vous devez
obtenir ceci :
alors
Le repère va ainsi nous permettre de récupérer
rapidement cette partie de l'image pour en faire la
Statusbar. Il permet aussi de définir le cadre suivant, c'està-dire, le fond d'écran du thème. En répétant les mêmes
opérations que celle que l'on vient de voir, on peut obtenir
facilement le cadre de 176x176 en partant du coin gauche
de l'intersection du repère et du côté gauche de l'image.
Pour conserver les repères, il faut enregistrer l'image au
format Photoshop (.psd). Pensez également à vous
organiser, cela aide beaucoup.
3.2.4 Création des 3 images & enregistrement
Pour créer les fichiers il faut répéter les étapes suivantes :
•
Reselectionner un des 3 cadres
•
Créer un nouveau fichier : Fichier > Nouveau... ou CTRL+N. La taille du document est déjà
la bonne dans la fenêtre. Exemple avec la statusbar (le nom peut déjà être précisé) :
•
Coller la copie du cadre que l'on a en mémoire : CTRL+V
•
Enregistrer ce fichier en faisant : Fichier > Enregistrement pour le Web ou Alt+Maj+Ctrl+S
•
Enregistrer ensuite le fichier au format PSD pour garder l'original sous le coude, on ne sait
jamais.
Après avoir répéter l'opération pour chaque fichier, on obtient un répertoire pour le thème en cours
ressemblant à celui-ci :
3.3 Importation sous Themes Creator
Rien de bien compliquer ici, il suffit de cliquer sur Import.. pour mettre en place chacun des
fichiers que nous venons de réaliser.
Nous avons alors réaliser la partie Standby de notre thème. Suivant le thème, il peut être
nécessaire de modifier les couleurs indiquées ici :
Attention ! Lorsque l'on choisit les couleurs pour le différentes parties, on ne pense généralement
pas à celles définies par défaut lorsqu'il n'y a pas d'images. Il est alors fort probable de se retrouver
avec un petit carré rouge entre deux couleurs pour un même obet. Il suffit de modifier la couleur
background de l'objet en question. Dans la fenêtre Preview All, on se rend mieux compte de
l'ensemble des couleurs par défaut :
Pour ce thème, les couleurs choisies sont :
Pour ce résultat :
Il ne reste plus qu'à effectuer le premier Save pour ne pas perdre le début du thème.