Quand vous pensez "design graphique", vous pensez au type, aux dispositions, logos, cartes de visite, etc. Et si on vous demande de créer un logo 3D, une illustration 3D ou même un modèle interactif 3D ? Bien que ce style de design ne soit pas commun, il est intéressant de sortir de votre zone de confort et de montrer aux clients une approche différente des techniques traditionnelles.

Les clients auront une meilleure compréhension de vos designs si vous les affichez sur un produit. Par exemple, un logo placé sur un produit approprié maximise votre design plus qu'un design plat (pensez à un logo de café sur un gobelet en papier). Apprendre à créer des designs 3D dans Photoshop vous permettra de réaliser ce produit 3D particulier. Voici un guide simple pour créer des designs 3D avec Adobe Photoshop.

1ère Etape - Importer L'Objet

C'est parti ! Ouvrez Photoshop. Créez un nouveau document - pensez à la taille des toiles et comment sera placé l'objet. Glissez et déposez, connectez ou incorporez les fichiers 3D. Notre fichier 3D est utilisé pour dessiner une batte de baseball. Vous pouvez trouver des fichiers 3D alternatifs gratuits ou payants ici.

Notre fichier d'exemple inclut :

• OBJS - le tissu de l'objet
• PNGS - des cartes de texture
• fichier MTL - fichier de matériel

Glissez et déposez, connectez ou incorporez les fichiers 3D (3D > Nouvelle Couche 3D du fichier). Il vous sera présentée une boite de dialogue d'importation. Cliquez sur 'OK'.

Si vous n'avez pas déjà le panneau 3D, Photoshop vous demandera de télécharger une mise en page 3D. Cliquez "Oui". Votre design 3D devrait être chargé. Si vous cliquez et faites tourner le modèle, votre perspective change. Notez les ombres et la lumière quand vous le déplacez.

Le modèle a simplement un problème : il est tout gris :(

2ème Etape - Préparer Le Matériel

Nous devons ajouter les textures au matériel. Pour ce modèle spécifique, il y a deux types classiques de texture : la couleur et les attributs.

• La Couleur - décrit la texture de la surface
• Attribut - version en noir et blanc de la table de couleurs, vous permet de définir comment vous voulez que la surface soit bosselée, rugueuse et brillante selon les endroits.

Comme ce n'est pas un modèle compliqué, nous avons quatre images. Deux pour le haut et deux pour le bas. Les autres modèles diviseront cela en davantage de cartes spécifiques et individuelles.

Dans le panneau 3D, vous trouvez une liste déroulante sous (objMesh).

C'est là où vous trouvez tout le matériel. Cliquez sur Top et vous verrez les matériaux s'ouvrire dans le panneau de propriétés. Chaque réglage ici peut être contrôlé directement pour l'ensemble du modèle ou avec précision via une image.

Cliquez sur chaque icône de dossier à côté de chaque attribut. Vous pouvez charger une nouvelle texture. Par exemple, cliquez sur l'icône de dossier à côté de "diffuser" et téléchargez le matériel du fichier que vous avez téléchargé. Cela donnera de la couleur à la batte.

Déplacez et ajustez les curseurs; brillance, reflet, rugosité et trous. Cela rendra l'objet plus réaliste.

Répétez les étapes pour les autres formes de l'objet - dans ce cas, le milieu n'a pas de texture. Si vous vous sentez l'âme aventurière, vous pouvez même créer un logo à mettre sur la pièce au centre de la batte.

3ème Etape - Composition

Tout comme un décor réel, nous devons préparer notre 'décor'. Si vous cliquez sur la batte, vous pouvez obtenir un axe 3D à télécharger. Cela vous permettra de déplacer, redimensionner, et faire tourner la batte sur les trois axes XYZ. Passez votre souris sur une des flêches et points forts fera clignoter, montrant chaque action. Positionnez la batte comme vous le souhaitez, essayez juste de garder l'échelle proportionnée.

En bas du panneau 3D, vous trouverez aussi les éclairages et modèles intégrés. Vous pouvez les ajouter, ajuster, et positionner pour remplir l'espace et illuminer votre objet. Quand vous progressez dans vos designs, vous voulez acquérir des modèles ou autres éléments pour vous aider à créer des ensembles 3D. Cela peut aller des éléments d'arrière plan sans importance aux modèles complexes de grilles et arrière-plans.

4ème Etape - Enduit

En gros, ce sont les bases de votre réglage 3D. Si vous voulez aller plus loin de rendre l'objet plus réaliste, il est temps de travailler la présentation. Cliquez sur endui (3D > Endui). Enduire l'image lui donnera un look frais. Selon la taille et la précision de votre objet, cela peut prendre un peu de temps (mais cela vaut la peine). Allez marcher, surfez sur internet, lisez nos autres articles.

Si vous cliquez sur couches, vous remarquerez quelque chose d'important.

Le reste de Photoshop voit la batte simplement comme une couche classique. Vous pouvez dessiner autour comme pour toutes les images que vous avez importées. Vous pouvez faire le design, modifier, et enfin exporter, sans problème. C'est un travail simple. Sinon, vous auriez à tout installer d'un programme 3D, l'enduire avec un procédé plus complèxe, et passer une ou deux semaines à étudier les paramètres et shaders de l'enduit. Avec la possibilité d'avoir à enduire de nouveau jusqu'à obtenir l'image souhaitée.

Limitations

Créer des modèles 3D rapides et simple est parfait pour Photoshop. Si vous avez un modèle compliqué ou un maillage brisé, Photoshop n'est pas l'outil à utiliser. Vous rencontrerez aussi des problèmes avec les formats de fichier. Photoshop ne peut ouvrir que les fichiers 3D suivants (Site Aide Adobe):

• 3D Studio (import seulement)
• DAE (Collada)
• Flash 3D* (export seulement)
• JPS * (Jpeg Stereo)
• KMZ (Google Earth 4)
• MPO* (Multi-Picture format)
• U3D
• Wavefront|OBJ

Pour combler les failles, Adobe fait du rattrapage. D'autres produits offrent davantage d'endui et matériel avancés. Pour une méthode rapide et simple de designs, Photoshop fera l'affaire.

Web Design

Pourquoi le design 3D est utile même pour les web designers ? Nous nous intéressons à deux approches disponibles pour l'intégration 3D et internet : faire semblant ou intégrer.

Vous pouvez soit créer une séquence pré-rendue et la rejouer précisément, comme le fait Apple pour sa page Mac Pro ou vous pouvez créer un recouvrement d'internet comme fait Thingiverse. Les éléments clé répondront aux besoins exacts de votre public. Il sera plus rapide d'intégrer des images que de télécharger et d'enduire un modèle 3D, mais vous sacrifiez les vues disponibles.

Il existe quelques centaines de manières de faire semblant. Cela va des logiciels gratuits aux payants, et couvre une large gamme d'options. Elles font toutes à peu près la même chose : prenez une série d'images et repassez-les avec javascript. Une des options courantes est Sprite Spin. Le principe fondamental est que vous obtenez votre objet 3D enduit en cadres individuels faisant une rotation, et le donnez à jQuery. Les cadres sont mis en boucle, créant la rotation.

Ce n'est pas la seule façon d'utiliser cette librairie particulière. Elle donne le contrôle de Javascript. Une seule animation peut être activée en réponse à la position scroll, une commande utilisateur gui, ou toute autre chose. Sprite Spin a été crée à des fins de vidéos contrôlable en boucle, mais chaque partie du code peut être utilisée de plusieurs façons.

Pour une solution plus personnalisée, il y a aussi l'option d'utiliser l'API de la vidéo HTML 5. Ce nouvel API permet tellement de choses sur un site, sans avoir à modifier vraiment le code lui-même. Il est possible de programmer une vidéo pour qu'elle tourne en boucle, s'active automatiquement, change son temps et bien plus. Dans certains cas, ce peut être fait avec l'intégration. La seule différence sera le fichier de ressource utilisé. Au lieu d'utiliser une série de PNGs, cette solution utilise simplement une vidéo du contenu 3D. Avec le bon code, ce pourrait être utilisé pour donner des images 3D à l'ensemble du site à partir d'un ensemble d'actifs.

Les actifs sont l'exception de cette approche. Il ne sera pas idéal d'utiliser Photoshop pour rendre des séquences d'images comme cela. C'est là où les programmes comme Blender, Maya, et Element 3D entrent en jeu. Ces outils sont pensés pour faire des animations, pas de problème pour créer des platines. Il est même possible d'automatiser le processus et de manipuler les modèles en masse.

Reste l'option du 3D live dans le navigateur. Comme les ordinateurs sont devenus plus rapides, il est devenu possible de créer des expériences 3D entièrement en ligne. Tout comme dans l'approche "faire semblant", il y a de nombreux programmes qui peuvent rendre un modèle 3D live sur un site. La clé pour cela est WebGL.

Le language de Web Graphics est dans un sens l'équivalent de HTML et Javascript de OpenGL. Il est dans les navigateurs et plateformes, permettant du contenu 3D sur tout appareil d'utilisateur. Il y a des manières payantes et gratuites d'installer cela sur tout site.

Maintenant, le rendu 3D live à des inconvénients. Quelque soit le support, la page doit faire tout le rendu. Cela veut dire que les modèles doivent être suffisamment simples pour que l'ordinateur le moins bon puisse les supporter ou le code devra changer la vue live en 3D par une alternative. En même temps, le rendering comme cela signifie que des options ne sont pas disponibles. Là où le contenu est pré-rendu, il n'y a plus de limite. Les nuanceurs et composés avancés peuvent être utilisés, mais ici, tout doit répondre aux besoins de l'engin WebGL. L'avantage est que chaque détail ou angle d'un objet peut être affiché et mis en valeur.

Ces inconvénients ont limité l'utilisation des pages web 3D live. Le site le plus connu utilisant cette technologie auquel je pense est Thingverse. Vous trouvez leur fonctionnalité "Thingview" disponible pour la plupart des modèles sur le site. Selon mon expérience, il a des temps de chargement considérables et puise dans la mémoire. J'ai essayé de voir un Windup Bunny présenté sur la 1ère page du site Thingverse et je n'ai pas pu le charger du tout. Cette approche n'est pas encore aussi robuste qu'elle devrait l'être.

Les possibilités sont sans fin

C'était beaucoup d'informations à contenir dans un temps limité. La technologie 3D est là depuis un bon moment. Mais il y a trop pour en faire un résumé en un seul article.

Notre objectif était d'avoir assez d'information pour vous lancer. Si vous avez des questions ou observations, n'hésitez pas à laisser un commentaire ci-dessous.

Liens et ressources

Contenu 3D d'Adobe Téléchargeable

Installation Adobe Panneau 3D

Fondamentaux 3D Adobe

Adobe Peinture Texture 3D

Photoshop : Tutoriel Immeubles 3D

Guide de Tom : Test Outils Photoshop Impression 3D

Vous recherchez davantage de tutoriels ? Essayez celui-ci ou rendez-vous sur blog.designcrowd.com/tag/tutorial pour plus d'astuces pour booster vos compétences de designer.