You know the feeling when you land on a blog and can’t help thinking ‘wow, this site has such a well designed theme it must belong to a professional the likes of Steven King and without even reading a word I know I must follow it’?
Maybe I just don’t get out enough.
Anyway, part of the wow factor on many blogs is the way everything matches. So today’s post, which follows on from my post on free design tools for creating awesome header pics, is about strengthening your design by color-matching your link and heading colors with your header. I’m using both Microsoft Paint and Paint.Net for this, and I’m sure Mac-based programs will too.
Now, this is easy but has a few steps, so bear with me.
1. Choose A Color
Decide on a color from your header which would look good for your links. Remember to keep it dark enough to be easily visible, and if you’re using a WordPress theme and can make it match that, even better.
Tip: If you love your existing blog theme and want to make your links match those colors, just take a screenshot of your blog by pressing Print Screen, then open your picture editing program and paste. Now it’ll act as an image you can color-pick to your heart’s content.
2. Edit Your Color To Perfection
Firstly, if you haven’t already seen the aforementioned post on free design tools, have a read and download the extremely useful Paint.Net program. (Or just use regular Paint, if you’re willing to forgo a few features).
Assuming you’ve done the download and now have your image open in Paint.Net, go to the top menu, select the Window tab, and open the Color and Tools windows. In Tools select the Color Picker (circle 1, below).
Click the desired color on your header image, and if the selected color (circle 2) isn’t right, you can click around until you’re happy, or click More to manually adjust the red, green and blue sliders.
Alternatively, if you are using Microsoft Paint, use the Color Picker in the left hand tool bar to choose the color you want, then in the top menu visit Colors – Edit Colors – Define Custom Colors to get your R, G and B sliders if you need to fine tune.
3. Enter The Matrix
A fundamental rule of web design is that every color has its own HEX code, which tells the computer viewing it exactly how much red, green and blue to display.
In Paint.Net the code is right there (image 1, circle 3). In Microsoft Paint it’s not, so you simply have to Google a HEX code generator (or use one I prepared earlier http://www.colorschemer.com/online.html), input your R, G and B amounts from Paint’s ‘Define Custom Color’ window (image 2), and hit Set HEX.
And we’ve done all that… just to get a number?
I know, but once you’re used (addicted) to it, it’s quick as anything and makes you feel like a pro. How you do use your matrix-style codes depends on whether you’re using blogger, wordpress or your own website. So…
4. Get Customizing!
For blogger, you visit:
Dashboard – Template – Customize. Choose Advanced from the left hand menu, then in the Link Color section, type your newly created HEX code and viola! You can even repeat the process to customize your hover-over and visited link colors too.
TIP: Using a lighter version of your main link color as a hover color can look great. Just go back to your color editing window in Paint/Paint.net, reduce the Saturation, and get the code for the newer, lighter color.
For wordpress.com blogs you can’t simply customize all your link colors, but you can customize things like your headings within a post, just by clicking the A button in your post editing tools and inputting your new HEX code.
You can also specify your link colors when creating your own sidebar widgets. I’ve written an entire post on how to create widgets using simple HTML code, so for the sake of our sanity I’ve added the instructions for customizing your link colors to that post, so that it’s all in the one place. Check it out here, and before you know it you’ll be building your blog like a pro!
P.S. As always, if I’ve been too specific or too vague with this, let me know and I’ll answer your questions as best I can.