Aller au contenu

[Tuto] Signature avec reflet


freak by nature

Messages recommandés

Membre, 39ans Posté(e)
freak by nature Membre 9 821 messages
Baby Forumeur‚ 39ans‚
Posté(e)

Bonjour,

Suite à une demande de Flovia (et avec beaucoup de retard), voici un tutorial expliquant la conception de ma signature de a à Y (Z n'étant pas utile :snif: ) sous photoshop.

sign10.png

Tout d’abord voici l’image de base :

100_2710.jpg

_______________

Ouvrez la photo dans photoshop.

Faites : Ctrl + K, c’est le raccourci du panneau des préférences, choisissez dans le menu "Repères, grilles et tranches, comptage"

Il est possible que l'interface soit différente, ici le tutorial est réalisé sur Photoshop CS3 mais rien ne vous empêche de le faire sous une version antérieure, malgré quelques différences, vous retrouverez les mêmes options :snif:

01-gri10.jpg

Validez vos changement, vous venez de paramétrer la grille de façon a ce que chaque case fasse 100px et ne sois pas sous diviser.

Si vous ne voyez pas la grille sur la photo, affichez la en utilisant le raccourci Ctrl + "

Il se peut que la grille ne soit pas assez voyante pour vous, là où vous venez de régler sa taille, vous pouvez aussi changer sa couleur entre autre ;)

_______________

Cette grille va nous servir de base pour découper les images pour la signature. Avant toute chose, il faut vérifier un petit paramètre, pour faire des découpes précises sur la grille, il faut que le magnétisme à la grille soit actif :

02-mag10.jpg

Si il n'est pas coché, cochez-le.

_______________

Créez ensuite un nouveau document (Ctrl + N) de 500px sur 100px* :

03-nou10.jpg

* Les plus attentifs auront remarqué que ma signature fait 125px de haut et non pas 100px, c'est normal, on adaptera sa taille plus tard.

(Une petite info en passant, vous voyez sur la saisie d'écran que la résolution est à 72 pixels par pouce. Lorsque vous faites une création destinée à Internet ou votre pc, qui n'est donc pas destinée à être imprimée, vous laissez cette valeur.

Si maintenant le document est à imprimer, il faut augmenter cette valeur, pour un document en A4, 200 pixels par pouce est largement suffisant)

_______________

Retournez sur la photo et prenez l'outil Rectangle de sélection (Raccourci : M )

Servez vous de cette outils pour sélectionner un carré de la grille, vous obtiendrez une sélection d'une taille de 100px*100px.

Appuyez sur les touches "Ctrl + C ", ce raccourci sert à copier le contenu de la sélection, c'est-à-dire le morceau d'image que vous avez sélectionné.

Retournez sur le nouveau document que vous avez créé précédemment et appuyez sur les touches "Ctrl + V" pour copier votre carré dans le nouveau document.

Ne vous inquiétez pas de la position de l'image pour le moment, on s'en occupera après.

Retournez sur la photo, appuyez sur "Ctrl + D " (c'est le raccourci de désélection pour effacer la sélection que vous venez de faire).

Recommencez cette étape, c'est-à-dire sélectionné un autre carré et reproduisez la manœuvre pour le faire passer dans l'autre document.

Faites le jusqu'à avoir 5 carrés de photo dans votre nouveau document.

_______________

Vous n'avez plus besoin de la photo, maintenant seul votre nouveau document vous servira, c'est votre espace de travail.

Affichez la grille sur votre document (Ctrl + ").

Vos 5 images sont organisées en calques, c'est-à-dire qu'elles peuvent bouger indépendamment l'une de l'autre. Regardez la palette "Calques" :

04-cal10.jpg

Vous voyez ici plusieurs calques numérotés de 1 à 5, sur chacun de ces calques se trouve un des carrés de photo que vous avez collé dans le document. La liste des calques que vous voyez ici est aussi appelée "pile de calques".

Info : Leur place dans la pile à une importance, en fait les calques se superposent les uns sur les autres, celui du dessus de la pile étant celui qui sera au dessus de tout, et celui du dessous celui qui sera en dessous de tout, vous pouvez changer l'ordre simplement en les changeant de place avec la souris toujours dans la palette calque.

Il faut savoir aussi que le calque que vous sélectionnez est celui sur lequel vous travaillez.

Sélectionnez le calque 1 par exemple, le dernier de la pile. Prenez l'outil "Déplacement" ( V ) et dans votre espace de travail, cliquez à un endroit, maintenez le bouton enfoncez et glissez soit à gauche soit à droite, vous allez voir un de vos carré bouger, placer le en fonction de la grille pour répartir vos carrés, refaites la même opération avec les 4 autres calques en les sélectionnant chacun à leur tout et en déplaçant en fonction de la grille pour qu'ils occupent au final tout la largeur du document :

05-rep10.jpg

Retournez dans les préférences de la grille (Ctrl + K > Repères, grille, tranches et commentaires) ne changez que le nombre de subdivision, il est sur "1", passez le à "10".

_______________

1. Masquez tout les calques en cliquant sur les yeux à gauche da la pile dans la palette "Calques", vous devriez plus voir vos carrés de photo dans l'espace de travail.

2. Cliquez sur l'icône comme indiqué sur l'image pour créer un nouveau calque.

06-cal10.jpg

Reprenez l'outil "Rectangle de sélection" (M) et sur votre espace de travail, dans la première grande case de la grille créé des sélections en carré (Pour faire une sélection en carré, vous pouvez maintenir la touche Majuscule enfoncée pendant que vous tracé votre sélection, ça permet de rester proportionnel et donc de faire un carré) en laissant une petite case tout autour comme ceci :

07-sel10.jpg

Une fois la sélection correcte, appuyer sur Ctrl + Suppr. ou Alt + Suppr. au choix (Alt + Suppr permet de remplir la sélection avec la couleur de premier plan, Ctrl + Suppr avec celle d'arrière plan) .

Votre carré sélectionné devrait se remplir de couleur.

Recréez un nouveau calque et recommencez la création de carré remplis dans les cases suivantes jusqu'à obtenir ceci :

08-car10.jpg

Dans votre palette calques, vous allez glisser les calques que vous venez de créer en mettant en dessous de chaque carré de photos : Le carré remplis de la première case juste en dessous de du carré de photo de la première case, le carré remplis de la deuxième case juste en dessous du carré de photo de la deuxième case, … répétez ces opérations pour les autres cases. Réaffichez les calques de photos masqués en cliquant dans la même case où vous avez cliquez précédemment pour les masquer. Une fois tout vos calques affichés, vous ne devriez plus voir les carrés remplis dans votre espace de travail, seulement les carrés de photos.

Votre palette calque, elle, devrait ressembler à ça :

09-pal10.jpg

Petite précision : C'est normal que vous n'ayez pas les couleurs autour des yeux, ça n'a aucune utilité dans la création, je l'ai juste utilisé pour que vous voyez bien l'agencement des calques.

On va maintenant créer ce qu'on appelle des masques d'écrêtage, c'est quelque chose de très utile, vous allez comprendre.

Il y a plusieurs façons de créer ce masque, ici on va faire au plus simple.

Dans la palette Calques, sur chacune des carrés de photos (pas les carrés remplis, seulement ceux des photos), vous allez faire un clic droit sur chacun d'eux (attention, faite le clic droit sur leur nom, pas sur leur vignette sinon vous n'aurez pas les mêmes options) l'un après l'autre et cliquez sur "Créer un masque d'écrêtage" comme ci-dessous:

10-mas10.jpg

Une fois terminé, vos calques de carrés de photos devraient se présenter sous cette forme, c'est-à-dire décalé à droite avec une flèche sur la gauche :

11-cal10.jpg

Vous constaterez dans votre espace de travail que vos carrés de photos sont recoupés, c'est l'œuvre du masque d'écrêtage, en fait lorsque que vous créez ce genre de masques, ça créé une interaction entre le calque où vous le faite et celui juste en dessous. C'est image du calque du dessus qui est affichée mais dans la zone de celui du dessous, les calques du dessous étant ici les carrés de 80px remplis de couleurs, tout les zones remplies (peu importe la couleur) seront des zones visible de la photos du calque du dessus.

Ca ne s'arrête pas là, si vous ajoutez un style de calques sur le carré rempli (pas sur le carré de photo), par exemple un contour interne, il apparaîtra dans sur votre création au dessous de l'autre calque, c'est très pratique et on va s'en servir de suite.

Sélectionnez le premier carré rempli dans la palette calque, et en bas à gauche de la palette calques, cliquez sur le "fx" puis contour.

12-sty10.jpg

Réglez-le comme ceci :

13-con10.jpg

Ensuite, cochez sur la gauche "Lueur externe" puis cliquez dessus, réglez le comme ceci :

14-lue10.jpg

Validez vos changements en cliquant sur Ok, dans votre espace de travail vous devriez voir un de vos carrés avec un léger contour et un ombre désormais.

Dans la palette calque, fais un clic droit sur le nom du calque auquel vous venez d'appliquer les styles et cliquez sur "Copier le style de calque" :

15-cop10.jpg

Maintenant, les uns après les autres, vous allez cliquer sur les 4 autres calques de carré remplis (pas les carrés de photos donc) et faire un clic droit sur le nom puis "Coller le style de calque". (Ici on n'aurait pu coller sur les 4 d'un coup mais ce n'est possible que depuis Photoshop CS donc les personnes possédant une version antérieure n'aurait pas pu)

Votre espace de travail devrait ressembler à ça :

16-esp10.jpg

Maintenant, on va passer au reflet mais pour ça on a besoin de plus de place en hauteur, on va donc agrandir l'espace de travail, pour se faire, cliquez en haut sur "Image > Taille de la zone de travail", réglez comme ceci :

17-zon10.jpg

Votre nouvel espace de travail va donc prendre 25px en hauteur distribués vers le bas (les flèches sur l'image ci-dessus).

Maintenant on peut faire le reflet, pour se faire, et là désolé pour ceux qui ont des versions plus anciennes Photoshop CS, on va utilisé la sélection groupée, c'est un gros gain de temps.

Sauvegardez votre document, maintenant dans la palette calque, cliquez une seule fois sur le tout premier calque (un carré de photo en toute logique), ne le désélectionnez pas, descendez tout en bas de votre palette calque pour voir le tout dernier calque. Maintenez la touche "Majuscule" (Shift) enfoncée et cliquez sur ce dernier calque, relâchez le bouton de la souris puis la touche majuscule. L'entièreté de vos calques devraient être sélectionné maintenant, appuyez sur Ctrl+E

Vous ne devriez plus avoir qu'un seul et unique calque dans votre palette contenant votre création comme ceci :

18-fus10.jpg

Maintenant, faites un clic droit sur le nom de votre calque et cliquez sur "Dupliquer ce calque", ne touchez à rien et validez. Dans votre palette vous devriez avoir un second calque identique au premier.

Sélectionnez celui du bas en cliquant une seule fois dessus, faites "Ctrl+T", dans votre zone de travail, vous devriez voir un genre de cadre avec des poignées apparaître, fait un clic droit dedans et cliquez sur "Symétrie Axe Vertical". Si tout se passe bien vous ne devriez voir aucune différence. Appuyez sur la touche "Entrer" pour valider les changements.

19-sym10.jpg

Vous pouvez masquer la grille, on en aura plus besoin (Ctrl + " ).

Maintenant prenez l'outil de déplacement ( V ), et en maintenant la touche majuscule enfoncée, cliquez dans votre espace de travail, maintenez le bouton de la souris enfoncé et faite la glissée vers le bas jusqu'à ce que les deux images soient l'une contre l'autre comme ceci :

20-pos10.jpg

Relâchez la souris puis la touche majuscule.

Maintenant dans la palette calque, on va créer un masque de fusion en cliquant comme sur l'image ci-dessous :

21-mas10.jpg

Petite explication sur le masque de fusion, lui travaille en niveau de gris mais vous ne le voyez bien sur pas.

En fait, toutes les parties peintes en blanc de votre masque sont visibles à 100%, celle peintes en noir, sont totalement invisible, et entre les deux, on a la gamme des gris, puis le gris est clair, et bien sur plus l'image sera visible, plus le gris est foncé, moins on la verra, vous allez comprendre.

Sélectionnez l'outil dégradé (G) et vérifiez les paramètres, si votre couleur de dégradé (là où il y a la flèche) n'est pas du noir au blanc, cliquez dessus et rectifiez le :

22-deg10.jpg

Maintenant dans votre espace de travail, avec l'outil dégradé, cliquez à la jonction de la signature et de son reflet, appuyez sur la touche majuscule, et en maintenant la touche et le clic enfoncés, descendez jusqu'à la base du documents, relâchez la souris puis la touche Majuscule. Vous devriez obtenir ceci :

23-ref10.jpg

Dans la palette calque, en haut à droite, vous avez "Opacité" et "Fond". Une petite explication s'impose, opacité et fond ont exactement le même effet, c'est à dire régler la transparence du calque, la seule différence, c'est que si vous avez des styles de calques sur votre documents (contour, lueur externe par exemple), diminué l'opacité rend tout transparent, mais diminuer le fond rend ne rend que le fond transparents, c'est dire si vous avez un contour ou une lueur externe par exemple, en diminuant le fond tout le calque deviendra transparent… sauf eux.

Seconde petite précision, en réunissant tout nos calques en un seul précédemment, on a "aplatit" les styles, c'est-à-dire qu'ici opacité et fond auront le même effet.

Mettez l'opacité du calque du bas (toujours le même depuis tout à l'heure normalement) sur 40%.

24-opa10.jpg

Cliquez sur Fichier > Enregistrer pour le web

Choisissez le format PNG-24 et transparence :

25-enr10.jpg

Dernière petite précision :

Le png a été choisis ici à cause de la transparence, en effet, le reflet et la lueur externe de votre signature sont partiellement transparent et le resterons.

Ensuite, le poids, comme vous le voyez sur l'image ci-dessus, quand même plus de 100Ko pour une petite signature, le png est un format très lourd donc dans certains cas, on devra malheureusement s'en passer.

Enfin, il faut savoir qu'Internet Explorer ne gère nativement la transparence du PNG que depuis sa version 7, les versions précédentes pas (ce qui veut dire que votre création apparaîtra avec un fond sur ces navigateurs là)

Voila le résultat :

26-cre10.png

Si vous avez des questions, n'hésitez pas :o

Lien à poster
Partager sur d’autres sites

Annonces
Maintenant
Membre+, Indiscernablement perceptible, 38ans Posté(e)
meloudidounou Membre+ 13 089 messages
38ans‚ Indiscernablement perceptible,
Posté(e)

Sympa ton petit tuto :snif: Joli boulot, c'est sympa de voir des gens qui s'investissent pour aider les autres :snif:

Lien à poster
Partager sur d’autres sites

Membre, shinigami, 43ans Posté(e)
Hamlet Membre 1 335 messages
43ans‚ shinigami,
Posté(e)

Tout ça juste pour faire un reflet !!!! :snif:

lol

voici une raison pour laquelle je n'aime pas le traitement numérique....

Lien à poster
Partager sur d’autres sites

Membre, 39ans Posté(e)
freak by nature Membre 9 821 messages
Baby Forumeur‚ 39ans‚
Posté(e)
Tout ça juste pour faire un reflet !!!! :snif:

lol

voici une raison pour laquelle je n'aime pas le traitement numérique....

Si tu regardes, c'est un tuto pour débutant avec énormément d'explications, le reflet ne représentant qu'une petite partie et étant super simple à faire :snif:

Lien à poster
Partager sur d’autres sites

Membre, shinigami, 43ans Posté(e)
Hamlet Membre 1 335 messages
43ans‚ shinigami,
Posté(e)

:snif:

En tout cas bravo pour la demarche :snif:

bah je dois avouer que je suis un vrai débutant pour ce qui est de la retouche numérique.....

Lien à poster
Partager sur d’autres sites

VIP, Posté(e)
Yavin VIP 32 683 messages
Baby Forumeur‚
Posté(e)

Beau boulot!! :snif:

C'est courageux de ta part, tant ça semble compliqué... :snif:

Lien à poster
Partager sur d’autres sites

Membre, 39ans Posté(e)
freak by nature Membre 9 821 messages
Baby Forumeur‚ 39ans‚
Posté(e)

Ca reste très basique, il y a des trucs beaucoup plus difficile sous photoshop (et faut pas se fier à la longeur ^^)

Lien à poster
Partager sur d’autres sites

Membre, Posté(e)
Flovia Membre 3 074 messages
Baby Forumeur‚
Posté(e)
Bonjour,

Suite à une demande de Flovia (et avec beaucoup de retard), voici un tutorial expliquant la conception de ma signature de a à Y (Z n'étant pas utile :o ) sous photoshop

;) Oooooh, Freak, mille fois merci! :snif:

Je sais pas quoi dire, je reste sans voix. :snif: ...Devant l'ampleur du travail que tu as accompli, juste pour faire plaisir!!! ;):coeur: C'est vraiment 10 puissance 6 ultra sympa!!! ;) ...Et puis, tes explications sont d'une précision, révérence! :o ....Je vais tâcher de faire honneur à ton tuto... :snif: ...en produisant une belle signature, d'ici peu... :o ...Merci encore! :snif:

Lien à poster
Partager sur d’autres sites

Membre+, Vache Normande, 41ans Posté(e)
Maïwenn Membre+ 16 546 messages
41ans‚ Vache Normande,
Posté(e)

:snif: c'est long et bien compliqué pour faire un reflet.

Je le fais plus rapidement et simplement :snif:

Lien à poster
Partager sur d’autres sites

Membre, Posté(e)
Flovia Membre 3 074 messages
Baby Forumeur‚
Posté(e)

C'est spécial "paumée Photoshop" (+ PC, informatique, photo...la liste est longue! ;) ), genre Flovia! :snif: ...Pas dénigrer le fabuleux travail de Freak, non mais...!!!! :o:snif:

Lien à poster
Partager sur d’autres sites

Membre+, Vache Normande, 41ans Posté(e)
Maïwenn Membre+ 16 546 messages
41ans‚ Vache Normande,
Posté(e)

je dénigre pas, c'est juste "pourquoi faire simple quand on peut faire compliqué".

Lien à poster
Partager sur d’autres sites

Membre, 39ans Posté(e)
freak by nature Membre 9 821 messages
Baby Forumeur‚ 39ans‚
Posté(e)
:o c'est long et bien compliqué pour faire un reflet.

Je le fais plus rapidement et simplement :snif:

:snif:  C'est pas compliqué, c'est juste détaillé :o

Et pour le reflet, chez moi a partir de l'image, il se fait en un clic, tu dis mieux ? ;)

Lien à poster
Partager sur d’autres sites

Membre+, Vache Normande, 41ans Posté(e)
Maïwenn Membre+ 16 546 messages
41ans‚ Vache Normande,
Posté(e)

en un clic non mais en trois manips c'est fait. :snif:

simple et rapide

Lien à poster
Partager sur d’autres sites

Membre, 39ans Posté(e)
freak by nature Membre 9 821 messages
Baby Forumeur‚ 39ans‚
Posté(e)
en un clic non mais en trois manips c'est fait. :snif:

simple et rapide

Ben... duplication, sysmétrie, transparence, 3 manips aussi :snif:  Euh bête question, tu as lu le tuto ?

Lien à poster
Partager sur d’autres sites

Membre+, Vache Normande, 41ans Posté(e)
Maïwenn Membre+ 16 546 messages
41ans‚ Vache Normande,
Posté(e)

quand je vois tous tes print screen j'utilise pas toutes ces choses là :snif:

Lien à poster
Partager sur d’autres sites

Membre, 39ans Posté(e)
freak by nature Membre 9 821 messages
Baby Forumeur‚ 39ans‚
Posté(e)
quand je vois tous tes print screen j'utilise pas toutes ces choses là :snif:

Donc tu n'as pas lu :snif:  Il n'y a qu'une toute petite partie consacrée à la réalisation du reflet, le tuto expliquant comment à partir d'une photo arriver à cette signature là.

Lien à poster
Partager sur d’autres sites

Membre+, Vache Normande, 41ans Posté(e)
Maïwenn Membre+ 16 546 messages
41ans‚ Vache Normande,
Posté(e)
:snif::snif:
Lien à poster
Partager sur d’autres sites

Modérateur, Nikita, 152ans Posté(e)
_Dolph Modérateur 60 554 messages
152ans‚ Nikita,
Posté(e)

Un grand merci freak by nature , topic extra :snif:

Lien à poster
Partager sur d’autres sites

Membre, Electron trop libre / Cible à abattre, 53ans Posté(e)
lore Membre 17 812 messages
53ans‚ Electron trop libre / Cible à abattre,
Posté(e)

C'est vrai qu'il ne suffit pas de savoir y faire et critiquer les autres faut aussi avoir bon goût.......

Bravo freak pour ce topic et ta signature est superbe.

Lien à poster
Partager sur d’autres sites

  • 2 semaines après...
Membre, Posté(e)
Flovia Membre 3 074 messages
Baby Forumeur‚
Posté(e)

Juste pour prouver que toutes ces explications m'étaient nécessaires :snif: ...( Et encore...p'tit blème avec le reflet, n'est-ce pas, Freak?!!! :snif: ...) ;)

Lien à poster
Partager sur d’autres sites

Annonces
Maintenant

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

×