Communauté EzCom

Salut,

pour agrémenter son forum, rien de tel que d’ajouter des smileys personnalisés en créant son propre pack de smileys. Cette démarche est compatible avec les branches 3.0.x, 3.1.x, 3.2.x & 3.3.x de phpBB.

---

► Qu’est-ce qu’un smiley ?

Il est possible de lire sur Wikipédia qu’un « smiley (de l’anglais smile, « sourire »), une frimousse1 ou une binette2, est un dessin extrêmement stylisé de visage souriant coloré en jaune exprimant l’amitié. Le terme est couramment employé pour désigner d’autres visages (pas nécessairement jaunes, ni souriants). Sur Internet, ces images sont habituellement employées pour exprimer des émotions et peuvent donc être qualifiées d’émoticônes graphiques dans ces situations. Ils sont souvent représentés avec les symboles du clavier. Certaines émoticônes (par exemple, « » et « »), représentant également des visages souriants, sont souvent appelées smileys bien que ce terme ne soit pas nécessairement approprié. ». Aussi nommé « Émoticône », je laisse la liberté au lecteur de se forger une avis sur la différence entre les deux termes.

---

► Qu’est-ce que phpBB permet de faire avec ses smileys personnalisés ?

Il s’agit ici de savoir comment les importer dans phpBB 3.

Le principe : créer un pack de smileys personnalisés au moyen de fichiers images récupérés ici ou là pour l’importer dans son forum.

Les étapes :

1. changement du nom de ses fichiers images ;
2. création d’un fichier *.pak associé à ses smileys ;
3. envoie des fichiers sur son espace FTP ;
4. installation du pack de smileys sur son forum ;
5. utilisation des nouveaux smileys installés.

► 1. Changement du nom de ses fichiers images

Je n’aborderai pas dans cet article la question de la récupération des fichiers images destinés à être utilisés comme smileys. Le but dans cet article est de savoir comment les importer, ainsi charge à chacun de récupérer les smileys qui l’intéressent où bon lui semble. Cependant il est important de noter que :

• les formats de fichiers images GIF, JPG et PNG sont supportés comme smileys par phpBB 3 ;
  
• par défaut les smileys de phpBB 3 possèdent des dimensions proches de 16px x 16px, aussi des dimensions de 64px x 64px me paraissent être un maximum pour éviter tout problème de mise en page dans les messages de son forum.
phpBB 3 permet d’importer plusieurs smileys en même temps si et seulement si un fichier *.pak contenant les informations nécessaires est associé aux fichiers images envoyés sur son espace FTP. Pour obtenir ce fichier *.pak, il est nécessaire de renommer ses fichiers images, simplifiant la création du fichier *.pak via l’outil Web qui sera proposé plus loin dans cette article. Cela étant dit, il est toujours possible de créer son fichier *.pak manuellement, mais dès lors que le nombre de fichiers images est important, l’opération peut s’avérer fastidieuse.

Afin de renommer les fichiers images et parmi les logiciels si possible libres, mon choix s’est porté sur :
• Ant Renamer (Article Framasoft | Site officiel) - plateforme (Windows) - multilingue (français compris). Utilisé depuis de nombreuses années, voici mon outil préféré, c’est le « couteau suisse » dans le domaine du renommage de fichiers sous Windows. ;
• pyrenamer (Article Ubuntu | Guide dmesg.fr) - plateforme (GNU/Linux) - multilingue (français compris). Outil disposant d’une interface graphique pour utilisateur débutant, il propose bien ce qui est recherché dans cet article, renommer les fichiers en incrémentant le numéro. ;
• OS X Yosemite (Article macg.co | Site officiel) - plateforme (Mac OS X) - multilingue (français compris). Nativement intégré au système d’exploitation il n’y a aucune difficulté à renommer l’ensemble de ses fichiers (sélectionner, clic droit, renommer).
Inutile de détailler la procédure d’installation, chaque logiciel disposant de sa FAQ, son Wiki. Ce qui est important c’est d’obtenir un répertoire sur son ordinateur contenant tous ses smileys numérotés tel que 001.gif, 002.gif, etc..

Pour exemple avec le logiciel Ant Renamer, l’action de renommer les fichiers se réalise ainsi :

1. cliquer sur « Fichiers », situé en haut de la fenêtre ;
2. se rendre dans le dossier contenant tous ses fichiers images destinés à être les smileys de son forum ;
3. sélectionner tous ses fichiers images au moyen de l’action simultanée des touches « CTRL » et « A » ;
4. cliquer sur « Ouvrir » sur le fenêtre affichant tous les fichiers images sélectionnés ;
5. cliquer sur « Opérations », situé en haut de la fenêtre ;
6. cliquer sur « Énumération » parmi le choix des actions proposées ;
7. saisir dans le champ « Masque » ceci %num%%ext% ;
8. saisir dans le champ « Démarrer à » ceci 1 ;
9. saisir dans le champ « Nombre de chiffres » ceci 3 ;
10. saisir dans le champ « Incrémenter de » ceci 1 ;
11. décocher la case qui suit les champs précédemment saisis ;
12. cliquer sur « Démarrer », situé en haut de la fenêtre.
Les fichiers images sont à présent renommés, tels que 001.gif, 002.jpg, 003.png, 004.gif etc..

Pour les logiciels pyrenamer et OS X Yosemite la démarche est similaire, aussi je ne détaillerai pas à nouveau les étapes nécessaires au renommage des fichiers images.

► 2. Création d’un fichier *.pak associé à ses smileys

Une fois ses fichiers renommés, il est nécessaire de créer le fichier *.pak utile pour l’importation de ses smileys dans son forum phpBB 3.

Pour cela et comme déjà dit plus haut, il est possible de le créer manuellement mais dès lors que la liste des smileys est importante cela peut devenir fastidieux. Aussi, un utilisateur du forum phpBB.com, Tom Catullo, a créé un outil en ligne pour générer son fichier *.pak : phpBB3 Smiley Pak Generator.

Une fois ses fichiers archivés dans un fichier au format ZIP, il est nécessaire de :

1. se rendre sur le site Web de l’outil Générateur de fichier PAK pour smileys phpBB 3 (indiqué ci-dessus) ;
2. cliquer sur « Choisissez un fichier » ;
3. trouver son fichier au format ZIP contenant tous ses smileys depuis la fenêtre qui vient de s’ouvrir ;
4. valider la fenêtre de recherche de son fichier au format ZIP en cliquant sur « Ouvrir » ;
5. cliquer sur le bouton « Generate my .PAK! » sur le site Web de l’outil, le mot « Working » va s’afficher durant le processus ;
6. télécharger le fichier *.pak généré sur son ordinateur et le placer dans le répertoire contenant tous les fichiers images.
Maintenant se pose la question d’afficher les smileys sur la page de rédaction des messages. Auquel cas contraire un lien s’affichera en lieu et place permettant d’ouvrir une popup donnant accès aux smileys.

Par défaut le fichier *pak généré active l’affichage des smileys sur la page de rédaction des messages. Cela étant dit, si l’on installe de nombreux smileys, qui plus est dans des dimensions supérieures à 16px x 16px, il est préférable de ne pas les afficher sur cette page et d’activer le lien pour la popup.

Ainsi, au moyen de l’outil Notepad++, il est possible de changer le mode d’affichage des smileys en modifiant le contenu du fichier *.pak généré :

1. ouvrir le fichier *.pak avec par exemple, le logiciel Notepad++ ;
2. appuyer simultanément sur les touches « CTRL » et « H », une fenêtre nommée « REPLACE » s’affiche ;
3. saisir ', '1', dans le champ « Recherche » ;
4. saisir ', '0', dans le champ « Remplacer par » ;
5. cliquer sur le bouton « Remplacer tout » situé à droite ;
6. voir le message confirmant la modification effectuée et situé en bas de la fenêtre « ReplaceAll: XXX occurrences were replaced », où « XXX » correspond au nombre de lignes qui ont été modifiées dans le fichier *.pak. Ce nombre correspond aussi au nombre de fichiers images associées au fichier *.pak et qui, au moyen de cette modification, ne seront pas affichées sur la page de rédaction des messages ;
7. enregistrer son fichier au moyen de la combinaison des touches « CTRL » et « S ».

► 3. Envoie des fichiers sur son espace FTP

À présent, il s’agit d’envoyer ses fichiers images accompagnés du fichier *.pak que l’on peut renommer en lui donnant un nom, tel que pack_des_smileys_ezcom.pak.

Depuis son logiciel client FTP, tel que FileZilla (Voir ce Guide d’utilisation), il est nécessaire :

1. de se connecter à l’aide de ses identifiants sur l’espace FTP de son forum phpBB 3 ;
2. de se rendre dans le répertoire /images/smilies/ contenant déjà les fichiers images des smileys par défaut de phpBB 3 ;
3. d’envoyer l’ensemble des fichiers images de ses smileys ainsi que le fichier *.pak associé.

► 4. Installation du pack de smileys sur son forum

Sur son forum :

1. se rendre dans le « Panneau d’administration », onglet « MESSAGES », rubrique « MESSAGES », section « Smileys », sur la page de droite cliquer sur « Installer un pack de smileys » ;
2. constater que le nom du fichier *.pak affiché en face de « Sélectionner un pack » correspond bien à celui envoyé sur son espace FTP, tel que mon exemple plus haut pack_des_smileys_ezcom.pak ;
3. choisir l’action à effectuer avec les smileys actuellement installés au moyen de l’option « Smileys actuels » :
   
   • « Tout conserver » pour garder les smileys déjà installés en plus des nouveaux,
   • « Remplacer les résultats » afin d’écraser les smileys ayant des noms de fichier image identiques,
   • « Tout supprimer » pour supprimer l’ensemble des smileys installés actuellement avant d’installer les nouveaux ;
4. cliquer sur « Installer un pack de smileys ».

► 5. Utilisation des nouveaux smileys installés

Pour utiliser les nouveaux smileys installés sur son forum :

• se rendre sur la page de rédaction d’un nouveau message ;
• constater à droite du cadre de saisie du texte l’apparition des nouveaux smileys ou si il a été choisi de ne pas les afficher, le lien « Voir plus de smileys » doit être visible ;
• cliquer sur l’un d’eux depuis cette page ou depuis la popup ouverte au moyen du lien « Voir plus de smileys ».

Bonne utilisation !

GTB a écrit :I just recoloured an animated Koloboks smiley using CS5 and Animation Shop 3.11 together. Been a long time since last doing this, seemed easier using CS5 instead of the older Photoshop 7 before. You can save the animated frames (each smiley) as PSD format from Animation Shop and recolour and save each smiley as PSD again with CS5, then import each smiley back into Animation Shop as PSD files still to create a new animation with. And using PSD files all the time between both programs means pretty much no loss in image quality happens.

This smiley consisted of 26 different smiley frames.

1.gif (7.12 Kio) Vu 34482 fois

2.gif (3.71 Kio) Vu 34482 fois

3.gif (3.71 Kio) Vu 34482 fois

4.gif (3.71 Kio) Vu 34482 fois

You can see when an animated smiley is opened in Animation Shop, how it shows each smiley frame used by it.

5.PNG (13.84 Kio) Vu 34482 fois

To get the time used for each smiley frame, right click one and choose properties. The first smiley in list used 100 milliseconds (or whatever time frame it is) to copy into a new animation started - then do same thing for all other smiley frames in turn to clone the full animation.

6.PNG (29.43 Kio) Vu 34482 fois

Recolouring the yellow smiley frames in photoshop

The trick in changing the colour of the yellow animated smiley frames with photoshop. Use "Hue and Saturation" and select to only adjust yellow colours, then move the TOP slider (only) until getting a new smiley colour you're happy with. For more advanced users of photoshop, you should with the first smiley (while having all 26 smilies open in photoshop). Start a "recording" of what changes you do with that first smiley, plus saving and closing it. Now stop the recording and you can (play) run it on all other 25 smilies to change colour, plus auto save and close each one.

26 smilies using the "recording what you do feature" can recolour 26 smilies and save/close them in less than 1 minute.

7.PNG (32.41 Kio) Vu 34482 fois

GTB a écrit :The tricky part is dealing with the Hue and Saturation colour you pick, as it can still change other unwanted areas in the smiley. For instance; you might change yellow of smiley to blue, but an animated smiley such as (head butt wall) one, the wall in the animation might be yellow coloured also. So you end up changing colour of wall as well. You can get around that problem, but it involves a lot more work cropping parts of original yellow smiley into every frame of new blue smiley to get wall back yellow, and it might contain 30-50 smiley frames in the animation.

So it's not a perfect method with some smilies converted.

rafpic a écrit :Source du message Bonjour

rafpic a écrit :Source du message Je trouve votre tuto très lisible et accessible .
Pourtant je suis la procédure que vous conseillez et me retrouve avec un soucis.

rafpic a écrit :Source du message J'arrive a ouvrir le fichier .pak avec notepad++ , je suis la procédure je sauvegarde le fichier avec « CTRL » et « S » et quand je renomme le fichier , il se met en " .TXT"

rafpic a écrit :Source du message A savoir qu’après le passage de mon fichier en .PAK

rafpic a écrit :Source du message il apparaît en bas de l'écran téléchargé

rafpic a écrit :Source du message mais avec le logo Adobe reader , bien sur il ne s'ouvre pas avec .

rafpic a écrit :Source du message Je me trompe surement quelque part mais où?

Raphaël a écrit :Source du message À présent, il s’agit d’envoyer ses fichiers images accompagnés du fichier *.pak que l’on peut renommer en lui donnant un nom, tel que pack_des_smileys_ezcom.pak.

rafpic a écrit :Source du message Puisque l'on renomme le fichier en .PAK contenant les fichiers

rafpic a écrit :Source du message pourquoi dites vous "ses fichiers images accompagnés du fichier .PAK ??

rafpic a écrit :Source du message J’espère que je suis clair
C’est pas trop mal.
merci a vous

rafpic a écrit :Source du message Est ce qu'on peut trouver ça quelque part ou on fait un peu ce qu'on veut ?