Réaliser son Skin

(part. 1)

Dans ce tuto (pour débutants) je vous montre à:

1. localiser les fichiers de skins
2. les décapsuler pour les rendre manipulables (ou retouchable)
3. les capsuler pour les mettre dans le jeu et les naviguer avec
4. astuces pour être "vus" de tous

Avant de commencer, je veux vous dire que réaliser son skin est long... mais gratifiant.
C'est une touche perso, qui peut être artistique et/ou jolie à regarder.

Le but aussi est de le montrer aux autres lorsque qu'on joue en ligne.
Eh oui c'est bien d'être vue...et ça ne se fait pas tout seul...

Ca donne ça sinon :

Lire les explications sur le Locator

Sommaire:

1-Logiciels nécessaires:
2-détail de la manip:

2-a/ emplacement et constitution des fichiers:

2-b/ enfin on voit les Skins

2-c/ petites explications sur l'alpha

2-d/ dissociation du DDS en 2 couches, la couleur et l'alpha

2-e/ Manip inverse, en capsulage des couches en DDS

2-f/ on zip maintenant

3-Il est temps de faire des essais
4-Être vu, c'est mieux...
5-Cadeaux Ludo

1-Logiciels nécessaires:

La bonne nouvelle c'est qu'ils sont gratuits.

• pour dessiner: the Gimp
• pour faire la manip les couches alpha: DXTBmp
• pour zipper-dézipper: SevenZip ou autre (WinRar, WinZip...)

Allez à la page "Logiciels", pour des infos (téléchargement, tutoriaux...)

2-Détails de la manip:

2-a/ emplacement et constitution des fichiers:

Les déco des voiliers sont toutes constituées de "peaux", skins en anglais, qui recouvrent le volume du voilier.

Elles sont toutes "encapsulées" dans un fichier Zip au taux de compression normale, au format DDS, qui contient une paire d'images: la couleur et la transparence (on la nomme couche alpha).

Elles sont stockées là (PAR DEFAUT), pour :

• vsk4: C:\Program Files\Virtual Skipper 4\GameData\Skins\Boats\Acc

• vsk5: C:\Program Files\32nd America's Cup\GameData\Skins\Boats\Acc

pour VSK 5, il y a un autre endroit possible:

• Mes Documents\32nd America's Cup\...
• ou C:\Documents and Settings\votreID\mes Documents... (si vous n'avez pas déplacé "Mes documents" de Partition.

Mais les skins qui y sont n'y sont pas par defaut, c'est vous qui les y mettez.

Notez qu'il vous faut créer les repertoires manquant, c'est à dire pour notre cas,  Boats et ACC, sinon ça ne fonctionne pas.

Pour accéder à ces dossiers, régler votre "explorateur" pour faire apparaître les fichiers cachés (outils\options des dossiers...), vous pouvez suivre mes réglages si ça vous chante:

Faites un essai, copiez un fichier dans un dossier créé à cet effet pour le décompresser avec 7Zip ou un autre "dézippeur" de votre choix.

Vous vous retrouvez avec des fichiers toujours invisibles au format DDS, avec comme nom:

Pour vsk5:

• Hull.dds
• Icon.dds
• Sails1.dds
• Sails2.dds
• Spi2.dds
• TeamMate.dds

Pour Vsk4

• Hull.dds
• Icon.dds
• Sails.dds
• TeamMate.dds

2-b/ enfin on voit les Skins

C'est avec Ce superbe outil qu'est DXTBmp que nous allons dissocier chaque fichier *.dds en 2 fichiers (encore!! :-)
Et oui chaque fichier DDS contient:

• une "peau" pour les couleurs
• et une peau pour les transparences, on l'appelle couche "Alpha"

Je suppose que vous avez installé DXTBmp, sinon reportez-vous à un de mes tutos ou autre (y a pas de réglages à faire)

Lancer le et ouvrez un fichier *.dds:

Réglez le type de fichier sur DDS:

prendre Sails2, par exemple:

......

et la lumière fût...

Donc DXTBmp vient de nous dissocier les 2 couches, la couleur (si vous la voyiez pas, c'est celle à gauche... :-) et l'alpha (dans le petit carré en haut à droite) en Noir et Blanc.

2-c/ petites explications sur l'alpha

L'alpha est toujours en "niveaux de gris", ou "Noir et Blanc", pour le dire autrement.

Les différents tons donneront comme consigne dans le jeu (VSK):

• BLANC = Opacité à 100%
• NOIR = Transparence totale
• GRIS = plus ou moins transparent-opaque.

Exemple, regardez la Grande voile:

2-d/ dissociation du DDS en 2 couches, la couleur et l'alpha

On poursuit la manip de tout à l'heure et on va sauvegarder la couleur, format "24bits BMP Image"

Maintenant l'alpha; faire export Alpha

Choisir le même dossier de sauvegarde, nommer le fichier du même nom avec "alpha" en plus pour le repérer (vous faites comme vous voulez après tout)

Vous pouvez fermer (quitter) DXTBmp, y en a plus besoin pour le moment.

Vous vous retrouvez avec vos 2 couches, prêtes à bosser :-)...

2-e/ Manip inverse, encapsulage des couches en DDS

Ca y est, vous avez passé de longues heures à faire vos déco, et le moment est (enfin) venu de mettre à l'eau.

C'est tout simple, vous réunissez vos anciens fichiers DDS avec vos nouveaux BMP dans le même dossier (c'est plus simple je trouve, mais vous faites comme vous voulez of course)

Moi je les classe par "type" dans l'explorateur:

Démarrez DXTBmp, faites Open, allez chercher le fichier BMP "couleur" en 1er.

N'oubliez pas de sélectionner fichier Bitmap en bas:

Là, votre image sera complètement opaque, car il n'y a pas de couche alpha, on va donc la charger:

Message pour prévenir d'un changement, on sait ce qu'on fait, on répond OK

On prend notre couche ALPHA

Et voila, notre couleur et l'alpha qui va bien avec.

Ah, elle, c'est une copine, pas touche, heeeeeh

On va passer à la moulinette... en faisant, SAVE AS: \ DDS \ format DDS-DXT-5:

gardez le nom qu'a besoin VSK (ici pour le génois dans vsk5 c'est "sails1.dds"

sélectionnez le format de sauvegarde: DXT 5

enregistrez

attendre 5 à 10 seconde qu'il "mouline"

Voilà votre DDS est créé

2-f/ on zip maintenant

On réunis tous les DDS ensemble et vous les compressez dans un fichier zip (vous les zipper quoi).

Comme j'ai eu des bugs un jour en compressant en "haut niveau" (rare mais bugs tout de même), je compresse en "moyen" ou "normal "maintenant.

En plus on gagne presque rien en poids de fichier.

Détail de la manip avec WinRar:

On selectione tous les fichiers

Clic Droit sur la sélection et "add to archive":

Renseigner le nom du fichier, sélectionner zip, compression "Normale", et zou, OK

Voila notre Bébé... (humm l'humour ici est d'un niveau très bas...)

3-Il est temps de faire des essais

On dépose sont "ZIP" dans le dossier ACC de vsk, comme vu ici

Et on démarre VSK....A vous de jouer (sans jeux de mots).

On peut modifier tous les voiliers, même son avatar.

Vous allez me dire, "il manque quelque chose là, comment on fait SON skin ?"

C'est vrai j'ai pas traité ce mode opératoire, le logiciel que j'utilise est The Gimp

Y a plein de tutos sur le net pour l'utilisation de Gimp, c'est pas difficile, mais long...
Comptez une journée de réalisation si on part de calque vierges (cf le tuto n°2).

Mais au bout du compte on a un voilier personnalisé et surtout, sans PUBS.

4-Etre vu, c'est mieux...

Rendez-vous sur:

• le tuto Locator

Réaliser son Skin

(part. 2)

-page lourde, env. 4 Mo

Pour Vsk4 ou Vsk5

Dans ce tuto je vous montre par des captures la manip. pour réaliser un Skin de Grand voile pour Vsk 5, bien entendu la manip pour vsk 4 est, à peu de choses près, la même chose.

C'est un Tuto pour débutant avec Gimp, (je suis moi-même débutant), je suppose qu'il a une meilleure façon, voir des meilleures façons.

Je vous donne ma version...

Avant de commencer, je veux vous dire que réaliser son skin est long... mais gratifiant.
C'est une touche perso, qui peut être artistique et/ou jolie à regarder.

Le but aussi est de le montrer aux autres lorsque qu'on joue en ligne.
Eh oui c'est bien d'être vue...et ça se fait pas tout seul...

Ca donne ça sinon :

Lire les explications sur le Locator

Sommaire:

1-Logiciels nécessaires
2-Fichiers nécessaires
3-Mise en route avec Gimp
4-Mise en couleur de la GV
5-Ajouter les lattes et renforts en couleurs originales
6-Ajouter notre TUX
7-L'alpha
8-Sauvegardes en zip,dds, et essais
9-Décors sur les 2 faces
10-Raccourcis que j'utilise
11-Remarques supplémentaires

1-Logiciels nécessaires:

La bonne nouvelle c'est qu'ils sont gratuits.

• pour dessiner: the Gimp
• pour faire la manip les couches alpha: DXTBmp
• pour zipper-dézipper: SevenZip ou autre (WinRar, WinZip...)

Allez à la page "Logiciels", pour des infos (téléchargement, tutoriaux...)

2-Fichiers nécessaires (pour gagner du temps):

Dans la partie téléchargement, prendre:

• le calque de fond
• chemins de découpes pour TheGimp

Téléchargez aussi un Tux (mascotte Linux) là

3-Mise en route avec Gimp

Je prendrais comme exemple la Grand Voile (sails2).
Décompressez le calque de fond et "décapsulez les DDS" (cf part. 1), y compris l'alpha.
(vous renommez le "!_Calques_de_fond.zip.ludo" en !_Calques_de_fond.zip")
Vous vous retrouvez avec ces fichiers là:



Vous faites comme bon vous semble:

• soit vous double cliquez sur "sails2.xcf" pour démarrer Gimp avec les chemins que je vous ai donné
• soit vous démarrez Gimp et ouvrez ensuite le fichier sails2.xcf

Vous vous retrouvez avec ça:



Le truc à comprendre avec Gimp est qu'il superpose des calques que l'on modifie.
Pour les voir, il faut cliquer sur l'oeil.

Petites définitions pour ceux qui ne connaissent pas:



On ouvre les 2 calques, la voile et son alpha (ouvrir comme un calque):





on obtient ça

et

C'est la voile de couleur qu'on voit, étant donné quelle est opaque à 100%, elle couvre la vision des autres calques, même si il y a les "yeux" devant.

pour éviter toutes fausses manoeuvres on renomme notre fichier sails2.xcf, par exemple "test.xcf"





Pour éviter des fausses manoeuvres, on duplique les calques:
On sélectionne un par un les calques (ligne bleue) et icônes dupliqués:



Vous pouvez les classer, les renommer (en double cliquant sur le nom d'un calque),

Pour éviter de m'embrouiller, j'ajoute une feuille blanche entre chaque partie (ici, la partie: originaux et la partie: calques manipulés(alpha et couleur))

4-Mise en couleur de la GV

Je ne suis pas artiste, alors ne me tenez pas rigueur sur les choix des couleurs.
Vous choisirez les vôtres vous même :-)

on sélectionne le chemin de GV






dans la barre d'outils, allez dans: "outils\outils de couleurs\Balances des couleurs"
faites varier les curseurs, vous pouvez aussi agir sur les tonalités (vif, ombre...)



voila le résultat


Stoppez la sélection (clignotement des tirets) par le raccourci " shift - ctrl - a "

5-Ajouter les lattes et renforts en couleurs originales.

Créer un calque transparent :



On obtient:



retour dans les chemins, et on va ajouter des sélections successives en maintenant la touche shift:



On retourne dans les calques et on sélectionne la GV original, on copie (par le raccourci ctrl - c), on sélectionne le calque transparent (lattes, oeillets..), on colle (raccourcis ctrl - v), on ancre la manip:




C'est pas très beau, je vous ai prévenu, j'ai pas trop de goût :-)

6-Ajouter notre TUX (mascotte linux)

(J'y pense n'oubliez pas de sauvegarder de temps en temps, raccourcis ctrl-s au format *.xcf)

Fichier\ouvrir comme un calque\tux_500px.png\ouvrir
On obtient ça:



On le centre en sélectionnant "l'outil déplacer", et dans l'image vous faites un glissé-déplacé (clic gauche enfoncé et déplacement souris)



On peut...



par exemple:

7-L'alpha

Voilà, on s'occupe de la couche de transparence maintenant, l'ALPHA.
Pour mémoire:

• le blanc = opacité à 100%
• le noir = transparence à 100%
• le gris = légère transparence de la texture

( l'alpha pour la coque et le Team gére la brillance et non la transparence.)
Moi, j'aime bien un dégradé de transparence, je vous montre:

On ne rend plus visibles les calques de couleurs en cliquant sur les yeux pour les faire disparaître,
et j'ajoute un calque transparent que je nomme dégradé:






vous sélectionnez-activez (chemin vers sélection) la GV:



Dans l'image, vous sélectionnez le calque transparent nommé"dégradé" et tracez une ligne dans l'image pour réaliser le dégradé:





Pour foncer le dégradé, on duplique le calque dégradé, et on agit aussi sur son opacité:



on obtient ça:



On désactive les sélections (ctrl - shift - a)

On va tracer les contours de Tux, pour ne pas le rendre trop transparent.

-On sélectionne son calque, on le rend visible avec un fond blanc.
-On sélectionne l'outil "sélection des formes dans l'image" ou "ciseaux" ou "sélection intelligente.
-On zoom sur l'image (ctrl et rotation molette souris)




on trace les contours de Tux en créant des points tout autour:



on termine ( ferme ) en cliquant sur son premier point:



On clique une fois à l'intérieur de la boucle que l'on vient de réaliser, pour rendre la sélection active:





Pour enregistrer cette sélection en chemin, on va dans chemin, et on clic sur "sélection vers chemin", on peut nommer cette sélection.



On aurait pu faire plus simple étant donné que l'image source de Tux gère la Transparence (*.png), mais pour les débutants j'ai donné cette manip qui pourra servir plus tard pour d'autres images pas transparentes...

Sinon, plus simple on aurait fait:

outil sélection par couleur, réglage à 255 (toutes les couleurs, comme le fond est transparent)



et sélection dans Tux (une de ses 255 couleurs)



Désolé, si vous avez suivi la précédente manip (plus longue) mais ça vous servira si vous ne la connaissiez pas ...

On revient à notre Alpha

On créé un nouveau calque, pour l'alpha de Tux,



On "sélectionne-active" le Tux,
et on contrôle bien que le calque "alpha de Tux" est bien sélectionné



On prend l'outil peinture, en contrôlant que la peinture de PP (premier plan) est noire et la AP blanche (Arrière Plan)
On règle l'opacité à 100%, et remplissage avec couleur de AP




On clique dans la sélection une fois



Maintenant on règle le gris en jouant sur l'opacité du calque (pas trop blanc):



On va opacifier à 100% les zones de renforts, lattes..., pour ce faire,

on créé un nouveau calque transparent, que je nomme "alpha lattes..."



on sélectionne les lattes, renforts oeillets..., Cf la manip déjà réalisée là

et on rempli de blanc opacité 100%





On stop la sélection (shift-ctrl-a)
On obtient ça:



N'oublier pas de sauvegarder au format Gimp (.xcf) (ctrl-s)

8-Sauvegardes en dds, zip et on essai

On va sauvegarder ce que l'on voit au format "bmp", pour pouvoir les mettre dans la capsule DDS puis ZIP.

Et oui, on se rapproche de la fin...

Faites apparaître (avec les yeux) les calques nécessaires pour l'alpha:



puis, enregistrer:

Fichier\enregistré sous\sélectionner le fichier "sails2-alpha.bmp" \enregistré\ remplacé\exporter.

Faites la même chose pour la couleur:



Fichier\enregistré sous\sélectionner le fichier "Sails2.bmp" \enregistré\ remplacé\exporter.

Encapsulé en DDS avec DXTBmp comme vue dans la partie 1 en sauvegardant pour la "Sails2.dds" (option "dds dxt5")



Zippez les fichiers nécessaires:



appelez le "1-TUX.zip" par exemple (le "1-" pour qu'il arrive dans les premiers dans vos choix de skins)



Insérez-le dans le répertoire du jeu :
C:\program files\32nd America's Cup\gamedata\Skins\Boats\Acc

->pour vsk5, on peut mettre le fichier dans ce repertoire ou au choix dans:

Mes Documents\32nd America's Cup\Skins\Boats\Acc

ou C:\Documents and Settings\votreID\mes Documents... (si vous n'avez pas déplacé "Mes documents" de Partition.

Notez qu'il vous faut créer les repertoires manquant, c'est à dire pour notre cas,  Boats et ACC, sinon ça ne fonctionne pas.



Lancer...

Face A


Face B

9-Décor sur les 2 faces

Je vous montre comment je travaille sur l'autre face.

Nouveau calque transparent, je le nomme "couleur face bd":



rendre visible les calques couleurs:



Édition\copie visible
sélectionner le calque "couleur face bd"
coller (ctrl-v), ancrez

On obtient un calque totalisant ce qui est visible
On "sélectionne-active" le chemin de la GV



On sélectionne le calque "couleur face bd" et l'outil de rotation



dans l'image, cliquez enfoncez et faites tourner, validez par "pivoter"



Prendre l'outil de déplacement:



Baisser l'opacité du calque (pour voir le calque de dessous qui nous sert de référence pour le positionnement):



déplacez votre calque pour le superposer pile-poil sur la voile de droite
Une fois bien placé, remontez l'opacité à 100%, puis ancrer:



Enregistrez en *.BMP

faites la même opération pour l'alpha
Perso, je préférais une voile plus transparente



On sauvegarde, on fait un essai... et ainsi de suite
Il ne vous reste plus que : le spi, le génois, l'équipage et l'avatar :-)

Là, je vous laisse faire.
J'espère vous avoir aidé (ou carrément vous avoir fait passé l'envie de faire votre skin.)

Et n'oubliez pas de lire la page Locator, car cela serait dommage que l'on ne voit pas votre Oeuvre :-) , sauf si vous savez ce qu'est un locator

10-Raccourcis que j'utilise:

sauvegarde: ctrl - s
sélection de toute la feuille: ctrl - a
inverser la sélection: ctrl - i
annulation de sélection: shift - ctrl - a
annulation des dernières manipulations: ctrl - z
suppression des zones sélectionnées: ctrl - z
copier: ctrl - c
coller: ctrl - v
couper: ctrl - x
Zoom avant arrière dans l'image: ctrl - rotation molette souris
déplacement latéral de l'image en position zoom: ctrl - molette souris

11-Remarques supplémentaires:

a/ La couche alpha

Pour les voiles elle agit sur la transparence.
Pour la "Coque et le Team" l'alpha agit sur les reflets (Blanc = très brillant ...)

b/ Divisé par 3 à 4 le poids des skins (VSK5)

Ca c'est une bonne nouvelle pour la rapidité des échanges de skins durant les courses en ligne, on peut diminuer la taille des calques.

Par exemple, les génois qui sont en 2048x2048, peuvent être réduit à 1024x1024.

On perd très très peu en définition (franchement je vois à peine la différence), et surtout le poids du fichier final est divisé par 3 à 4.

fichier traditionnel = 10 Mo
fichier diminué = 3 Mo (tous les fichiers divisés par 2 sauf l'avatar)

Mode opératoire avec Gimp

Après avoir décapsulé le zip et les dds en bmp, ouvrez un fichier bmp



ouvrez son analogue Alpha (comme un calque)





Notre exemple, la coque, est en 2048x2048, on va donc le mettre en 1024x1024.
Faire Image\echelle et taille de l'image :





Selectionnez l'interpolation "Cubique" (meilleure)



Comme il y a un lien entre la hauteur et la largeur, le fait de modifier un des 2 éléments, l'autre de modifira automatiquement du même rapport.



Maintenant nous sommes en 1024x1024.
Faites apparaitre un des 2 calques



Enregistrez sous..., ecrasez l'actuel (----.bmp)



Passez à l'autre calque






Réencapsulez en dds et zip (compression normal)

Voila, voili voilou, et franchement, de loin on ne voit aucune différence, mais au moins on nous voit .

Fin
@+ Ludo

Et laissez vos commentaires...

• < Précédent
• Suivant >