Maîtrisez les tendances de conception à la mode avec ces didacticiels Photoshop

Publié: 2022-03-11

Notre quotidien est saturé d'images étonnantes. Les expériences de conception visuelle deviennent des tendances de conception graphique en vogue, et soudain, nous les voyons partout.

Des conceptions visuelles saisissantes sont collées sur les côtés des bus, des affiches, des panneaux d'affichage, des publicités télévisées, des magazines et bien sûr, des produits numériques. Ils ont de nombreux noms, notamment bichromie, double exposition, lignes de balayage, pépin, bavure, canal de couleur, masquage photo, couleurs vives et criardes et erreur d'impression.

effet visuel de pépin de tendance de conception graphique sur une annonce de métro
La tendance du design graphique « glitch » sur une publicité du métro de New York.

Comme pour la mode, les tendances du design sont souvent recyclées des décennies passées - on les voit revenir encore et encore : constructivisme russe, Bauhaus, sérigraphie, années 1970… etc. Les motifs géométriques simples et saturés existent depuis près d'un siècle, et les designers les utilisent encore parce qu'ils sont tout aussi efficaces qu'il y a 100 ans.

Heureusement, les designers d'aujourd'hui disposent d'une plus grande variété d'outils numériques avec lesquels créer ces effets avant-gardistes qu'auparavant. Pourtant, même si les outils peuvent être plus faciles à trouver, n'oublions pas que c'est la créativité courageuse et l'innovation visuelle qui forgeront les conceptions les plus fraîches et les plus convaincantes.

Les designers doivent-ils suivre les tendances du design ?

Certains directeurs créatifs et designers peuvent résister aux tendances du design parce qu'ils ne veulent pas être considérés comme des « suiveurs ». Cependant, utiliser les tendances du design graphique pourrait s'avérer être une décision importante car cela peut aider à rendre un designer plus contemporain. Oser être différent a aussi ses récompenses. Les meilleurs designers "suivent et empruntent" fortement aux tendances - passées et présentes - créant parfois quelque chose d'entièrement nouveau en combinant les tendances du design graphique en quelque chose de frappant et de frais.

Mise en garde : les concepteurs ne doivent utiliser les tendances de conception graphique dans leur travail que lorsque cela est approprié et en gardant à l'esprit l'image de marque. Par exemple, les gens s'attendent à la stabilité et à la confiance des banques, des investisseurs, des marques d'assurance, etc. Un effet de contre-culture subversif comme le « pépin » peut ne pas être approprié dans ces cas.

graphiques animés à effet de double exposition suivant une tendance de conception
La série HBO True Detective utilise la "double exposition" avec beaucoup d'effet dans ses titres d'ouverture.

Examinons quelques-unes de ces tendances en matière de conception graphique et partageons certains des meilleurs didacticiels Photoshop sur la façon de les créer.

Tendance tendance en matière de design : l'effet de double exposition

Des combinaisons d'images spectaculaires peuvent être obtenues en utilisant l'effet « double exposition ». Le nom vient de la photographie sur film celluloïd où deux ou trois photos sont prises sans enrouler le film vers l'avant dans l'appareil photo, exposant le même cadre plusieurs fois avec des images différentes. Cette tendance figurait beaucoup sur les affiches de films et les promos télévisées. Comme vu ci-dessus, les titres d'ouverture d'émissions télévisées tels que True Detective sur HBO ont utilisé cet effet avec des animations graphiques avec un grand effet.

effet de photographie à double exposition tendance de conception graphique

tendance de conception visuelle à effet de double exposition

effet photoshop double exposition une tendance tendance en matière de conception graphique

Afin d'obtenir un excellent effet de double exposition, une sélection soigneuse de l'image est très importante. Les images à contraste élevé fonctionnent mieux lorsque des zones plus sombres occupent une zone de l'image où une autre image va être utilisée. Juxtaposer un portrait avec une image plus détaillée comme un paysage urbain ou paysage est souvent fait.

Voici quelques-uns des meilleurs didacticiels Photoshop sur la façon de réaliser cette tendance de conception en vogue :

Tutoriel Photoshop #1 sur l'effet de double exposition :


Tutoriel Photoshop #2 sur l'effet de double exposition :


Tutoriel Photoshop #3 sur l'effet de double exposition :


Glitch, erreur d'impression, effets d'interférence visuelle

C'est un double-preneur. Il attire l'attention dans une mer d'« images parfaites » parce qu'il s'agit d'imperfection. Il est basé sur le résultat inattendu d'erreurs numériques appelées "glitchs". Tout ce qui nous entoure - publicités, affiches, couvertures de magazines et promotions télévisées - a été photoshoppé à la perfection (certains diraient même que c'est "fake" ou "pollution visuelle"), ce qui suscite le désir de voir plus réel, organique, moins- des images plus que parfaites.

Souvent plus attrayante pour les jeunes générations, cette tendance du design est un mouvement subversif, contre-culturel, « anti-fake » destiné à faire ressortir les designs. Comme mentionné ci-dessus, cela peut ne pas convenir à certaines situations ou marques, il est donc conseillé aux concepteurs de faire preuve de prudence s'ils choisissent d'implémenter cet effet.

La plupart des concepteurs utiliseraient le terme « glitch », mais on parle parfois d'effet VHS, de décalage RVB avec lignes de balayage, d'erreur d'impression ou d'interférence visuelle. Les designers innovants combinent parfois plusieurs types de ces effets à la mode en quelque chose de nouveau.

un pépin, une erreur d'impression, des interférences visuelles affectent les tendances de conception graphique
Les affiches de Mr. Robot utilisaient des variations de l'effet glitch pour se démarquer et renforcer la sensibilité contre-culturelle de l'émission.


un pépin, une erreur d'impression, des interférences visuelles affectent les tendances de conception graphique
La tendance de conception des erreurs d'impression/de changement de couleur et une combinaison de l'effet de changement de couleur et de pépin.


lignes de balayage vidéo tendance de conception d'effets graphiques
Les lignes de balayage vidéo et le décalage d'image sont également utilisés pour créer des graphiques inhabituels et accrocheurs.

Chacun a sa propre méthode pour créer cet effet, alors regardez autour de YouTube et choisissez celui que vous aimez. Il existe même des actions Photoshop que les concepteurs peuvent acheter pour créer l'effet de pépin en quelques clics. Voici quelques-uns des meilleurs tutoriels Photoshop sur la façon de réaliser cette tendance de conception :

Tutoriel Photoshop #1 sur l'effet Glitch :


Tutoriel Photoshop #2 sur l'effet Glitch :


Il existe même des moyens d'obtenir un effet de pépin sympa avec uniquement du CSS, comme le montrent cette démonstration de diaporama et cette démonstration de page de destination.

Abonnez-vous au blog de design Toptal et recevez notre eBook

Effets de bichromie

Duotone existe depuis un moment mais ne semble jamais se lasser. Il y a des centaines d'années, la sanguine était utilisée (craie rouge sur papier) pour créer de simples dessins monochromes par des artistes tels que Léonard de Vinci. Il y a quelque chose de durable dans le fait de décomposer une image en une tonalité simple et une image bicolore moderne n'est pas si différente d'un croquis de maître ancien.

dessins bichromes à la sanguine - craie rouge sur papier
Des dessins sanguins de Léonard de Vinci et de Mademoiselle de Mondran, et une image bichrome moderne.

Aujourd'hui, des affiches à succès d'Hollywood à Apple et Spotify, tout le monde semble utiliser l'effet bichromie. Le but, encore une fois, est de se démarquer, d'être vu comme quelque chose de différent. Il existe même des actions Photoshop et de nombreuses applications mobiles pour créer facilement des effets de duotone.

l'effet duotone de l'affiche blade runner suit une tendance de conception graphique

tendance de conception de l'effet bichromie photoshop

tendance de conception visuelle à effet bicolore

créer une tendance de conception graphique à effet bicolore

Voici quelques-uns des meilleurs didacticiels Photoshop sur la façon de réaliser cette tendance en matière de design :

Tutoriel Photoshop #1 sur l'effet Duotone :


Tutoriel Photoshop #2 sur l'effet Duotone :


Tutoriel #3 de Photoshop sur l'effet Duotone :


Division RVB, canal de couleur, double exposition couleur

Voici un autre effet accrocheur qui peut utiliser des photos, du texte et des formes. Cet effet utilise parfois 3 images différentes dans 3 canaux de couleur différents du même sujet, et les juxtapose pour une image intéressante. Cet effet peut parfois aussi être vu comme un mélange de l'effet de pépin et de l'effet de division RVB. Certains concepteurs deviennent vraiment créatifs et mélangent la double exposition, les pépins et les effets de division RVB.

tendance de conception d'effet de décalage rgb créée dans photoshop

canal de couleur et actions photoshop effet glitch

tutoriel photoshop effet de changement de couleur une tendance de conception

Voici quelques-uns des meilleurs didacticiels Photoshop et Affinity Photo sur la façon de créer cet effet de conception visuelle tendance (veuillez ne pas tenir compte de ce qu'ils appellent l'effet, tout le monde a un nom différent pour cela):

Tutoriel Photoshop sur l'effet d'exposition double couleur :


Tutoriel photo d'affinité à effet d'exposition double couleur:


Couleurs vives et criardes et effets bicolores fluorescents

Encore une fois, le but ici est de vraiment se démarquer. Cette tendance utilise des couleurs vives, saturées et fluorescentes en quantités généreuses sur le design.

tendance de conception de sites Web à effet fluorescent bicolore
Le site Web de New Deal Design suit la tendance du design à effet bicolore fluorescent.


tendance de conception graphique à effet de couleurs vives

effet de couleur éclatant et criard utilisé sur un calendrier Web, une tendance de conception de site Web
Panneau de calendrier d'AfriSam 2018 Corporate Stationery utilisant la tendance de conception de sites Web.


tendance de conception de sites Web à effet de couleurs saturées audacieuses
Utilisant cette tendance de conception de sites Web, le site Web de l'agence de conception ELJE Group utilise des couleurs vives et saturées.


hackernoon utilise un effet de couleur saturé fluorescent brillant une tendance de conception de site Web
Hackernoon utilise des couleurs saturées fluorescentes lumineuses pour se démarquer.

La direction à prendre ici est d'être audacieux (le cas échéant) et de prendre des risques avec des couleurs criardes et saturées, qu'il s'agisse d'un site Web, d'une couverture d'album ou d'une affiche.

Photo Masking, Découpages, Abstractionnisme, Cubisme

C'est l'une de ces tendances de conception récurrentes qui continue d'être une approche de conception graphique durable. Il peut s'agir d'un hybride de zones de couleurs plates et audacieuses, de montage et de masquage. C'est une technique qui a presque 100 ans, comme en témoignent ces affiches de propagande russes des années 1920.

affiches de propagande russe avec des formes géométriques simples, des découpes et un effet visuel de masquage photo

Pour créer des œuvres aux couleurs et à la complexité variées, Henri Matisse a utilisé au cours de la dernière décennie de sa vie deux matériaux simples - le papier blanc et la gouache - qui sont devenus ses célèbres papiers découpés. Une simple paire de ciseaux était l'outil utilisé par Matisse pour transformer la peinture et le papier en un monde de plantes, d'animaux, de figures et de formes.

les découpes matisse définissent une certaine tendance design pour les formes et les couleurs simples

La variation numérique du cubisme, de l'art abstrait et des "découpes" est aujourd'hui la tendance du design de masquage photo utilisée par de nombreux designers pour attirer l'attention.

tendance de conception d'effet de masquage photo
Certains de ces effets visuels de superposition ressemblent aux célèbres papiers découpés de Matisse.


une autre tendance design l'effet de masquage photo
Des effets de masquage photo intéressants peuvent être obtenus avec des formes géométriques simples ou des polices de caractères.


effet de masquage photo tendance design graphique

Il n'y a pas de règles strictes sur la façon de créer cet effet. Tout dépend des matériaux d'origine et de votre créativité. Recherchez des inspirations de design et d'art telles que les affiches de propagande russes, l'art cubiste abstrait de Picasso et les découpages de Matisse. La plupart de ces techniques de masquage de photos et collages peuvent être créés avec un masquage de calque dans Photoshop. Il s'agit plus de sélection de photos et de créativité que de technique.

Néanmoins, voici quelques tutoriels Photoshop sur la façon de créer cette tendance de conception de la hanche, l'effet de masquage photo :

Comment créer un didacticiel Photoshop sur une affiche à effet de texte:


Comment créer un tutoriel Photoshop Letter Portrait:


Voici un autre tutoriel Photoshop intéressant utilisant le masquage photo pour créer cette image :

tutoriel photoshop pour la tendance de conception de masquage photo

Le didacticiel est un exemple de la manière dont quelques techniques simples peuvent être utilisées pour créer des illustrations élaborées à l'aide de plusieurs calques, du masquage, de l'outil Plume, d'un éclairage de base et d'une texture simple.

Explorez, soyez courageux et définissez votre propre parcours

Aujourd'hui, le courage créatif n'est pas facultatif. C'est ce que les concepteurs doivent faire à mesure que les attentes des gens augmentent et que leur attention devient plus difficile à capter. N'hésitez pas à suivre certaines tendances du design. En fait, mélangez-les, faites quelque chose de nouveau avec eux ! Basculez le statu quo, soyez audacieux et explorez votre fantaisie. Faire le grand saut! Soyez créatif courageux!

• • •

Pour en savoir plus sur le blog Toptal Design :

  • eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
  • L'importance de la conception centrée sur l'humain dans la conception de produits
  • Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
  • Principes heuristiques pour les interfaces mobiles
  • Conception anticipative : comment créer des expériences utilisateur magiques