Published on October 26, 2014
One of the most challenging things for me in design is coming up with the right color combinations. But if you have a picture that perfectly expresses your client’s brand… chances are the colors in that picture play a big factor.
So, like in the last post, you can quickly create a website mockup based around that photo using Adobe Color. (By the way… I swear I’m not an affiliate of them… I just really love this app lol.)
Here are the steps I took to make a pretty cool mockup in about 12 minutes with a solid color scheme.
First, I generated the color scheme in the Color web app and chose the “muted” preset because it seemed to fit best.
Next, I wanted to place a headline / sub-headline on top of the image, so I took the light blue, made a darker shade from it, then put a transparent overlay on the image.
Then, I placed some text on top of the overlay, and used many of the other colors to form my color scheme for the site. I took some elements from the logo to brand it a bit more too. Otherwise, everything was pretty standard in terms of setting up my hero section:
As you can see, the makings of a real website are here. And one of the most difficult parts – the color scheme – was done for me.
Pretty cool, right? 🙂
Obviously this design has a long way to go! (I only spent 12 or so minutes on it.) But because I didn’t have to think so much about color, it freed me up to get all of the content placed which I can now massage and refine with more creativity.
Till next time,
Mary, from Reliable.
P.S. If you got a lot out of this post, I’d appreciate if you shared it with those bright social buttons below 😉 Thanks
What is Reliable PSD?
What is Reliable PSD? After years of frustration, terrible service, horrible quality and trying almost every PSD to HTML service out there, we gave up relying on others and created our own. We are a high-quality coding partner for digital agencies that want to convert PSD into CSS and HTML. You will love our friendly, thorough service, our impeccable code, and also the fact that when you get your website back, it’s actually ready. No more long lists of changes that take months to resolve. We’d love nothing more than to help you too. Touch base now to start the conversation.
This post was last updated on February 10, 2023
