Aller au menu - Aller au contenu

Icône Techniques de transformation sur les axes X et Y (1/2)

Mise à jour : 23/02/2012
Difficulté : Intermédiaire Intermédiaire Creative Commons BY-NC-SA
26 778 visites depuis 7 jours, dont 426 sur ce chapitre classé 12/786
Nous voici aux huitième et neuvième chapitres de cette première partie du tutoriel. Autrement dit les derniers !
Je suis vraiment heureux que vous en soyez arrivés là : cela prouve que vous êtes motivés et déterminés, ça fait plaisir à voir :) .

Le titre de ces deux chapitres de conclusion est assez évocateur et j'espère que vous vous plairez à le lire. Nous allons apprendre ensemble à transformer un calque et à le déformer à notre guise. Autant de techniques de travail qu'il est impératif de maitriser si vous voulez donner un sens à vos futures créations.

Je dois vous avertir que je vais introduire ce premier chapitre par une explication théorique portant sur le thème de la symétrie. Rassurez-vous, je vous ai épargné les définitions trop complexes et compagnie, vous devriez réussir à tenir le fil avec un peu de concentration :-° .

Puis, bon, c'est plutôt facile et cela n'a rien de sorcier d'un point de vue technique, vous assimilerez très vite les informations qui vous attendent, de quoi vous reposer un peu en attendant les chapitres des prochaines parties ;) .
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant

La minute théorique : transformer à l'aide de la symétrie

Le terme de "transformation" est employé à plusieurs escients, en fonction des domaines pratiqués. Transformer un calque sur Photoshop, c'est le transformer géométriquement.

On a tous suivi des cours de géométrie au moins une fois dans sa vie à l'école ? Et bien le principe est le même.

Par définition, la géométrie consiste en l'étude des figures dans l'espace. Sur Photoshop, on va considérer qu'une figure est un calque et que la zone de travail constitue à elle seule l'espace. Du coup, en transformant les calques sur Photoshop, nous allons modifier leurs formes (c'est-à-dire les figures) ainsi que leurs positions géométriques (références à l'espace).

On détermine une position géométrique sur deux axes, les abscisses et les ordonnées, que nous renommerons respectivement X et Y. Ces axes sont perpendiculaires l'un à l'autre et ils sont la référence quant à la position du calque. On retrouve les axes X et Y dans la zone de travail :

Image utilisateur


Ainsi, on effectue des modifications sur ces deux axes : de haut en bas (on ne travaillerait alors que sur l'axe Y), de bas en haut (idem, on transforme le calque sur l'axe Y), de gauche à droite (ici, on modifie le calque sur l'axe X), de droite à gauche (idem, axe X), mais aussi pourquoi pas du bas droit vers le haut gauche (on transformerait alors le calque sur la diagonale, à savoir sur les deux axes : X et Y), ou du haut droit vers le bas gauche (X et Y aussi).

C'est par le biais de ces axes que nous allons être aptes à créer des éléments en 2D mais qui prendront l'apparence d'objets en 3D. Souvenez-vous l'exemple de l'ombre portée, vous savez le fameux paquet de feuilles superposées. Sur ce projet, nous avions bel et bien travaillé en 2D (Photoshop ne sait faire que cela, de la 2D, de toute manière) et pourtant, nos feuilles paraissaient être en 3D : ceci était dû à un effet de perspective géré par Photoshop, ce qui nous laissait croire que les feuilles étaient en 3D, or elles étaient bien créées en 2D, la 3D n'étant que l'apparence finale du paquet de feuilles.

  • La technique utilisée pour créer ces feuilles est la 2D.
  • L'apparence donnée à ces feuilles est la 3D.
  • En d'autres termes, nous avons créé un objet prenant une forme 3D grâce à un logiciel de 2D et une technique nommée la transformation.


La symétrie, c'est quoi ?



Nous allons nous intéresser à plusieurs types de symétrie. Ne vous en faites pas, je ne vais pas vous demander de tout retenir, je veux juste faire un peu de théorie, car cela me semble nécessaire pour comprendre certaines transformations. Il faut impérativement passer par là avant d'étudier les fonctionnalités faisant l'objet de ce cours.

Symétrie axiale



Le premier type de symétrie dont je souhaite vous parler se nomme symétrie axiale.

Par définition, on dit que deux figures sont symétriques par rapport à une droite si, en pliant la feuille au niveau de la droite, les deux figures se superposent.

Image utilisateur


Par exemple, la première moitié d'un terrain de football est parfaitement symétrique avec l'autre moitié du terrain en fonction de la ligne blanche du milieu, vous saisissez l'idée ? :)

La seule chose que je vous demande de retenir, c'est que cette droite, on l'appelle l'axe de symétrie.

'Voyez, c'est pas plus compliqué que cela, on peut déjà passer au deuxième type de symétrie dont je voulais vous parler :D .

Symétrie centrale



Et on le nomme "symétrie centrale".

Si nous avions besoin d'un axe de symétrie pour la symétrie axiale, nous aurons cette fois besoin d'un point de symétrie. De ce fait, on dira de deux objets qu'ils sont "symétriques" par rapport à un point. Je vous explique rapidement comme se construit une symétrie centrale :) .

On va tout d'abord créer ce fameux point. Il s'agira de notre point de symétrie.

Image utilisateur


Nous le disions, tout va se jouer en fonction de ce point. Voici l'élément avec lequel nous allons travailler, nous allons déterminer son symétrique.

Image utilisateur


La distance entre le point de symétrie et le losange n'a pas d'importance. ;)


Pour déterminer le symétrique du losange, nous allons utiliser ses 4 pointes, à partir desquelles nous allons tracer une droite passant par le point de symétrie. Sur l'image ci-dessous, j'ai tracé une droite en partant de la pointe du bas du losange et passant par le point de symétrie.

Image utilisateur


J'ai pris soin de tracer une droite relativement longue, tout du moins aussi longue voire plus longue que la distance séparant la pointe du point de symétrie.

L'objectif est désormais d'effectuer la même opération pour toutes les pointes du losange.

Image utilisateur

Image utilisateur

Image utilisateur


En traçant ces quatre droites, nous avons mâché la moitié du travail. La deuxième étape consiste à travailler sur chacune des quatre droites. Commençons par la droite suivante, je l'ai remplie de rouge :

Image utilisateur


Nous allons devoir utiliser un compas pour réussir cet exemple. Évidemment, nous allons nous contenter d'imaginer un compas (je me vois mal en utiliser un sur mon écran d'ordinateur...).

Qu'allons-nous faire avec un compas ? Et bien, nous allons tout d'abord utiliser sa pointe, que nous planterons sur le point de symétrie :

Image utilisateur


Quant à la mine du compas, nous la poserons sur la pointe du bas du losange, c'est-à-dire la pointe à partir de laquelle la droite rouge a été tracée (je vous rappelle que nous ne travaillons que sur cette droite pour le moment) :

Image utilisateur


A présent, nous allons tracer deux arcs de cercle à l'aide du compas : le premier passera au niveau de la pointe du bas du losange, l'autre traversera la droite du côté opposé à la pointe du bas du losange.

Image utilisateur


Quand les deux arcs de cercle sont tracés sur une droite, il faut recommencer la même opération sur toutes les autres. J'ai toutefois recréé un exemple pour vous montrer à nouveau comment faire. Voici la droite sur laquelle nous allons travailler :

Image utilisateur


Je vous rappelle que l'on construit cette droite en la démarrant de la pointe droite du losange et en la faisant passer par le point de symétrie.


Je place la pointe de mon compas sur le point de symétrie et la mine à la pointe droite du losange. Puis, je trace deux arcs de cercle : le premier au niveau de la pointe droite du losange, quant au deuxième, je le fais traverser la droite du côté opposé de la pointe droite du losange en fonction du point de symétrie.

Image utilisateur


Voici le même schéma avec tous les arcs de cercle tracés :

Image utilisateur


Je me suis permis de transformer ce schéma afin de le simplifier et d'améliorer la lisibilité :

Image utilisateur


En observant attentivement le schéma et plus précisément les petites croix, on peut constater qu'elles forment une figure géométrique et pas n'importe laquelle : un losange ! On a donc réussi à déterminer le squelette du losange originel, ou plutôt le squelette de son symétrique ;) .

Image utilisateur


Et qu'est-ce qu'on fait avec ça ?


Tous ces schémas m'ont permis de vous expliquer le principe de la symétrie centrale. En gros, je vous ai présenté chaque étape de construction d'une symétrie centrale. Ce que je veux dire, c'est que vous savez désormais comment se construit une symétrie centrale. Je vous propose maintenant de voir comment elle se présente.

Image utilisateur


Le losange en haut à gauche est notre losange originel. Son symétrique est le losange en bas à droite (forcément). On en déduit facilement (et plus qu'une déduction, il s'agit d'une explication avérée) que le losange a pivoté autour du point de symétrie. C'est d'ailleurs la raison pour laquelle les couleurs se sont inversées (vérifiez bien) ;) .

Image utilisateur


J'espère que vous avez bien compris comment fonctionnait la symétrie centrale, car si c'est acquis, alors vous comprendrez très rapidement la moitié des prochaines fonctionnalités.

Voilà, c'est tout ce que j'avais besoin de vous dire, on va pouvoir véritablement débuter le chapitre et envisager la "transformation" dont on parle depuis tout à l'heure !

Symétrie des axes

Symétrie des axes



Et on commence fort puisque l'on va directement avoir affaire à la symétrie axiale. Tous les paramètres que nous nous apprêtons à étudier ne sont pas des outils à proprement dire. En tout cas, vous ne les retrouverez pas dans la boite à outils. Je dirais plutôt que ce sont des fonctionnalités de Photoshop, fonctionnalités que vous retrouverez en totalité en déroulant le menu Édition puis dans Transformation.

Image utilisateur


Les premières transformations que nous allons produire sont les deux dernières de la liste, à savoir "Symétrie axe horizontal" et "Symétrie axe vertical".

Et bien devinez quoi ? Ces deux types de transformation consistent à transformer un élément de la zone de travail... en son symétrique grâce à la symétrie axiale !

C'est parti pour un exemple illustré :) .

N'hésitez pas à travailler avec moi !
Télécharger l'image
Main_gauche.png
Pour télécharger l'image, cliquez droit sur le lien puis "Enregistrer sous..."




Voici l'image que nous allons transformer. Franchement, ce n'est vraiment pas compliqué maintenant que vous avez acquis la notion de symétrie axiale. En reprenant l'exemple de la pomme, on sait que l'on détermine le symétrique d'une image en fonction de son axe de symétrie et à partir du moment où, si l'on plie la feuille en deux à partir de cet axe, les deux images se superposent.

Image utilisateur


Ce cas est avéré sur cet exemple. Nous avons d'un côté l'image originelle et à gauche son symétrique que j'ai nommé "transformation".

Vous l'aurez donc compris, avec les transformations "Symétrie axe", on est en mesure de transformer le calque en son symétrique.

Attention, il n'est pas question de créer un nouveau calque contenant le symétrique du calque originel car en transformant le calque, vous le remplacez par son symétrique.

En d'autres termes, si l'image originelle est la suivante :

Image utilisateur


En cliquant sur "Symétrie axe horizontal", vous la transformerez sur l'axe des abscisses et c'est son symétrique qui la remplacera.

Image utilisateur


De la même manière, en transformant l'image originelle sur l'axe des ordonnées (ce qui signifie à la verticale), on la remplace par son symétrique :

Image utilisateur


D'accord, mais, va savoir pourquoi, j'ai l'impression que cette transformation n'est pas très utile, je me trompe ?


Carrément que vous vous trompez :D ! Bon, après, on peut trouver nécessité à cette transformation pour différents besoins, je ne saurais dire lesquels exactement. Je peux toutefois vous donner un ou deux exemples, le premier qui me vient étant lié au domaine de la photographie. Je dois vous avouer que, même si j'aime la photo, mes connaissances dans ce domaine sont relativement limitées et je ne suis pas assez renseigné pour vous fournir des explications techniques et avérées. J'ai alors demandé de l'aide à victor, fidèle membre du Site du Zéro reconnu pour son mauvais caractère ses talents de photographe et qui est par la même occasion mon fournisseur officiel de photos pour ce tutoriel. Il s'est fait un plaisir de me donner ses explications sur le sens directionnel d'une photo.

Citation : victor
Quand on prend une photo, il faut prendre en considération le sens de la lecture.
En Europe et en Occident de manière générale, on lit de gauche à droite. Ainsi, dans les régions où on lit de gauche à droite, faire "regarder" le sujet d'une photo vers la droite donne une illusion d'ouverture.

Faire regarder le sujet vers la gauche produit l'effet inverse : fermeture.

C'est très présent dans la façon d'appréhender et de comprendre une image chez les photographes, et même si c'est totalement inconscient chez la majorité des gens qui ne sont pas forcément renseignés, cela influence énormément votre lecture (on parle de lecture d'image pour dire appréhension, compréhension) d'une image (à votre insu).

Exemple



Une voiture qui se dirige vers la droite donne l'impression de partir.
Si elle va vers la gauche de l'image, on pensera alors qu'elle arrive.

Idem pour un objet volant. Par exemple l'avion ou l'oiseau, pour faire croire qui s'élève dans le ciel, devra le faire d'en bas à gauche à en haut à droite. L'inverse, d'en bas à droite à en haut à gauche, serait en quelque sorte inesthétique pour des raisons purement liées à la photographie. Je peux te parler par exemple de la lecture en Z, mais ça, c'est une autre histoire (qui aurait beaucoup plus sa place dans un article de photographie que dans un cours dédié à Photoshop) :-° ...

Du coup, on peut avoir recours à cette transformation quand on a besoin de modifier la direction de notre sujet :



Ici, on peut se poser une question : lequel de ces couloirs est celui d'où on est venu et lequel celui où nous allons ?


Merci encore à lui pour ces quelques lignes ma foi fort intéressantes :D .

Bon, il faut que je vous mette en garde sur un point essentiel : la transformation de type "miroir" (comme on vient de le faire avec la main). Celle-ci est à proscrire sur du texte ou un objet, une personne ou un paysage reconnaissable. En effet, une fois transformée sur l'axe des X ou des Y, le sujet de l'image pourrait ne plus être reconnaissable et votre transformation perdrait alors toute sa crédibilité :lol: .
J'ai justement concocté un petit exemple pour vous. L'image suivante présente un appareil photo des plus traditionnels.



Pourquoi n'est-il pas permis de transformer cette photo sur l'axe des abscisses de sorte à créer un effet "miroir" à l'exemple de l'image ci-dessous à votre avis ?

Image utilisateur


Outre le problème posé par l'inversion du texte, la transformation symétrique de cette image montre un appareil photo qui n'existe pas dans la réalité. Ou alors... ce serait un appareil "pour gaucher", vu qu'il forcerait son utilisateur à faire tout à l'inverse des appareils habituels : mise au point de la main droite, déclenchement et recharge de la main gauche ... Vous saisissez ? ;)

L'utilisation de cette transformation du texte n'est toutefois pas impossible ! On peut par exemple sans problème profiter de la symétrie verticale pour créer un effet assez sympa, j'ai justement prévu un exemple pour vous. Ainsi, on partirait de ce texte :

Image utilisateur


Admettons que l'on veuille créer une sorte de reflet à partir de ces textes. On va alors devoir dupliquer le calque du texte (on verra plus tard comment créer un calque de texte) et lui diminuer le pourcentage d'opacité de ce nouveau calque.

Image utilisateur


Enfin, on transforme ce nouveau calque verticalement et on le colle comme ceci au calque d'origine.

Image utilisateur


Comme quoi, on peut en faire des choses, avec ces deux transformations mine de rien :D .

Rotation

Je vous rappelle que toutes les transformations se trouvent dans le même menu (Édition > Transformation).

Nous allons à présent utiliser la transformation nommée "Rotation". Sur Photoshop, la rotation désigne le fait d'effectuer un mouvement autour d'un seul et même point. Si vous avez bien suivi le chapitre, ce que je viens de dire devrait faire "tilt"... Vous voyez où je veux en venir ? Je veux faire référence au fameux point de symétrie que nous avons rencontré lors de mon explication sur la symétrie centrale. On va donc avoir affaire à elle (comme par haaaasard ! :D ) !

Un exemple arrive, n'hésitez pas à travailler avec moi !
Télécharger le fichier source
Rotation.psd


Voici l'image sur laquelle je vais vous expliquer comment cela fonctionne.

Image utilisateur


Souvenez-vous, la symétrie centrale se construit à l'aide d'un élément essentiel : le point de symétrie (déjà répété maintes et maintes fois). On se souvient alors que l'on avait tracé des droites puis des arcs de cercle permettant de créer le squelette du symétrique. Je vous rassure, nous n'aurons pas besoin de faire tout cela : tout est automatisé, nous n'aurons qu'à cliquer sur des boutons figurant dans le menu Transformation. D'ailleurs, en déroulant ce menu (Édition > Transformation), on a droit à trois fonctionnalités :

  • Rotation 180°
  • Rotation 90° horaire
  • Rotation 90° antihoraire


Ces trois boutons vont nous permettre de définir un angle de rotation.

  • Rotation 180° : on "rotationne" (fait pivoter) la figure en fonction du point de symétrie sur 180°
  • Rotation 90° horaire : on fait pivoter la figure autour du point de symétrie dans le sens des aiguilles d'une montre sur 90°
  • Rotation 90° antihoraire : même fonctionnement, sauf que la rotation se fait dans le sens contraire des aiguilles d'une montre sur 90°


On donne alors trois angles à partir desquels l'élément sélectionné va effectuer une rotation, vous saisissez ?

Je vous présente le résultat de la transformation lorsque l'on demande à l'image d'effectuer une rotation à 90° horaire.

Image utilisateur


Image utilisateur


Et maintenant, le résultat une fois une rotation à 90° de type antihoraire effectuée.

Image utilisateur


De la même manière, toutes les feuilles ont été déplacée de 90° mais dans le sens contraire d'une aiguille d'une montre.

Image utilisateur


Quand on fait pivoter un élément à 90°, il faut juste "imaginer" que l'image de base est à l'origine présentée à l'horizontale pour se rendre compte qu'il s'agit bel et bien d'une symétrie centrale ;) .

A l'image des transformations "Symétrie axe", une fois l'élément transformé, il est remplacé par son symétrique.

Transformation en homothétie

Homotéquoi ? Encore un mot tordu à apprendre !


Aucune raison de paniquer ni de s'énerver, je ne vous demanderai pas de retenir ce terme. D'autant plus que pour un nom aussi tordu que celui-ci comme vous le dites, vous allez voir que sa difficulté d'utilisation est moindre comparée à ce que l'on a pu faire jusqu'ici :-° .

Bon, j'ai quand même une mauvaise nouvelle. En fait, il est encore question de symétrie, surtout qu'il s'agit d'un type de symétrie encore différent de ceux que nous avons déjà étudiés. D'ailleurs, l'homothétie, c'est aussi une transformation géométrique.

Cette fois-ci, je vous épargne sa définition type que je juge franchement trop complexe pour nous :p , on va se contenter d'utiliser la transformation en s'accompagnant de quelques explications, ce sera bien plus significatif et explicite pour vous, je vous l'assure ;) .

Jusqu'ici, nous n'avons pas eu besoin de manipuler quoi que ce soit. Tout ce que l'on a fait, c'est cliquer sur des boutons du menu à partir desquels une transformation s'effectuait automatiquement. Cette fois-ci, on change la donne : si nous cliquons sur le bouton Homothétie dans le menu Transformation, nous ne faisons qu'activer la fonctionnalité que nous serons alors amenés à utiliser manuellement avec la souris de notre ordinateur.

Un exemple arrive, n'hésitez pas à travailler avec moi !
Télécharger l'image
SdZ.png


Pour cet exemple, je travaillerai sur ce document :

Image utilisateur


On aura tous reconnu le devenu-célébrissime logo du Site du Zéro. En allant chercher la transformation dans Édition > Transformation > Homothétie et en cliquant dessus, je m'aperçois d'un changement au sein de ma zone de travail : une sorte de cadre apparait.

Image utilisateur


Ce cadre signifie que la transformation est activée : nous allons pouvoir effectuer la transformation. Notre travail, à nous, consistera à déplacer les petits carrés transparents que l'on peut apercevoir aux bords et aux coins de l'image.

Leur utilisation est relativement simple : il suffit de rester cliquer sur l'un des carrés (c'est-à-dire maintenir le clique dessus) et de bouger le curseur de la souris. De cette manière, on transforme le calque dans la mesure où l'on va déplacer le carré transparent, ce qui va engendrer une modification du fameux cadre et donc de l'élément encadré. Une fois qu'un élément est encadré par la transformation, il le reste, même si l'on y modifie son cadre.

D'accord, mais en quoi l'homomachin est-elle une symétrie ?


Si j'utilisais la définition donnée par Wikipédia et que je vous demandais ensuite si vous avez réellement compris comment fonctionnait la transformation, je suis certain que beaucoup serait aux abonnés absents :-° . Ah non ? Entendu :D :

Une homothétie est une transformation géométrique d'un espace affine dans lui-même, fixant un centre de l'homothétie, et transformant un hyperplan en un hyperplan parallèle.

Non, franchement, je ne sais pas vous, mais je ne trouve pas qu'une telle définition est vraiment parlante, je crois qu'il vaut mieux que l'on découvre la nouvelle fonctionnalité via des exemples illustrés, comme j'ai davantage l'habitude de faire maintenant :) . Simplement, je peux vous dire sans rentrer dans des détails techniques que cette transformation comme telle qu'on l'utilise en infographie va nous permettre de réduire ou agrandir une image sur la largeur ou la hauteur.

Voyons comment cela fonctionne :) .

Nous avons la possibilité de modifier la position de 8 carrés transparents : 4 aux coins et 4 sur les arêtes (c'est-à-dire les bords de l'image, pas besoin de vous faire un dessin non plus :-° ). Chaque carré permet de transformer l'élément d'une certaine manière. Par exemple, en travaillant sur le carré suivant, on va être en mesure de modifier la hauteur du cadre (et donc de l'image, je vous rappelle que l'on travaille la hauteur sur l'axe des ordonnées (Y)).

Image utilisateur


De même, en travaillant sur le carré gauche situé au bord de l'image, on peut modifier la largeur de cette dernière :

Image utilisateur


Enfin, en modifiant la position de l'un des carrés transparents situés aux coins de l'image, on peut modifier la taille générale de l'image, c'est-à-dire la rétrécir sur la largeur et/ou sur la hauteur, c'est-à-dire sur la diagonale.

Image utilisateur


Je vous rappelle qu'il faut maintenir le clique sur le carré transparent pour pouvoir le déplacer avec le curseur. Pour cet exemple, j'ai commencé par déplacer le carré transparent situé en haut, sur le bord de mon image. J'ai eu deux choix : soit agrandir la hauteur du calque, soit la rétrécir. Pour le coup, je l'ai rétrécie :

Image utilisateur


Remarque : sur l'exemple ci-dessus, on peut apercevoir en fond l'image originelle, c'est-à-dire celle qui n'a pas été transformée. Ne vous laissez pas tromper, c'est pour l'exemple uniquement ;) .

Pour valider la transformation (c'est-à-dire retirer le cadre et donc laisser l'image telle qu'on l'a transformée), j'ai utilisé la touche Entrée de mon clavier. Notez que j'aurais très bien pu cliquer sur le bouton suivant dans la barre des options : Image utilisateur ;) .

Image utilisateur


Qu'est-ce que cela donne si je déplace l'un des carrés transparents situés aux coins de l'image ?


Comme je vous l'ai dit, si l'on déplace l'un de ces petits carrés, nous pouvons transformer le calque sur l'axe X et Y (abscisses et ordonnées) c'est-à-dire sa largeur ET sa hauteur (on va alors effectuer un déplacement en diagonale). Faisons un essai :) .

Pour effectuer une transformation de manière proportionnelle, il faut appuyer simultanément sur la touche Shift de votre clavier d'ordinateur.


Pour cet exemple, je travaillerai sur ce petit carré transparent.

Image utilisateur


Je vais alors cliquer dessus et appuyer simultanément sur ma touche Shift afin d'effectuer une diminution des tailles de l'image de manière proportionnelle.

Image utilisateur


On constate que l'image a globalement rétréci. Je valide ensuite la transformation, et voici le résultat obtenu !

Image utilisateur


Par comparaison, on remarque le changement de taille radical :

Image utilisateur


Transformer en homothétie, pour quoi faire ?



C'est une question qui va souvent revenir dans ce chapitre et celui qui suit. C'est la raison pour laquelle je vais, chaque fois que je juge nécessaire de le faire, vous proposer un exemple concret de ce à quoi peut servir telle ou telle transformation. Ainsi, vous pourrez vous faire une idée de l'utilité de chacune d'entre elles ;) .

L'exemple que j'ai choisi pour l'homothétie est basé sur l'incrustation d'une image dans un écran de télévision. On va donc commencer par choisir une télévision :-° .

Image utilisateur


J'ai alors cherché une image relative à la télévision à insérer dans cet écran. Allez savoir pourquoi, la première idée qui m'est venue est... le JT ! Et qui dit JT dit... PPDA :D .

Image utilisateur


Notre objectif sera le suivant : nous allons tenter de réduire la taille de cette image de sorte à ce que ses nouvelles dimensions nous permettent de l'insérer dans l'écran d'ordinateur. On va donc activer la transformation Homothétie avant de rétrécir l'image puis de la placer au niveau de l'écran.

Image utilisateur


Un nouvel exercice amusant !



Et si nous travaillions l'homothétie d'une toute autre manière ? On pourrait par exemple utiliser deux images aux sujets communs mais aux échelles différentes...

Mais qu'est-ce qu'il est en train de me raconter, là... ? o_O


Pour illustrer l'homothétie, victor m'a suggéré un petit exercice de mise à l'échelle. Il m'a fourni deux photos que je vous présente ci-dessous. Chacune d'elles présente un appareil photo et une règle. Votre mission, si vous l'acceptez, consiste à "réunir" ces deux photos en une seule et même image sur laquelle les appareils photos apparaitront à la même échelle, ceci parce que l'on va faire superposer les mesures des deux règles et pour que l'on se rende bien compte de leur différence de taille.

Image utilisateur
Konica - © vhf/victor


Image utilisateur
Minox - © vhf/victor


N'hésitez pas à travailler avec moi !
Télécharger l'image KONICA
Konica.jpg
Télécharger l'image MINOX
Minox.jpg
Pour télécharger les images, cliquez droit sur les liens puis "Enregistrer sous..."


Voici les consignes : on va chercher dans un premier temps à superposer les deux images. Ensuite, pour réussir l'exercice, nous allons réduire l'image de l'appareil photo Minox à l'aide de l'homothétie de sorte à ce que les mesures de la règle se superposent à celles de la règle de l'image du Konica.

Veuillez tout d'abord créer une nouvelle zone de travail aux dimensions supérieures à celles des deux images. Par exemple : 800*650px. On aura ainsi toute la place pour travailler ;) .
Puis, veuillez copier et coller les deux images ci-dessus ou les ouvrir dans Photoshop pour les faire ensuite glisser dans la zone de travail que vous venez de créer. Au final, la fenêtre de calques doit ressembler à celle-ci :

Image utilisateur


Veillez à ce que les deux calques des photos (Minox et Konica dans la fenêtre de calques ci-dessus) ne soit pas verrouillés ! Je vous signale aussi que le calque Minox doit figurer en tête de liste (pareil, comme sur la fenêtre de calques d'au-dessus) dans la fenêtre de calque. Enfin, veuillez placer l'appareil photo Minox au-dessus de l'appareil photo Konica dans votre zone de travail à l'aide de l'outil Image utilisateur Déplacement.


Nous allons maintenant réduire le calque Minox afin que les mesures de sa règle se superposent avec celles de la règle Konica.

Petit problème : la règle Konica est totalement masquée par le calque Minox qui figure en premier plan dans la fenêtre de calques. Si vous avez bien suivi depuis le début, vous savez qu'il existe une solution très efficace qui consisterait à modifier la transparence d'un calque, en l'occurrence celui de Minox, ceci dans le but de laisser apparaitre celui de Konica :-° ... Je vous invite alors à réduire l'opacité du calque Minox à 50% puis activer la transformation Homothétie sur ce même calque.

Image utilisateur


Nous allons utiliser l'homothétie afin de réduire l'image de l'appareil photo Minox pour que les mesures de sa règle se superposent à celles de la règle de l'appareil photo Konica. En d'autres termes, nous allons faire en sorte que les mesures 0 et 10 des deux règles ne fassent qu'une.

Image utilisateur


Allez-y, commencez. Utilisez l'homothétie afin de réduire proportionnellement (appuyer simultanément sur la touche Shift ou Command) l'image Minox et rassembler les deux mesures de chaque image que je viens de vous donner. Voilà où je veux en venir :

Image utilisateur


Validez la transformation quand vous la jugez correcte puis rétablissez l'opacité de l'appareil photo à 100%. Le travail est terminé, vous venez d'ajuster une image à l'échelle d'une autre :D .

Image utilisateur


On a pu, ainsi, se rendre compte de la différence de taille entre l'appareil photo Konica (plus imposant) et l'appareil photo Minox (plus petit) grâce à la transformation en homothétie ^^ .

Inclinaison

Ahhh, cette nouvelle transformation, elle va vous plaire, cela ne fait aucun doute ! Nous nous intéressons désormais à la transformation nommée Inclinaison.

Quand on clique dessus, nous n'avons à priori rien de nouveau. On retrouve notre espèce de cadre avec ses fameux petits carrés transparents. Ce qui change, c'est quand on manipule ces petits carrés.

Ici, il n'est plus réellement question de symétrie mais de redressement. Nous allons tout bonnement incliner le calque (pas difficile à deviner, je le conçois :-° ), c'est-à-dire que l'on va le pencher et pourquoi pas même le coucher.

Un exemple arrive, n'hésitez pas à travailler avec moi !
Télécharger le fichier source
Inclinaison.psd


Voici l'image sur laquelle je vais vous proposer d'effectuer une inclinaison.

Image utilisateur


Une fois la transformation Inclinaison choisie, on l'active :

Image utilisateur


En maintenant le clique sur le carré transparent situé en haut au milieu de l'image puis en déplaçant le curseur vers la droite, on remarque que le haut du calque se déplace en conséquence sans que le bas ne bouge.

Image utilisateur


Image utilisateur


En transformant l'image à partir d'un des carrés situés en son milieu (comprendre tous les carrés sauf ceux qui se situent dans les coins de l'image), on ne travaille que sur l'axe des abscisses ou l'axe des ordonnées. Sur cet exemple, nous avons travaillé sur l'axe des abscisses (nous avons effectué un transformation de gauche à droite). On remarque alors que le déplacement a été totalement linéaire (si nous avions cliqué sur le carré transparent situé au coin inférieur droite par exemple, nous aurions pu effectivement travailler sur l'axe des ordonnées et des abscisses car nous aurions pu effectuer un déplacement de haut en bas et de gauche à droite).

Continuons. Là, on peut déjà dire que l'image est inclinée, mais allons accentuer cette inclinaison en travaillant sur ce petit carré.

Image utilisateur


Je déplace alors ce carré vers le bas.

Image utilisateur


Je vous invite à comparer les deux dernières images. La différente n'est pas très importante, mais clairement visible. N'oubliez pas qu'il faut taper sur la touche Entrée de votre clavier (ou cliquer sur le bouton prévu à cet effet dans la barre des options) pour appliquer la transformation.

Pour le plaisir, j'ai ajouté une petite ombre portée à l'image pour lui donner un peu plus de style.

Image utilisateur


Qu'est-ce que cela donne si on transforme le calque à partir des coins de l'image ?


En travaillant avec les coins de l'image, l'inclinaison sera encore plus prononcée. Je dirais même que l'image sera couchée, on donnera l'impression qu'il existe un sol invisible sur lequel l'image s'est posée.

Je vous propose un petit essai, toujours sur la même image bien entendu.

Image utilisateur


Nous allons maintenir le clique sur le coin inférieur droite de l'image.

Image utilisateur


Puis, nous déplaçons notre curseur comme nous l'avons appris. On note encore une fois la linéarité sur les deux axes ;) .

Image utilisateur


On y ajoute un petite touche personnelle, et voilà le résultat :-° ...

Image utilisateur


Plutôt sympa cet effet de perspective, n'est-ce pas ? :)
Allez, on passe au huitième et dernier chapitre de cette première partie. Courage ! :)
Chapitre précédent Sommaire Chapitre suivant

Partager

6 commentaires pour "Techniques de transformation sur les axes X et Y (1/2)"
Note moyenne : 3.73 / 4 (573 votes)
Pseudo Commentaire
Hors ligne sp0z # Posté le 10/02/2011 à 12:09:45
Ma vie est un projet !
Avatar

Avis : Très bon Groupe : Anciens

Ville : Puteaux
Pays : France métropolitaine

Bonjour,

C'est une manoeuvre assez complexe à expliquer, j'ai quand même tenté le coup, tu trouveras cela dans le chapitre 3, dans la partie "Modes de fusion", juste au niveau de l'exemple "Big Ben et panneau de signalisation" et plus précisément en-dessous du lien permettant de télécharger le fichier source. :)

A bientôt !
 
Hors ligne Psychopomp # Posté le 10/03/2011 à 14:13:58
Sciopneustie ?
Avatar

Avis : Très bon

Attention, juste pour pinailler, tu dis dans la première section que

"(Photoshop ne sait faire que cela, de la 2D, de toute manière)"


Ce n'est plus rigoureusement exact depuis la version Extended, même si ce n'est ni Blender ni Maya. A priori, avec les développements successifs, les zones perméables risquent d'être de plus en plus fréquentes !

"The most ordinary things are to philosophy a source of insoluble puzzles. With infinite ingenuity it constructs a concept of space or time and then finds it absolutely impossible that there be objects in this space or that processes occur during this time... the source of this kind of logic lies in excessive confidence in the so-called laws of thought."

-- Ludwig BOLTZMANN, Theoretical Physics & Philosophical Problems.

 
Hors ligne hamzou90 # Posté le 13/11/2011 à 12:28:40

Ville : Rabat
Pays : Maroc

Excellent tutoriel !!! Juste j'aurai aimé faire un petit QCM pour prouvé que j'ai compris ^^

HARRY POTTER !!

pour toujours !
 
Hors ligne Blenan # Posté le 17/04/2012 à 13:55:55
Don't surrender a damn thing

Avis : Mitigé

Tuto sympa ! J'approuve Hamzou90 un petit QCM ne ferait pas de mal ;) Néanmoins le reste est excellent comme tous les autres tutos :D
Hors ligne Jorn_le_noir # Posté le 25/04/2012 à 13:34:25

Avis : Bon

Qu'est ce que c'est bon de se replonger dans ce genre d'exo... ça me rappelle tout mes anciens cours. Mais avec des bon exercices en plus ici. Je me fais plaisir en suivant ce tuto ;) !

Voir tous les commentaires