Pokémon Script Project Index du Forum

S’enregistrer | Rechercher | Connexion
 Information des admins 
Si vous désirez parler de PSP ou obtenir du soutient là dessus, merci d'aller faire un tour sur https://pokemonworkshop.com/forum/index.php Imbécile heureux

[XY] Créer une worldmap
Aller à la page: 1, 2  >
 
Poster un nouveau sujet   Répondre au sujet    Pokémon Script Project Index du Forum -> Game Making -> Ressources graphiques -> Pokémon
Sujet précédent :: Sujet suivant   
Auteur Message
FinalArt
Membre


Inscrit le: 25 Nov 2009
Messages: 1 573
Graphiste & Développeur
Localisation: Où je me trouve actuellement
Masculin

MessagePosté le: Jeu 3 Oct - 19:25 (2013)    Sujet du message: [XY] Créer une worldmap

Préambule


Dans ce tuto, nous allons créer une worldmap dans le style des jeux Pokémon XY en se basant sur ce screen récemment leaké :



Le tuto est fait pour PhotoShop CS4-CS5-CS6-CC. Il est nécessaire de connaitre les bases de ce logiciel car je ne détaillerais pas les manipulations basiques. Il est possible de faire ce tutoriel sous Gimp, mais il faut s’adapter, notamment pour les options de fusion.


Etape 1 – Fond et esquisse


Créer un nouveau fichier de la taille que vous souhaitez (j’ai pris 800x800px) avec une résolution de 72 pixels/pouce, le mode RGB 8 bits et un fond transparent.

Renommez votre seul calque en « Mer », cela sera le fond. Remplissez-le avec l’outil pot de peinture avec la couleur « #377fa4 ». Créer un nouveau calque nommé « Brouillon » qui sera au-dessus du calque « Mer ».

Ce calque va permettre de créer une esquisse de votre future carte du monde. En vérifiant que vous avez sélectionné le calque « Brouillon », utilisez l’outil pinceau avec une épaisseur de 1px et une couleur rouge (il faut que cela ressorte sur du bleu). Ceci est vraiment une étape de croquis et sert à bien structurer votre map. Vous pouvez effacer en utilisant la gomme. Il est inutile de remplir.



Etape 2 – Création de couches


Nous allons créer les différentes couches composant notre map, en vectoriel. Créer un nouveau calque « Terre » et placer le entre « Mer » et « Brouillon ». Dans un premier temps, nous allons faire la terre ferme, celle qui dépasse de l’eau, en nous aidant de notre croquis. Pour ce faire, nous allons utiliser l’outil Plume Libre qui permettra de créer une forme vectorielle. Vérifiez bien que vous êtes en mode « Tracé » dans le menu déroulant en haut. Repassez sur votre croquis, de manière appliquée, en pensant à faire des décrochés, des irrégularités, etc… Pour fermer un tracé (genre pour une île), il faut se positionner sur le point de départ jusqu’à ce qu’apparaisse un petit rond à côté de votre curseur. Vous pouvez créer autant de tracés que vous souhaitez (pour plusieurs îles), mais veillez à rester dans le même calque.



Puis, une fois tous les tracés terminés, cliquez sur le bouton « Forme » de la zone « Créer » en haut. Dans le menu déroulant du haut, sélectionnez « Forme » pour passer en mode Forme et ainsi modifier quelques paramètres. Mettez un fond de la couleur « #8fcab1 », mettez aucun contour (le rectangle avec une barre rouge). Pour désélectionner la forme, cliquez sur l’outil « Sélection de tracé » (le curseur noir dans la barre d’outils) et cliquez sur le fond hors de l’image.



Pour créer les autres couches (zones de forêt, vallées, montagnes, champs…), vous devez recréer à chaque fois un calque, le placer au-dessus du précédent, [utilisez un nouveau calque pour le croquis si besoin] et renouvelez chaque tâche depuis l’utilisation de la Plume Libre. Donnez des noms explicites ! N’oubliez pas que vous pouvez cacher les calques croquis. Personnellement, j’ai fait 4 couches : Terre (#8fcab1), Forêt (#6eae96), Montagne (#838959), Cime (#706136).



Etape 3 – Un peu de relief !


Nous allons créer la transition entre l’eau et la terre ferme. Nous allons utiliser les « Options de Fusion », un outil extrêmement pratique. Faites un clic droit sur le calque « Terre », puis « Options de Fusion ». Cochez et renseignez les options « Biseautage & Estampage » et « Lueur Externe » grâce aux screens suivants.




Pour le calque « Forêt », faites pareil, mais avec quelques petits changements précisés ci-dessous.




Enfin, pour les calques « Montagne » et « Cime », réglez les options « Biseautage &Estampage », « Ombre interne » et « Lueur Externe » comme suit.





Vous pouvez modifier les options selon vos goûts, personnellement, cela me donne ça :



Etape 4 – Disposition des endroits


A ce stade, nous allons réaliser le mapping à proprement dit. Réfléchissez préalablement à la disposition de vos villes et lieux. Créer un nouveau dossier (et non calque, l’icone est juste à côté de création de calque) et nommé le Blanc. Cliquez-dessus, puis créer un nouveau calque nommé Ronds. Ce calque va servir à créer les ronds pour indiquer un endroit. Cliquez sur l’outil création de forme, sélectionnez Ellipse et choisissez la couleur « #e6e6e6 » comme fond. Je vous conseille de cliquer sur le petit rouage en haut, et de définir une taille fixe pour le rond que vous allez créer. J’ai utilisé une taille de 12x12px pour un Lieu, 16x16px pour un Village/une Ville, 32x32px pour la Capitale. ATTENTION, veuillez à utiliser le mode « Associer des formes » après avoir tracé votre premier rond, afin que tous ceux qui suivent soient dans le même calque. Vous trouverez cette option toujours dans la barre d’options en haut, juste après l’option « hauteur », c’est généralement un carré vu de haut. Si vous n’êtes pas content de la disposition ou si vous voulez supprimer un seul tracé, utilisez l’outil Sélection de Forme (le curseur noir) situé dans la barre d’outils. Appliquez l’option de fusion suivante à votre calque « Ronds » (la couleur utilisée est « #333333 »).



Etape 5 – Création des routes


Maintenant il faut créer des routes. Créez un nouveau calque « Traits », juste au-dessus de « Ronds », toujours dans le dossier « Blanc ». Munissez-vous de l’outil Création de forme de type trait. Le fond doit être aussi « #e6e6e6 », aucun contour et une épaisseur de 3px. Relier les points selon vos désirs, mais faites attention à ce que vos points de départ et d’arrivée soit bien au centre de chaque cercle. Faites également attention à l’activation du mode « Associer des formes », pour les même raisons qu’avec les ronds. Si vous souhaitez faire une ligne en pointillée, il faudra le faire dans un second calque puisque vous ne pouvez spécifiez qu’un style de trait par calque (ici un trait plein). Donc, dans un autre calque, genre « Pointillés », toujours avec l’outil forme de trait, sélectionnez le menu déroulant en haut (où un trait est dessiné), puis sélectionnez ce dont vous avez besoin.




Il faut désormais créer une ombre sous les routes. Dupliquez votre calque (ou les deux si vous en avez fait un « Pointillés ») en le sélectionnant et en faisant la combinaison « CTRL+J ». Placer la copie (ou les 2 copies) sous le dossier « Blanc », mais sans que cela soit dedans. Renommez ce (ou ces) calque en « Ombre ». Appliquez l’option de fusion suivante à ce calque (et au deuxième si existant) :



Un dossier peut également supporter les options de fusion. Ainsi, appliquez au dossier « Blanc » l'option de fusion suivante :



Voici ce que cela me donne :



Etape 6 – Lignes Sticky (facultative)


Sur l’unique screenshoot (actuellement) de XY, on peut voir que les routes ne sont pas vraiment des lignes, mais plutôt des espèces matière collante, plus grosse aux endroits où elle est attachés (dans le genre colle liquide ou toile d’araignée). Je vous propose de refaire ce style, mais il ne faut pas être un débutant.

Sélectionnez le calque « Traits » dans le dossier « Blanc ». Zoomez sur un trait. Le but est d’ajouter deux points d’ancrage sur chaque côté du trait, au milieu de ce dernier. Clic droit sur l’outil Plume, puis sur « Outil Ajout Point d’ancrage ». Ajoutez comme ci-dessous :



En prenant garde à ce qu’aucun tracé ne soit sélectionné (hormis un contour fin, il ne faut pas qu’il y est de carrés avec un fond noir aux angles), faites un clic droit sur l’outil de Sélection de Tracés (le curseur noir) et cliquez sur Sélection directe. Cela va nous permettre de déplacer chaque petit carré. Je vous conseille de placer les extrémités sur les axes verticaux et horizontaux du rond dédié, à 2 pixels du contour noir. Faites pareil de l’autre côté, puis désélectionnez votre tracé en cliquant sur le fond noir de photoshop (derrière l’image).



Si le cœur vous en dit, faites-le sur toutes les routes ! Voici mon résultat :



Etape 7 – Ajout des détails


Il faut ajouter un double cercle autour des villes, pour signifier de leur état. Pour cela, créez un nouveau calque « Cercles » sous le (ou les) calque(s) « Ombre, sélectionnez l’outil Forme Ellipse, prenez un fond transparent (le rectangle barré avec du rouge), et du « #333333 » pour un contour de 1pt, avec l’option sur le petit engrenage en mode « Libre ». Autour de chaque ville tracez ce cercle de façon à ce qu’entre votre tracé et le contour noir du rond il y est 3 px (puis qui vont devenir 2px quand votre tracé se transforme en forme). N’oubliez pas le « Associer les Formes ».



Enfin, placez-vous dans le dossier « Blanc », mais le plus haut possible, afin de coller les 3 images ci-dessous au centre de chaque endroit. Le cercle orange est à mettre sur les Lieux, le cercle blanc sur une Ville/un Village et la pokéball sur la Capitale.



Et c’est fini !



Conclusion


Ainsi, vous savez maintenant faire une worldmap dans le style des jeux Pokémon XY. Par contre, il faut absolument faire mieux que moi pour le fond, notamment pour le tracé des couches : je n’avais pas de souris et un touchpad n’est pas très précis. Adaptez également ce tuto pour créer des worldmaps originales ! (Et désolé pour les fautes, mais je n’ai pas le temps de tout relire actuellement). Partagez vos créations !
Les membres suivants remercient FinalArt pour ce message :
Girakoth (03/10/13), Mathius.67 (04/10/13), Neos (04/10/13)
Revenir en haut
Publicité






MessagePosté le: Jeu 3 Oct - 19:25 (2013)    Sujet du message: Publicité

PublicitéSupprimer les publicités ?
Revenir en haut
Girakoth
Membre


Inscrit le: 13 Mar 2011
Messages: 1 834
Masculin

MessagePosté le: Jeu 3 Oct - 19:35 (2013)    Sujet du message: [XY] Créer une worldmap

Ah cool, faudra que j'essaie juste pour m'amuser, merci ^^
Revenir en haut
Skype Twitter
Sangana
Animateur
Animateur


Inscrit le: 14 Fév 2010
Messages: 3 544
Capitaine Shinigami
Localisation: ??? dans le monde
Masculin
ID Steam: Sangana
Nintendo Network: Sangana

MessagePosté le: Jeu 3 Oct - 19:36 (2013)    Sujet du message: [XY] Créer une worldmap

Ah ouai joli,
Très bien fait ce tuto =o
Revenir en haut
Skype
TouzaxA
Membre


Inscrit le: 27 Juil 2012
Messages: 2 669

MessagePosté le: Jeu 3 Oct - 19:43 (2013)    Sujet du message: [XY] Créer une worldmap

Très sympa de ta part, ce partage. Imbécile heureux
Revenir en haut
Girakoth
Membre


Inscrit le: 13 Mar 2011
Messages: 1 834
Masculin

MessagePosté le: Jeu 3 Oct - 23:14 (2013)    Sujet du message: [XY] Créer une worldmap

Voilà, j'ai enfin fini:


Le rendu est bien, mais j'ai quelques remarques:
-J'ai pas mis les cercles extérieurs, j'y arrivais pas mais peut être que je ré-essaierai
-Tu devrais plus expliquer pour l'outil tracé, j'ai mis un moment pour comprendre tout son fonctionnement
-J'ai rien compris aux pointillés, du coup je suis passé par une brosse pointillé ce qui m'a empêché de faire l'effet "sticky" sur les routes marines. Les pointillés que me faisaient l'outil ligne étaient tout bizarres.
-Globalement, certaines commandes nécessitent des images, pour certaines j'ai eu du mal à les trouver

PS: La map que j'ai faite est Sabaki dans mon projet.
Revenir en haut
Skype Twitter
og_loc-TATOO
Membre


Inscrit le: 11 Oct 2009
Messages: 3 383
Sailor Maniac
Localisation: noitasilacol

MessagePosté le: Jeu 3 Oct - 23:43 (2013)    Sujet du message: [XY] Créer une worldmap

FinalArt a écrit:
Il est nécessaire de connaitre les bases de ce logiciel car je ne détaillerais pas les manipulations basiques.


Tout est dit x')
Revenir en haut
Voltix
Membre


Inscrit le: 10 Aoû 2013
Messages: 70
Localisation: Derrière-toi
Masculin

MessagePosté le: Ven 4 Oct - 18:08 (2013)    Sujet du message: [XY] Créer une worldmap

Super ce tuto! Merci beaucoup!
Revenir en haut
FinalArt
Membre


Inscrit le: 25 Nov 2009
Messages: 1 573
Graphiste & Développeur
Localisation: Où je me trouve actuellement
Masculin

MessagePosté le: Sam 5 Oct - 08:35 (2013)    Sujet du message: [XY] Créer une worldmap

Merci pour ces retours positifs !

Concernant la localisation d'outils et l'utilisation de ces derniers, j'ai vraiment expliqué les plus "compliqués", j'estime que les autres sont déjà connus pour quelqu'un qui souhaite faire du graphisme. =)

Pour les cercles entourant les villes, il suffit juste de ce placer dans un calque sous celui des villes, de mettre aucun fond à la forme et mettre un contour : cela donnera un cercle !
Revenir en haut
HL.Production
Membre


Inscrit le: 18 Aoû 2012
Messages: 191

MessagePosté le: Lun 7 Oct - 20:41 (2013)    Sujet du message: [XY] Créer une worldmap

C'est super bien réalisé Bravo, dommage que c'est réalisable qu'avec PhotoShop :/ !
Revenir en haut
Skype
TouzaxA
Membre


Inscrit le: 27 Juil 2012
Messages: 2 669

MessagePosté le: Mar 8 Oct - 06:34 (2013)    Sujet du message: [XY] Créer une worldmap

Bof. On doit pouvoir s'arranger pour faire la même avec Gimp. Les deux logiciels ne sont pas si différents. Imbécile heureux
Revenir en haut
og_loc-TATOO
Membre


Inscrit le: 11 Oct 2009
Messages: 3 383
Sailor Maniac
Localisation: noitasilacol

MessagePosté le: Mar 8 Oct - 10:36 (2013)    Sujet du message: [XY] Créer une worldmap

TouzaxA a écrit:
Bof. On doit pouvoir s'arranger pour faire la même avec Gimp. Les deux logiciels ne sont pas si différents. Imbécile heureux


A quelques plusieurs mais vraiment plusieurs outil près Gros matou qui ronronne
Revenir en haut
TouzaxA
Membre


Inscrit le: 27 Juil 2012
Messages: 2 669

MessagePosté le: Mar 8 Oct - 18:00 (2013)    Sujet du message: [XY] Créer une worldmap

og_loc-TATOO a écrit:
TouzaxA a écrit:
Bof. On doit pouvoir s'arranger pour faire la même avec Gimp. Les deux logiciels ne sont pas si différents. Imbécile heureux


A quelques plusieurs mais vraiment plusieurs outil près Gros matou qui ronronne


Avec le système de plugin de Gimp, et en utilisant d'autres logiciels complémentaires, on peut s'arranger. Imbécile heureux
Revenir en haut
Sansonic
Membre


Inscrit le: 04 Mar 2009
Messages: 587
Masculin

MessagePosté le: Mar 8 Oct - 18:10 (2013)    Sujet du message: [XY] Créer une worldmap

og_loc-TATOO a écrit:
TouzaxA a écrit:
Bof. On doit pouvoir s'arranger pour faire la même avec Gimp. Les deux logiciels ne sont pas si différents. 


A quelques plusieurs mais vraiment plusieurs outil près Gros matou qui ronronne



J'ai réussi à faire l'équivalent sous Paint.NET, alors sous GIMP je pense que c'est largement possible.
Revenir en haut
Visiter le site web du posteur
Gold
Invité





MessagePosté le: Jeu 10 Oct - 22:28 (2013)    Sujet du message: [XY] Créer une worldmap

Au pire y a moyen de choper Photoshop CS 2 gratuitement.
Revenir en haut
og_loc-TATOO
Membre


Inscrit le: 11 Oct 2009
Messages: 3 383
Sailor Maniac
Localisation: noitasilacol

MessagePosté le: Jeu 10 Oct - 23:11 (2013)    Sujet du message: [XY] Créer une worldmap

Gold a écrit:
Au pire y a moyen de choper Photoshop CS 2 gratuitement.


Même le 3, le 4, le 5, le 6 x')
Revenir en haut
Contenu Sponsorisé






MessagePosté le: Aujourd’hui à 01:59 (2017)    Sujet du message: [XY] Créer une worldmap

Revenir en haut
Montrer les messages depuis:   
Poster un nouveau sujet   Répondre au sujet    Pokémon Script Project Index du Forum -> Game Making -> Ressources graphiques -> Pokémon Toutes les heures sont au format GMT + 1 Heure
Aller à la page: 1, 2  >
Page 1 sur 2

 
Sauter vers:  

Index | Creer 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
Thème par Thomas et l'équipe de la refonte PSP 2012 (version 1.0)
Traduction par : phpBB-fr.com