J'ai remarqué une tendance récente dans la conception Web qui implique l'utilisation de spectres colorés comme élément principal de la conception. Les utilisations sont très variées mais presque toujours assez belles.
Aujourd'hui, nous allons apprendre à créer de superbes œuvres d'art basées sur le spectre dans Photoshop, puis 25 superbes exemples de spectres utilisés dans de vrais sites Web.
Comment s'amuser avec Spectrum dans Photoshop
Avant d'examiner notre sélection de sites utilisant les spectres comme élément de conception majeur, voyons comment vous pouvez facilement créer votre propre illustration de spectre impressionnante dans Photoshop. J'ai déjà abordé une technique similaire dans un précédent tutoriel, mais cela convient également à cet article.
La création de dégradés complexes dans Photoshop peut prendre beaucoup de temps. Heureusement, il intègre de superbes spectres que vous pouvez appliquer en quelques clics seulement.
Pour commencer, créez un calque noir uni. Ensuite, dupliquez ce calque et appliquez un calque dégradé sur le calque situé en haut. Pour charger les gradients de spectre, cliquez sur la petite flèche située à droite du sélecteur de gradient et descendez jusqu'au bas de la page où il est indiqué "spectres".
Sélectionnez le spectre que vous aimez et définissez la direction que vous jugez appropriée. En raison du résultat initial hideux de cette étape, j'imagine que de nombreux concepteurs n'ont jamais pensé à utiliser ces dégradés prédéfinis. Cependant, n'oubliez pas de regarder les effets de Photoshop comme des blocs de construction et non comme des produits finis.
Le hippiefest ci-dessous est en fait assez facile à transformer en quelque chose qui a l'air vraiment cool et correspond aux tendances du design moderne.
L'étape suivante consiste à créer un calque blanc solide et à sélectionner Filtre> Rendre les fibres. Peu importe les réglages de vos fibres, jouez jusqu'à ce que vous obteniez quelque chose que vous aimez.
Appliquez maintenant un flou de mouvement simple. Assurez-vous de le monter pour que les lignes soient bien lisses. Vous pouvez voir dans l'image ci-dessous que cela va nous donner une très belle texture avec beaucoup de profondeur et de contraste.
La magie se produit lorsque vous configurez cette couche pour qu'elle se multiplie. Voila! Maintenant, votre spectre est beaucoup plus froid!
Pour le rendre plus spectaculaire, appliquez un masque de calque noir uni, puis saisissez un grand pinceau doux réglé en blanc. Puis cliquez deux ou trois fois autour de la toile avec votre pinceau pour ramener le dégradé de manière subtile et attrayante.
Ne t'arrête pas là! Jouez avec d'autres filtres et effets pour créer votre propre vision unique des spectres. L'image ci-dessous utilise exactement le même processus que ci-dessus, mais utilise des nuages au lieu de fibres (abandonner l'étape de flou).
En tant que dimension finale, une fois que vous avez commencé à le mélanger avec des graphismes, l’effet peut devenir vraiment incroyable et très rapide. Ci-dessous, j'ai lancé une rose des vents et j'ai réussi à obtenir des résultats impressionnants après seulement quelques secondes de peaufinage.
Spectres dans les fonds d'écran
Pour avoir une idée de la façon d'appliquer concrètement ces techniques dans le monde de la conception Web, consultez les excellents exemples ci-dessous. Cette première section met en œuvre les spectres de couleurs en tant que point central du fond du site.
Conception de sites Web Cheltenham UK
BundleHunt
Rareview
Agence Web Créative
Guilde des scénaristes
Cliquez sur Tyler
La voie créative
Thème du spectre
Dexon
Logic By Design
Concepteur de site Web grec
Liste ordonnée
Ciplex | Cabane Design
Eglise de la vie | Bienvenue
Julio Silver
Robin James Yu
Société de design Web
Burubundi
Wir lieben Liens
Logos et autres éléments
Nous voyons ici des spectres utilisés pour créer des icônes, des logos et d’autres éléments graphiques extrêmement attrayants. Notez que les concepteurs utilisent parfois des marches difficiles au lieu de dégradés lisses. Encore une option à garder à l’esprit!
Kaléidoscope
Travaux Drupal
Hughes
Créations de neutrons
Rua de Baixo
Conclusion
J'espère que ce billet a été une source d'inspiration et qu'il vous encourage à jouer avec les spectres dans vos propres conceptions.
Si vous concevez ou trouvez des sites utilisant des spectres de manière unique et géniale, laissez un commentaire ci-dessous avec un lien afin que nous puissions tous le consulter!