Les éléments du design web rétro

Le style vintage et rétro devient de plus en plus populaire dans les illustrations numériques d'aujourd'hui.

L'utilisation de thèmes rétro et vintage dans la conception est probablement l'une des tendances les plus répandues depuis que l'industrie est devenue presque entièrement numérique.

Dans le post d'aujourd'hui, nous allons regarder des exemples de travail provenant de la merveilleuse Dribbble , ce qui nous aide à nous concentrer sur des extraits d’une pièce plutôt que sur la conception ou l’illustration dans son intégralité.

A partir de là, il est possible d'identifier quelles techniques ont été utilisées et de décrire leur impact sur la conception globale. Vous vous familiariserez avec ces tendances et pourrez les reproduire.

Pour vous aider, des tutoriels courts sont disséminés dans tout l'article. Nous vous indiquerons également plusieurs autres didacticiels et ressources utiles pour vous permettre de démarrer votre propre travail vintage et rétro!

1. Cercles et autres formes simples

Des formes simples sont couramment utilisées dans le design vintage. Les cercles sont les plus courants, en particulier dans la stratégie de marque. Les exemples ci-dessous ont été soigneusement sélectionnés pour vous montrer à quel point les formes simples peuvent être puissantes.

Cette belle illustration utilise des formes elliptiques pour produire un soleil et se termine bien avec un effet typographique.

La marque Circlebox Creative est basée sur un cercle et s'inspire des tampons et badges d'encre vintage. Le design est glacé avec des motifs floraux et un style typographique simple.

Ce design est un peu différent car il repose fortement sur des formes simples pour le faire éclater. L'en-tête de la barre bleue utilise une longue rangée de petits cercles pour créer un bord inférieur intéressant.

Ce design vintage, à l'image de la marque Circlebox Creative, s'inspire des tampons et des badges d'encre vintage. L'identité semble avoir été gravée sur un morceau de papier, contrairement aux lignes nettes et propres de Circlebox.

Voici un autre élément de marque basé sur un cercle. La texture et le bleu entre tous les gris donnent vraiment vie à ce design.

Une œuvre incroyablement simple composée de deux cercles, une texture, des styles de mélange et une typographie propre. Cette pièce démontre vraiment le pouvoir des formes simples.

Mini-tutoriels

Comment appliquer un motif floral damassé à un cercle à l'aide d'Adobe Illustrator

Appliquez un motif à un cercle dans Illustrator est quelque chose que vous ferez probablement beaucoup si vous explorez la tendance rétro. La technique est similaire à celle de Glace Cakes pour leur marque (illustrée ci-dessus).

Ouvrez Illustrator et dessinez un cercle. Maintenez la touche Maj enfoncée tout en faisant glisser votre cercle pour le garder rond. Insérez votre motif floral damassé en allant dans Fichier → Place.

Supprimez tout arrière-plan et changez la couleur de votre nouveau motif. Vous pouvez sélectionner des éléments individuels à l'aide de l'outil Sélection directe.

Sélectionnez votre modèle à l'aide de l'outil Sélection, puis allez à Fenêtre → Pathfinder pour ouvrir la fenêtre Pathfinder si vous ne l'avez pas déjà fait. Maintenez la touche Maj enfoncée et sélectionnez votre cercle pour sélectionner les deux éléments en même temps. Cliquez sur le bouton "Minus Front" dans votre fenêtre Pathfinder pour supprimer le motif floral situé en dehors de votre cercle. Jouez avec votre choix de couleur, et vous avez fini!

Création d'une ligne en forme de bulle à l'aide d'Adobe Photoshop

Créons une ligne en forme de bulle comme celle de l'exemple ci-dessus.

À l'aide de l'outil de sélection rectangulaire, faites glisser une sélection et remplissez-la de noir sur un nouveau calque. Sélectionnez l'outil de sélection elliptique et, tout en maintenant la touche Maj enfoncée, faites glisser une très petite sélection et remplissez-la de noir, à nouveau sur un nouveau calque.

Placez le cercle noir au bas de votre rectangle noir. Dupliquez le calque et positionnez le nouveau cercle à côté de votre original.

Répétez cette étape jusqu'à ce que vous ayez quelque chose qui ressemble à l'image suivante. Vous aurez beaucoup de calques. Sélectionnez-les tous en maintenant la touche Maj enfoncée, puis accédez au calque → Fusionner les calques pour en faire un.

Maintenant, nous allons ajouter des styles de calques simples ou des options de mélange pour donner vie à notre forme! Cliquez avec le bouton droit sur votre calque et sélectionnez "Options de fusion". La fenêtre Style de calque devrait s'ouvrir. Appliquez les effets suivants pour ajouter un dégradé, une ombre interne et une ombre portée:

Et on a fini!

2. Schémas de couleurs bicolores et limités

Les combinaisons de couleurs bicolores sont très répandues dans le design vintage, car la production d’impressions couleur n’a pas été aussi facile qu’aujourd’hui. Vous trouverez ci-dessous des exemples récents de combinaisons de couleurs à deux tons et limitées.

Ce design minimaliste tire son attrait visuel des formes et des lignes en noir et blanc, en particulier la ligne pointillée horizontale et les formes découpées du bas du cercle.

Cette marque répète quelques couleurs sélectionnées tout au long. Les couleurs fonctionnent incroyablement bien ensemble. Le jaune-orange est la couleur focale qui attire votre attention.

Cette belle pièce de design rétro repose uniquement sur la couleur et la typographie. Les lignes subtiles d'une largeur d'un pixel la terminent.

Un autre design noir et blanc bicolore. Cette identité est basée sur un badge et donne un aspect légèrement tridimensionnel à partir d'une simple typographie et d'effets.

Cet exemple montre à quel point la couleur peut être efficace. Il utilise trois couleurs: orange, marron et blanc. Le contraste entre les trois échantillons fonctionne très bien pour le design.

Ce design (l'identité elle-même, pas l'arrière-plan) repose uniquement sur la couleur et la typographie.

Cette conception combine l'orange et un beau bleu-vert avec du blanc. La combinaison de couleurs correspond aux bordures de fantaisie et aux effets typographiques simples.

Encore un autre logo typographique vintage qui repose sur deux couleurs: le blanc sur le rouge. Notez comment l'identité est basée sur un cercle.

Cette identité utilise seulement trois couleurs, une police de caractères élégante et un mode de mélange agréable pour mettre la cerise sur le gâteau.

Ressources de couleur

Un grand nombre d'applications sont là pour vous aider à créer vos propres schémas de couleurs. Cette petite sélection partage plusieurs des meilleurs:

ColourLovers (application web)
Un site internet dédié aux jeux de couleurs. Parcourez les thèmes existants créés par la communauté ou créez-les à partir de rien en téléchargeant des photos.
Volcan Volcan (application web)
Une autre application Web, mais sans support communautaire comme ColourLovers. Cette application vous permet de créer des schémas de couleurs à partir de zéro ou à partir d'images importées.
Adobe Kuler (application web)
Encore une autre application Web de gestion des couleurs, cette fois-ci présentée par le très populaire Adobe. L'interface est superbe et facile à utiliser. Kuler héberge une communauté et vous pouvez parcourir les palettes de couleurs les mieux notées.
Flux de couleur (application iPhone)
Cette application iPhone vous permet de créer et de stocker des palettes de couleurs à partir de zéro ou à partir d'une photo importée. Vous pouvez également générer automatiquement des schémas à partir de photos à l'aide du schéma de couleurs intégré.
Palettes (application iPhone)
Palettes est similaire à Color Stream pour vous permettre de créer et de stocker des jeux de couleurs à partir de rien ou à partir d'une image. Vous pouvez également saisir les couleurs de votre site Web préféré.

Si vous êtes un débutant, voici quelques articles à vérifier: " Choisir des combinaisons de couleurs " et " Théorie des couleurs pour les concepteurs, troisième partie: créez vos propres palettes de couleurs . "

3. Éléments typographiques et tendances

La typographie est l'un des éléments les plus importants du design numérique rétro. Il existe des possibilités infinies avec la conception de type, dont certaines peuvent être trouvées dans les exemples ci-dessous.

Cet extrait de type est plein de bonté d’effet de texte. Le texte est fini avec une ombre portée et un motif de lignes diagonales simple mais vraiment génial.

Voici mon morceau typographique préféré dans cette vitrine. Il fusionne d'excellents styles vintage avec des techniques modernes. Le type prend vie grâce à l'ajout de détails subtils, tels que le trait blanc d'un pixel sur la ligne "Vous êtes cordialement invité" et les ombres portées si importantes sur le type de date.

Cette typographie rétro révèle des techniques étonnamment simples. Le type "Design is" est dupliqué trois fois et repositionné. Le duplicata inférieur est ensuite texturé pour créer un joli style rétro en quelques minutes.

Encore plus de typographie qui utilise une simple ombre portée pour ajouter de la profondeur à la police de caractères élégante et décorative.

Typographie simple combinée à des formes semi-transparentes et à une texture subtile. Le design se marie bien.

Vous ne pouvez pas être beaucoup plus simple que cela: un choix puissant de polices.

Cette typographie en trois dimensions a très probablement été réalisée dans Illustrator, en utilisant les outils 3D. Un bruit subtil a été ajouté à la conception, ce qui fonctionne bien avec la palette de couleurs limitée.

Ce superbe petit instantané du design rétro produit numériquement combine la texture, le bruit, des formes simples, différents styles de mélange et une superbe palette de couleurs. La typographie, en particulier le type le plus large, est animée par les ombres portées.

Cette pièce impressionnante de papeterie d'affaires d'inspiration vintage utilise des éléments dessinés à la main pour son look. Le design a également un schéma de couleurs limité.

La typographie blanche de ce dessin a été fusionnée avec l'image comme si elle était là lorsque la photo a été prise. Cela fonctionne bien avec la photo sépia.

Mini-tutoriels

Comment créer une typographie dessinée à la main à l'aide d'Adobe, Photoshop ou Illustrator

Dans ce court tutoriel, vous apprendrez à produire, numériser et vectoriser rapidement votre type dessiné à la main à l'aide d'Adobe Photoshop et d'Illustrator.

Tout d'abord, dessinez des lettres:

Vous devez remplir votre type esquissé d'une manière ou d'une autre. Vous pouvez le faire en utilisant de la peinture ou un marqueur. J'utiliserai de l'encre de chine noire et un pinceau fin, que je recommande fortement, principalement parce qu'il est si pur et gras.

Commencez à remplir vos lignes esquissées.

Vous devriez vous retrouver avec quelque chose qui ressemble à ceci.

Ensuite, scannez votre image. Si vous ne possédez pas de scanner, vous pouvez simplement photographier le travail - assurez-vous simplement qu'il est de haute qualité. Une fois l'image numérisée ou photographiée, ouvrez un nouveau fichier Photoshop et accédez à Fichier → Place; localisez l'image et placez-la dans votre document.

Allez dans Image → Réglages → Luminosité / Contraste. Augmentez le niveau de contraste à environ 50. Cela noircira le noir dans l'image.

Enregistrez votre fichier en tant qu'image et ouvrez Adobe Illustrator. Créez un nouveau fichier RVB, puis accédez à Fichier → Place. Localisez votre nouvelle image enregistrée et placez-la sur votre toile. Dans la barre de menus en haut du canevas, sélectionnez l'option "Live Trace". Votre texte est maintenant un vecteur de travail et peut être agrandi ou réduit à votre guise, pour être utilisé dans vos documents Photoshop.

Comment ajouter de la typographie à une photo de ville à l'aide d'Adobe Photoshop

Nous allons ajouter la typographie à une photographie en utilisant une technique similaire à celle utilisée pour la photographie d'Amsterdam ci-dessus. Pour les besoins de ce tutoriel, nous utiliserons cette photo de Barcelone .

Copiez la photo et créez un nouveau document Photoshop. Collez la photo dans le document. Sélectionnez l'outil Texte et tapez "Barcelona" dans la police de votre choix. Allez dans Édition → Transformer → Rotation, et faites pivoter la typographie selon un certain angle afin de l'aligner approximativement sur l'angle des bâtiments.

Vous remarquerez que certaines des lettres ne chevauchent pas les bâtiments. Pour résoudre ce problème, sélectionnez l'outil Plume et déployez manuellement le bas des lettres en dessinant de nouvelles formes. Une fois que vous avez fait cela, faites un clic droit et sélectionnez "Remplir le chemin". Remplissez la sélection avec du noir.

Ensuite, supprimez les zones qui se chevauchent de votre type. Encore une fois, utilisez l'outil Plume pour créer une sélection. Zoomez directement sur votre photo et tracez autour du bâtiment et de l'arbre. Une fois que vous avez fait cela, cliquez avec le bouton droit de la souris et allez dans "Make Selection". Vous devriez maintenant avoir une ligne en pointillés en mouvement comme celle ci-dessous:

Cliquez avec le bouton droit de la souris sur votre calque de typographie et sélectionnez "Type de rasterisation". Cela le transformera en un calque standard. Fusionnez votre calque de type avec les formes personnalisées que nous avons créées précédemment en les sélectionnant tout en maintenant la touche Maj enfoncée et en accédant au calque → Fusionner les calques. La sélection effectuée à la dernière étape avec l'outil Plume doit toujours être active. Avec le calque de type unique maintenant sélectionné, appuyez sur la touche Supprimer. Cela devrait supprimer tout le texte qui se chevauchent.

Il est maintenant temps de faire une retouche photo très simple pour fusionner un peu mieux votre type. Sélectionnez le calque d'arrière-plan (qui devrait être votre photo), et allez à Image → Réglages → Désaturer pour transformer votre photo en niveaux de gris / noir et blanc. Maintenant, allez à Image → Réglages → Filtre photo. Sélectionnez l'option sépia dans le menu déroulant et jouez avec le curseur de niveau pour définir l'intensité de l'effet. J'ai choisi environ 60%.

Cliquez avec le bouton droit sur votre calque de type et sélectionnez "Options de fusion" dans le menu. Appliquez une superposition de couleur à votre type; J'ai utilisé un marron clair. Voici mon résultat:

Comment appliquer une ombre portée et une superposition de motif à la typographie à l'aide d'Adobe Photoshop

Dans ce court tutoriel, nous allons créer un morceau de typographie simple en utilisant des effets Photoshop intégrés. Nous allons également créer notre propre modèle.

Commençons par créer notre modèle simple. Ouvrez un nouveau document Photoshop de 3 à 3 pixels. Sélectionnez maintenant l'outil Crayon. Zoomez directement sur votre toile et en utilisant le noir # 000000, placez trois points en diagonale sur votre toile, comme ci-dessous:

Allez dans Modifier → Définir le modèle pour faire apparaître la boîte de champ suivante. Appelez votre modèle quelque chose de convenable (j'ai appelé le mien "Diag Line 1"). Appuyez sur le bouton "OK". Votre modèle est terminé!

Créez un autre document Photoshop. Remplissez le fond avec une couleur claire de votre choix et ajoutez une typographie à la toile. Les caractères utilisés sont Helvetica Neue Medium et Helvetica Neue Bold.

Resélectionnez votre texte et changez sa couleur. Choisissez quelque chose qui contraste bien avec le fond. Il est important de définir la couleur du texte au lieu d'utiliser une superposition de couleurs, car nous utiliserons ultérieurement une superposition de motifs et, malheureusement, vous ne pourrez pas utiliser les deux.

Cliquez avec le bouton droit sur votre calque de type et sélectionnez "Options de fusion" pour ouvrir la fenêtre Style de calque. Sélectionnez "Superposition de motifs" et, dans la liste déroulante du motif, sélectionnez le motif que nous avons créé précédemment. Modifiez le mode de fusion sur "Overlay" et l'opacité à 30%. Les résultats varieront en fonction de votre choix de couleur, alors n'hésitez pas à faire des essais.

Nous allons maintenant appliquer une ombre intérieure. Utilisez les paramètres affichés dans la capture d'écran ci-dessous:

Appliquez maintenant une ombre portée très faible mais importante. Faire attention aux petits détails en vaut toujours la peine. Utilisez des paramètres similaires à ceux de la capture d'écran ci-dessous:

Pour terminer la typographie, nous reproduisons entièrement le texte. Cliquez avec le bouton droit sur le calque de type et sélectionnez "Calque dupliqué". Sélectionnez l'outil Déplacer, déplacez le type ailleurs dans votre document, puis repositionnez-le sous votre calque de type d'origine. Abaissez l'opacité, et vous avez terminé.

4. Styles de mélange

Le mélange de styles (généralement appelé mode de fusion dans Photoshop et Illustrator) est un excellent moyen d'ajouter de la dimension à votre travail sans trop d'effort. Il vous permet de mélanger des objets et des couleurs de plusieurs manières différentes. Les modes de fusion sont souvent utilisés avec différents niveaux d'opacité. Par exemple, lorsque vous appliquez une texture photographique à une image, nous en discuterons plus tard.

Il semble qu'il y ait trois formes dans cette marque, mais en fait il n'y en a que deux: un bleu et un rouge. Un mode de fusion a été appliqué aux formes pour permettre à l’arrière-plan texturé de s’afficher, en mélangeant les couleurs et en créant un violet foncé éclatant.

Ce petit morceau est emballé avec divers modes de mélange, textures, photographies et formes simples, résultant en un travail puissant.

Ce beau travail répète des formes simples et utilise différents modes de mélange pour rendre chaque forme unique. Des modes de fusion ont également été appliqués à la typographie.

Les deux cercles de cette conception ont des modes de fusion différents, dont l'un projette une teinte rouge sur l'image ci-dessous, l'autre modifie l'image en rouge foncé, permettant à la texture de transparaître. Un rouge vif est produit là où les deux formes se rencontrent.

Ce morceau de la Galerie Open Yoga est l'un de mes préférés dans la vitrine. Il associe une palette de couleurs douce et limitée à une photographie, puis ajoute du bruit, une texture légère et une typographie élégante.

La photo de cette pièce peut avoir été réalisée en superposant la photo entière avec une couleur unie et en changeant le mode de fusion de ce calque, ce qui rend l'image sous-jacente délavée et usée.

Cette pièce est remplie de texture. Un mode de fusion a été appliqué à chaque texture pour permettre à l'image ci-dessous d'être visible.

Semblable à la photographie de l'Italie que nous avons vue, cette photo a été manipulée en utilisant un calque plein de couleurs avec un mode de fusion. Le style comporte un calque de gouttes de couleurs différentes, probablement avec un mode de superposition appliqué et une transparence réduite.

Le cercle au milieu de cette pièce est associé à un mode de fusion permettant de voir l’arrière-plan.

Mini-tutoriels

Comment mélanger les couleurs avec des photos à l'aide d'Adobe Photoshop

Dans ce mini-tutoriel, nous appliquerons la couleur à une photographie en noir et blanc à l'aide de l'outil Pinceau et des modes de fusion. Je vais utiliser cette photographie de toile d'araignée .

Ouvrez un nouveau document Photoshop et placez la photo de votre choix sur le canevas. J'ai donné à moi une bordure blanche.

Sélectionnez une brosse douce et une couleur claire. J'ai choisi un pastel jaune. Créez un nouveau calque en allant sur Calque → Nouveau calque. Peignez une grande couleur de votre couleur sur le nouveau calque, comme ici:

Répétez le processus avec plus de couleurs. Vous pouvez peindre ces couleurs sur le même calque, il n'est pas nécessaire de créer de nouveaux calques.

Une fois que vous avez terminé de colorier votre calque, allez à Filtre → Flou → Flou gaussien. Flou le calque pour fusionner ces couleurs un peu plus. Tout ce qui dépasse 100 pixels devrait convenir, mais cela dépend de la taille de votre canevas: plus le canevas est grand, plus vous aurez besoin de pixels pour le flouter.

Nous pouvons maintenant changer le mode de fusion du calque. Dans le menu déroulant du mode de fusion de la palette des calques, sélectionnez "Superposition".

Abaissez l'opacité de votre couche colorée à environ 50%. Vous devriez vous retrouver avec quelque chose comme ceci:

L'expérimentation est la clé; chaque mode de fusion modifie le produit final, ce qui signifie que vous ne pourrez jamais reproduire un résultat. L'exemple ci-dessous utilise l'écran du mode de fusion, qui lave la photo et la rend rétro. Expérimenter avec des effets comme celui-ci est typiquement la manière dont les effets rétro Lomo et Holga sont reproduits.

Ressources

Vous trouverez ci-dessous une petite sélection de tutoriels d'affiches vintage utilisant des styles de fusion:

5. Texture et bruit

La texture et le bruit ajoutent un intérêt visuel à votre travail. Dans certains cas, un design ne semble tout simplement pas sans eux. Dans d'autres cas, la texture et le bruit peuvent être trop importants. Voici quelques exemples de designs rétro qui fonctionnent bien avec la texture.

Une texture photographiée en forme de toile est utilisée dans cette pièce, donnant à la conception globale un bel aspect usé.

Cette texture propre produit finalement un design épuré. Le look rétro est obtenu avec un léger pinceau grunge pour supprimer certaines zones du logo et de la typographie.

La texture du papier a été utilisée de manière excessive dans cette pièce pour produire une pièce de travail numérique à l'aspect vintage.

Semblable au dernier exemple, une texture en papier a été utilisée pour que l’œuvre ressemble à une ancienne affiche. Une texture sombre est également placée au-dessus des silhouettes du boxeur.

Une combinaison de bois, de papier recyclé et de textures de taches de café a été utilisée ici pour produire un effet vraiment impressionnant. Un mode de fusion a été appliqué au calque sur lequel le caractère est activé, permettant à la texture d’être visible.

La texture de cette conception Web est minimale et subtile, mais néanmoins elle contribue de manière significative à l’intérêt visuel de l’ensemble du travail.

La texture est utilisée ici pour égayer le fond et la typographie. La plus simple des textures mais toujours aussi efficace.

La texture a été utilisée au minimum pour égayer cette illustration, lui donner de la profondeur et la rendre plus attrayante pour les yeux.

Voici un morceau qui ne ressemblerait tout simplement pas sans texture: le fond, l'illustration et la typographie sont tous texturés.

Cette pièce est assez différente des autres dans cette vitrine; la texture n'est pas une photographie mais une image vectorielle.

Ressources

La liste ci-dessous contient des liens vers plusieurs excellents sites Web sur lesquels vous pouvez télécharger des textures à la fois premium et gratuites dans votre travail:

TextureVault
Un marché premium spécialement conçu pour le téléchargement de textures individuelles. Le prix varie en fonction de la taille de la texture.
Lost & Taken
Un excellent blog qui affiche certaines des meilleures textures disponibles. Des trucs vraiment de grande qualité ici. Vous pouvez également voir le textures dans une galerie .
CG Textures
Probablement l'une des plus grandes galeries de texture autour. Des milliers d'images sont disponibles gratuitement.
TextureLovers
TextureLovers est essentiellement une galerie de textures de tout le Web. C'est un bon endroit où aller si vous ne savez pas où regarder, car il présente des textures provenant de divers sites Web.

6. Recadrage d'image et masques de calque

Le recadrage d'image et les masques de calque permettent d'ajouter des éléments supplémentaires à une œuvre. Pourquoi inclure une photographie entière lorsque vous pouvez simplement montrer ce dont vous avez besoin ou le styliser pour correspondre au reste du travail? La simplicité est la clé du design rétro.

Cette pièce fait un grand usage de la texture et des effets typographiques et utilise habilement un masque de calque pour compléter une image de la galaxie. Il a l'air superbe

Cette pièce rétro utilise non seulement des photographies rétro-masquées, mais aussi des cercles, des traits, des modes de fusion et une palette de couleurs limitée - pratiquement tous les principaux éléments abordés dans cet article.

Cette pièce est ultra-minimaliste mais a fière allure. Les images sont masquées en cercles et très bruyantes, ce qui lui donne un superbe aspect rétro-futuriste.

Vous trouverez ci-dessous quelques tutoriels sur le recadrage de photos et l'utilisation de masques de calques Photoshop:

Écrit exclusivement pour WDD par Callum Chapman, concepteur et négociant d’illustrations Circlebox Creative . Il dirige également The Blog Inspiration et Magasin Picmix

Partagez vos designs et illustrations vintage et rétro avec nous, ainsi que tout article ou tutoriel qui pourrait aider vos lecteurs.

conception création de sites web rétro ancien dribbler