Une rendu original et facile à réaliser

thumb_3d_perspectiveAujourd’hui pour le blog de mon agence je devais réaliser des articles présentant les derniers sites en date. Pour chaque article je souhaitais avoir comme photo miniature (ou image vedette ou thumbnail) un screenshot de la page d’accueil mais avec un petit plus. A vrai dire j’avais déjà mon idée en tête; il s’agissait d’un effet perspective que j’avais déjà vu sur le site internet de WebMaestro, sur son portfolio en bas de page. J’avais apprécié ce petit effet essentiellement parce qu’on le retrouve rarement ailleurs et qu’il valorisait la marque du site toute en présentant une petite partie de la charte graphique, bref un effet perspective qui donne envie de cliquer !

Pour avoir ce rendu, j’avais commencé à utiliser l’outil transformation > perspective de Photoshop mais ça n’avait rien à voir avec ce que je voulais. Je me suis donc renseigné et j’ai vite trouvé la solution. Pour ce rendu il ne faut non pas utiliser l’outil transformation > perspective mais plutôt l’outil Recadrage perspective, fournis avec l’outil recadrage.

Outil recadrage : effet 3d perspective

  1. Copiez l’écran du site de votre choix en utilisant les touche Alt Gr + Impécr Syst.
  2. Allez sur Photoshop et créez un nouveau document (Ctrl+N). Par défaut les dimensions correspondent à la copie de l’écran.  En effet, dans les paramètres prédéfinis nous pouvons voir « Presse Papier » (ou ClipBoard en anglais).
  3. Collez votre screenshot sur votre nouveau document (Ctrl + V)
  4. Nous allons maintenant redimensionner l’écran aux dimensions souhaitées. Pour cela prenez l’outil recadrage (C) et dans la barre d’outil en haut, nous allons définir la largeur, la hauteur et  la résolution de notre choix. Pour ma part je veux une image de 800×600 pixels. La résolution va dépendre de l’utilisation de votre image. Si elle est destinée à rester sur un ordinateur, laissez une résolution de 72 pixels/pouce. Si vous souhaitez imprimer l’image, passez à une résolution de 300 pixels/pouce.
  5. Après avoir défini les dimensions souhaitées dans la barre du haut, vous pourrez modifier, déplacer, élargir, raccourcir le cadre sans vous souciez des dimensions puisque par défaut l’outil va permettre de garder le ratio 800×600. Cliquez ensuite sur Entrée pour valider le recadrage.
  6. Maintenant que notre image est aux dimensions souhaitées, nous allons utiliser l’outil recadrage perspective pour créer notre petit effet 3d. Sur les versions plus récentes de Photoshop l’outil recadrage perspective est séparé de l’outil simple recadrage. Dans les versions antérieures, il vous faudra cocher une case « perspective » dans la barre du haut.
  7. Une fois l’outil en main, nous allons prendre le coin inférieur gauche et le glisser vers le haut. Vous verrez que celui-ci est indépendant des autres. Cet outil recadrage perspective va vous permettre de remonter ce point tout en disant au logiciel que le côté gauche devra être de la même taille que le côté droit. Photoshop va s’adapter et redimensionner l’image.
  8. Appuyez maintenant sur Entrée pour valider et vous retrouverez le rendu voulu. Nous avons donc un bel effet de perspective 3D sur notre screenshot. Vous pouvez faire Ctrl+Z pour revenir en arrière si vous n’êtes pas entièrement satisfait du résultat.
Sur les navigateurs tels que Firefox ou Google Chrome, vous retrouverez des modules qui vont permettront de faire des screen shot un peu plus contrôlés de votre écran. Vous pourrez ainsi sélectionner la partie visible, tout le site ou encore une partie spécifique de la page. MODULE POUR FIREFOXMODULE POUR GOOGLE CHROME