Share
Dans ce tutoriel, je vais vous montrer comment prendre votre design plat (comme dans deux dimensions, ne pas appartement comme dans la tendance actuelle du design) et ajoutez de la vie en le moquant dans un plan 3D en perspective. Le but est de présenter votre conception de manière plus dynamique, en lui donnant plus de profondeur et un attrait visuel. Cela peut être un moyen très efficace de présenter des visuels aux clients.
Cet effet peut être obtenu de différentes manières, par exemple en utilisant les propres outils 3D de Photoshop et en créant des calques 3D. Cependant, je suis plus à l'aise avec les logiciels 3D appropriés tels que 3ds Max, car ils offrent beaucoup plus de contrôle sur la caméra, vous permettant de faire pivoter le plan 3D avec un meilleur contrôle de la lumière et des ombres. Au début, cela peut sembler plus compliqué, mais lorsque vous aurez fait cela une fois, vous pourrez ensuite vous moquer de votre travail en quelques minutes..
Si vous débutez en 3D, nous avons une pléthore de tutoriels pour vous aider à démarrer… Les principes démontrés ici sont agnostiques d'application; vous pourrez les appliquer à n’importe quel logiciel 3D. Pour suivre, vous devez connaître Photoshop et avoir au moins ouvert un programme d’outil 3D avant de.
Quoi qu'il en soit, pour ce tutoriel, je vais me moquer de la conception de notre dernière application appelée TriplAgent, qui semble se propager comme une traînée de poudre sur ces interwebs. Vous pouvez voir la conception entière sur mon portefeuille Behance.
Ouvrez votre application 3D. J'utilise 3ds Max 2012, mais comme mentionné précédemment, vous pouvez utiliser à peu près n'importe quel outil 3D..
J'utilise Vray comme moteur de rendu principal car il offre un éclairage et des ombres réalistes. Assurez-vous d'allumer Illumination indirecte, mais vous pouvez aussi utiliser le rendu par défaut de Max et obtenir des résultats similaires.
Appliquer des paramètres similaires à ceux des captures d'écran.
Il est maintenant temps de créer l'arrière-plan. Aller à Créer> Sous primitives standard, choisissez VRayPlane.. Un avion apparaîtra comme dans la capture d'écran ci-dessous. Faites-le glisser sur le côté, peu importe où.
Le VRayPlane sera l’arrière-plan de votre scène. Très bien, créons le plan dans lequel votre dessin va s'asseoir. Encore une fois, allez à Créer> Primitives standards> Box. Sous "paramètres", entrez les dimensions indiquées ci-dessous (il s'agit de la taille d'écran pour un iPhone 5)..
Évidemment, vous pouvez entrer toutes les dimensions que vous voulez tant que votre conception respecte les mêmes proportions.. Nous devons maintenant appliquer une carte UV afin que la conception s’enroule bien autour des coins de l’avion. Allez à "Modifier" dans le panneau à droite et choisissez UVW Mapping à partir de la liste de modificateurs. Assurez-vous que "Planaire" est sélectionné.
Il est temps d’appliquer les matériaux, alors ouvrez le Éditeur de matériaux dans le coin supérieur droit de la barre d'outils principale. Créez deux matériaux VRay, un pour votre arrière-plan (le plan VRay) et un pour votre boîte que vous venez de créer. Glissez et déposez le matériau sur chaque objet.
Faisons un rendu rapide. Cliquez sur l'icône Render Production (l'icône de la théière)…
Un peu gris et nu, mais c'est un bon début. Bon travail, le temps de mettre une belle robe. Nous devons appliquer notre image de maquette réelle en tant que matériau à l'objet 3D. Ouvrez l'éditeur de matériaux et cliquez sur le matériau que vous avez affecté à la boîte..
Faites défiler la liste jusqu'à ce que vous voyiez le déploiement de Maps, puis cliquez sur Diffuse> Cartes> Standard> Bitmap et accédez au dossier où vous avez enregistré votre dessin.
Remarque: Mon fichier était un fichier .png de 1136 x 640 pixels.
Vous verrez maintenant votre fichier enroulé autour de la sphère dans l’emplacement prévu à cet effet. Cliquez sur l'icône en forme de damier et vous verrez le dessin enroulé autour de votre boîte en vue en perspective. N'oubliez pas de définir la valeur de flou sur 0,01 pour obtenir un rendu net de votre image..
Frappé Rendre…
Voila! La conception enveloppe bien votre boîte. Allez-y et enregistrez ce fichier au format png ou tif. Il est temps de changer la couleur de fond et de pimenter les choses…
Il y a deux façons de changer la couleur de fond. Soit vous pouvez changer la couleur du matériau que vous avez affecté à votre VRayPlane ou vous pouvez changer la couleur dans Photoshop. Je vais vous montrer comment faire cela dans Photoshop, car il est beaucoup plus facile de changer la couleur sans refaire le rendu de votre scène..
Allons-nous en. Faites un clic droit sur votre VrayPlane et cliquez sur "Masquer la sélection".
Nous devons cacher le fond afin qu'il n'apparaisse pas dans le rendu. Frappé Rendre et cliquez sur l'icône alpha comme indiqué ci-dessous dans la capture d'écran. Enregistrez l'image au format .png et nous avons terminé ici.
Il est temps de passer à votre meilleur ami, Photoshop.
Avec le canal alpha, nous pouvons créer un masque et isoler l'arrière-plan. Prenez le fichier alpha que vous venez de sauvegarder et ouvrez-le dans Photoshop. Aller à Canaux et sélectionnez (CMD + A) le canal alpha en bas. Copiez-le dans le presse-papier.
Ouvrez votre image rendue que vous avez précédemment enregistrée. Encore une fois, allez dans la fenêtre des canaux et collez le canal alpha que vous venez de copier. Cette fois, nous devons sélectionner le masque actuel, maintenez donc CMD enfoncé et cliquez sur le masque..
Assurez-vous que le masque est sélectionné. Ouvrez la fenêtre des calques. En tenant le CMD clé, clic gauche sur Ajouter un masque de calque comme on le voit ci-dessous. L'avion doit être bien isolé du fond.
Supprimer l'arrière-plan et isoler l'avion. Créez un nouveau calque et remplissez-le de la couleur de votre choix. Tant que ça a l'air bien. Mkay.
Nous allons maintenant ajouter des ombres. Vous pouvez conserver l'ombre qui était dans l'image mais utilisons cette fois les ombres de Photoshop. CMD + cliquez à nouveau sur votre masque et créez un nouveau calque. Remplissez la sélection avec une couleur sombre qui correspond à votre arrière-plan. Ouvrez les styles de calque et jouez avec l'effet d'ombre portée jusqu'à ce que vous trouviez ce que vous aimez.
Assurez-vous que l'angle des ombres est correct. Bon travail, nous avons terminé! Une façon plus agréable de regarder une conception 2D, ne pensez-vous pas?
Voici ce que vous pourriez vous retrouver avec:
Dans ce didacticiel, nous avons expliqué comment transformer une conception 2D en une maquette 3D avec perspective. Je suppose que beaucoup d’entre vous ont été un peu intimidés par la 3D, mais c’est vraiment assez basique une fois que vous maîtrisez la réalité.
Il serait intéressant d’essayer d’expérimenter avec différentes tailles de plan, en utilisant différents angles et en modifiant également l’objectif de la caméra pour obtenir une distorsion de la perspective. Vous pouvez voir la conception complète sur mon portefeuille Behance et également consulter l'application mobile TriplAgent. Merci d'avoir suivi!
Vous n'avez pas le temps ni les compétences nécessaires pour travailler avec Photoshop? Ne laissez pas ça vous arrêter.
Placeit est un générateur de maquette; un outil en ligne qui vous permet d'intégrer vos propres conceptions (conceptions d'interface utilisateur, logos, autres éléments de marque) dans des scènes photoréalistes. Certainement une alternative rapide et facile à Photoshop.
Chaton près d'une maquette de l'iPhone X allongé sur un livre sur un lit pour fille
Modèle iPhone X posé sur une table vintage
Accentsconagua