Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Infographie
Tutoriel - Création d'un passeport pour votre signature
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="Paul GTP" data-source="post: 6894794" data-attributes="member: 315249"><p style="text-align: center"><img src="http://image.prntscr.com/image/d46f8115f9e84738bf34bc1a7c640195.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Salut à tous <img src="/data/assets/smilies/joueur.gif" class="smilie" loading="lazy" alt=":p" title="Joueur :p" data-shortname=":p" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Aujourd'hui on se retrouve pour un petit <strong><span style="color: #ff8000">tutoriel de Graphisme</span></strong> !</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Bon, cela va vous paraître bizarre mais ce tutoriel se déroulera pour ma part... sur <strong><span style="color: #ff8000">Photofiltre</span></strong> !</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Vous pouvez le réaliser sur <strong><span style="color: #ff8000">Photoshop</span></strong>, mais personnellement, je ne l'utilise pas <img src="/data/assets/smilies/espion.gif" class="smilie" loading="lazy" alt=":espion:" title="Espion :espion:" data-shortname=":espion:" /> </span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">En effet, simple débutant, je me débrouille mieux avec ce logiciel que j'utilise depuis 7/8 ans <img src="/data/assets/smilies/mmh.gif" class="smilie" loading="lazy" alt=":mmh:" title="Mmh :mmh:" data-shortname=":mmh:" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Je vous fait ce tutoriel aujourd'hui car j'ai retrouvé <strong><span style="color: #ff8000">une vieille image</span></strong> sur mon PC.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Sur un forum où j'étais, ce type de signatures <strong><span style="color: #ff8000">« les passeports »</span></strong> étaient très à la mode <img src="/data/assets/smilies/joueur.gif" class="smilie" loading="lazy" alt=":p" title="Joueur :p" data-shortname=":p" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><u>On va se servir d'un modèle que j'avais fait il y a 3 ans et peaufiner l'idée. Voici un aperçu:</u></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="http://image.prntscr.com/image/98013e6787b54296a7b93e645668774c.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="http://image.prntscr.com/image/4fc4e31d4b3445ac98bd1006d069fd97.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"><span style="font-size: 26px"><span style="color: #ff8000">[FA]fa-photo[/FA] Créer votre passeport</span></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Dans ce topic, je vais vous apprendre <strong><span style="color: #ff8000">à créer votre passeport tout seul</span></strong>...</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Je voulais vous donner <strong><span style="color: #ff8000">une version modifiable en téléchargement</span></strong>...</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Mais j'ai accidentellement tout supprimer sans faire de sauvegarde :rofl:</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">De toute façon, vous pouvez clairement améliorer <strong><span style="color: #ff8000">le côté esthétique</span></strong>.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><u>Je lance le concept, à vous de développer l'idée</u> <img src="/data/assets/smilies/love.gif" class="smilie" loading="lazy" alt=":love:" title="Love :love:" data-shortname=":love:" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="http://image.prntscr.com/image/6427c7f6bf4142e091a1b59fbe95792b.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 18px"><span style="color: #ff8000">Étape 1: Création de la base</span></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Pour faire <strong><span style="color: #ff8000">votre passeport</span></strong>, nous allons créer une image de <strong><span style="color: #ff8000">500px de largeur et 230px de hauteur</span></strong>.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Nous allons ensuite tout simplement faire <strong><span style="color: #ff8000">un contour noir</span></strong> avec <strong><span style="color: #ff8000">les bords arrondis</span></strong> et laisser la page blanche.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Coloriez le fond dans une couleur que vous n'utiliserez pas (on s'en servira pour mettre de la transparence).</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="http://image.prntscr.com/image/4c1f5632b4224c5fa75c886b10bf65fe.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Bon, jusque là, vous n'êtes pas <strong><span style="color: #ff8000">des déficients mentaux</span></strong>, vous devriez avoir réussi <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite375" alt=":trollface:" title="Trollface :trollface:" loading="lazy" data-shortname=":trollface:" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Si ce n'est pas le cas (et alors là c'est vraiment triste) vous pouvez copier l'image ci-dessus <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Vous allez ensuite devoir choisir <strong><span style="color: #ff8000">une couleur de fond</span></strong>.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Cela peut être une étape compliquée (couleur trop flashy, trop fade, etc...).</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Je vous renvoie donc vers le site <a href="https://flatuicolors.com/" target="_blank"><span style="color: #ff8000">Flat UI Colors</span></a>, qui vous permettra de choisir une jolie couleur.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><span style="color: #ff8000">[FA]fa-link[/FA] <a href="https://flatuicolors.com/" target="_blank"><span style="color: #ff8000">https://flatuicolors.com/</span></a></span></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Fier membre de la <strong><span style="color: #ff8000">GTP</span></strong> et en cette période d'<strong><span style="color: #ff8000">Halloween</span></strong>, je vais me servir de la couleur <strong><span style="color: #ff8000">orange Pumpkin</span></strong> !</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Vous allez donc simplement choisir une couleur et remplir <strong><span style="color: #ff8000">votre cadre blanc</span></strong> avec.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Vous allez donc prendre <strong><span style="color: #ff8000">un screen</span></strong> de la page Flat UI Colors et la mettre sur Photofiltre.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Ensuite, vous allez <strong><span style="color: #ff8000">sélectionner la couleur</span></strong> qui vous plaît en faisant <strong><span style="color: #ff8000">Ctrl + Clique gauche</span></strong> !</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="http://image.prntscr.com/image/d4ab4a9809094c17a484fe78d51528ad.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Bravo... Vous avez terminé le <s>passeport</s> début ! <img src="/images/smiley-pack/oui.gif" class="smilie" loading="lazy" alt=":oui:" title="Oui :oui:" data-shortname=":oui:" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="http://image.prntscr.com/image/6427c7f6bf4142e091a1b59fbe95792b.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 18px"><span style="color: #ff8000">Étape 2: Création de la « member card »</span></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Nous allons ici créer et positionner <strong><span style="color: #ff8000">une member card</span></strong> sur la gauche du passeport.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Comme sur une pièce d'identité, cela servira comme pour la photo, un moyen de vous reconnaître <img src="/data/assets/smilies/joueur.gif" class="smilie" loading="lazy" alt=":p" title="Joueur :p" data-shortname=":p" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><u>Comme vos messages/appréciations/points changent constamment, on va minimiser les informations !</u></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Nous allons donc recréer <strong><span style="color: #ff8000">une member card</span></strong> similaire à celle de RealityGaming...</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Pour cette étape je laisse libre court à votre imagination.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Personnellement, j'obtiens quelque chose comme ça (vous pouvez copier le modèle):</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="http://image.prntscr.com/image/cdbc1041547444ef9d28a3fe88478db8.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Nous allons donc l'ajouter à notre passeport...</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Il doit y avoir une marge <strong><span style="color: #ff8000">de 30px sur la gauche</span></strong> et être <strong><span style="color: #ff8000">centré verticalement</span></strong> !</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="http://image.prntscr.com/image/b41362fae3fa459a9a763d9fcfc173c4.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="http://image.prntscr.com/image/6427c7f6bf4142e091a1b59fbe95792b.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 18px"><span style="color: #ff8000">Étape 3: Création des boxs (boîtes)</span></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Bon, c'est un peu vide pour un passeport, vous ne trouvez pas ? <img src="/data/assets/smilies/joueur.gif" class="smilie" loading="lazy" alt=":p" title="Joueur :p" data-shortname=":p" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Nous allons donc pouvoir rajouter <strong><span style="color: #ff8000">des informations basiques</span></strong> telles que: Pseudo, Team, etc.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Ce que vous souhaitez mettre comme informations va dépendre de vous...</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Pour les boxs, ça sera à vous de choisir <strong><span style="color: #ff8000">le style</span></strong> et <strong><span style="color: #ff8000">la taille</span></strong>.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Voici ce que ça donnerait par exemple:</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="http://image.prntscr.com/image/87638534d9594130952e14a53f9620f3.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Après ce n'est qu'un exemple, vous pouvez très bien faire 1 seule, 3, ou 5 boxs !</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">De plus, libre à vous de les remplir comme vous le souhaiter !</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="color: #0059b3"><span style="font-size: 12px"><strong>[FA]fa-info-circle[/FA] INFO: Je vous conseille la police d'écriture Open Sans pour vos boxs, c'est celle utilisée par RG.</strong></span></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="http://image.prntscr.com/image/6427c7f6bf4142e091a1b59fbe95792b.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 18px"><span style="color: #ff8000">Étape 4: Finitions</span></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Il vous suffira désormais <strong><span style="color: #ff8000">d'écrire du texte dans vos boxs</span></strong> et <strong><span style="color: #ff8000">de rajouter la transparence</span></strong>.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Voici 2 exemples de ce que ça pourrait donner avec la <strong><span style="color: #ff8000">GTP</span></strong> et la <strong><span style="color: #0059b3">SEC</span></strong> <img src="/data/assets/smilies/joueur.gif" class="smilie" loading="lazy" alt=":p" title="Joueur :p" data-shortname=":p" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">(je vous concède que ça n'est pas très esthétique, mais ce sont des exemples)</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="http://image.prntscr.com/image/2e1cc04a4ad84941a7cf368af12d8a7d.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="http://image.prntscr.com/image/130f5ec089434772bc6f524d179acf41.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="http://image.prntscr.com/image/4fc4e31d4b3445ac98bd1006d069fd97.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><span style="font-family: 'MyriadPro'"><span style="font-size: 26px"><span style="color: #ff8000">[FA]fa-link[/FA] Téléchargez votre passeport</span></span></span></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Voici un lien pour télécharger les templates en <strong><span style="color: #ff8000">.pfi</span></strong> (modifiable sous photofiltre)</span></span></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><strong><span style="color: #ff0000">[FA]fa-link[/FA] Version rouge:</span></strong> xxx</span></span></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><strong><span style="color: #00b300">[FA]fa-link[/FA] Version verte:</span></strong> xxx</span></span></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><strong><span style="color: #0059b3">[FA]fa-link[/FA] Version bleue:</span></strong> xxx</span></span></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><strong><span style="color: #ff8000">[FA]fa-link[/FA] Version orange:</span></strong> xxx</span></span></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="http://image.prntscr.com/image/4fc4e31d4b3445ac98bd1006d069fd97.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Voilà ! J'espère que ce tutoriel vous aura plu <img src="/data/assets/smilies/joueur.gif" class="smilie" loading="lazy" alt=":p" title="Joueur :p" data-shortname=":p" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Je vous l'accorde, <strong><span style="color: #ff8000">ce n'est pas très jolie</span></strong>...</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Je compte donc sur vous <strong><span style="color: #ff8000">pour améliorer le concept</span></strong> pour que ça soit plus esthétique !</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Partagez vos psd/créations dans l'espace commentaire ! <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite171" alt=":D" title="Awesome face :D" loading="lazy" data-shortname=":D" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><span style="font-family: 'Convergence'"><span style="font-size: 12px">À bientôt ! <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite171" alt=":D" title="Awesome face :D" loading="lazy" data-shortname=":D" /></span></span></span></span></p></blockquote><p></p>
[QUOTE="Paul GTP, post: 6894794, member: 315249"] [CENTER][IMG]http://image.prntscr.com/image/d46f8115f9e84738bf34bc1a7c640195.png[/IMG] [FONT=Convergence][SIZE=3] Salut à tous :p Aujourd'hui on se retrouve pour un petit [B][COLOR=#ff8000]tutoriel de Graphisme[/COLOR][/B] ! Bon, cela va vous paraître bizarre mais ce tutoriel se déroulera pour ma part... sur [B][COLOR=#ff8000]Photofiltre[/COLOR][/B] ! Vous pouvez le réaliser sur [B][COLOR=#ff8000]Photoshop[/COLOR][/B], mais personnellement, je ne l'utilise pas :espion: En effet, simple débutant, je me débrouille mieux avec ce logiciel que j'utilise depuis 7/8 ans :mmh: Je vous fait ce tutoriel aujourd'hui car j'ai retrouvé [B][COLOR=#ff8000]une vieille image[/COLOR][/B] sur mon PC. Sur un forum où j'étais, ce type de signatures [B][COLOR=#ff8000]« les passeports »[/COLOR][/B] étaient très à la mode :p [U]On va se servir d'un modèle que j'avais fait il y a 3 ans et peaufiner l'idée. Voici un aperçu:[/U] [IMG]http://image.prntscr.com/image/98013e6787b54296a7b93e645668774c.png[/IMG] [IMG]http://image.prntscr.com/image/4fc4e31d4b3445ac98bd1006d069fd97.png[/IMG] [/SIZE][/FONT] [FONT=MyriadPro][SIZE=7][COLOR=#ff8000][FA]fa-photo[/FA] Créer votre passeport[/COLOR][/SIZE][/FONT] [FONT=Convergence][SIZE=3] Dans ce topic, je vais vous apprendre [B][COLOR=#ff8000]à créer votre passeport tout seul[/COLOR][/B]... Je voulais vous donner [B][COLOR=#ff8000]une version modifiable en téléchargement[/COLOR][/B]... Mais j'ai accidentellement tout supprimer sans faire de sauvegarde :rofl: De toute façon, vous pouvez clairement améliorer [B][COLOR=#ff8000]le côté esthétique[/COLOR][/B]. [U]Je lance le concept, à vous de développer l'idée[/U] :love: [IMG]http://image.prntscr.com/image/6427c7f6bf4142e091a1b59fbe95792b.png[/IMG] [/SIZE] [SIZE=5][COLOR=#ff8000]Étape 1: Création de la base[/COLOR][/SIZE] [SIZE=3] Pour faire [B][COLOR=#ff8000]votre passeport[/COLOR][/B], nous allons créer une image de [B][COLOR=#ff8000]500px de largeur et 230px de hauteur[/COLOR][/B]. Nous allons ensuite tout simplement faire [B][COLOR=#ff8000]un contour noir[/COLOR][/B] avec [B][COLOR=#ff8000]les bords arrondis[/COLOR][/B] et laisser la page blanche. Coloriez le fond dans une couleur que vous n'utiliserez pas (on s'en servira pour mettre de la transparence). [IMG]http://image.prntscr.com/image/4c1f5632b4224c5fa75c886b10bf65fe.png[/IMG] Bon, jusque là, vous n'êtes pas [B][COLOR=#ff8000]des déficients mentaux[/COLOR][/B], vous devriez avoir réussi :troll: Si ce n'est pas le cas (et alors là c'est vraiment triste) vous pouvez copier l'image ci-dessus :) Vous allez ensuite devoir choisir [B][COLOR=#ff8000]une couleur de fond[/COLOR][/B]. Cela peut être une étape compliquée (couleur trop flashy, trop fade, etc...). Je vous renvoie donc vers le site [URL='https://flatuicolors.com/'][COLOR=#ff8000]Flat UI Colors[/COLOR][/URL], qui vous permettra de choisir une jolie couleur. [COLOR=#ff8000][FA]fa-link[/FA] [URL='https://flatuicolors.com/'][COLOR=#ff8000]https://flatuicolors.com/[/COLOR][/URL][/COLOR] Fier membre de la [B][COLOR=#ff8000]GTP[/COLOR][/B] et en cette période d'[B][COLOR=#ff8000]Halloween[/COLOR][/B], je vais me servir de la couleur [B][COLOR=#ff8000]orange Pumpkin[/COLOR][/B] ! Vous allez donc simplement choisir une couleur et remplir [B][COLOR=#ff8000]votre cadre blanc[/COLOR][/B] avec. Vous allez donc prendre [B][COLOR=#ff8000]un screen[/COLOR][/B] de la page Flat UI Colors et la mettre sur Photofiltre. Ensuite, vous allez [B][COLOR=#ff8000]sélectionner la couleur[/COLOR][/B] qui vous plaît en faisant [B][COLOR=#ff8000]Ctrl + Clique gauche[/COLOR][/B] ! [IMG]http://image.prntscr.com/image/d4ab4a9809094c17a484fe78d51528ad.png[/IMG] Bravo... Vous avez terminé le [S]passeport[/S] début ! :oui: [IMG]http://image.prntscr.com/image/6427c7f6bf4142e091a1b59fbe95792b.png[/IMG] [/SIZE] [SIZE=5][COLOR=#ff8000]Étape 2: Création de la « member card »[/COLOR][/SIZE] [SIZE=3] Nous allons ici créer et positionner [B][COLOR=#ff8000]une member card[/COLOR][/B] sur la gauche du passeport. Comme sur une pièce d'identité, cela servira comme pour la photo, un moyen de vous reconnaître :p [U]Comme vos messages/appréciations/points changent constamment, on va minimiser les informations ![/U] Nous allons donc recréer [B][COLOR=#ff8000]une member card[/COLOR][/B] similaire à celle de RealityGaming... Pour cette étape je laisse libre court à votre imagination. Personnellement, j'obtiens quelque chose comme ça (vous pouvez copier le modèle): [IMG]http://image.prntscr.com/image/cdbc1041547444ef9d28a3fe88478db8.png[/IMG] Nous allons donc l'ajouter à notre passeport... Il doit y avoir une marge [B][COLOR=#ff8000]de 30px sur la gauche[/COLOR][/B] et être [B][COLOR=#ff8000]centré verticalement[/COLOR][/B] ! [IMG]http://image.prntscr.com/image/b41362fae3fa459a9a763d9fcfc173c4.png[/IMG] [IMG]http://image.prntscr.com/image/6427c7f6bf4142e091a1b59fbe95792b.png[/IMG] [/SIZE] [SIZE=5][COLOR=#ff8000]Étape 3: Création des boxs (boîtes)[/COLOR][/SIZE] [SIZE=3] Bon, c'est un peu vide pour un passeport, vous ne trouvez pas ? :p Nous allons donc pouvoir rajouter [B][COLOR=#ff8000]des informations basiques[/COLOR][/B] telles que: Pseudo, Team, etc. Ce que vous souhaitez mettre comme informations va dépendre de vous... Pour les boxs, ça sera à vous de choisir [B][COLOR=#ff8000]le style[/COLOR][/B] et [B][COLOR=#ff8000]la taille[/COLOR][/B]. Voici ce que ça donnerait par exemple: [IMG]http://image.prntscr.com/image/87638534d9594130952e14a53f9620f3.png[/IMG] Après ce n'est qu'un exemple, vous pouvez très bien faire 1 seule, 3, ou 5 boxs ! De plus, libre à vous de les remplir comme vous le souhaiter ! [/SIZE] [COLOR=#0059b3][SIZE=3][B][FA]fa-info-circle[/FA] INFO: Je vous conseille la police d'écriture Open Sans pour vos boxs, c'est celle utilisée par RG.[/B][/SIZE][/COLOR][/FONT] [FONT=Convergence][SIZE=3][IMG]http://image.prntscr.com/image/6427c7f6bf4142e091a1b59fbe95792b.png[/IMG] [/SIZE] [SIZE=5][COLOR=#ff8000]Étape 4: Finitions[/COLOR][/SIZE] [SIZE=3] Il vous suffira désormais [B][COLOR=#ff8000]d'écrire du texte dans vos boxs[/COLOR][/B] et [B][COLOR=#ff8000]de rajouter la transparence[/COLOR][/B]. Voici 2 exemples de ce que ça pourrait donner avec la [B][COLOR=#ff8000]GTP[/COLOR][/B] et la [B][COLOR=#0059b3]SEC[/COLOR][/B] :p (je vous concède que ça n'est pas très esthétique, mais ce sont des exemples) [IMG]http://image.prntscr.com/image/2e1cc04a4ad84941a7cf368af12d8a7d.png[/IMG] [IMG]http://image.prntscr.com/image/130f5ec089434772bc6f524d179acf41.png[/IMG] [IMG]http://image.prntscr.com/image/4fc4e31d4b3445ac98bd1006d069fd97.png[/IMG] [FONT=MyriadPro][SIZE=7][COLOR=#ff8000][FA]fa-link[/FA] Téléchargez votre passeport[/COLOR][/SIZE][/FONT][/SIZE][/FONT] [FONT=Convergence][SIZE=3] [FONT=Convergence][SIZE=3]Voici un lien pour télécharger les templates en [B][COLOR=#ff8000].pfi[/COLOR][/B] (modifiable sous photofiltre) [B][COLOR=#ff0000][FA]fa-link[/FA] Version rouge:[/COLOR][/B] xxx [B][COLOR=#00b300][FA]fa-link[/FA] Version verte:[/COLOR][/B] xxx [B][COLOR=#0059b3][FA]fa-link[/FA] Version bleue:[/COLOR][/B] xxx [B][COLOR=#ff8000][FA]fa-link[/FA] Version orange:[/COLOR][/B] xxx[/SIZE][/FONT][/SIZE][/FONT] [FONT=Convergence][SIZE=3] [IMG]http://image.prntscr.com/image/4fc4e31d4b3445ac98bd1006d069fd97.png[/IMG] Voilà ! J'espère que ce tutoriel vous aura plu :p Je vous l'accorde, [B][COLOR=#ff8000]ce n'est pas très jolie[/COLOR][/B]... Je compte donc sur vous [B][COLOR=#ff8000]pour améliorer le concept[/COLOR][/B] pour que ça soit plus esthétique ! Partagez vos psd/créations dans l'espace commentaire ! :D [FONT=Convergence][SIZE=3]À bientôt ! :D[/SIZE][/FONT][/SIZE][/FONT][/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Infographie
Tutoriel - Création d'un passeport pour votre signature
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut