La grille au nombre d'or est l'objet le plus photographié du design de logo et l'un des moins compris. Toutes les quelques semaines, le schéma d'un logo célèbre enveloppé de cercles et de spirales fait le tour du web, et un client demande si son logo a été construit "sur le nombre d'or". Cet article explique ce que le nombre d'or peut et ne peut pas faire, comment construire une véritable grille au nombre d'or dans Illustrator, et comment l'utiliser pour vérifier un symbole et le présenter sans exagérer.
Ce qu'est le nombre d'or
Le nombre d'or, noté phi, vaut environ 1.618. Il est défini par une proportion : une ligne divisée en une partie longue a et une partie courte b est dans le nombre d'or quand a divisé par b égale a plus b divisé par a. Résolvez cette équation et vous obtenez 1 plus la racine carrée de 5, le tout divisé par 2.
Deux propriétés le rendent pratique pour une grille. Son inverse vaut 0.618, donc une mise à l'échelle à 61.8% et à 161.8% vous fait descendre et remonter la même progression. Et un rectangle dont les côtés sont dans le rapport 1:1.618, le rectangle d'or, a une habitude utile : coupez un carré à une extrémité et le reste est un autre rectangle d'or. Répétez l'opération et vous obtenez un emboîtement de carrés qui rétrécissent de 0.618 à chaque fois. La suite de Fibonacci (1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89) approche la même progression avec des nombres entiers.
Ce qu'il n'est pas
Ce n'est ni une garantie de bon logo, ni une méthode en soi. Un symbole aux épaisseurs de trait approximatives et à la silhouette faible ne sera pas sauvé par une spirale dessinée par-dessus après coup.
Soyez honnête aussi à propos des exemples célèbres. L'affirmation selon laquelle des logos connus ont été conçus sur le nombre d'or est largement répétée, mais dans bien des cas le schéma a été dessiné longtemps après le logo, par quelqu'un d'autre que le designer. Des cercles et des arcs s'ajustent à presque n'importe quel symbole courbe si leurs tailles sont libres. C'est de la reconstruction après coup, et les directeurs artistiques expérimentés le voient.
Ce que le nombre d'or offre réellement, c'est un système proportionnel : une relation constante appliquée à plusieurs dimensions d'un symbole pour qu'elles semblent liées. N'importe quel rapport peut remplir ce rôle ; le rectangle en racine de 2 du papier de série A, un rectangle 3:4 ou une simple grille carrée donnent la même discipline. Le nombre d'or est un bon choix, pas un choix magique.
Le rectangle d'or et la spirale
La grille a trois parties : le rectangle d'or, les carrés emboîtés à l'intérieur, chacun à 61.8% du précédent et disposés en ordre de spirale, et la spirale d'or, un quart de cercle tracé dans chaque carré et raccordé bout à bout. Strictement, la vraie spirale d'or est logarithmique et les quarts de cercle ne font que l'approcher, mais la différence est bien en dessous de la résolution de n'importe quel logo. À partir des carrés, vous pouvez aussi dériver des cercles, un inscrit dans chaque carré et un pour chaque arc, et c'est ce que les gens entendent généralement par "construit avec le nombre d'or".
Construire la grille dans Illustrator
Travaillez sur un nouveau calque nommé Grille au nombre d'or, dans une couleur que l'illustration n'utilise pas. Les dimensions ci-dessous supposent un rectangle de 1000 px de large ; mettez la grille entière à l'échelle plus tard.
1. Tracez le rectangle d'or
Sélectionnez l'outil Rectangle (M) et cliquez une fois sur le plan de travail au lieu de faire glisser. Dans la boîte de dialogue, saisissez 1000 px de large et 618 px de haut, un rectangle d'or à trois décimales près.
2. Découpez le premier carré
Cliquez à nouveau avec l'outil Rectangle et saisissez 618 par 618 px. Alignez-le sur le bord gauche du rectangle avec le panneau Alignement (Fenêtre > Alignement, Shift+F7) ou faites-le glisser jusqu'à ce que les Repères commentés (Affichage > Repères commentés, Cmd+U, Ctrl+U sur Windows) l'aimantent au coin. La bande restante à droite mesure 382 par 618 px, à nouveau un rectangle d'or, à la verticale.
3. Emboîtez les carrés suivants
La boîte de dialogue Mise à l'échelle calcule les tailles pour vous. Sélectionnez le carré, choisissez Objet > Transformation > Mise à l'échelle, réglez Uniforme sur 61.8% et cliquez sur Copier. Faites glisser la copie dans la bande restante, en l'aimantant à son coin supérieur, puis répétez : sélectionnez le carré le plus récent, mettez-le à l'échelle à 61.8%, copiez, aimantez-le dans le reste suivant. Chaque carré tourne d'un quart de tour dans le sens horaire autour de l'œil de la spirale : à droite, puis en bas, puis à gauche, puis en haut.
| Étape | Côté du carré | Rectangle restant |
|---|---|---|
| 1 | 618 px | 382 x 618 px |
| 2 | 382 px | 382 x 236 px |
| 3 | 236 px | 146 x 236 px |
| 4 | 146 px | 146 x 90 px |
| 5 | 90 px | 56 x 90 px |
| 6 | 56 px | 56 x 34 px |
| 7 | 34 px | 21 x 34 px |
Sept carrés suffisent largement ; au-delà, ils sont plus petits que le trait de votre grille.
4. Tracez la spirale
Chaque arc est un quart de cercle dont le rayon égale le côté de son carré. Il relie deux coins opposés du carré, et son centre est le coin qui pointe vers l'œil de la spirale, là où les carrés convergent.
Pour le tracer exactement, sélectionnez l'outil Ellipse (L) et cliquez sur ce coin en maintenant Option (Alt sur Windows), ce qui ouvre la boîte de dialogue et centre la forme sur le clic. Saisissez deux fois le côté du carré en largeur et en hauteur. Réduisez le cercle au quart dont vous avez besoin avec l'outil Ciseaux (C) aux deux coins, ou gardez-le entier comme élément de la construction. Une fois tous les arcs tracés, sélectionnez-les tous et utilisez Objet > Tracé > Joindre (Cmd+J, Ctrl+J).
L'outil Spirale, sous l'outil Trait, dessine aussi des spirales, mais sa valeur de Décroissance ne correspond pas à phi ; utilisez-le pour un aperçu rapide, pas pour revendiquer une construction.
5. Ajoutez des cercles à partir des carrés
Les Repères commentés indiquent le centre d'un carré quand vous le survolez. Cliquez à cet endroit avec l'outil Ellipse en maintenant Option et saisissez le côté du carré pour les deux dimensions afin d'y inscrire un cercle. Faites-le uniquement pour les deux ou trois plus grands carrés ; chaque cercle supplémentaire rend la grille plus difficile à lire.
6. Verrouillez-la, ou convertissez-la en repères
Groupez la grille (Cmd+G, Ctrl+G) et verrouillez le calque. Pour qu'elle s'aimante comme des repères natifs, sélectionnez-la et choisissez Affichage > Repères > Créer les repères (Cmd+5, Ctrl+5). Les repères perdent leur propre trait et prennent la couleur définie dans Illustrator > Réglages > Repères et grille (Édition > Préférences sur Windows), alors gardez une copie non convertie sur un calque masqué pour l'étude de cas. Si vous construisez souvent cette grille, Anchr Grid la dessine en une étape sur son propre calque.
L'utiliser pour vérifier un symbole
Placez le symbole sur la grille et mettez la grille à l'échelle, pas le symbole, jusqu'à ce qu'une dimension majeure coïncide : généralement la largeur totale avec le rectangle d'or, ou la hauteur du symbole avec le premier carré. Puis regardez, sans rien déplacer d'autre, ce qui tombe où : le cadre de sélection par rapport au rectangle, la contreforme principale par rapport aux deuxième et troisième carrés, et le rapport entre le trait le plus épais et le plus fin par rapport aux degrés voisins de la progression.
Si vous vous surprenez à faire glisser la grille pour faire apparaître une coïncidence, le symbole n'est pas sur le nombre d'or. C'est un fait à propos du symbole, pas un problème à corriger dans le schéma : ajustez le symbole délibérément, ou acceptez qu'il fonctionne selon une autre logique.
L'utiliser pour vérifier un logotype
Les lettres arrivent avec des proportions fixées par la police, donc une spirale d'or sur un logotype signifie rarement quelque chose. Là où le nombre d'or aide, c'est dans la composition, la relation entre le symbole et le texte : une hauteur de symbole de 1.618 fois la hauteur de capitale, un espace entre le symbole et le logotype de 0.618 fois la hauteur de capitale, ou une composition empilée dont la forme globale est un rectangle d'or. Choisissez une relation, appliquez-la, et vérifiez-la avec un seul carré de la progression.
La présenter dans une étude de cas
Dites exactement ce que la grille a fait. "La composition utilise un rapport de 1:1.618 entre la hauteur du symbole et la hauteur de capitale" est une phrase défendable. "Conçu sur le nombre d'or" ne l'est pas, sauf si le nombre d'or a guidé le design dès la première esquisse.
Montrez un seul schéma propre avec le symbole, le rectangle et les deux ou trois éléments qui coïncident réellement. Onze cercles, tous légèrement à côté des courbes, disent à un lecteur expérimenté que la grille est arrivée après le logo. Tracez-le en une seule couleur et une seule épaisseur de trait pour que le symbole reste le sujet.
Des alternatives à connaître
Une grille de base carrée, avec un module d'une épaisseur de trait, est la base la plus courante des symboles géométriques. Une grille modulaire avec colonnes et gouttières convient aux logotypes et aux compositions. La construction par cercles, où chaque courbe appartient à un cercle de rayon déclaré, donne un schéma rigoureux pour les symboles arrondis. Les grilles isométriques et hexagonales conviennent aux symboles construits sur des angles de 30 et 60 degrés. Chacune est une vraie méthode quand elle est utilisée dès le début, et chacune peut être simulée à la fin.
Questions
Le nombre d'or est-il la même chose que la règle des tiers ?
Non. La règle des tiers divise un cadre en tiers égaux, donc ses lignes se situent à 33% et 67%. Les divisions du nombre d'or se situent à 38.2% et 61.8%. C'est assez proche pour confondre et assez éloigné pour qu'un schéma étiqueté avec l'un et tracé avec l'autre paraisse négligé. Choisissez-en un et nommez-le.
Dois-je construire la grille avant ou après avoir conçu le symbole ?
Avant, si elle doit être une méthode. Construisez la progression de carrés, décidez quelles dimensions du symbole correspondent à quels degrés, et concevez dans ce cadre. Après coup, ce n'est qu'un outil de vérification, toujours utile, à condition que l'étude de cas la décrive comme une vérification plutôt que comme l'origine du design.
Puis-je utiliser les nombres de Fibonacci au lieu de 61.8% ?
Oui, pour les grandes valeurs. Les nombres de Fibonacci successifs (34, 55, 89, 144) se rapprochent de phi à mesure qu'ils grandissent, et les nombres entiers sont pratiques pour le travail en pixels. En dessous de 13, l'approximation est grossière : 8 divisé par 5 donne 1.6, pas 1.618. À 1000 px, les tailles de Fibonacci sont indiscernables des tailles exactes.
Illustrator a-t-il une grille au nombre d'or intégrée ?
Non. La grille du document dans Illustrator > Réglages > Repères et grille est uniquement carrée, avec un pas fixe et des subdivisions. Une grille au nombre d'or doit être dessinée sous forme de tracés, comme ci-dessus, puis éventuellement convertie en repères avec Cmd+5 (Ctrl+5). Une extension peut la dessiner pour vous, mais la géométrie est la même.
Faites-le en un clic
Anchr Grid, l'un des cinq outils du panneau Anchr Tools pour Illustrator, dessine des grilles de base directement sur votre plan de travail : carrée, isométrique, hexagonale et nombre d'or. La grille au nombre d'or a un réglage d'échelle et un réglage de marge, pour ajuster le rectangle à votre symbole au lieu de mettre le symbole à l'échelle d'un rectangle fixe. Elle arrive sur son propre calque, nommé Golden Ratio Grid, et un bouton Créer les repères la convertit en repères Illustrator natifs quand vous voulez l'aimantation. Elle ne touche jamais à l'illustration elle-même. Dessinez-la, vérifiez le symbole, et supprimez le calque si le nombre d'or ne s'avère pas être l'histoire. Détails et essai sur la page Anchr Grid.