Art de la bande dessinée rétro : utiliser les points Ben Day dans la conception de sites Web

En tant que concepteurs de sites Web, nous sommes toujours à la recherche d'idées nouvelles et créatives à ajouter à nos sites Web. Heureusement, l'inspiration n'est pas difficile à trouver. Par exemple, la bande dessinée rétro fait toujours son retour. Parfois, c'est comme de la typographie, d'autres fois comme des filtres photo. Dernièrement, des textures et des illustrations avec des points Ben Day font leur apparition dans de nombreux endroits. Vous voulez les essayer par vous-même ?

Dans cet article, nous expliquerons l'origine des points Ben Day et comment les fabriquer vous-même. De plus, nous avons quelques exemples d'utilisation de cette technique visuelle dans la conception de sites Web.

Points Ben Day et points demi-teintes

Les termes « points Ben Day » et « art de la bande dessinée rétro » ont tendance à être utilisés de manière interchangeable. En fait, les points Ben Day sont arrivés en premier. Benjamin Henry Day Jr. les a créés en 1879, afin de réduire les coûts d'impression couleur. C'est une technique qui place des points équidistants sur une grille. Des points rouges imprimés sur du blanc donnent du rose, des points bleus et jaunes du vert.

Les points Ben Day ont été inspirés par les points en demi-teintes utilisés pour l'impression lithographique et photographique en noir et blanc. Les deux styles de points sont disposés sur une grille carrée, mais les points en demi-teinte sont de tailles différentes tandis que les points Ben Day sont tous identiques.

Ben Day Dots, bandes dessinées et Roy Lichtenstein

Dans les années 1930, les bandes dessinées sont entrées en scène de manière importante et les points Ben Day étaient la technique d'impression de prédilection. Les points Ben Day n'étaient pas exactement un art jusqu'à ce que Roy Lichtenstein soit inspiré par leur unicité générique dans les années 1960. C'est le travail de Roy Lichtenstein avec l'art de la bande dessinée qui a mis les points de Ben Day sous les feux de la rampe. Ce que Lichtenstein a fait, c'est copier de petites sections de pages de bandes dessinées et les transformer en chefs-d'œuvre à grande échelle.

Même si Roy Lichtenstein a utilisé des points qui ressemblaient à des points de Ben Day, ils étaient un peu différents. Les historiens de l'art vous diront qu'ils sont plus convenablement appelés « points de Lichtenstein ». La principale différence est que les points Ben Day étaient minuscules et sur une grille carrée, tandis que les points Lichtenstein étaient sur une grille diagonale décalée et considérablement plus gros.

crédit image Radu Bercan / shutterstock.com

L'essor de la bande dessinée rétro

L'art de Roy Lichtenstein est devenu synonyme d'art de la bande dessinée rétro. De nombreux artistes ont copié la technique du Lichtenstein. De nombreux designers ont utilisé des points de bandes dessinées dans leurs créations pour des schémas de marque et des supports marketing. Vous pouvez désormais ajouter des points Ben Day ou des points Lichtenstein à vos sites Web.

Faites défiler pour apprendre à créer vos propres créations de points Ben Day. Les conceptions finales que vous réaliserez couvriront en fait une variété de techniques ; points en demi-teinte, points Ben Day et points Lichtenstein. Dans l'ensemble, ils sont tous de style bande dessinée rétro.

Allons-y.

Comment créer des bandes dessinées rétro avec Photoshop

Les points de demi-teintes sont si courants que Photoshop a un filtre pour eux et cela fonctionne avec n'importe quelle image. Ce filtre transforme les couleurs de l'image en points. La distribution angulaire des points est contrôlée par les canaux de couleur. Lorsque vous appliquez le filtre, votre image est maintenant composée de points cyan, magenta, jaunes et noirs. Si vous appliquez le filtre demi-teinte à une couleur pure comme le rouge (#ff0000), le vert (#00ff00) ou le bleu (#0000ff), le filtre ne fonctionnera pas car il n'aura aucune couleur à séparer.

Afin de créer des points Ben Day et des points Lichtenstein appropriés, vous avez besoin d'Adobe Illustrator. Cliquez ici pour aller de l'avant.

Comment faire ressembler une photo à une bande dessinée rétro en points demi-teintes avec Photoshop

1. Choisissez l'image que vous souhaitez transformer en points de style bande dessinée.

J'ai choisi ce gars à l'allure amusante sur le site de photos gratuites, Gratisography. Cliquez ici, si vous souhaitez utiliser la même image pour suivre. Ouvrez l'image dans photoshop et centrez-la sur votre toile.

2. Dupliquez le calque deux fois et masquez le premier.

Pour dupliquer, alors que le premier calque est sélectionné, faites un clic droit et choisissez « dupliquer le calque » ou cliquez sur Commande+J sur Mac et Ctrl+J sur PC. Renommez-les pour ne pas perdre la trace de chacun. Ajustez l'option de fusion du calque supérieur sur « lumière dure » ​​et réduisez l'opacité à environ 40 %. Les couleurs changeront radicalement, cela aidera à obtenir l'aspect granuleux des points en demi-teinte.

3. Regroupez les deux couches supérieures et transformez-les en un objet intelligent.

4. Appliquez le filtre de points en demi-teinte à l'objet intelligent.

Dans la fenêtre contextuelle Color Halftone settings, choisissez la taille maximale du pixel à 13 et les canaux à des degrés divers. Vous pouvez jouer avec ceux-ci pour voir différents effets.

5. Dupliquez le calque inférieur et déplacez-le vers le haut.

Appliquez-lui le filtre « Trouver les bords » et ajustez les niveaux pour mieux voir les contours. Pour cela, déplacez le triangle noir vers la droite et le triangle blanc vers la gauche.

6. Utilisez les réglages pour transformer le calque en noir et blanc.

Réglez l'opacité du calque de réglage sur 30%. Enfin, définissez les options de superposition du calque « rechercher les bords » sur « superposition ».

Le dessin fini !

Comment créer un arrière-plan de bande dessinée rétro avec Photoshop

1. Trouvez un fond de couleur avec un joli design ou un dégradé.

Ouvrez l'image sur votre tableau de bord Photoshop et centrez-la sur l'écran.

2. Déverrouillez le calque d'arrière-plan, dupliquez-le et masquez celui du bas.

Appliquez le filtre de points en demi-teinte sur la couche supérieure. Ajustez les paramètres dans la fenêtre contextuelle du filtre à points en demi-teinte pour différents effets

3. La conception finie !

Comment créer un arrière-plan de bande dessinée rétro avec Illustrator

Comme je l'ai mentionné précédemment, les points de demi-teintes sont de tailles différentes afin de recréer le contraste dans une image. Le filtre Photoshop que nous avons utilisé ci-dessus est parfait pour cet effet. Mais si vous souhaitez créer des points de taille égale comme des points Ben-Day ou des points Lichtenstein, vous devrez utiliser Adobe Illustrator et le créateur de motifs intégré. Comme je l'ai mentionné ci-dessus, les points Ben Day sont sur une grille carrée et les points Lichtenstein sont sur une grille diagonale décalée. Les deux peuvent être réalisés avec le créateur de motifs dans Illustrator.

Comment créer un motif de points Ben-Day avec Illustrator

1. Créez un nouveau projet sur Illustrator.

La taille n'a pas vraiment d'importance. Nous avons utilisé 600 x 350 px.

2. Sélectionnez l'outil Rectangle arrondi.

Cliquez une fois sur le plan de travail et définissez la taille de votre forme. Faites-en 15px par 15px avec un rayon de coin de 7,5 ox. Changez la couleur du cercle en un remplissage bleu et sans trait.

3. Cliquez sur « objet » dans la barre de menu supérieure et sélectionnez « motif » puis « créer ».

4. Ajustez les préférences de sorte que les points soient sur une grille carrée.

Voici les préférences que vous devez choisir :

• Sélectionnez le type de tuile à griller
• Vérifiez la taille de la tuile à l'art
• Définissez l'espacement H et l'espacement V sur 15 px par 15 px
• Sélectionnez Copies vers 9 x 9

Lorsque vous voyez le motif comme l'image ci-dessous, cliquez sur Terminé. Cela enregistrera automatiquement le motif dans le panneau Nuancier.

Comment créer un motif de points Lichtenstein avec Illustrator

Ce modèle suit les mêmes étapes que celui ci-dessus et ne change que lorsqu'il est temps d'ajuster les préférences dans le créateur de modèles. Ouvrez les préférences du modèle Ben-Day et appuyez sur « Enregistrer une copie ». Nommez le nouveau motif « Points de Lichtenstein ». Lorsque vous cliquez sur OK, il sera enregistré en tant que copie dans le panneau des nuances. Fermez le motif de points Ben-Day. De retour dans le panneau Nuancier, ouvrez le motif de points Lichtenstein. Vous verrez une fenêtre contextuelle avec le nom du motif lorsque vous le survolez. Dans les préférences, modifiez uniquement le type de mise en page en « Brique par ligne » et cliquez sur Terminé.

Comment ajouter des motifs d'art de bande dessinée rétro aux formes

Maintenant que vous avez créé vos propres motifs Retro Comic Book, vous pouvez les appliquer à n'importe quelle forme à tout moment. Tout d'abord, vous devez enregistrer les échantillons de motif afin de pouvoir les ajouter à tout projet futur.

1. Dans le panneau Nuancier, sélectionnez les deux nouveaux motifs que nous avons créés.

Cliquez sur l'icône de la bibliothèque d'échantillons et choisissez « Enregistrer les échantillons ». Nommez le nouveau Swatches « Retro Comic Book Pattern » et cliquez sur OK.

2. Lorsque vous créez un nouveau projet et que vous souhaitez utiliser ces modèles, accédez au panneau Nuancier.

Vous ne verrez pas nos nouveaux échantillons là-bas, vous devez donc les importer. Cliquez à nouveau sur l'icône de la bibliothèque d'échantillons et faites défiler jusqu'à « défini par l'utilisateur », puis le « Motif de bande dessinée rétro. » Une nouvelle fenêtre s'ouvrira avec les échantillons et les couleurs régulières avec les motifs de bandes dessinées inclus. Maintenant, ils sont prêts à être utilisés sur n'importe quelle forme que vous voulez.

3. Créez une nouvelle forme et remplissez-la avec l'un des motifs.

La taille des points dépendra de la taille de la forme que vous créez. La taille maximale de la forme est contrôlée par la taille du plan de travail.

Plus la forme est petite, plus les points sont gros et vice versa. Si vous utilisez une petite forme et pensez que les points sont trop gros, faites un clic droit sur le motif à l'intérieur de la forme et sélectionnez « transformer » puis « échelle ». Pour rendre les points super petits, choisissez les paramètres suivants.

• Uniforme : 10 %
• Dans Options : cochez Transformer les modèles

Essayez différents paramètres pour l'option « uniforme » pour obtenir différentes tailles de points.

4. Pour créer une forme d'étoile avec un style de bande dessinée rétro, créez un nouveau projet à 1000 px par 1000 px.

Dans le panneau des couleurs, cliquez sur le noir pour le trait et le motif Lichtenstein pour le remplissage. Sélectionnez la forme d'étoile et cliquez sur la toile pour la faire apparaître.

Idées pour utiliser l'art de la bande dessinée rétro dans la conception Web

La tendance de la bande dessinée semble être à la hausse. Bien sûr, toutes les marques ne bénéficieront pas de ce style de créativité. Pour les marques amusantes qui aiment les couleurs, les points Ben Day et les graphismes inspirés de Lichtenstein sont parfaits pour une bouffée d'air frais. La meilleure utilisation pour un motif de points de bande dessinée est comme arrière-plan, sur une autre couleur ou sans. De même, essayez d'utiliser de grandes bulles comme séparateurs ou des exclamations de style bande dessinée avec votre contenu. Vous pouvez créer le vôtre avec les didacticiels ci-dessus ou vous procurer des images déjà conçues à partir de Freepik.

Les dessins ci-dessous ont été réalisés avec des dessins de bandes dessinées provenant de Freepik. Comme vous pouvez le voir, les concepteurs ont pris quelques libertés dans la façon dont ils ont conçu la taille des points. Néanmoins, ils incarnent toujours parfaitement le style Retro Comic Book à leur manière.

Conclusion

Comme vous pouvez le voir, les possibilités de conception de bandes dessinées rétro sont assez variées. Des styles classiques aux versions plus modernes, vous pouvez faire à peu près n'importe quoi. Que vous créiez les motifs vous-même ou que vous vous procuriez des graphiques en ligne, vous pouvez créer des choses assez étonnantes avec l'art de la bande dessinée rétro et Divi !