Comment créer des thèmes (skins) pour Steam

Steam est une plateforme de gestion de jeux vidéo et communauté très utilisée, créée par Valve. Elle propose une boutique en ligne, un client de chat et des fonctions de réseau social. L'une de ses fonctionnalités les plus populaires est l'overlay en jeu, qui permet de consulter sa liste d'amis ou de discuter sans quitter sa partie. Steam permet de créer ses propres thèmes d'interface (l'apparence graphique de l'application) via une console de développement ou des outils tiers faciles à utiliser.

Utiliser le créateur de thèmes Steam

Étape 1

Téléchargez le Steam Skin Creator depuis Fileplanet. Une fois terminé, décompressez le fichier « ilovesteam10.zip » à l'emplacement de votre choix ou cliquez sur le bouton « > » si vous avez utilisé le gestionnaire de téléchargement. Ouvrez le dossier « ilovesteam10 » et lancez « ilovesteam_19.exe ».

Étape 2

Cliquez sur « Suivant » dans l'installateur et acceptez le contrat de licence. Choisissez un emplacement d'installation et cliquez sur « Installer ». Laissez la case « Exécuter » cochée et cliquez sur « Terminer ».

Étape 3

Cliquez sur Options > Modifier le chemin Steam et sur le bouton Parcourir. Naviguez jusqu'à votre répertoire Steam (généralement C:\Program Files\Steam ou Program Files (x86) sur les systèmes 64 bits). Sélectionnez Steam.exe et cliquez sur « Ouvrir ».

Étape 4

Cliquez sur le bouton Nouveau projet dans l'interface du Skin Creator. Saisissez un nom de projet et cliquez sur « OK ». L'image « Root » s'affiche en premier, avec la fenêtre « Server » dans le second onglet. Ces images représentent les éléments principaux du client Steam et l'apparence des autres boîtes de dialogue avec vos modifications.

Étape 5

Modifiez les couleurs, images de fond et icônes à l'aide des champs à gauche. Les couleurs doivent être saisies en hexadécimal, précédées du symbole #. Vous pouvez aussi utiliser le sélecteur de couleur en cliquant sur le carré coloré à droite du champ de saisie.

Étape 6

Convertissez vos images de fond ou d'icônes au format TarGA (.tga) avec un logiciel de retouche comme Photoshop, Corel Paint Shop Pro ou GIMP. Ouvrez l'image existante, puis choisissez « Enregistrer sous » dans le menu Fichier et sélectionnez le type de fichier « tga ».

Étape 7

Cliquez sur Enregistrer le projet ILS. Allez dans Fichier > Enregistrer et exporter vers Steam. Un message de succès devrait apparaître.

Édition avancée via le mode développeur

Étape 1

Téléchargez et installez un thème compatible 2010 ou ultérieur depuis le site de Valve. Il servira de base à votre thème personnalisé.

Étape 2

Ouvrez l'Explorateur Windows et allez dans votre dossier Steam (généralement sous Program Files). Double-cliquez dessus, puis ouvrez le dossier « Skins ». Double-cliquez sur le dossier du thème fraîchement installé, appuyez sur Ctrl+A pour tout sélectionner, puis Édition > Copier.

Étape 3

Revenez au dossier principal « Skins » et créez un nouveau dossier nommé d'après votre thème personnalisé. Double-cliquez pour l'ouvrir, faites un clic droit et choisissez « Coller ». Le contenu du dossier du thème téléchargé devrait apparaître dans votre nouveau dossier.

Étape 4

Lancez Steam et connectez-vous. Allez dans Steam > Paramètres, onglet Interface. Sélectionnez votre thème dans le menu déroulant et cliquez sur « Oui » pour redémarrer Steam. Fermez Steam une fois relancé.

Étape 5

Cliquez sur Démarrer, tapez « Exécuter » dans la barre de recherche et appuyez sur Entrée. Tapez le chemin vers votre steam.exe entre guillemets, suivi d'un espace et de -dev (sans guillemets). Cela lancera Steam en mode développement. Exemple : "c:\program files\steam\steam.exe" -dev.

Étape 6

Ouvrez la fenêtre sur laquelle vous voulez travailler (Amis, Serveurs, Communauté, etc.). Appuyez sur F6 pour ouvrir la console « vgui layout debugger ». Une seule fenêtre de dialogue peut être modifiée à la fois.

Étape 7

Sélectionnez un élément de la fenêtre à redessiner. Par exemple, dans la fenêtre Amis, vous pourriez sélectionner le lien « Ajouter un ami ». Tous les éléments nécessaires à l'affichage et au fonctionnement du lien apparaîtront dans le débogueur, divisés en Styles, Détail, Disposition, Groupes et Localisation. Les éléments principaux sont Styles et Disposition, similaires aux styles CSS et aux mises en page HTML du design web.

Étape 8

Dans l'onglet Styles, sélectionnez la propriété à modifier, puis cliquez sur le lien du fichier à l'extrême droite. Une boîte de dialogue Windows apparaît pour choisir le programme d'ouverture. Sélectionnez « Choisir le programme dans une liste... » et cliquez sur « OK ». Choisissez le Bloc-notes ou votre éditeur HTML préféré. S'ils n'apparaissent pas, cliquez sur « Parcourir » pour les localiser (le Bloc-notes se trouve dans le dossier Windows).

Étape 9

Modifiez le fichier avec vos changements de position, couleur ou comportement. Pour trouver les entrées spécifiques à l'élément surligné dans le débogueur, cliquez sur Édition > Rechercher et tapez le nom de la propriété. Exemple : changer Button:hover en « Red » fera passer le texte en rouge après sauvegarde et rechargement de Steam.

Étape 10

Enregistrez les modifications de tous les fichiers texte modifiés via Fichier > Enregistrer sans changer l'extension. Fermez Steam une fois l'édition des styles et dispositions terminée.

Étape 11

Lancez votre logiciel de retouche graphique (capable de lire et sauvegarder les fichiers .tga : Photoshop, Corel Paint Shop Pro, GIMP). Allez dans Fichier > Ouvrir et naviguez jusqu'au dossier de votre thème dans le répertoire Steam skins. Double-cliquez sur le dossier « Graphics » pour voir les images modifiables.

Étape 12

Modifiez les fichiers graphiques comme n'importe quelle image d'interface. Si vous remplacez une image par une de taille différente, assurez-vous de sauvegarder le nouveau graphique avec le même nom et choisissez « tga » comme type de fichier.

Astuce

Les images personnalisées (boutons, fonds, etc.) peuvent être enregistrées en .tga dans le dossier graphique et référencées dans les styles. Par exemple, vous pouvez modifier une propriété de fond pour y inclure un chemin relatif vers votre image au lieu d'une couleur unie.