Two-Minute Color Schemes Using Photoshop

Photoshop Color Schemes

Color schemes are one part of web design that some people can really get hung up on. Unless your going for a minimalistic style, we need multiple colors in our designs to help separate headers, navigation, sidebars, footers and all of the other elements that make up a website.

There are many ways that we can go about creating these color schemes.

  • Use our brains to create something from scratch
  • Look at another design and mock ours up after theirs (not recommended)
  • Use an online color tool
  • Turn to nature for our palettes

Today, we’ll look at how we can turn to the colors of nature to aid us in creating Two-Minute Color Schemes Using Photoshop. This quick and easy tutorial will show you how to create completely original palettes in just a couple of minutes. A big thank you to Tessa Blakeley for teaching me this method.

Two-Minute Color Schemes

Step One:

Find an image that reflects the type of color scheme that you are after. In this tut I just ran over to DeviantArt, what would I do without this site, and did a quick search for “clouds sky”. I’m after a blue/gray color scheme, so why not turn to nature to provide the colors for me.

It took me about 15 seconds to find this image, which should do the trick.

clouds

Step Two:

Open the image in Photoshop and resize it to around 500px wide.

step2

Step Three:

Go to Filter>Pixelate>Mosaic and use a cell size around 30px. Press OK. You should now have an image similar to the one below.

pixelated clouds

Step Last:

Simply grab your eyedropper tool and grab the colors from the sqares that you think would work best for you website, print ad or whatever project that your working on.

eyedropper

It would probably be good practice to go ahead and take note of what colors would work best where and save it in a simple text file for further reference. Something as simple as this:

text colors

This may seem like a really simple technique (and it is), but there are times when easy little tricks like this can save your butt when the clock’s ticking.

3 Comments

+Add your comment
  1. Cool. I had a similar tutorial as well.
    http://designinformer.com/3-ways-use-useless-photo/

    I guess great minds think alike. LOL! :)

  2. It can be done with different ways but this is cool and easy too :D Really useful tip :D

Leave a Reply

Your email address will not be published. Required fields are marked *