SkyShadow Index du Forum
SkyShadow Index du ForumFAQRechercherS’enregistrerConnexion

Création d'un skin de A à Z

 
Poster un nouveau sujet   Répondre au sujet    SkyShadow Index du Forum -> Les Tutoriaux (TM) -> Skins
Sujet précédent :: Sujet suivant  
Auteur Message
[GM]SSW
Game Master

Hors ligne

Inscrit le: 16 Juil 2010
Messages: 51
Localisation: Brumath
Masculin Scorpion (23oct-21nov) 虎 Tigre
Point(s): 51
Moyenne de points: 1,00

MessagePosté le: Dim 8 Aoû - 10:51 (2010)    Sujet du message: Création d'un skin de A à Z Répondre en citant

Voici un tutorial réalisé par Peper pour vous permettre la création d'un skin de A à Z.




Les pré-requis :


[*]Le logiciel Photoshop (7,8,CS...)


[*]Ou la version trial si vous ne possédez pas Photoshop : ICI


: Présentation :

Ce Tutoriel se présente sous la forme d'un exercice à faire afin de réaliser la skin en photos au dessus. Chaque étape est expliquée, je vais vous guider même si vous n'avez encore jamais utilisé photoshop.

Durée approximative de l'exercice : 2 Heures

Effet notable : Augmentation du skill "Skinning" de 30 points

Effet indésirable : Peut causer "Vision troublée"



___________________________________________________________

: Première question :


Tout d'abord, qu'est ce qu'un SKIN ?
Tout simplement, il s'agit d'une modification apportée aux textures d'un modèle 3D. Pour résumer, grâce à un SKIN vous êtes en mesure de modifier l'aspect visuel d'un véhicule.


___________________________________________________________

: Sommaire :


  • Introduction : Les pré-requis
    Pour avoir tous les outils indispensables pour faire notre skin.

  • Partie I : Le départ
    Démarrage de photoshop et mise en place des éléments pour travailler.

  • Partie II : La peinture
    On commence les choses sérieuses. Couleur de base et décos de zones spécifiques.

  • Partie III : Les Stickers
    Disposition des différents autocollants et derniers détails graphiques.

  • Partie IV : La couche alpha
    Voyons comment dompter cette mystérieuse couche alpha.

  • Partie V : Direction les pistes
    Bah enfin! on va voir ce que cela rend "In Game!".

    Citation:
    Bonjour! Je m'appelle Phung Shu! Grand maitre de photoshop! Tout au long du tutoriel, je viendrais vous apporter des astuces.
    ___________________________________________________________


    Introduction : Les pré-requis :

    Pour modifier les skins, il vous faudra plusieurs outils associés à photoshop.


    Les outils nécessaires

    Les fichiers à retravailler sont des fichiers .dds (fichiers de texture Nvidia). De base, Photoshop ne permet pas de gérer ce type de fichier, il faut donc installer un plugin spécifique.
    Il y a plusieurs plugins photoshop pour gérer les fichiers .dds. Le plugin pour photoshop que j'utilise est mis gratuitement à disposition par Nvidia.
    Vous pouvez le récupérer : ICI


    Activation de plugins sous Photoshop

    Bon alors pour activer les plugins sur Photoshop, il faut aller dans Edition -> Préférences -> Modules externes et disques de travail.
    Là, il faut s'assurer:
    1. que "Répertoire de modules externes complémentaires" est coché
    2. que vous avez installé le plugin nvidia dans le bon répertoire, généralement "c:\program files\adobe\photoshop vX\Plug-Ins"

    Si "Répertoire de modules externes complémentaires" n'était pas coché, il faut le cocher, cliquer sur OK, et redémarrer Photoshop pour que les plugins soient désormais pris en compte.


    Citation:
    Si photoshop ne reconnais pas les plug-ins prendre ceux-la (version 8 ).
    Pour savoir si vos plugins Nvidia sont pris en compte, relancer photoshop et regarde dans l'onglet Filtre. une option Nvidia tools doit apparaitre.


    Pour ma part, j'utilise Photoshop CS3.

    Je vous conseil aussi de télécharger DDS Thumbnail Viewer : ICI, qui vous permet d'avoir un aperçu direct de vos fichier .dds depuis l'explorateur windows (comme pour vos images JPG par exemple).

    Vous avez tout les outils en mains pour modifier les fichiers .dds ? Très bien passons à la suite !




    Choisir un modèle à skinner :

    Pour trouver des modèles : Carpark.

    Dans mon exemple, nous utiliserons la Mitsubishi Evo X d'Xkev'. Nous allons la télécharger ; pour cela rendez vous sur cette page.

    Citation:
    Sur Carpark, le template n'est disponible que sur la page de téléchargement du modèle 3D. il n'est pas disponible sur les skins 2D, associés à ce modèle.



    Nous allons télécharger le skin ET le template.

    Citation:
    Template : Outil du skinneur par excellence. il s'agit le plus couramment de deux fichiers :

    Le wire, avec le déploiement en 2D des zones affichées sur le modèle 3D :

    Le prelight, avec les ombrages et certains détails de la voiture :


    Bon allez, on à tout ce qu'il nous faut, on lance 'toshop!

    ___________________________________________________________

    Partie I : Le départ :


    Nous allons regrouper dans un dossier et extraire ce qui nous intéresse


    Nous allons ouvrir le template.psd. Nous voilà devant un fichier avec deux calques, un nommé wire et un nommé prelight.
    Première chose, nous allons redimensionner le template car il est en 4096*4096.

    Citation:
    Faites CTRL+ALT+i pour ouvrir le menu de redimensionnement et mettez le en 2048*2048 pixels.

    Grâce aux icônes, nous allons créer trois dossiers vides et un calque.

    Nous les placerons et nommerons comme suit :



    Citation:
    Photoshop réfléchis par couches superposées. celle du dessus s'affiche donc prioritairement.

    Maintenant nous allons réduire l'opacité du wire à 50%. Pour le prelight nous allons cliquer sur l'œil pour le masquez pour l'instant. Sélectionnez maintenant votre calque en bas de la liste des calques. Nous allons appliquer une couleur.

    Citation:
    Pour remplir un calque rapidement, vous pouvez utiliser le pot de peinture :


    Voila le résultat à l'écran :



    On va ré afficher le prelight (avec l'œil). Double cliquez sur le calque "prelight" dans la liste des calques ; ce menu va s'ouvrir.
    Ce menu est également disponible dans "Calque/Style" du calque.



    Il s'agit de modifier le mode de fusion du prelight. Dans ce cas c'est "soft-light (version anglaise)" qui colle bien, car la couleur est claire. Mais selon la couleur du fond, il faut tester les autres type de fusion et trouver le plus adapter.

    Voilà le résultat :



    Citation:
    Si vous êtes vraiment bloqué, ou curieux, vous pourrez télécharger mes fichiers .psd à différentes étapes du tutoriel.

    ___________________________________________________________

    : Rendu IG à se stade :



    Citation:
    Cliquez pour télécharger le fichier psd à ce stade par Peper

    ___________________________________________________________

    Partie II : La peinture :


    Nous allons maintenant créer les détails de la peinture. Ouvrez le dossier "Peinture" dans la liste des calques.
    Dans un premier temps, nous allons faire le capot Carbon. (Texture carbon dispo ici)

    Pour cela, ouvrez le fichier carbon dans photoshop. Sélectionner le calque dans la liste des calques, et glisser le dans la fenêtre de votre skin.

    Il y a maintenant un calque carbon dans le dossier peinture.

    Voilà votre liste de calque :



    Pour déplacer le calque à l'endroit souhaité, c'est à dire sur le capot, il faut le sélectionner dans la liste des calques.

    Citation:
    Gardez CTRL enfoncé pour déplacer le calque sélectionné
    Faites CTRL+t pour modifier manuellement la forme du calque et sa taille.

    Placez votre carbon, grâce au wire, sur le capot :



    Citation:
    Pour zoomer sur votre fichier, maintenez Alt enfoncé et zoomer avec la molette de la souris.

    Le carbon que vous avez téléchargé dans mon exemple est trop clair pour être appliqué ainsi. Nous allons y appliquer une couleur grise foncée. Pour cela, double-cliquez sur le calque carbon dans la liste des calques pour ouvrir le menu du calque.

    Réglez comme suit :
    Incrustez un gris foncé et réglez l'opacité sur 85%



    La texture sera beaucoup plus réaliste.


    Citation:
    Il faut bien comprendre que seules les zones définîtes par le wire seront réellement affichées sur le modèle 3D. Vous pouvez donc afficher n'importe quoi sur les zones vides (celle en noire sur le prelight).
    Toutefois, sur certains anciens modèles de carpark, les jonctions ne sont pas parfaites. Donc n'hésiter pas à déborder un peu du contour pour être sure.

    ___________________________________________________________

    : Rendu IG à se stade :



    ___________________________________________________________

    Citation:
    Il est important de bien comprendre le déploiement de votre skin 2D sur un modèle 3D.

    Nous allons maintenant nous attaquer aux bas de caisse carbon eux aussi.

    Dans le dossier "Peinture" créé un nouveau calque vierge.


    Grâce à l'outil lasso polygonale, nous allons découper la zone sur laquelle nous allons appliquer la même texture carbon que sur le capot.

    On commence donc par dupliquer le calque du capot :



    On sélectionne le lasso polygonal :



    Voici la zone à sélectionner :



    Une fois cette zone définie, nous allons supprimer la zone extérieur à cette sélection à l'aide de la touche Suppr.

    Citation:
    Pour inverser une selection faites CTRL+Maj+i

    On passera ainsi de la zone 1 à la zone 2

    Citation:
    Pour dupliquer un calque sur l'autre coté de la voiture :

    1 - Dupliquez le calque



    2 - Faites CTRL+t (pour transformation manuelle) puis clic droit dans la zone du calque pour ouvrir le menu et faites une rotation sur son axe pour le mettre dans le bon sens



    Toutefois, les deux faces de coté (le coté droit et le coté gauche) ne sont pas forcement placées de façon symétrique. Il faut parfois imprimer une petite rotation pour obtenir une symétrie parfaite Droite/Gauche.


    Citation:
    Pour déplacer un calque sur un axe horizontale ou vertical figé (en gros pour rester callé sur une ligne droite), laissez Maj enfoncé pendant le déplacement du calque.
    Aux besoins, vous pouvez combiner CTRL+Maj pour déplacer un calque verticalement ou horizontalement.

    On en profite pour faire les rétros en bas à gauche et à droite et le coffre. Bref, on doit avoir quelque chose comme ça :



    ___________________________________________________________

    : Rendu IG à se stade :



    Citation:
    Cliquez pour télécharger le fichier psd à ce stade par Peper
    ___________________________________________________________


    Maintenant nous allons nous occuper des zones grises. On crée un nouveau calque dans le dossier "Peinture". Cette fois nous allons placer ce calque en dessous du calque précédent (bas de caisse carbon).

    Toujours avec le lasso polygonal, on va faire une forme (une sorte de lettre V de travers) comme suit et la peindre en gris.



    On va ajouter des effets d'ombrage, ainsi qu'une couleur en dégradé via le menu "Style du calque" en double cliquant sur le calque dans la liste des calques.



    Double cliquez dans le rectangle, pour définir les paramètres du dégradé.



    Il nous suffit maintenant de dupliquer ce calque gris sur le toit et sur l'autre coté.

    Citation:
    Votre calque sur le toit ne sera pas dans le même axe que ceux sur les cotés. Pensez à changer l'angle du dégradé dans les options "incrustation de dégradé" dans le menu du style du calque.



    ___________________________________________________________


    Sur cette zone grise, nous allons incruster des petits logos Cwest :



    Pour cela, nous allons télécharger un logo Cwest.

    Citation:
    Pour la recherche de logo, Google Image est votre amis.
    Faites une recherche adaptée, comme : "marqueX", "marqueX logo", "marqueX stickers", "marqueX decal"...
    Soyez vigilant sur la taille et la qualité de l'image toutefois. Un logo de 120x50 pixels, ne pourra pas être agrandis sans perdre en qualité et être très pixélisé.

    Ouvrez le logo téléchargé avec photoshop. Créez un nouveau fichier (1280*1024 pixels) et, comme pour le carbon, glissez le dans le fichier vierge fraichement créé.

    Citation:
    Pour créer un nouveau fichier, faites CTRL+n.

    Sélectionnez comme suit :


    Citation:
    Certaines images sur internet sont indexées (notement beaucoup de Gifs) donc pour glisser l'image, faites d'abord : CTRL+a pour tout sélectionner puis CTRL+glisser l'image.

    Sur le nouveau fichier, masquez le fond avec l'œil.

    Sélectionnez l'outil Baguette magique :


    Citation:
    Dans la barre des menu, il y a un réglage nommé Tolérance.

    Cette outils sélectionne un groupe de pixel ayant une couleur similaire.
    tolérance 0 (min)
    Ne sélectionne que les partie ayant strictement les mêmes couleurs.
    tolérance 100
    Sélectionne une gamme de couleur plus large, donc la même zone plus les contours dont les couleurs sont approchantes.
    tolérance 255 (max)
    Sélectionne toutes les plages de couleur et donc tout votre calque.


    Sélectionnez le contour blanc du stickers (tolérance 30) :



    Puis, faites Suppr :



    Citation:
    Pour sélectionner plusieurs zones avec la baguette magique, gardez Maj enfoncé.
    Pour supprimer des zones avec la baguette magique, gardez Alt enfoncé.

    Maintenant nous allons dupliquer ce calque sur toute la page.

    Citation:
    Pour fusionner plusieurs calques ensemble, gardez CTRL enfoncé et selectionnez les calques dans la liste de calque. Faites clic droit sur un des calque sélectionné dans cette liste et choisissez "fusionner les calques".


    Citation:
    Dupliquez une fois le calque et décaler le nouveau calque, puis avec CTRL sélectionner les deux calques contenant les stickers. Fusionnez les, avec clic droit sur les calques dans la liste des calques. Renouvelez l'opération avec à chaque fois deux fois plus de logo dupliqués. (cette phrase n'a surement pas de sens...)

    Bref voila le résultat :


    On fait glisser ce calque 3 fois sur le fichier de notre skin. On les repositionnes avec CTRL+t.



    Maintenant on va découper ces calques avec les logos Cwest pour qu'ils n'apparaissent que sur les parties grises. Attention c'est sportif


    Sélectionnez un calque avec les parties grises (cotés et toit) dans la liste de calque. Avec l'outil "Baguette magique", sélectionnez la zone de vide autour de la forme grise. Une sélection va alors entourer la partie qui nous intéresse.



    Maintenant tout en gardant cette sélection on va sélectionner le calque avec les stickers Cwest qui se trouve au dessus de cette zone et faites Suppr.



    Renouvelez l'opération sur chaque partie grise.

    Résultat :


    Fusionnez les 3 calques avec les logos Cwest. Maintenant double cliquez dessus pour ouvrir le menu. Nous allons changer les options de fusion pour obtenir quelque chose de discret.

    Comme ça :


    ___________________________________________________________

    : Rendu IG à se stade :



    Citation:
    Cliquez pour télécharger le fichier psd à ce stade par Peper
    ___________________________________________________________

    : Sécurité Routière :

    Citation:
    Toutes les deux heures, une pause s'impose!

    On tiens le bon bout.

    ___________________________________________________________

    Partie III : Les Stickers :

    Maintenant quoi de plus simple pour vous que de venir apposer vos stickers sur cette base.

    Là encore dans le dossier stickers, je fais des sous-dossiers : Avant, Coté, Toit, Arr. (rien d'obligatoire bien sur mais il vaut mieux passé trois secondes à faire un dossier que perdre trois heures à chercher un maudit stickers au milieu d'une grosse liste de calque pas nommé^^).



    Et maintenant, on va placer nos stickers. Je vous laisse un peu chercher les stickers sur le net pour commencez à vous faire une banques de logo.

    Donc avec un peu de patience, on obtiens ça.




    Citation:
    Pour les derniers détails, placer des vis pour tenir les plaques carbons. Vous pouvez utilisez celle ci :


    Citation:
    Soyez vigilant aux volumes de la voiture. Dans notre cas, le bodykits de la mitsu est bombé sur les ailes arrières.

    Seulement nous travaillons en 2D nous. Donc pensez toujours que les stickers et peintures chevauchant les zones bombées/plates seront déformées.


    Citation:
    Pour faire des écritures avec effets, le plus simple est de se procurer des polices pour windows dans le style recherché.
    Je vous conseil ce site gratuit pour faire le plein de police.
    Pour installer une police dans windows, il vous suffit de télécharger une police sur un site, et de copier/coller le fichier police.ttf dans :
    C:\WINDOWS\Fonts
    Elles s'installeront automatiquement. Par contre, il faudra redémarrer photoshop pour qu'ils les prennent en compte.

    ___________________________________________________________

    Partie IV : La couche alpha :


    Cette couche n'est pas un calque à proprement parler. Il se trouve dans l'onglet "couches".



    Si il n'y a pas de couche Alpha, créez en une avec la petite icône, de la même manière que vous créez un calque. Cette couche se nommera Alpha01 par defaut.

    Citation:
    La couche Alpha donne des informations concernant la brillance de la texture à un endroit donné. Elle se dégrade du blanc (brillance forte) au noir (sans reflet)

    Dans notre cas nous allons simplement incrusté une couleur sombre


    A vous de faire des essaie pour comprendre la mécanique de la couche alpha et de vous en servir pour créer de la texture sur votre peinture...
    Je vous en dit pas plus.

    Et je dois quand même garder un peu de skill pour ma gueule
    .

    ___________________________________________________________

    Partie V : Direction les pistes :


    "Il est bien marrant le Peper avec toutes ces conneries, mais ça fait deux heures que je fait des calques et je sais toujours pas à quoi ça va ressembler dans mon jeu!!!"


    Bon, il est temps de voir le résultat de vos efforts. Réalisez une sauvegarde de votre fichier.psd.

    Nous allons maintenant compiler tous les calques qui nous intéresse. Pour cela n'oubliez pas de masquer le wire, au risque qu'il ne chevauche toute votre création...

    Citation:
    Cliquez pour télécharger le fichier psd à ce stade par Peper

    Faites un clique droit sur un des calques de la liste des calques et faites "aplatir l'image".





    On se retrouve avec un seul et unique calque, et un petit cadenas s'est affiché. Faites CTRL+Maj+s pour sauvegarder sous.

    Nommez le fichier "Diffuse" et sélectionnez dans la liste des extensions ".DDS", et enregistrez.



    Un menu s'ouvre :



    Faites les réglages comme indiqué : DTX 5 (interpolated alpha + generate mip maps)

    Il ne nous reste plus qu'à renommer le zip de la voiture et glisser notre fichier diffuse.dds dedans.

    Citation:
    Pour qu'un véhicules soit jouable dans tous les environnements, il faut les placer ici :
    C:\Documents and Settings\"Utilisateur"\Mes documents\TrackMania\Skins\Vehicles\CarCommon

    Citation:
    Pour avoir l'icône du véhicule, le plus simple est d'utiliser le jeu.

    Pour cela vous gardez une copie de votre skin.zip. Vous mettez l'autre dans le répertoire du jeu.
    Dans le jeu vous allez dans votre garage et sélectionner le modèle, puis peindre. L'éditeur va alors s'ouvrir. Vous sauvegardez votre travail sans y toucher.

    Le problème c'est que l'éditeur ne va pas seulement créer l'icone mais resizera aussi votre travail (le fichier diffuse.dds) en une qualité très décevante (1024*512
    ). La différence est flagrante.

    Donc, sortez du jeu, retournez dans votre répertoire /Carcommon, récupérez, dans le fichier skinmodifié.zip juste le fichier icon.dds. Et replacez le dans votre skin.zip que vous aviez mis de coté.

    Enfin replacez skin.zip dans votre répertoire de jeu.


    Bon ben je crois que c'est tout...


    Maintenant, vous êtes prêt pour faire tout se que vous passe par la tête.


    Une bonne partie de mon Skill est désormais entre vos mains. Faites en bonnes usages! Et partagés vos plus belles créations sur Carpark bien sûre!


    ENjoy!!!!

_________________
"Les bonnes idées n'ont pas d'âge, elles ont seulement de l'avenir."


Revenir en haut
Publicité






MessagePosté le: Dim 8 Aoû - 10:51 (2010)    Sujet du message: Publicité

PublicitéSupprimer les publicités ?
Revenir en haut
Black-Infinite
Invité

Hors ligne




MessagePosté le: Lun 9 Aoû - 15:25 (2010)    Sujet du message: Création d'un skin de A à Z Répondre en citant

Merci Bien pour ce tuto

Ca va servir a nombres de gens Smile

Ciao


Revenir en haut
[GM]SSW
Game Master

Hors ligne

Inscrit le: 16 Juil 2010
Messages: 51
Localisation: Brumath
Masculin Scorpion (23oct-21nov) 虎 Tigre
Point(s): 51
Moyenne de points: 1,00

MessagePosté le: Mar 10 Aoû - 21:40 (2010)    Sujet du message: Création d'un skin de A à Z Répondre en citant

Le but des tuto sur le forum est de pas a avoir a chercher un truc pendant une heure ^^
_________________
"Les bonnes idées n'ont pas d'âge, elles ont seulement de l'avenir."


Revenir en haut
Contenu Sponsorisé






MessagePosté le: Aujourd’hui à 03:37 (2017)    Sujet du message: Création d'un skin de A à Z

Revenir en haut
Montrer les messages depuis:   
Poster un nouveau sujet   Répondre au sujet    SkyShadow Index du Forum -> Les Tutoriaux (TM) -> Skins Toutes les heures sont au format GMT + 2 Heures
Page 1 sur 1

 
Sauter vers:  

Top 10 | Top 50 | Index | créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation <
Powered by phpBB © 2001, 2005 phpBB Group
Traduction par : phpBB-fr.com