Build Site Color Schemes from Photography
One of the reoccurring responses we received from our reader survey earlier this month involved our color scheme inspiration posts.
Overall, readers seemed to like the palettes, but wanted a demonstration of how to put them into action. Today we’re going to do just that.
By the end of this post we’ll have a website color scheme planned out, along with a wireframe demonstration.
Pick a Base Photo
Flickr is the only site you’ll ever need for inspiration photos. Name a topic, and you’ll have thousands to sift through. Without Flickr, our Color Scheme Inspiration series would have some seriously less inspiring photography.
With so many photos available, you’ll need to spend some time figuring out the subject matter. Designing for a surf shop? Photos with keywords based on the water is a great start. Travel agency? Sample some beaches around the globe. It sounds obvious because it is.
Let’s put this into practice with a quick search on Flickr. In honor of Halloween, we’ll go with a seasonally themed photo:
Sample a Color Scheme
Most photos have more than a few colors. It’s the job of the designer to figure out which ones will be more significant. Lucky for you, there’s plenty of places online to get help.
Colourlovers has created a great tool called PhotoCOPA. PhotoCOPA allows you to upload a photo into the editor, and then extract colors, add weight to them, and save as exportable palettes. It has been absolutely critical to putting together our Color Scheme Inspiration posts. It’s an easy way of keeping track of the end result when first composing the scheme.
Don’t Be Afraid to Expand
Just because a color doesn’t directly appear in a photograph, doesn’t mean that it can’t be used. This is why it’s called “inspiration” and not “direct extraction”. If a photograph is mostly blue and purples, it’s not inappropriate to include a new shade to enhance the other colors.
Using the Halloween photo above, we can make a number of color schemes:
PhotoCOPA allows you to search Flickr from directly in the editor, but I’ve found it much easier to sort through photos in typical searches.
Applying to Page Design
There are several tools out there that enable web designers to visualize what the potential end result. Color Scheme Designer is great for generating a quick color scheme with web layout preview. If you’re interested in developing something a little more customizable, I recommend creating a template in Photoshop to plug colors into. Save it somewhere convenient, and save a new version for each scheme.
Once again, don’t be afraid to introduce extra colors as needed. These palettes aren’t always going to look perfect automatically — you will have to do some tweaking to get a good end result.
Sample Layouts
The layouts below are inspired by the color schemes built in the last step. I’ve demonstrated some possible layout colors using our palettes and some basic Photoshop:
Design from Photography
If you find color schemes from other sources, where does your inspiration come from? Have you ever designed a website from a photograph before? Share your experiences in the comments below.
