Top Social

How To: Create A Colour Scheme From An Image

23 July 2013
I downloaded a Photoshop trial earlier this month, so I could make some cool graphics for my blog and design my own proper layout and stuff (which is work in progress at the moment.) One thing I've really struggled with is a colour scheme/palette, and have found myself trying to pinpoint colours from different images, but finding myself with completely different colours to what I want.

A week or so ago I was introduced to a cool Tumbr page called 5 x 5, which is dedicated to taking album covers and pixelating them to 25 squares (5 x 5.) The images reminded me of those paint strips you get from B&Q and stuff, and I thought I'd apply this technique to the pictures and was pleasantly surprised.

'So how does it work?' I hear you ask...


This is a picture I took on holiday last month. I thought it ties in with my banner and could give some pretty nice colours. In Photoshop go to Filter > Pixelate > Mosaic and choose a Cell Size of 100. You should get something like this.


This would be a good time to mention - resize your picture to an appropriate degree before you pixelate. I resized mine to 600 x 400 pixels.

From these new, large pixels, choose between about 4 and 6 different colours. I chose 5 to apply to the following areas:

- background
- normal font colour
- hyperlink colour
- used hyperlink colour
- heading/border/misc colour

I didn't really feel like any of them were light enough for a background, however, and saved the image as a separate file. I then undid my pixelation and tried again - setting the Cell Size to 50.


From here, I chose 5 colours from the 2 different pictures - using the eyedropper tool, and created my colour scheme/palette below.




I tried again with a different, let's say more lively, picture I took on holiday.


Pixelate it like before...


Pixelate it smaller like before...


Create your colour scheme/palette like before...


One more for good measure...




Hope you enjoyed this little tutorial. If I find any more tips like this I'll be sure to send them your way...

Post Comment
Post a comment