La Communauté des Sources Libres

Créations de graphismes pour Slayers Online
 
-50%
Le deal à ne pas rater :
-50% Baskets Nike Air Huarache Runner
69.99 € 139.99 €
Voir le deal

 

 Tuto trace [en construction]

Aller en bas 
AuteurMessage
Bebert
Administrateur Principal
Administrateur Principal
Bebert


Nombre de messages : 2416
Guilde : Armee Royale

Tuto trace [en construction] Empty
MessageSujet: Tuto trace [en construction]   Tuto trace [en construction] Icon_minitimeVen 3 Jan 2020 - 0:20

Tuto trace [en construction] 200103121937517320


[1] Réaliser les mouvement d'attaques
C'est le pré requis pour faire des traces d'attaques parfaitement adaptée au mouvement de l'arme.

[2] Visualiser le point de départ et d'arrivée
Superposer la frame du mouvement final sur la frame du mouvement initial.
Afin de réaliser une trace ronde, j'utilise l'outil rond, présent des différents logiciels.
Il y a donc 1 pt de départ défini par des des coordonnées X1,Y1 et 1 pt d'arrivée X2,Y2
Réaliser le rond parfait nécessite donc 4 coordonnées pour "contraindre" le cercle.

Pour l'exemple, j'ajoute un px rose sur le milieu de l'arme (voire légèrement l'extérieur) pour bien repérer. Avec l'habitude, cela n'est pas nécessaire car se fait mentalement.

[3] Tracer un cercle
Si le logiciel utilisé peut générer des masques, il est préférable d'en créer un pour les tracés. (On le verra à l'étape [5].)
Généralement la trace est contrainte par le bord de la frame et par le sol. Cela défini 2 des 4 coordonnées.
Sélectionner l'outil rond avec une couleur bien distincte.
Cliquer sur le curseur en bas a gauche, au bord et au niveau des pieds et maintenir le clic enfoncé.
Monter le curseur dans le coin opposé, ici en haut à droite pour faire en sorte de passer dans les 2 points repérés en [2].

[4] Affiner la forme
Avec mon humble expérience, j'utilise la technique du "copier/annuler/coller".
Copie du cercle créé en [3] mais uniquement la partie à conserver.
Annulation du  rond réalisé.
Collage de l'arc de cercle qui m'intéresse.
Pour un néophyte, je conseille de supprimer les bouts en trop avec la gomme ou un crayon d'une autre couleur.
A ce niveau, vous avez fait le plus difficile, l'arrondi extérieur.
Il ne reste alors qu'à épaissir la forme intérieur. Perso j'aime les traces fines, d'autres les aiment grosses.
J'utilise 2 méthodes différentes et complémentaires.
Pour les traces fines, généralement je fais 2/3 px au départ de l'arme que j'affine manuellement au feeling. L'important est de ne pas déborder sur l'extérieur qui est le rond parfait.
Pour les traces épaisses, j'utilise un second rond; ex en [3 bis].
Cette méthode est un peu plus difficile car moins intuitive. Il est toujours possible de l'épaissir manuellement, comme pour les petites traces.
Copier/coller la partie intéressante en commençant par le bout de la trace car c'est l'endroit on les deux ronds se croisent.
Ensuite remplir la forme définie par l'intérieur des deux ronds, jusqu'à l'arme.

[5] Isoler la trace
Effacer tout ce qui n'est pas la trace car inutile.
Sur des logiciels comme paint, il faut effacer à la gomme ou écraser avec un crayon d'une autre couleur. C'est simple et basique.
Sur des logiciels comme photofiltre (gratuit) ou photoshop, il y a de multiples façons de travailler :
- travailler avec des masques, c'est ce que je recommande. Cela permet de glisser par dessus/dessous le skin facilement, déplacer la trace, la masquer, bref la travailler indépendamment du reste.
- sélectionner la couleur puis déplacer la forme à appliquer sur la frame d'attaques puis remplir la forme. (Nécessite d'être vigilant pour ne pas oublier quelques px.)
- sélectionner la zone de la frame puis remplacer chaque couleur différente de la trace par la couleur du fond.
- sauvegarder l'image puis sélectionner chaque couleur différente de la trace et la supprimer. Une fois la trace isolée, copier la et ouvrer la sauvegarde sans l'enregistrer puis coller la trace. (Nécessite d'être très attentif.)
Bref je recommande l'utilisation des masques pour l'agilité mais c'est pour un mode plus avancé qu'un outil comme paint qui fait tout de même le travail.
Bien conserver la forme sur une planche pour la suite, ne surtout pas l'écraser/l'effacer.

[6] Définir la texture et dégradés
C'est une question de créativité, laissez cour à votre imagination. Tracés de métal, d'or, de feuilles, de feu ou même de fumées, c'est très libre.
Ici, une trace de feu pour aller dans le thème démon réalisé à partir des copier/coller des flammes utilisés par la magie.
Conseil : attendez d'avoir toutes les attaques pour réaliser tous les dégradés en une seule fois afin d'éviter les incohérences. Rien n’empêche de tester la skin avec la trace couleur unie pour vérifier les mouvements d'attaques puis de faire les dégradés/textures une fois toutes les attaques et tracés unis testés satisfaisants.
De manière générale, refaire un dégradé à chaque frame risque d'utiliser de nouvelles couleurs donc d'avoir des couleurs proches mais pas strictement identiques. Cela va consommer des couleurs inutilement alors qu'on est limité à 256 en png 8 bits, seul format compatible chez SkinSo. Et chaque couleur compte si des fonctions avancées sont utilisées, notamment des copier/coller avec opacité sur les magies.

[7] Remise en forme
Comme c'est des c/c grossier, ça fait quelque chose de pas très régulier alors qu'on s'est donné du mal à faire une trace ronde.
2 techniques pour remettre la forme [5] sur la texture [6] :
Sous photofiltre/photoshop, utiliser la sélection par couleur sur [5], et déplacer la sélection sur [6] pour copier puis coller en [7].
Sous paint, sélectionner en clic droit la couleur de la trace. Copier la frame [5] puis coller la par dessus la frame[6] en mode transparence. Cela va donc écraser tout ce qui dépasse de la trame. Si vous souhaitez conserver [6] pour d'autres frames ou pour retoucher plus tard, copier la nouvelle frame, annuler le collage de [5] et coller en [7]
Vous obtenez ainsi une trace ronde avec la texture dessinée.

[8] Peaufiner les détails
Dans la continuité de la texture et dégradés, c'est ici aussi une question d'imagination.
Ici l'ajout de petites flammèches à côté pour pas rendre la flamme de tracé trop parfaite.
Et ce genre "d'éclaboussures" a un rendu dynamique et puissant. Garder en tête le sens du mouvement pour orienter les pixels qui partiraient vers l'extérieur.

[9] Intégrer le tracé
Copier votre tracé sur la frame d'attaque, ici la frame 2.
Bien faire attention à ce qui doit rester devant le personnage de ce qui doit rester derrière. Dans cet ex la trace passe derrière la tête. Copier les éléments hauts sans traces et coller sur [9] qui a les traces. Avec l'habitude des masques, j'ai un masque pour les traces devant et un masque pour les traces derrières. Il suffira d'effacer sur les masques les éléments en trop.
Voila la frame 2 finalisée !

[10] Faire disparaître la trace
Cela n'a rien d'obligatoire. Parfois, certains aiment avoir un effet de disparition progressive de la trace en frame 3 par rapport à la frame 2.
Copier [8] et coller en [10] puis effacer "aléatoirement".
Copier la frame 3 d'attaques en [11] et coller [10] par dessus, toujours en faisant attention à ce qui doit rester devant/derrière.


Profitez en pour montrer vos réalisations sur Discord Smile
Revenir en haut Aller en bas
http://www.slayersonline.info/communaute/profil.php?id=509150
Bebert
Administrateur Principal
Administrateur Principal
Bebert


Nombre de messages : 2416
Guilde : Armee Royale

Tuto trace [en construction] Empty
MessageSujet: Re: Tuto trace [en construction]   Tuto trace [en construction] Icon_minitimeSam 30 Déc 2023 - 21:08

Ce tutoriel est réalisé avec le freeware Photofiltre 7 mais les principes restent applicables avec n'importe quel logiciel de dessin.

Cette partie complète le précédent message et permet de faire des traces rondes typées "sang" mais le principe reste générique pour tout type de trace donc à adapter largement à tous les besoins.

  1. Réaliser un rond
    Créer un calque puis, avec l'outil sélection (icone flèche \ ellipse), faire un rond du point de départ au point d'arrivée de l'arme et le remplir de la couleur désirée, dans cet exemple un rouge :Tuto trace [en construction] Tutotr11
    Le but est que l'extérieur passe par les points de départs et d'arrivée.
    Ici l'ellipse fait 58px de haut par 32 de large car le mouvement est quasiment horizontal et très haut.
    Notes :
    - modifier la sélection jusqu'à temps de trouver, ca viendra avec la pratique !
    - il faut déborder sur les autres parties mais comme c'est un calque nous effacerons le surplus après.

  2. Réaliser un rond intérieur
    Réduire la taille de sélection de la hauteur et largeur souhaitée pour faire le cercle intérieur de la trame puis supprimer la sélection :
    Tuto trace [en construction] Tutotr13
    Ici l'ellipse "de suppression" perd 2px à droite et 12px en bas car je veux que le début de la trace fasse 2px de large et 12px à l'arrivée (car la tête de l'arme est très large) mais pour une fine lame il faut réduire de beaucoup moins (0 ou 1 px de large et 3 / 5 px de hauteur par ex).

  3. Ajuster la forme
    Après suppression de l'ellipse intérieure, il rester pas mal de zones inutiles donc il faut les supprimer manuellement :
    Tuto trace [en construction] Tutotr12
    Si besoin glisser le calque dans le bon ordre de l'arborescence et bien le nommer ; c'est important si besoin de faire des retouches par la suite Wink

  4. Aérer la trace type sang
    Avec l'outil aérographe, générer des px d'une autre couleur bien distincte qui sera supprimée, ici en vert fluo :
    Tuto trace [en construction] Tutotr16

  5. Nettoyer le sang
    Avec l'outil sélection par couleur et zéro tolérance, sélectionner la couleur à garder, ici le rouge :
    Tuto trace [en construction] Tutotr10
    Inverser la sélection (Ctrl+I) puis supprimer
    Cela va retirer tout ce qui n'est pas le rouge pur et donc nettoiera tout ce qui a été généré avec l'aérographe : voila du sang neuf !

  6. Dégrader les couleurs
    A titre perso, j'évite de consommer trop de couleurs donc j'essaie d'en garder que 3 pour les tracés d'attaque.
    La couleur actuelle est la couleur de base qui sera majoritaire.
    Sur la partie extérieure du cercle je remplace des px par une couleur plus claire et sur la partie intérieure par une couleur plus foncée.
    Tuto trace [en construction] Tutotr15


  7. Finitions
    Enfin, je fais les dernières retouches en mettant quelques px ici la. C'est super subjectif il faudra la aussi expérimenter !
    Tuto trace [en construction] Tutotr14


Et voila !
Revenir en haut Aller en bas
http://www.slayersonline.info/communaute/profil.php?id=509150
 
Tuto trace [en construction]
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Tuto
» tuto magie par...MOI
» Tuto sur la transpa
» Deuxieme tuto
» Tuto vêtements?

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
La Communauté des Sources Libres :: Vie du forum CSL :: Archives vie CSL :: Les tutoriaux-
Sauter vers: