25 Brilliant Uses of Colorful Spectrums in Web Design

by on 5th August 2010 with 24 Comments

screenshot

I’ve noticed a recent trend in web design that involves the use of colorful spectrums as a main design element. The uses are widely varied but almost always quite beautiful.

Today we’ll learn how to build amazing spectrum-based artwork in Photoshop and then take a look at 25 brilliant examples of spectrums being used in real websites.

How to Have Fun with Spectrums in Photoshop

Before we look at our selection of sites that utilize spectrums as a major design element, let’s take a look at how you can easily build your own awesome spectrum artwork in Photoshop. I’ve gone over a similar technique in a previous tutorial but it’s definitely appropriate for this article as well.

Building complex gradients in Photoshop can be time consuming. Fortunately, it comes built-in with some great spectrums that you can apply in only a few clicks.

To start, create a solid black layer. Then duplicate that layer and apply a gradient overlay to whatever layer is on the top. To load in the spectrum gradients, hit the little arrow on the right of the gradient picker and go way down to the bottom where it says “spectrums.”

screenshot

Select any spectrum that you like and set the direction to whatever you feel is appropriate. Due to the hideous initial result of this step, I imagine that many designers have never thought to use these pre-built gradients. However, always remember to look at Photoshop’s effects as building blocks, not as finished products.

The hippiefest below is actually quite easy to turn into something that looks really cool and fits with modern design trends.

screenshot

The next step is to create a solid white layer and select Filter>Render Fibers. It doesn’t really matter what your settings are for the fibers, just play around until you get something you like.

screenshot

Now apply a simple motion blur. Be sure to crank it up so that the lines are nice and smooth. You can see in the image below that this is going to give us a really nice texture with lots of depth and contrast.

screenshot

The magic happens when you set this layer to multiply. Voila! Now your spectrum is looking a lot cooler!

screenshot

To make it more dramatic, apply a solid black layer mask and then grab a large soft brush set to white. Then click around the canvas two to three times with your brush to bring back the gradient in a subtle and attractive way.

screenshot

Don’t stop there! Play around with other filters and effects to create your own unique take on spectrums. The image below uses the same exact process shown above but uses clouds instead of fibers (ditch the blur step).

screenshot

As a final dimension, once you star mixing it with graphics, the effect can get really amazing really fast. Below I threw in a compass rose and was able to come up with some awesome results after only a few seconds of tweaking.

screenshot

Spectrums in Website Backgrounds

To get an idea of how to practically apply these techniques in the world of web design, check out the great examples below. This first section implements color spectrums as the main focal point of the site background.

Web Design Cheltenham UK

screenshot

BundleHunt

screenshot

Rareview

screenshot

Agence web créative

screenshot

Design Writer’s Guild

screenshot

Click on Tyler

screenshot

The Creative Way

screenshot

Spectrum Theme

screenshot

deaxon

screenshot

Logic By Design

screenshot

Greek website designer

screenshot

Ordered List

screenshot

Ciplex | Design Shack

screenshot

Life Church | Welcome

screenshot

Julio Silver

screenshot

Robin James Yu

screenshot

Web Design Company

screenshot

Burubundi

screenshot

Wir lieben Links

screenshot

Logos and Other Elements

Here we see spectrums being used to create extremely attractive icons, logos and other graphical elements. Notice how sometimes designers will use hard steps instead of smooth gradients. Yet another option to keep in mind!

Kaleidoscope

screenshot

Drupal Works

screenshot

Hughes

screenshot

Neutron Creations

screenshot

Rua de Baixo

screenshot

Conclusion

I hope this post has been quite inspirational and that it encourages you to play around with spectrums in your own designs.

If you design or find any sites using spectrums in a unique and awesome way, leave a comment below with a link so we can all check it out!

Comments & Discussion

24 Comments

  • http://chosen-destinies.co.cc/ Vanesa

    I love spectrums! Thanks for the inspiration.

  • Pingback: CSS Brigit | 25 Brilliant Uses of Colorful Spectrums in Web Design()

  • Niubi

    Great post! I’d love to see something like this on more ecommerce websites (DubLi, eBay) – they all look so flat and boring when compared to these.

  • skydrow
  • Vinay

    Superb!! Will try to use it in my next design! Thanks for d inspiration!

  • http://www.smashingshare.com Waheed Akhtar

    Very nice and inspirational post. I liked you started with creating spectrum and playing with them and then gone through some great websites which used spectrum in their backgrounds very cleverly.

  • http://www.99studiodesigns.com/ Filips

    SPECTERUMS is a fabulous presentation.! I’m already using these.

  • http://www.ladwebdesign.com Linda

    I have been thinking about how to design my next website – thanks for the inspiration. The use of spectrums in website design is a great idea.

  • http://www.alacartecreative.co.uk Shumel Lais

    Wow! great inspiring article… Sure to use these techniques soon.

  • Artificial Colours web design

    Very inspiring technique, I will be trying this out very soon on a new website I have in mind.

  • http://www.vivoocreative.co.uk Web Design Nottingham

    Great inspiration! Thanks

  • http://www.goblinridge.co.uk Ted Thompson

    Some great websites. Julio Silver is my favourite! Thanks for sharing.

  • http://www.wvss.net wvss

    Awesome!! I love it.

  • http://www.mebreaks.com me

    Wow!! Great collection.

  • http://www.aroradesigns.com Arora Designs

    Thanks for showcasing our site. There’s a lot of really great colorful websites on here. After we redesigned our site to be a bit more conservative, we didn’t think we’d be featured anywhere. Our old design is at http://www.southlakewebdesign.net and has been featured in many articles and galleries. It was great for getting featured, but not for converting sales. Our site might be less colorful, have less negative space and look a bit more conservative, but it serves our targeted demographics much better.

    … but we miss our old design still. :)

  • Voltagenewmedia

    Awesome. I actually used somthing similar on my new site

  • http://www.cozality.com Non-Profit Websites by Cozality

    Great entry!

  • Pingback: Napilink augusztus 16. | hdesign()

  • Pingback: [リンク] デザイン系の記事 まとめ (8月1,2週目) | Bonnie styles.()

  • http://grey-ang.com/ Grey

    I read this article last month and I decided to design my website with a spectrum idea too.

    And here it is up live! :D

    Thanks for the article! Great to be inspired!

  • http://www.thisismysketchbook.com Rachael

    Great collection. It’s good to have bright bursts of colour sometimes. I’ve used a spectrum of colours for my own site and have to say that I’m really pleased with it. Gives it some punch! :)

  • http://www.fabian-design.de Webdesigner

    awesome collection, thanks you.

  • http://www.koeln-dialog.de Kanzleimarketing

    This opens an infinite numbers of opportunities – great and thanks!

  • http://310interactive.com Digital Agency

    Love the color spectrum’s

Subscribe
Membership
About the Author