Article original : How I designed a famous building in isometric 3D using Figma
Par Gbolahan Taoheed Fawale
Cet article ne suit pas tout à fait le format de tutoriel conventionnel. Il s'agit d'un mélange de narration et d'explications générales, une expression bien documentée de mes pensées.
Depuis que j'ai conçu mon premier objet 3D dans Figma, je me suis davantage intéressé à recréer différents objets complexes et illustrations. Cela m'aidera finalement à améliorer mes compétences en design. Je veux créer des designs qui font dire aux gens : "Wow ! As-tu vraiment utilisé Figma pour faire ça ?" Je veux les entendre exprimer leur surprise, car ils pensaient que Figma n'était qu'un outil de design d'interface utilisateur.
C'est ainsi que je souhaite personnellement positionner Figma au sein et au-delà de ma communauté immédiate. Comme le disent les développeurs, "ce n'est pas une question des outils disponibles, mais de la manière dont ces outils peuvent être bien utilisés". En effet, il s'agit de la manière dont ces outils peuvent être utilisés pour obtenir les résultats souhaités. Par ailleurs, l'aspect le plus important du développement logiciel est ce qui détermine votre niveau de maîtrise d'un langage de programmation particulier. Je fais aussi un peu de développement front-end, d'ailleurs.
J'ai quelques projets de design ainsi que des articles accompagnateurs que je prépare dans le but de documenter comment je les ai créés. Je les rendrai publics dès que je les aurai terminés.
Bien que les designs isométriques deviennent progressivement populaires, je souhaite pousser mes designs au-delà des designs 3D isométriques conventionnels. Je veux qu'ils tendent vers quelque chose de plus réaliste tout en conservant leur originalité.
Maintenant, revenons à l'essentiel. Je veux revenir aux racines (Africains, a-woo ! Je sais que certains d'entre nous connaissent cette chanson populaire de JJC. Lol.) Eh bien, c'est le premier design de mon projet de monuments nigérians en 3D isométrique, et c'est aussi l'un des plus complexes. Je croyais que si je pouvais concevoir avec succès ce bâtiment (le Théâtre National, à Lagos), je pourrais facilement concevoir tout autre objet 3D isométrique.
Étape 1 : Pré-design
J'ai commencé par passer du temps à étudier le bâtiment. J'ai utilisé une photo que j'ai trouvée sur Google comme point de référence en important l'image dans mon espace de travail Figma. Pendant que je travaillais sur le design, j'ai continué à étudier l'image de référence et à ajuster le design jusqu'à obtenir quelque chose de bien conçu.
J'aborde mes designs comme si je voulais les dessiner ou les peindre sur papier. J'étudie les ombres, la perspective, le contraste, la direction et la réflexion de la lumière. Ce sont quelques-uns des éléments et caractéristiques les plus importants à rechercher lors de la création d'objets 3D isométriques et d'illustrations réalistes. L'application stratégique de couches de dégradé donne aux objets cette apparence solide.
Étape 2 : Design propre (Création de la section supérieure des sièges du théâtre)
Tout d'abord, j'ai créé le corps de la partie supérieure du bâtiment en utilisant un rectangle. J'ai ensuite modifié le rectangle pour obtenir une forme similaire à celle de la photo de référence. Après cela, j'ai fait quelque chose de similaire pour l'autre partie (rectangle) du bâtiment qui semble être derrière la première, voir la deuxième image ci-dessous.
Maintenant, nous devons répliquer ces deux formes, les modifier pour qu'elles apparaissent plus grandes et les placer derrière les couches initiales/originales. Cela pose les bases de ce qui ressemblera plus tard à un toit/haut d'une structure de bâtiment réelle. Ce processus est démontré dans les images ci-dessous.
Une fois terminé, l'étape suivante était de créer la partie inférieure du bâtiment.
Étape 3 : Conception de la partie extérieure de la scène du théâtre
J'ai créé un rectangle, appliqué un rayon de coin de 100px aux coins supérieur gauche et droit, et également appliqué un remplissage de dégradé linéaire. Le rayon de coin et le dégradé sont utilisés pour montrer que la structure est circulaire. Le résultat est l'image ci-dessous.
Ensuite, j'ai ajouté un autre rectangle avec un remplissage de dégradé, et je l'ai courbé vers l'extérieur en bas. Les deux rectangles de cette étape montrent que la base en béton de la première section que nous avons créée ci-dessus est également circulaire. Le nouveau rectangle a une circonférence plus large, donc il s'étend davantage vers l'extérieur que la section au-dessus. Cela se reflète également dans la largeur des rectangles. Le résultat combiné est dans l'image ci-dessous.
Les choses deviennent de plus en plus intéressantes. Dans l'image ci-dessous, j'ai créé un autre rectangle, puis appliqué un remplissage de dégradé linéaire. Vous pouvez voir que le centre est plus lumineux et a un effet brillant. Cela a été fait pour donner à la couche suivante un effet vitreux, comme on le voit dans la photo de référence.
La couche vitreuse est une forme complexe (une seule couche de nombreuses formes similaires). J'utilise des formes complexes pour réduire le nombre de couches dans mon panneau de couches, lors de la conception sans regroupement ou aplatissement des couches. Vous pouvez lire mon article à ce sujet ici. Juste après cela, j'ai ajouté un autre rectangle comme on le voit dans l'image suivante. Cette partie forme un mur utilisé comme démarcation entre les différentes ouvertures et entrées du bâtiment.
Étape 4 : Design du rez-de-chaussée
Ensuite, j'ai ajouté une autre couche rectangulaire, que j'ai modifiée pour qu'elle ressemble à ce qui est dans l'image ci-dessous. Cette couche forme le haut pour les couches suivantes. Elle, et les autres couches que j'ajouterai par la suite, jouent toutes un rôle dans l'apparence de la structure et la manière dont elle est perçue par le spectateur.
J'ai ajouté un autre rectangle qui a été flouté pour former l'ombre des couches suivantes que j'ai créées dans l'image suivante.
Dans l'image ci-dessus, j'ai créé 12 rectangles placés soigneusement les uns sur les autres, que j'ai modifiés pour obtenir l'image ci-dessous.
Étape 5 : Ajout d'effets supplémentaires
J'ai appliqué un remplissage de dégradé linéaire et une ombre portée aux six rectangles gris clair ci-dessus. Le dégradé leur donne l'apparence réaliste d'un bloc de murs avec de la lumière qui rebondit dessus. J'ai ajouté l'ombre portée pour renforcer cet aspect et cet effet. Les rectangles plus sombres en dessous sont simplement des murs plats/la base du bâtiment. Les ombres des six rectangles gris clair s'étendent vers l'extérieur jusqu'aux murs/piliers courbés au-dessus desquels elles sont projetées.
J'ai également appliqué un remplissage de dégradé aux rectangles gris foncé. Ceux-ci sont plus sombres car ils constituent la partie la plus basse du bâtiment.
À ce stade, j'avais besoin d'ajouter quelques couches pour parfaire l'apparence. J'ai ajouté cinq autres rectangles étroits pour remplir les espaces entre les 12 rectangles que j'ai créés.
Ensuite, j'ai ajouté quelques rectangles étroits et les ai placés verticalement. Cela donne l'effet d'un bloc/pilier épais d'un vrai bâtiment, au point où les six rectangles gris rencontrent la couche plate au-dessus. Cela est montré dans l'image ci-dessous.
À ce stade, il manquait encore quelque chose. J'ai ajouté de nouvelles couches rectangulaires et les ai modifiées pour ajouter cette couche qui ressemble à un mur à l'extrême droite des 12 rectangles que j'ai créés ci-dessus. Comme capturé dans la photo de référence, j'ai modifié le rectangle le plus clair et l'ai placé derrière les 12 rectangles. Il dépasse maintenant davantage vers la droite. J'ai modifié les rectangles plus sombres pour qu'ils ressemblent à l'image ci-dessous :
Étape 6 : Travail sur les piliers extérieurs
Je suis retourné à la partie supérieure et j'ai mis certaines choses en place. Comme montré dans l'image ci-dessous, j'ai créé des rectangles de taille étroite pour représenter les piliers verticaux.
J'ai ensuite créé un autre ensemble de rectangles. Ceux-ci ont été modifiés, et l'un a été retourné dans la direction opposée. J'ai regroupé les deux formes pour former les piliers intérieurs horizontaux et je l'ai répliqué pour qu'il ressemble à l'image ci-dessous. Bien qu'ils ne soient pas bien arrangés à ce stade, j'ai travaillé dessus plus tard.
Dans les parties ultérieures de cet article, vous observerez que la partie supérieure de chaque pilier horizontal individuel est plus lumineuse que les parties inférieures. De plus, ceux qui sont plus proches du côté gauche du bâtiment sont plus lumineux que ceux du côté droit — rappelez-vous que le bâtiment a une structure circulaire ?
Étape 7 : Conception du toit
J'ai fait un peu de magie à la partie la plus haute des piliers verticaux. J'ai créé un nouveau rectangle, et j'ai utilisé l'option "éditer l'objet" pour le modifier afin qu'il ressemble à ce que nous avons ci-dessous. Je l'ai modifié pour qu'il convienne aux différentes parties de la structure circulaire du toit. Vous pouvez voir qu'ils ont des tailles différentes et reflètent également la quantité de lumière qui les frappe par le haut.
Les toits dans l'image ci-dessous sont simplement des rectangles que j'ai modifiés et remplis de couleur pour qu'ils se fondent avec la surface du toit lui-même. J'ai créé une autre copie, je l'ai décalée un peu vers le haut pour avoir une sorte de trait en haut des bords, lui donnant un effet contrastant avec le ciel. Si je ne l'avais pas fait, il aurait disparu dans le ciel en arrière-plan.
Dans l'image ci-dessous, les flèches jaunes montrent la direction et la courbure du bâtiment. Les rayons lumineux tombant sur le toit du bâtiment se reflètent de manière assez différente, ce qui fait que nous voyons certaines parties du bâtiment plus sombres tandis que d'autres sont plus claires. Les zones marquées en bleu sont plus lumineuses et les tailles sont plus grandes à mesure que le bâtiment se courbe vers la droite. Vers le côté gauche, elles sont plus sombres et plus courtes jusqu'à ce que la structure circulaire du bâtiment devienne plus visible et plus haute à l'arrière, à gauche.
C'est un peu comme lorsque vous conduisez sur des routes avec des virages serrés — vous ne voyez plus loin que lorsque vous avez passé la courbe. Ce sont toutes ces petites choses qui font que l'œil perçoit le bâtiment comme une structure circulaire.
Étape 8 : Ajout d'effets aux piliers
Voici des images des différentes façons dont j'ai appliqué un remplissage de dégradé linéaire aux piliers verticaux. Cela leur donne un aspect solide. Vous observerez également que les piliers verticaux étaient inclinés pour suivre la direction de la courbure du bâtiment ?
Étape 9 : Ajout des fenêtres et des murs en verre
Juste avant d'ajouter les piliers verticaux qui s'étendent autour du bâtiment, j'ai créé des formes complexes de lignes. Celles-ci représentent ce qui ressemble à des blocs de bois poli, soigneusement disposés côte à côte. Je les ai utilisés comme une sorte de couche de remplissage sur les murs extérieurs de la section supérieure du bâtiment, puis je les ai floutés. Le résultat est montré dans l'image ci-dessous.
J'ai également fait quelque chose de similaire pour créer les fenêtres en verre dans l'image ci-dessous.
Vous remarquerez un fond noir derrière les lignes blanches dans l'image ci-dessous. Dans cette couche, j'ai appliqué un remplissage de dégradé pour donner l'effet brillant des murs/fenêtres en verre, et pour donner cette structure circulaire du bâtiment. C'est la raison pour laquelle les côtés droit et gauche du rectangle sont plus sombres que la partie centrale brillante. Vous remarquerez également que les lignes blanches étaient courbées et inclinées parallèlement aux piliers verticaux.
Le résultat final est montré ci-dessous.
Le verre rend le centre plus lumineux car c'est la seule partie du bâtiment que nos yeux peuvent voir. Il reflète le ciel et l'environnement environnant, mais devient un peu plus sombre en se déplaçant vers la gauche et la droite en raison de la structure circulaire du bâtiment. Si cela avait été un bâtiment ou un gratte-ciel en verre non circulaire normal, tout le verre aurait brillé de mille feux !
J'ai continué à ajuster le design en appliquant des dégradés sur les piliers verticaux pour leur donner un aspect solide. La partie inférieure des piliers verticaux est courbée vers l'extérieur pour soutenir la structure. J'ai réfléchi à la manière dont j'allais réaliser cela pendant un moment, en tenant compte du fait que les piliers verticaux étaient des rectangles et non une forme que j'avais créée avec un outil de stylo. Après un examen plus approfondi, j'ai trouvé nécessaire d'ajouter un autre rectangle et de les fusionner en utilisant un dégradé à l'intersection des deux rectangles.
Quelque chose des coulisses
Vous remarquerez que j'ai apporté quelques modifications aux piliers horizontaux pour refléter l'effet et la direction de la lumière dans les images ci-dessous. La partie supérieure de chaque pilier horizontal est plus claire que sa partie inférieure. L'apparence générale du pilier horizontal devient plus sombre/terne vers la partie droite du bâtiment.
À la partie inférieure du bâtiment à droite, j'ai ajouté quelques rectangles pour représenter l'entrée/l'allée du bâtiment. Je l'ai fait en appliquant une ombre intérieure pour dépeindre un tunnel d'entrée.
Ensuite, j'ai travaillé sur l'image du ciel ci-dessous et le paysage environnant. La surface plate verte qui représente la végétation autour du bâtiment est simplement un grand rectangle avec un remplissage de couleur unique (vous pouvez voir l'image de la couche d'herbe dans la deuxième image).
Étape 10 : Armoiries du Nigeria
À ce stade, j'avais presque terminé le design. Comme je n'étais pas satisfait, j'ai essayé de créer les Armoiries du Nigeria. C'était rapide, bien que j'aie préféré concevoir quelque chose d'imparfait plutôt que de ne rien mettre du tout.
Les chevaux et l'aigle ont été créés à l'aide de l'outil stylo. Pour la partie "Y", les couches sous le bouclier et l'arrière-plan du bouclier étaient des formes modifiées. J'ai également appliqué une ombre portée aux Armoiries regroupées pour les faire "sortir" de l'arrière-plan.
Étape 11 : Végétation et géographie
Et les arbres ! La raison d'utiliser des cercles avec des ombres et des couches de dégradé est de représenter différentes branches et feuilles cachées projetant des ombres les unes sur les autres à différentes parties des arbres. J'ai également rendu les arbres avec des cercles beaucoup plus grands, plus proches et stratégiquement placés. Les arbres projettent des ombres en dessous pour donner au bâtiment un effet de distance dans les yeux du spectateur.
Les ombres sous les arbres sont simplement des cercles qui ont été étirés pour avoir une apparence de soucoupe et un aspect plat. Ceux-ci ont ensuite été floutés pour ressembler à de vraies ombres.
J'ai également créé certains objets dans le design pour représenter des arbustes et des fleurs vertes. Ceux-ci ont été plantés à différents endroits pour ressembler à l'image de référence. Les arbustes et les fleurs sont des rectangles que j'ai créés, appliqué des coins arrondis aux parties supérieures, remplis avec une couche de dégradé et floutés pour donner cet effet de distance. Les objets deviennent plus nets et plus distincts à mesure que vous vous approchez, mais les arbustes et les fleurs sont loin. C'est aussi la raison de leurs petites tailles.
Le design final est montré ci-dessous.
Le lien vers le design est ici.
Merci d'avoir lu
Vous pouvez me contacter sur Twitter ici
N'oubliez pas de rejoindre la communauté Figma Africa sur Slack ici.