FAQ Rechercher Membres Groupes Connexion S’enregistrer
Gigadino Index du Forum





[TUTO] Savoir créer une bannière avec Photoshop CS3
Aller à la page: 1, 2, 3  >
[TUTO] Savoir créer une bannière avec Photoshop CS3 Sujet précédent Sujet suivant 
Auteur Message
Eragon
Modérateur
Modérateur

Hors ligne

Inscrit le: 22 Aoû 2005
Messages: 2 626
Dinosaure préféré: Carcharodontosaurus
Film préféré: Le Retour du Roi
Localisation: Helgrind (pour le moment)

Posté le: 09/03/2008 18:38:17
Sujet du message: [TUTO] Savoir créer une bannière avec Photoshop CS3
Répondre en citant

Salut à tous !

Je vais vous "apprendre", du moins montrer comment réaliser une bannière classique avec Adobe Photoshop CS3.

1-Créer un document en 500x200 (taille classique, mais on peut faire avec les dimensions que l'on veut).



2-Choisir les 2 piliers de la création : les PSD (image avec fond transparent) et l'arrière plan.

Notre cobaye pour ce tuto sera Triple H (il existe un site fournissant des PSD sur la WWE et la TNA) :




Et l'arrière-plan sera le suivant :


3-On redimensionne l'arrière-plan et on le place sur le fichier que l'on a créé pour la bannière avec le premier outil de la barre d'outils.

4-Pour que l'arrière-plan ne soit pas trop visible, on diminue l'opacité en suivant cette procédure :

(clic droit sur "Calque 1" pour afficher le menu déroulant)





On obtient donc ceci :



5-On place ensuite un des PSD sur notre arrière-plan.



6-On diminue l'opacité de Triple H à environ 84 % (comme j'ai fait au-dessus)

7-Fusionnez le calque de Triple H avec celui de l'arrière-plan ainsi :

(Toujours clic droit sur le calque dans le menu)



Je ne sais pas vous, mais je trouve que le bleu ne correspond pas au personnage et il n'est pas assez bien incrusté... Réglons ça en modifiant la teinte !

Appuyez sur CTRL + U et vous verrez le menu suivant s'afficher :



Mettez ces réglages (sans oublier de cocher la case "redéfinir") :



On obtient ainsi ceci :



9-On a déjà bien progressé depuis le début, mais permettons-nous quelques fantaisies en intégrant un petit brush ! Un brush est un effet que l'on ajoute sur une bannière pour faire plus joli.

Voici notre brush :



Après l'avoir redimensionné (150x271 pour moi), on le place ainsi :



Vous serez d'accord que ça n'est pas très esthétique... On va donc modifier la teinte (comme plus haut).



Voici ce que l'on obtient :



C'est déjà un peu mieux mais notre petit effet est moins visible et est placé sur notre ami. Effectuons donc un petit effet de relief en l'effaçant de ce corps d'athlète... Utilisons l'outil pinceau et réglons-le ainsi :



Et après passons-le sur l'endroit où l'on veut faire disparaître notre brush. Voilà le résultat :



Magique ! En plus de rendre notre travail plus propre, on a un joli effet de relief sur notre bannière ! Mais je trouve que la courbe n'est pas assez visible... Alors réglons ça !

Pour cela on va encore avoir besoin de nos options de fusion. Clic droit sur le calque de la courbe dans le menu de calques, options de fusion, et procédez ainsi :



Et on obtient donc :



10-Ouf ! Quelle misère pour ce brush ! Mais c'est bon, c'est fait. Je trouve que Triple H se distingue trop du fond. Atténuons donc ses contours.

Pour cela, on va utiliser l'outil "Goutte", réglé ainsi :



Et passez le curseur tout autour de notre ami. Voici le résultat :



11-Voilà pour notre premier Triple H. Cette étape va consister à installer un cadre pour notre bannière.

Déjà, on sélectionne la zone pour le cadre avec l'outil de sélection :



Puis allez dans le menu "Edition" et cliquez sur "Contour".

Procédez ainsi :



Cliquez sur "OK" et désélectionnez la sélection (clic droit sur un endroit de la sélection puis "Désélectionner"), et votre cadre va apparaître.

Voici le résultat :



12-Voilà. Le plus dur est fait. Maintenant, passons au second PSD. Installons-le sur notre bannière (comme on a fait pour le 1er) :



Il est là, mais il n'est pas du tout incrusté avec le fond !

Alors procédons comme avec le premier !



Voici ce qu'on obtient :



Ses contours sont trop marqués. Réutilisons notre outil Goutte et passons-le sur les contours du PSD.

(les réglages sont les mêmes que la dernière fois)

Voici le résultat :



13-Je trouve que le personnage se détache toujours trop du fond... Alors diminuons son opacité ! Là encore, options de fusion -> Opacité à 81 %.

Et là, patatra... Le retour du cadre. Vous constaterez certainement qu'il est visible à travers le PSD. Il va donc falloir s'en débarrasser. Voici la méthode :

-> Dans le menu "Sélection", cliquez sur "Récupérer la sélection" et cliquez sur OK.

Votre calque est donc sélectionné :



Sélectionnez "Calque 1" (le calque du fond) dans le menu de calques en bas à droite, puis allez dans "Edition" et cliquez sur "Effacer".

Voici ce que cela donne :



Le cadre a donc disparu sur cette surface.

14-Fusionnez les deux calques.

15-La partie image est finie ! Maintenant, ça va être au tour du texte...

Avec l'outil texte, placez et écrivez votre texte sur la bannière.



Pour régler la couleur du texte il vous suffit de cliquer sur le rectangle blanc et le logiciel vous affichera la table de couleurs.


Voici ce que l'on obtient dans un premier temps :



Vous n'êtes pas obligés de changer la couleur des "majuscules" mais ça peut être plus esthétique (pour ce faire, sélectionnez la lettre et modifiez la couleur).

16-Ajoutons maintenant des effets sur notre texte :

Clic droit sur le calque du texte dans le menu de calque -> Options de fusion



Et voici :



17-Voilà, théoriquement notre bannière est finie, mais on peut ajouter des effets de Luminosité/Contraste pour rendre la bannière plus jolie.

Déjà, Fusionnez tous les calques. Faîtes clic droit sur un des calques (sauf celui du texte) puis "Fusionner tous les calques".

Ensuite, allez dans le menu "Image" puis "Réglages" et "Luminosité/Contraste".



Quand vous avez fini, enregistrez sous format PNG.

Et voici le résultat final !



Voilà ! J'ai mis deux heures à faire ce tuto, alors j'espère qu'il servira ! Pour ce genre de créations ça prend 15 minutes quand on maîtrise bien le logiciel et environ 30-45 quand on débute, c'est donc assez raisonnable.

Si vous voulez voir mes créations vous pouvez toujours aller jeter un coup d'oeil à ma galerie !

D'ici là, portez vous bien !

Eragon

----------------------------

Bannières tuto :


Lien de téléchargement : http://www.megaupload.com/fr/?d=4KVI581A


Lien de téléchargement : http://www.megaupload.com/?d=JTXF7AGO

Pour comprendre les étapes, il faut aller dans le menu des calques et cliquer sur les "yeux" situés juste à côté des calques. Ca masquera les calques. Faîtes-le sur tous puis une fois fini, re-cliquez sur la zone des "yeux" pour les réafficher et vous verrez les étapes apparaître une par une.

Elles ont été créées sur Photoshop CS3 donc il vous faudra l'avoir (normalement) pour que ça marche bien.

Enjoy !

Eragon

______________
"Ceux qui veulent réussir ne se contentent pas de viser les nuages, mais les étoiles." GR


>> Galerie DeviantArt <<


Dernière édition par Eragon le 22/03/2008 11:14:18; édité 2 fois
Visiter le site web du posteur
 
Publicité Sujet précédent Sujet suivant 
Auteur Message
Publicité






Posté le: 09/03/2008 18:38:17
Sujet du message: Publicité

PublicitéSupprimer les publicités ?
 
[TUTO] Savoir créer une bannière avec Photoshop CS3 Sujet précédent Sujet suivant 
Auteur Message
Tikémi
Fidèle
Fidèle

Hors ligne

Inscrit le: 26 Aoû 2006
Messages: 1 605
Dinosaure préféré: les lambéos
Film préféré: Taxandria
Localisation: Bruxelles

Posté le: 10/03/2008 00:25:42
Sujet du message: [TUTO] Savoir créer une bannière avec Photoshop CS3
Répondre en citant

Trop fort, moi qui n'y connait rien en logiciels photo, je sens que je vais zieuter de temps en temps pour te chiper des "trucs" quand je fais des images (mais pas pour faire des bannières de catch mdr).
Merci Eragon
______________

"Rien en biologie n'a de sens, si ce n'est à la lumière de l'évolution" Theodosius Dobzhansky

(\___/)
(='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature
(")_(") pour l'aider à concrétiser sa domination du monde
Visiter le site web du posteur
 
[TUTO] Savoir créer une bannière avec Photoshop CS3 Sujet précédent Sujet suivant 
Auteur Message
lolo
Invité

Hors ligne




Posté le: 10/03/2008 00:33:05
Sujet du message: [TUTO] Savoir créer une bannière avec Photoshop CS3
Répondre en citant

On peut faire ça avec des logiciels gratos aussi mais c'est du bon boulot Very Happy
 
[TUTO] Savoir créer une bannière avec Photoshop CS3 Sujet précédent Sujet suivant 
Auteur Message
tweety_laeti
Membre suprême
Membre suprême

Hors ligne

Inscrit le: 14 Nov 2007
Messages: 2 170
Dinosaure préféré: Parasauro et Iguanod
Localisation: Belgique - BW

Posté le: 10/03/2008 16:37:06
Sujet du message: [TUTO] Savoir créer une bannière avec Photoshop CS3
Répondre en citant

Perso j'utilise le trad Adobe Photoshop que je me procure gratos via une version démo et un bon vieux crack Wink
le seul hic c'est que dès que le type qui fait ça se fait débusquer il est obligé de "déménager" donc faut pouvoir le suivre à la trace ... Confused mais si qqn est intéressé par l'adresse, je peux la lui envoyer par MP Wink

En tt cas, bravo à Eragon pour avoir proposé ce tuto bien détaillé! (une super idée!!)
______________

Les formes qui différencient les êtres importent peu si leurs pensées s'unissent pour bâtir un univers (R. Leloup)
 
[TUTO] Savoir créer une bannière avec Photoshop CS3 Sujet précédent Sujet suivant 
Auteur Message
Eragon
Modérateur
Modérateur

Hors ligne

Inscrit le: 22 Aoû 2005
Messages: 2 626
Dinosaure préféré: Carcharodontosaurus
Film préféré: Le Retour du Roi
Localisation: Helgrind (pour le moment)

Posté le: 10/03/2008 18:35:44
Sujet du message: [TUTO] Savoir créer une bannière avec Photoshop CS3
Répondre en citant

Tikémi a écrit:
Trop fort, moi qui n'y connait rien en logiciels photo, je sens que je vais zieuter de temps en temps pour te chiper des "trucs" quand je fais des images (mais pas pour faire des bannières de catch mdr).
Merci Eragon


De rien ! Wink Le thème, ça tu choisis après, mais vu qu'il existe un site distribuant des PSD sur la WWE et la TNA ça simplifie le travail car ça évite de rendre justement le fond d'une image transparente manuellement.

lolo a écrit:
On peut faire ça avec des logiciels gratos aussi mais c'est du bon boulot Very Happy


Oui oui on peut faire ça avec Photofiltre aussi (je l'utilisais avant Photoshop) mais le rendu est meilleur sur CS3.

tweety_laeti a écrit:
Perso j'utilise le trad Adobe Photoshop que je me procure gratos via une version démo et un bon vieux crack Wink
le seul hic c'est que dès que le type qui fait ça se fait débusquer il est obligé de "déménager" donc faut pouvoir le suivre à la trace ... Confused mais si qqn est intéressé par l'adresse, je peux la lui envoyer par MP Wink

En tt cas, bravo à Eragon pour avoir proposé ce tuto bien détaillé! (une super idée!!)


Moi aussi j'utilise la version d'éval mais je connais qqun qui pourrait m'aider à corriger ce... problème...

En tout cas merci à vous trois pour vos commentaires c'est vachement sympa et tant mieux si jamais ça peut vous servir !

Si vous voulez d'autres tutos vous n'avez qu'à demander ! J'en ferai peut-être bientôt un pour montrer comment faire une bannière comme celle de ma signature avec les Rayons Grunge.
______________
"Ceux qui veulent réussir ne se contentent pas de viser les nuages, mais les étoiles." GR


>> Galerie DeviantArt <<
Visiter le site web du posteur
 
[TUTO] Savoir créer une bannière avec Photoshop CS3 Sujet précédent Sujet suivant 
Auteur Message
Tikémi
Fidèle
Fidèle

Hors ligne

Inscrit le: 26 Aoû 2006
Messages: 1 605
Dinosaure préféré: les lambéos
Film préféré: Taxandria
Localisation: Bruxelles

Posté le: 19/03/2008 22:31:20
Sujet du message: [TUTO] Savoir créer une bannière avec Photoshop CS3
Répondre en citant

[quote="Eragon"]De rien ! Wink Le thème, ça tu choisis après, mais vu qu'il existe un site distribuant des PSD sur la WWE et la TNA ça simplifie le travail car ça évite de rendre justement le fond d'une image transparente manuellement.

Je ne sais plus où tu en avais parlé exactement alors je mets ça ici : je suis en train de chipoter un peu ds les programmes de traitement d'images. J'en ai des bons au bureau avec lesquels je peux m'amuser un peu pendant une petite pause. J'ai trouvé très facile de faire des fonds transparents avec Image Ready, surtout quand le fond est déjà uni à la base évidemment.
http://www.clubic.com/telecharger-fiche9650-image-ready.html : sur ce site on le qualifie de "photoshop bas de gamme" megalol Il est téléchargeable gratuitement apparemment, ms je ne sais pas si c'est une démo ou un truc du genre plutôt.
______________

"Rien en biologie n'a de sens, si ce n'est à la lumière de l'évolution" Theodosius Dobzhansky

(\___/)
(='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature
(")_(") pour l'aider à concrétiser sa domination du monde
Visiter le site web du posteur
 
[TUTO] Savoir créer une bannière avec Photoshop CS3 Sujet précédent Sujet suivant 
Auteur Message
Eragon
Modérateur
Modérateur

Hors ligne

Inscrit le: 22 Aoû 2005
Messages: 2 626
Dinosaure préféré: Carcharodontosaurus
Film préféré: Le Retour du Roi
Localisation: Helgrind (pour le moment)

Posté le: 20/03/2008 19:33:52
Sujet du message: [TUTO] Savoir créer une bannière avec Photoshop CS3
Répondre en citant

Image Ready, jamais trop essayé.

Photoshop n'est certainement pas bas de gamme, les meilleurs que je connaisse l'utilisent.

Mais si il est gratos et que tu veux t'entraîner tu peux prendre celui-là ou encore Photofiltre !
______________
"Ceux qui veulent réussir ne se contentent pas de viser les nuages, mais les étoiles." GR


>> Galerie DeviantArt <<
Visiter le site web du posteur
 
[TUTO] Savoir créer une bannière avec Photoshop CS3 Sujet précédent Sujet suivant 
Auteur Message
Tikémi
Fidèle
Fidèle

Hors ligne

Inscrit le: 26 Aoû 2006
Messages: 1 605
Dinosaure préféré: les lambéos
Film préféré: Taxandria
Localisation: Bruxelles

Posté le: 20/03/2008 23:15:57
Sujet du message: [TUTO] Savoir créer une bannière avec Photoshop CS3
Répondre en citant

Non non je me suis mal exprimée, c'est ImageReady qui est "bas de gamme" par rapport à Photoshop. Je vais zieuter ce Photofiltre, ça pourrait venir à point à la maison, je vais bientôt faire la bannière et les boutons de menu de mon site.
______________

"Rien en biologie n'a de sens, si ce n'est à la lumière de l'évolution" Theodosius Dobzhansky

(\___/)
(='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature
(")_(") pour l'aider à concrétiser sa domination du monde
Visiter le site web du posteur
 
[TUTO] Savoir créer une bannière avec Photoshop CS3 Sujet précédent Sujet suivant 
Auteur Message
Eragon
Modérateur
Modérateur

Hors ligne

Inscrit le: 22 Aoû 2005
Messages: 2 626
Dinosaure préféré: Carcharodontosaurus
Film préféré: Le Retour du Roi
Localisation: Helgrind (pour le moment)

Posté le: 21/03/2008 18:40:36
Sujet du message: [TUTO] Savoir créer une bannière avec Photoshop CS3
Répondre en citant

Tikémi a écrit:
Non non je me suis mal exprimée, c'est ImageReady qui est "bas de gamme" par rapport à Photoshop. Je vais zieuter ce Photofiltre, ça pourrait venir à point à la maison, je vais bientôt faire la bannière et les boutons de menu de mon site.


Okay, si tu veux des conseils... J'utilisais PhotoFiltre avant Photoshop Wink
______________
"Ceux qui veulent réussir ne se contentent pas de viser les nuages, mais les étoiles." GR


>> Galerie DeviantArt <<
Visiter le site web du posteur
 
[TUTO] Savoir créer une bannière avec Photoshop CS3 Sujet précédent Sujet suivant 
Auteur Message
Eragon
Modérateur
Modérateur

Hors ligne

Inscrit le: 22 Aoû 2005
Messages: 2 626
Dinosaure préféré: Carcharodontosaurus
Film préféré: Le Retour du Roi
Localisation: Helgrind (pour le moment)

Posté le: 22/03/2008 10:10:58
Sujet du message: [TUTO] Savoir créer une bannière avec Photoshop CS3
Répondre en citant

Bannière Tuto :



Voici le lien pour télécharger le PSD de la bannière avec tous les calques séparés : http://www.megaupload.com/fr/?d=4KVI581A

Les étapes sont dans le menu des calques. Pas d'explications pour le moment désolé mais ça laissera l'occasion de tester pour ceux qui le veulent.

______________
"Ceux qui veulent réussir ne se contentent pas de viser les nuages, mais les étoiles." GR


>> Galerie DeviantArt <<
Visiter le site web du posteur
 
[TUTO] Savoir créer une bannière avec Photoshop CS3 Sujet précédent Sujet suivant 
Auteur Message
Eragon
Modérateur
Modérateur

Hors ligne

Inscrit le: 22 Aoû 2005
Messages: 2 626
Dinosaure préféré: Carcharodontosaurus
Film préféré: Le Retour du Roi
Localisation: Helgrind (pour le moment)

Posté le: 22/03/2008 11:07:04
Sujet du message: [TUTO] Savoir créer une bannière avec Photoshop CS3
Répondre en citant

Autre bannière tuto :



Pour visualiser les étapes, allez dans le menu de calques et cliquez sur tous les yeux, situés sur la gauche, ça masquera les calques 1 par 1. Après, remettez-les 1 par 1 et toutes les étapes apparaîtront.

Lien de téléchargement : http://www.megaupload.com/?d=JTXF7AGO

Enjoy !

______________
"Ceux qui veulent réussir ne se contentent pas de viser les nuages, mais les étoiles." GR


>> Galerie DeviantArt <<
Visiter le site web du posteur
 
[TUTO] Savoir créer une bannière avec Photoshop CS3 Sujet précédent Sujet suivant 
Auteur Message
Zanclodon
Habitué
Habitué

Hors ligne

Inscrit le: 01 Mar 2005
Messages: 566
Dinosaure préféré: Carcharodontosaurus
Film préféré: Happy Feet
Localisation: Anncey (74)

Posté le: 22/03/2008 13:08:27
Sujet du message: [TUTO] Savoir créer une bannière avec Photoshop CS3
Répondre en citant

Salut, j'adore tes Bannières Eragon elles sont vraiment superbe. J'ai juste une ou deux questions :

1- Ton logiciel peut-il faire des animations ?
2- Sur quel site Internet prend tu les Fond D'écran ?

Voilà, j'attend ta réponse. Wink
______________
Visiter le site web du posteur
 
[TUTO] Savoir créer une bannière avec Photoshop CS3 Sujet précédent Sujet suivant 
Auteur Message
Paléomaniac
Posteur fou
Posteur fou

Hors ligne

Inscrit le: 31 Déc 2005
Messages: 1 182
Dinosaure préféré: Baryonyx Walkeri
Film préféré: Evolution

Posté le: 22/03/2008 13:14:41
Sujet du message: [TUTO] Savoir créer une bannière avec Photoshop CS3
Répondre en citant

Non, Photoshop ne peut pas faire d'animations, contrairement à Image Ready et à Animation Shop, mais avoir Photoshop et l'un de ces deux-là est très utile !

Quand au site internet... Seul l'artiste en a le secret ! megamrgreen
______________
"Le bonheur, c'est d'arriver à désirer ce qu'on a déjà."
"Le bon vieux temps, c'est maintenant."
Visiter le site web du posteur
 
[TUTO] Savoir créer une bannière avec Photoshop CS3 Sujet précédent Sujet suivant 
Auteur Message
Eragon
Modérateur
Modérateur

Hors ligne

Inscrit le: 22 Aoû 2005
Messages: 2 626
Dinosaure préféré: Carcharodontosaurus
Film préféré: Le Retour du Roi
Localisation: Helgrind (pour le moment)

Posté le: 22/03/2008 14:01:47
Sujet du message: [TUTO] Savoir créer une bannière avec Photoshop CS3
Répondre en citant

Merci beaucoup !

La 1 ayant obtenu une réponse,

Zanclodon a écrit:
2- Sur quel site Internet prend tu les Fond D'écran ?


Tu as le choix. Si tu veux prendre des fonds déjà faits tu tapes "abstract wallpaper" sur google et tu prends le premier site. Par contre pour les deux dernières j'ai pris de renders fractals. Sur Planet Renders il y en a plein. Wink
______________
"Ceux qui veulent réussir ne se contentent pas de viser les nuages, mais les étoiles." GR


>> Galerie DeviantArt <<
Visiter le site web du posteur
 
[TUTO] Savoir créer une bannière avec Photoshop CS3 Sujet précédent Sujet suivant 
Auteur Message
Zanclodon
Habitué
Habitué

Hors ligne

Inscrit le: 01 Mar 2005
Messages: 566
Dinosaure préféré: Carcharodontosaurus
Film préféré: Happy Feet
Localisation: Anncey (74)

Posté le: 22/03/2008 14:46:42
Sujet du message: [TUTO] Savoir créer une bannière avec Photoshop CS3
Répondre en citant

Super ! Merci.

Vous pensez qu'on peut jouer des deux logiciel pour faire une Bannière avec Photoshop et faire une animation avec Image Ready ou Animation Shop ??
______________
Visiter le site web du posteur
 
[TUTO] Savoir créer une bannière avec Photoshop CS3 Sujet précédent Sujet suivant 
Auteur Message
Contenu Sponsorisé






Posté le: 17/08/2017 14:46:20
Sujet du message: [TUTO] Savoir créer une bannière avec Photoshop CS3

 
 
Page 1 sur 3 Aller à la page: 1, 2, 3  >
 
Sauter vers:   

Index | Panneau d’administration | Créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Powered by phpBB v2 © 2001, 2005 phpBB Group :: Style: Creamy Green