ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Create quick & easy web headers and color schemes

Updated on October 21, 2015
How to create web headers & colour schemes easily and quickly
How to create web headers & colour schemes easily and quickly | Source

Create web headers & colour schemes quickly and easily

Almost everyone I know has a website or a blog these days. These need headers and colour schemes to make them look great and to stand out from the crowd.

Other uses for headers

Some social media sites such as Facebook and Google+ also give you the opportunity of adding your own images and the good news is that they are quick and easy to create.

Aim for simplicity and coordination

There are plenty of resources for you to use including free stock images (or copyright-free images from Wikimedia) and free online drawing editors. Free is good! It's easy to try to over-complicate design but simple is truly the best.



1. Select a lovely photograph. Choose colours that are suitable for your brand (and it's also a good idea to choose colors that you love).

If you're using free images, you are more limited than you would be if you were spending a lot of money on expensive stock photography.

The answer to this is to choose an image that you can crop to size.

2. Web headers need to be small in height. If you're creating a header for a third party service, such as Google+, then you'll be advised about the desired dimensions.

But if you're making a header for your own website or blog - and no dimensions are given, then remember that your header is there to establish the 'tone' and the 'feel' of your site and yet must not take up too much valuable website real estate.

I keep the height below 250 pixels. In the image on the right you can see that I've grayed out the area I don't want.


3. Crop the image and create a small rectangle. Copy & paste so that you have four,as shown. Using the eyedropper tool, select four colors from the photograph. Be sure that one is dark so that you can use it for the body copy. Create a text box and write your company or blog name, selecting a suitable font and using a color from your scheme. Size it to fit one of the blank areas of the photograph.


4. Your drawing program will tell you the various codes for these colours.

It may tell you the RGB (for print) the HEX code (for web) or both. If it doesn't tell you both, there are plenty of free services online that will convert RGB to HEX - or vice versa.

For web purposes, it's the HEX codes that you'll need.

5. Add the title to the photograph and save the file.

Use the HEX codes to set the colors for body copy, headers, links and visited links then upload the header. As you can see in the screenshot below, the title of the blog has been created to be the same size as the sidebar on the left.


6. Here's another example with a very different colour scheme but is created in exactly the same way. You can see how the 'mood' of this image and these colours is very different to the previous one.


7. The previous two examples has been chosen particularly because they had suitable areas for text but this show what to do if you absolutely love a photograph that wouldn't show the title. Simply create a bar in one of your colours underneath the photograph and add your copy there.


8. Here's another example of a different colour scheme. You can see how easily these can be created using the eyedropper tool. Your text, headers and links will always coordinate with your header image.

9. This is what your blog will look like when it goes live.

It's simple, clean and stylish.

Don't be tempted to be complicated - your blog is there to showcase your writing so you want to enhance it, rather than distract your readers.

Learn more about designing for the web. Working on the internet and creating suitable graphics and colour schemes is very different to any other type of design.

There are several issues which are exclusive to the web. There is so much bad design seen today - or graphics that aren't suitable for today's devices.

Learn more from the book you see here.

© 2014 Jackie Jackson


    0 of 8192 characters used
    Post Comment
    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      7 years ago from Fort Lauderdale

      @Elsie Hagley: Thank you - but if I can do it, anyone can :)

    • Elsie Hagley profile image

      Elsie Hagley 

      7 years ago from New Zealand

      Nice, it looks as though you are quite a artist. Wish I could do them as good as you. Thanks for sharing your How - To Create Web Headers.


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
    ClickscoThis is a data management platform studying reader behavior (Privacy Policy)