Caro 7610 Posté(e) le 23 avril 2010 Signaler Share Posté(e) le 23 avril 2010 [TUTORIAL]Carbide.ui S60 Theme Edition 3.2.1 Après avoir écrit un premier tuto pour utiliser Carbide.ui S60 3.1 (en janvier 2007), je vous présente nouveau tutorial pour utiliser la version 3.2.1 de ce logiciel. Il faut noter qu’il y a quelques changements entre ces 2 versions. En effet, la seconde permet de créer aussi des thèmes pour la plateforme S40 de Nokia. Pour ce nouveau tuto, je ne vais m'intéresser qu'à la partie S60. Cependant, ce tutorial sera plus abouti que le premier, ayant moi-même progressé. Préambule : *Pour réaliser un thème en full SVG, il vous faut :* -Le logiciel Carbide. -Un logiciel de retouche photo type Photoshop. -Un logiciel vous permettant de créer ou convertir des fichiers en *.SVG. -Beaucoup de mémoire vive. (ces logiciels pompent pas mal) -De la patience. -Accessoirement du talent. First of all : où trouver le logiciel ? forum.nokia.com Pour télécharger le logiciel il faut être inscrit mais c’est gratuit. --------------------------------------- *La minute technique* Dans l'idéal, le Forum Nokia recommande un XP Home ou Pro avec 1go de ram et un processeur cadencé à 2.8 Ghz… Au minimum le site conseille 512mo de ram et un processeur à 1.5 Ghz. Ils n'ont pas tort, mon précédent tuto était fait sur un ordi de cette configuration et c'était très difficile. Personnellement, j'ai un XP Home SP2 (ne vous fiez pas au look vista de mes screens) avec 1go de ram, processeur Centrino Duo1.66 Ghz. Honnêtement cela me suffit à faire tourner correctement le logiciel. --------------------------------------- *Allez, c'est parti !* Téléchargez, installez et démarrez le logiciel. Il est conseillé de fermer toutes les applications en cours (Player musique, Navigateur Internet, Programmes divers) pour garder un maximum de réactivité de la part de votre ordinateur, surtout si vous n'avez pas beaucoup de ram. Démarrage : Le logiciel est un peu long à charger… L’écran d’accueil : -Créer un nouveau thème : Ce que nous allons voir dans la suite. -Ouvrir un nouveau thème : Pour ouvrir un thème que vous avez quitté dans l’espace de travail mais non terminé. Si vous n’avez pas quitté votre thème, il est déjà ouvert sur le plan de travail. -User guide : Il faut une connexion à Internet pour vous connecter à l'aide. Le guide est en anglais bien sûr. -Tutorials : Des guides détaillés pas à pas pour vous aider, le tout en anglais. -Transférer un thème : Pour transférer le thème vers votre mobile quand vous avez fini. -Forum Nokia : Pour aller sur le forum Nokia. Nécessite une connexion Internet. L’enregistrement du logiciel : C’est une étape importante parce que sans enregistrement, vous ne pourrez utiliser le logiciel que pendant 30 jours. L’enregistrement est bien entendu gratuit, et il ne prend que 5 minutes. Voici en détail les steps one by one. Suivez les bulles roses. Au moment où vous validez l’étape 4, une fenêtre s’ouvre avec une page vous demandant de vous identifier sur le Forum Nokia. Parallèlement, vous ne pouvez pas encore compléter l’étape 5 excepté votre nom d’utilisateur. Allez dans la fenêtre "Forum Nokia" et identifiez-vous. Quand c’est fait le Serial Number apparaît. Un exemplaire sera envoyé à votre adresse mail. Recopiez ce code dans votre fenêtre de Carbide. Complétez la fenêtre de Carbide et cliquez sur "Finish". C’est terminé, vous êtes enregistré. Les rubriques annexes : Avant d’attaquer le thème, je vais vous expliquer les fonctions des rubriques annexes : Fichier : Pour importer ou exporter un nouveau thème, sauvegarder, changer de Workspace si vous avez 2 ateliers (un S60 et un S40 par exemple)… Edit : Pour copier coller, etc... View : Pour zoomer ou dézoomer. Outils : Pour faire une keypair (clé), créer un sis ou le transférer vers le mobile. Windows : Pour choisir les vues. Help : Pour demander de l’aide…(en anglais bien sûr), revenir à l’écran d’accueil, voire des astuces sur Carbide… Navigateur : Pour gérer vos thèmes : ouvrir des thèmes mis en réserve, les supprimer, les renommer, les déplacer… Créer un nouveau thème : Voila, maintenant, nous allons attaquer un nouveau thème. Tout d’abord, cliquez sur "Créer un nouveau thème". Avant de démarrer quoi que ce soit, il faut donner un nom au thème : Nous allons travailler avec la plateforme Symbian 9.1 parce que c’est la plus simple pour débuter. (Il y a un peu moins d’éléments modifiables que dans la 9.2) Un clic sur le bouton de choix de la plateforme et c’est parti. Voici à présent l’espace de travail... 1: Toutes les étapes à modifier au choix pour réaliser votre thème. 2: Les effets de vos modifications en direct sur le thème. 3: Toutes les images nécessaires par onglet. Ici l'onglet "Background". 4: Le "Component Store", une ressource précieuse qui vous permet de piocher dedans pour chaque élément en cas de manque d'inspiration. Ici on ne voit pas tout… 5: La composition de l'image. Ici on peut modifier chacune des couleurs. Ce n'est pas le cas pour tous les éléments. Nous y reviendrons plus tard. 6: Information diverses. "Bounds" est très pratique car il permet de savoir où découper les morceaux de wallpapers pour certaines parties du thème. Un exemple en direct : 1- La résolution du thème : Avant d’attaquer le thème, il est important d'en préciser les dimensions. Surtout s'il s’agit d’un grand format… (ça évitera de travailler dans le vent ) 2- Le background : 1-Il est temps de créer le background, c'est-à-dire le fond d’écran qui sert de papier peint au thème. Comme indiqué sur l'image, cliquez dans les bulles roses. 2-A chaque modification de votre part, la miniature change aussi et une petite encoche vient s’ajouter en bas, là où sont les images à modifier. 3-Comme vous le voyez au numéro 2, l'image est en SVG. Bien sûr, elle ne sort pas de nulle part. Elle provient de Photoshop suivi d'un passage dans Illustrator. Il faut parfois plusieurs essais pour obtenir quelque chose de joli : 4-Une fois que mon background est fini, je l'enregistre au format Photoshop pour pouvoir le modifier plus tard. J'enregistre aussi une copie au format PNG cette fois. 5-Ouvrez cette copie PNG avec Adobe Illustrator : Enregistrez simplement votre fichier en *SVG. Pourquoi travailler en SVG ? Parce qu'en mode paysage, le SVG est de meilleure qualité. Un exemple en direct: pour cela, on va passer en mode paysage. Cliquez sur la zone entourée en rose. Maintenant cliquez à gauche dans l'onglet background. Choisissez un des screens et faites: -36-clic droit >>> select file. Commencez par le fichier en PNG, puis ensuite celui en SVG. Vous allez voir par vous-même que le fichier SVG est plus "extensible", moins cranté et donc de meilleure qualité. 6-Revenez au mode portrait et terminez le bakground en collant les 2 images en SVG bien entendu. (Vous pouvez faire un dossier pour ranger le PNG. Il y aura bientôt d'autres PNG qui le rejoindront). 7-Et voila, le background est fini ^^ Une fois que le background est fini, on remarque qu'il y a 2 encoches. On remarque aussi que les couleurs des raccourcis et des notes ne sont pas très adaptées: elles ressortent mal. Nous allons donc les modifier dans la rubrique "Colors". 3- Les "Colours" : 1-Il y a plusieurs façons d'appréhender cette rubrique. La plus logique consiste à ouvrir chaque sous rubrique et à cliquer sur l'élément à modifier. C'est le meilleur moyen pour ne rien oublier. Mais bien sûr ce n'est pas le moyen que j'utilise. Pourquoi ? Parce qu'en prenant les rubriques dans l'ordre, on va arriver à des endroits dont on ignore encore la couleur du fond du thème. Exemple en direct: 2-Bon, bien sûr, on peut se douter ici que les bandes bleues vont être remplacées par du noir, mais parfois on n'en sait rien, surtout si on fait un thème multicolore. La 2ème méthode, la méthode "à la Caro", consiste à cliquer sur l'élément du thème en question et à le modifier, tout simplement. Bien sûr, il faudra repasser tous les éléments lors de la vérification du thème, mais au moins on ne fait la liste en entier qu'une fois. 3-Comment modifier la couleur d'un élément sans savoir où il se trouve dans la liste ? C'est très simple, comme je l'ai dit il suffit de cliquer dessus. Pour cela revenez au background et cliquez sur le texte en noir qui provient de l'applic agenda. Un seul clic suffit. Instantanément (ou pas selon votre ordi), la case de l'élément à modifier apparaît. Cette fois, double-cliquez dans la case afin de sélectionner la couleur adéquate. A ce moment-là, une fenêtre apparaît avec une grille de couleur. Vous pouvez alors choisir votre couleur parmi une liste ou bien la créer vous-même. (Dans mon cas le blanc) N'oubliez pas de choisir une couleur lisible… C'est des détails qui ont leur importance car un thème illisible est un thème qui ne sert à rien. 4- Les "Areas" (zones) : Nous allons maintenant attaquer les "areas". Il existe 2 méthodes : la première permet de customiser chacune des zones, la seconde, de laisser juste le wallpaper en fond. Ces zones sont en haut et en bas du thème. On les voit surtout en mode paysage. Voici leurs dimensions: 1- 240*27 2- 240*27 3- 240*20 4- 240*20 Méthode 1 : Modifier chaque partie dans Photoshop. 1-1- 240*27 : Très simple à obtenir avec la sélection "proportions fixes" de Photoshop. 2- 240*27 : Idem que précédemment. 3- 240*20 : Idem que précédemment. 4- 240*20 : Alors la c'est un peu plus dur. Il faut d'abord sélectionner une forme comme précédemment, mais elle devra faire 240*38. Ensuite, inversez la sélection et copiez cette sélection dans un nouveau document. Sélectionnez enfin la bonne dimension. 2-Une fois que toutes vos "Areas" sont faites, allez dans Illustrator pour les convertir en SVG. Gardez les PNG au cas où, en les rangeant dans le dossier PNG créé un peu plus haut. Astuce : Donnez un nom de code à chacune de vos parties. Parce que des 240*27 il y en a 2 sortes, idem pour les 240*20. Personnellement, je leur ajoute des lettres, ce qui fait que par exemple "Vista thème 240 20b" correspond à l'image entourée dans le numéro 4. 3-Comme pour le background, on va importer les images. "Status Area" correspond à la partie supérieure du thème. "Main Area" correspond à la partie principale du thème. "Control Area" correspond à la partie inférieure du thème. Méthode 2 : Laisser le background apparaître à la place de chaque area. 1-Cliquez sur un élément à modifier. Regardez en bas à droite le rectangle où sont indiquées les "Layers" (couches) de votre élément. Vous devez apercevoir un icône orangé. 2-Cliquez sur cet élément. Un onglet va apparaître. Là vous cliquez droit dans la zone bleue où se trouve votre layer puis vous cliquez (gauche) sur "Add Background". Une nouvelle couche (background) va apparaître. 3-Maintenant cliquez droit sur votre layer et faite "Delete Layer". 4-A présent cliquez sur la croix en haut du nouvel onglet. Une fenêtre va vous demander si vous voulez sauver. Il faut répondre "oui" (Yes), afin de pouvoir enregistrer votre manip et obtenir le Background à la place de la Layer d'origine. Les Areas sont finies ? Maintenant pensez à sauvegarder. 5- Les sauvegardes : Ne pas oublier de sauver de temps en temps… Pour cela, faites "fichier >>> sauver" Vous pouvez aussi tout simplement appuyer sur le bouton "disquette". 6- Les icônes : Voici 2 méthodes pour ajouter des icônes : Méthode 1 : Changer chaque icône individuellement. 1-Allez dans l'onglet "Icons", premier sous dossier: "Application Icons". (Zone rose) 2-Cliquez sur le premier icône, en bas. (Zone verte) 4-Clic droit sur l'icône de votre choix, puis "Apply Graphics" (Zone bleue) 5-Si jamais vous voulez modifier une à une les couleurs de l'icône. (Zone orange) Il faudra faire cette manipulation pour tous les icônes de tous les sous dossiers "Icons". C'est long mais si vous voulez picorer parmis toutes les icônes, ça en vaut la peine. Méthode 2 : Changer toutes les icônes d'un coup. 1- 2-Cliquez sur "Take "Icons" Content From", puis sur le thème dont vous voulez les icônes. 3-Voici les icônes que je vais utiliser : ils ont été faits par Flahorn, bravo et merci à lui de les partager. Vous voulez utiliser ces icônes ? Dézippez le pack dans un dossier de votre ordi, l'idéal étant de le dézipper dans le workspace, au milieu de tous vos (futurs) thèmes. C'est fait ? Maintenant cliquez sur "Take "Icons" Content From", puis sur "Adjust List". Une fenêtre va s'ouvrir. 4-Dans cette fenêtre, cliquez sur "Add…", et cherchez le dossier contenant les icônes de Flahorn. Vous devez ajouter un fichier nommé : "S60 Prototype.tdf". 5-Ensuite cochez toutes les encoches à gauche, puis cliquez sur Apply, et enfin sur OK. 6-Cliquez droit à nouveau sur "Icons", puis sur "Take "Icons" Content From", et choisissez "S60 Prototype.tdf". Toutes vos icônes vont se changer ! Attention, une fois vos icônes customisées, impossible de remettre celles d'origine d'un coup. 7- Les Pop-Up Windows : Nous allons modifier les Pop-up Windows avant les Highlights. Pourquoi ? Parce que les Highlights surlignent les Pop-up Windows, donc si on ne sait pas quelle couleur on met en pop-up, ça ne sert à rien de faire les Highlights. Personnellement, je vais me servir dans le "Component Store". Comment faire ? Démonstration : 1-Cliquez sur votre pop-up à modifier. 2-Cliquez droit sur l'élément qui vous plaît dans le "Component Store" et faites "Apply Graphics". Continuez tous vos pop-up tranquillement. 8- Les Highlights : C'est une étape importante, puisqu'elle va permettre de surligner les menus qui défilent. Cliquez sur la première Highlight à modifier et ensuite sélectionnez votre ou vos couleurs. 1-Cliquez sur votre Highlight. 2-Double-cliquez sur la couleur à modifier en bas à droite. 3-La fenêtre avec les couleurs va s'ouvrir, faites votre choix. Vous pouvez aussi vous servir dans le Component Store. Pour mon thème j'ai choisi des Highlights blanches unies et grises et blanches. Votre thème commence à devenir beau. ^^ 9- Les Indicators : Encore une étape importante, qui permet de personnaliser votre thème. Heureusement, elle est très facile. C'est pourquoi je ne vous fais pas de screenshot cette fois-ci. 1-Les indicateurs de volume (Volume Indicators) : Vous n'êtes pas obligé de modifier chaque indicateur un à un. Comme pour les icônes, vous pouvez prendre d'un coup le contenu d'un thème. ( Clic droit sur la série d'éléments concernés --> Take "Volume Indicator Content" From --> Le thème de votre choix. C'est très pratique vous le verrez si vous faites de thèmes ayants des couleurs proches. 2-Les onglets (Tabs Indicators) : Là encore, n'hésitez pas à dévaliser le Component Store pour la forme de l'onglet, puis à le personnaliser avec d'autres couleurs. Personnellement, j'ai pris ceux du thème "City" pour ensuite modifier les couleurs à ma guise. 3-Les barres de réseau/batterie (Signal/Battery Indicators) : Idem, il y a des jolis modèles dans la réserve. ^^ 4-Les "indicateurs carrés" (Slider Indicators) : Tout pareil, servez-vous. 5-Les flèches de navigation (Navigation Indicators) : Attention à bien choisir une couleur lisible. 6-Les barres de chargement/d'attente (Wait/Progress Bar Indicators) : Elles sont un peu longues à modifier mais ça en vaut vraiment la peine si on veut des belles finitions. 10- Scroll Bars and Lines : C'est une étape ultra-rapide qui vous permet de faire des barres de défilement personnalisées. Pas besoin de screenshot, vous savez modifier les couleurs/formes comme des grands maintenant. Si vous n'êtes pas sûrs du choix des couleurs, vous reviendrez sur cette étape plus tard. 11- Applications : C'est la dernière longue étape, ici vous pouvez vraiment customiser votre thème. Voici un tour des options disponibles dans ce menu. 1-Clocks (horloges) : Ici vous pouvez modifier l'horloge analogique mais aussi l'horloge numérique. N'hésitez pas à prendre la forme d'une horloge/d'un nombre et à changer les couleurs. Si vous avez envie de quelque chose de vraiment perso, vous pouvez carrément faire une horloge avec Photoshop, Inkscape ou Illustrator… Attention, vous ne pouvez pas modifier les couleurs d'une horloge faite au Photoshop. N'oubliez pas de garder le fichier *.PSD afin de pouvoir modifier vos horloges à volonté. Concernant l'horloge numérique, n'oubliez pas de modifier le masque qui va avec chaque numéro. 2-Pinboard (Panneau d'affichage) : Vous pouvez utiliser le fond transparent fourni dans le component store. 3-Calendar (Calendrier) : C'est important de faire un calendrier lisible, surtout si vous utilisez cette fonction. D'ailleurs, tant que vous êtes dans le calendrier, pensez à personnaliser les couleurs des évènements. Bah oui, votre thème sera peut-être téléchargé par des pros qui utilisent l'agenda ! (et pas forcément que des pros) 4-Settings (Réglages) : Une étape rapide, comme d'hab choisissez bien les couleurs. 5-Calculator (Calculatrice) : Une étape un peu plus longue que la précédente, mais rien de bien compliqué. 6-Notepad (Bloc-Notes) : C'est comme l'agenda mais en plus facile. 7-Music Player et Music Player 2(L cteurs de musique) : Là vous pouvez choisir 2 customisations pour le lecteur. C'est l'idéal si vous avez des wallpapers qui sont dans le bon style ou si vous voulez développer vos talents de créateur. Par contre, attention : les couleurs des textes et raccourcis sont les mêmes pour les 2 lecteurs. Il faudra donc choisir des styles aux coloris proches. 12- Multimédia : Ce menu vous permet d'ajouter un écran de veille au format *.SWF que votre thème proposera ensuite par défaut. Vous pouvez aussi ajouter une sonnerie pour les appels et une sonnerie pour les messages. Petite différence par rapport au reste du thème, pour les inclure il faut cliquer en bas, dans les propriétés de l'objet, et ensuite chercher le fichier dans votre disque dur. 13- La galerie : 1-Une fois toutes vos étapes terminées, cliquez sur la galerie(le rond orange en bas à gauche) pour avoir un aperçu de ce que sera votre futur thème. Si vous n’avez pas cette icône, un clic sur le rond bleu pour obtenir la deuxième image ci-dessous et accéder à la galerie. 2-Aperçu de la galerie : A ce moment, vous ne voyez que certains screens. Pour les voir tous, il faut cliquer en haut à droite, sur le bouton entouré en orange. Pour que tous les screens tiennent sur votre écran, il faut appuyer sur le bouton appuyé en vert. Pour afficher seulement certains screens, il faut appuyer sur le bouton entouré en bleu. Bien sûr vous pouvez combiner ces 3 options. Mon thème est très personnalisé. Par exemple, vous aurez des icônes modifiés. Bien sûr, je vais proposer une version avec les icônes par défaut de votre mobile. Sinon, n'oubliez pas de regarder la galerie en mode portrait et aussi en mode paysage. Petite répétition si jamais vous avez oublié. 14- Créer un fichier ".SIS" : 1-Tout vous convient ? Super, maintenant, nous allons créer le fichier *.SIS Cliquez sur le paquet-cadeau marron (regardez dans la bulle rose). 2-A ce moment, on vous prévient que tous les changements vont êtres sauvegardés avant la création du fichier *.SIS. 3-Ensuite, on vous demande de renseigner (si vous le désirez), quelques informations. Vous n’êtes pas obligés de mettre ce que j’ai mis… :roll: 15- Créer une clé de protection (keypair) : 1-Cliquez sur "next" (la bulle bleue). Ici, il va falloir créer une clé de protection pour votre thème. Comme vous n’en avez pas encore, cliquez sur "Modify" (la bulle orange). Une fenêtre va apparaître. 2-Cliquez sur "New". Donnez un nom à votre clé. Puis cliquez sur "Make Keys" (Le rond vert). 3-Renseignez ce qui vous plait. N'oubliez pas de choisir un mot de passe et surtout notez-le quelque part pour éviter de créer une clé à chaque thème. 1-Passez la validité de votre clé à 20 ans. (Bulle rose) Cela évitera de changer la date de votre mobile quand vous installez des vieux thèmes. 2-Cliquez sur "Generate". (Bulle verte) 4-Une fois que vous avez généré la clé, vous devez cliquer sur "Save", puis sur "Close" 5-Maintenant, choisissez l'endroit où votre thème sera créé. Personnellement, je l'ai mis dans ma clé usb pour le retrouver facilement. 1-Choisissez un dossier facile à retrouver. 2-N'oubliez pas votre mot de passe. 3-Cliquez sur "Finish". Voila c’est fini !!! Astuces : -Essayez le thème sur votre téléphone histoire de vérifier s'il fonctionne correctement. C'est aussi l'occasion de vérifier les éventuels défauts... -Demandez à des personnes possédant un autre mobile que le votre de tester votre thème. Aussi bizarre que cela puisse paraître, il arrive qu'un thème fonctionne sur certains portables mais bugue sur d'autres. -------------------- Si vous avez des questions ou suggestions, j’essaierai d’y répondre dans la mesure du possible. Voilou pour vous Bon, vous avez suivi le tuto jusqu’au bout, voici la récompense : le thème Vista_Black_V2_ByCaro7610 : Vista_Black_V2_By_Caro7610.sis Vista_Black_V2_Default_Icons_By_Caro7610.sis Caro Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
OEIL Posté(e) le 29 janvier 2021 Signaler Share Posté(e) le 29 janvier 2021 Merci Carro , tu bossais bien à l' époque ! dommage que les images ont disparu . Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Messages recommandés
Rejoindre la conversation
Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.