PSS

Tutoriel : Comment dessiner un diagramme – JBCousin –

#1 23-06-2007 12:58:29

JBCousin
Tour Total
Date d'inscription: 24-02-2006
Messages: 844
Photos: 2

Tutoriel : Comment dessiner un diagramme – JBCousin –

Tutoriel : Comment dessiner un diagramme – JBCousin –


1ère Etape – Observation –

Réunir quelques photos, montrant détails de façade, nombres d’étages, de fenêtres horizontalement, verticalement, pour chacune des façades.

Ici, pour la tour Ariane, on compte pour la grande façade, 35 fenêtres verticalement, et 22 horizontalement. Cependant, en rajoutant la hauteur des étages techniques au dessus, j’admets qu’ils sont équivalents à 3 étages en plus. (Soit 38, verticalement)


2ème Etape – Dessin –

Tout d’abord, je choisis la hauteur en pixel du dessin. Pour Ariane, qui fera au final 152 pixels de hauteur (1pixel = 1mètre), je choisis de dessiner à une taille 5 fois supérieure. Mon dessin fait donc 760pixels de hauteur. Sachant que je divise ces 760 pixels par les nombres d’étages et équivalents (étages techniques), chaque étage fera donc ici 20pixels de hauteur. (760/38=20)

http://img504.imageshack.us/img504/6567/tourariane1qz5.gif

Il faut maintenant commencer le dessin de la façade. Pour cela, je choisis une photo ou les détails sont bien visibles.

http://img146.imageshack.us/img146/9954/tourariane2ro9.jpg

Je dessine, une fenêtre, une seule, de manière la plus réaliste possible, dans ces dimensions et ces couleurs (ici, j’en ai fait 2 car il n’y a pas de limite entre les étages). Pour les couleurs, il suffit de reprendre les couleurs d’une photo dont les couleurs sont correctes (pas de reflets…). Cependant, souvent, les couleurs des photos rendent le dessin très sombre, c’est pourquoi, personnellement, je fais varier la luminosité, pour éclaircir la teinte.

http://img443.imageshack.us/img443/5553/tourariane3ju3.gif

Ensuite, il suffit de copier coller cette fenêtre sur toute la longueur, afin d’en avoir 22 alignées.

http://img248.imageshack.us/img248/512/tourariane4oi8.gif

Refaire pareil verticalement :

http://img140.imageshack.us/img140/5387/tourariane5ms8.gif

Enfin, procéder de la même façon pour les étages techniques sans fenêtre, prendre une photo ou les détails sont bien visible, les dessiner, et copier coller cela sur toute la partie supérieure.

http://img61.imageshack.us/img61/1594/tourariane6rl8.gif

Enfin, à l’aide de cette façade, presque terminée, faire l’autre façade, plus fine. (10 fenêtres horizontalement) :
Ici, je change la teinte des vitres, puisqu’il s’agit d’une autre façade, orientée différemment, j’imagine que celle-ci reflète mieux la couleur du ciel :

http://img187.imageshack.us/img187/4996/tourariane7fm7.gif


3ème Etape – Détails, Logos… –

http://img470.imageshack.us/img470/8756/logopo8.gif

http://img378.imageshack.us/img378/8533/tourariane8uk7.gif

http://img378.imageshack.us/img378/4193/tourariane9hd6.gif


4ème Etape – Mise en 3d –

Ensuite, il suffit de mettre cote à cote, deux façades réduites horizontalement, afin de donner un effet de volume. Dans le même objectif, on peut réduire la luminosité d’une face, ou augmenter celle d’une autre. Ici, il faut penser à ajouter les arrêtes arrondies.

http://img470.imageshack.us/img470/3262/diagrammearianerz1.gif


5ème Etape – Réduction et finalisation –

Le diagramme étant maintenant terminé à une plus grande échelle, il faut le réduire pour le mettre à la bonne échelle, soit, 1pixel pour 1m, si il est destiné à SSP.

Penser à enregistrer le dessin aux bons formats, toujours si le diagramme est pour SSP.

Enfin, lorsque le dessin contient des zones vides, il faut ne surtout pas oublier de rendre ces zones transparentes.

Tour Ariane
http://img525.imageshack.us/img525/259/diagrammeariane11oj0.gif
http://img470.imageshack.us/img470/3262 … anerz1.gif

C10

Hors ligne

 

#2 28-03-2009 16:01:17

Metropolitan
Tour Montparnasse
Lieu: Paris 92
Date d'inscription: 28-01-2006
Messages: 1449
Immeubles: 18

Re: Tutoriel : Comment dessiner un diagramme – JBCousin –

Le tutoriel de JBCousin est bon et fonctionne très bien pour la plupart des tours "classiques". Cependant, les derniers projets de La Défense, plus complexes, m'ont obligé à chercher d'autres techniques de réalisation qu'il me semble intéressant de poster ici.

Je propose donc à mon tour un petit guide pour l'élaboration des deux diagrammes Hermitage PlazaB2


1ère étape : Observation, trouver l'angle de vue

Bien évidemment, comme JBCousin l'a déjà dit, il faut chercher le maximum de visuels possible pour vous aider à comprendre la tour dans ses 3 dimensions. En effet, même si un diagramme n'est qu'une version "aplatie" en 2 dimensions, il est important de bien comprendre l'objet en 3D pour réussir l'effet de profondeur.

Une bonne source compilant en une seule page énormément de visuels pour les projets de La Défense est le site "Défense 92" :
http://www.defense-92.fr/lesprojets.html

Pour la cas de Hermitage, j'ai décidé de prendre comme modèle de base ce rendu :

http://grandparis.free.fr/tutoriel-ssp/hermitage1.jpg



2ème étape : Créer un premier modèle pour fixer les volumes et profondeurs

En m'inspirant du rendu précédent, j'ai déssiné des simples polygones monochromes réprésentant chacun un plan de la façade de Hermitage. Ensuite, il suffit de faire varier la luminosité de chaque plan pour créer l'effet de profondeur. Au final, au gré de plusieurs tatonnements, j'ai décidé de légèrement modifier l'angle de vue pour obtenir ça :

http://grandparis.free.fr/tutoriel-ssp/hermitage2.gif

Je précise que l'image ici est réduite. Il vaut toujours mieux travailler sur un très grand modèle pour le redimensioner ensuite car ça permet d'adoucir le dessin.


3ème étape : Créer l'effet de "verre réfléchissant"

Une fois que l'on a nos 8 plans, il ne suffit plus que de réaliser des "skins" réalistes (comme dirait les modélistes 3D) que l'on aposerait à la place de chaque polygone monochrome.

Première chose, les tours étant en verre, il faut créer un effet "miroir". Le plus simple et le mieux est de prendre une photo d'un ciel, de la flouter, d'abaisser le contraste et de la coloriser au bleu des tours.

http://grandparis.free.fr/tutoriel-ssp/hermitage3.jpg

Une fois que l'on a notre "fond", j'y découpe des plans dont les proportions sont à la pixel prêt prafaitement identique aux polygones monochromes de mon modèle. Ensuite je les aligne en les séparant légèrement pour pouvoir plus tard, faire un traitement de lumière spécifique à chacun.

Voici ce que l'on obtient :

http://grandparis.free.fr/tutoriel-ssp/hermitage3b.gif


4ème étape : Détailler la façade

cela peut paraître surprenant, mais le diagramme est déjà quasiment fini. Il ne suffit maintenant que de rajouter quelques détails sur les façades. D'abord, on rajoute des lignes claires et sombres pour la séparation des étages. Et on obtient ça :

http://grandparis.free.fr/tutoriel-ssp/hermitage4.gif

Note: Un petit truc qui m'est souvent très utile pour toujours conserver des façades parfaitement identiques à mon modèle, c'est d'utiliser une sort de "moule vert" qui élimine tout ce qui dépasse. Par exemple, grace à ce moule vert, j'ai pu éliminer les rayures des étages sans me prendre la tête :

http://grandparis.free.fr/tutoriel-ssp/hermitage5.gif


Sur le rendu, j'ai observé quelques tâches sombres sur certains étages, donc je les ai reproduites :

http://grandparis.free.fr/tutoriel-ssp/hermitage6.gif


Enfin, j'ajoute bien évidemment les fameuses résilles qui donnent toute leur beauté aux deux tours :

http://grandparis.free.fr/tutoriel-ssp/hermitage7.gif


5ème étape : Modifier la luminosité et assembler les façades

Pour obtenir l'effet de profondeur, il suffit de modifier la luminosité de chaque façade. Je reprends plus ou moins ce qui avait été fait pour mes polygones monochromes de départ, et on obtient ça :

http://grandparis.free.fr/tutoriel-ssp/hermitage8.gif


Il n'y a plus qu'à assembler le tout et nos diagrammes prennent enfin forme. On ajoute alors un petit dégradé pour rendre la base plus sombre que le haut, et voici le résultat :

http://grandparis.free.fr/tutoriel-ssp/hermitage9.gif


On rajoute une légère tâche de soleil (sunburst) pour donner un peu plus de style au diagramme, et c'est fini !

http://grandparis.free.fr/tutoriel-ssp/hermitage10.gif


Voilà ! Une fois réduit à 323 pixels de hauteur, mis au format ".gif" en mettant le fond blanc en transparence, c'est prêt pour envoi dans SSP :


Hermitage Plaza: 323 mètres

http://grandparis.free.fr/hermitage-plaza-1-small.gif     http://grandparis.free.fr/hermitage-plaza-2-small.gif
Version large (Tour I)
Version large (Tour II)


C10

Dernière modification par Metropolitan (28-03-2009 16:14:46)


PARIS BELONGS TO EVERYONE.

Hors ligne

 

#3 28-03-2009 19:10:26

koko95
Membre
Date d'inscription: 25-03-2008
Messages: 30

Re: Tutoriel : Comment dessiner un diagramme – JBCousin –

Super ce petit cours!  B6  Encore Bravo Metropolitan pour cette réalisation.

Hors ligne

 

#4 28-03-2009 20:13:53

JBCousin
Tour Total
Date d'inscription: 24-02-2006
Messages: 844
Photos: 2

Re: Tutoriel : Comment dessiner un diagramme – JBCousin –

Super ce tutoriel ! Maintenant, les autres n'ont plus d'excuse pour s'y mettre.  A5 
J'ai fait de cette manière également pour faire les effets ''de ciel'' sur Carpe Diem et mes Signal.
Concernant la tour Triangle, je pense la commencer dès demain.

Hors ligne

 


Pied de page du Forum

Powered by FluxBB

Copyright © 2006-2024 PSS
Mentions légalesQui sommes-nous ?Contact