Making Website Images Blend-in Naturally

Okay, maybe like me, you have experienced this frustration at one time or the other: A perfectly designed website with great layout still looking out of place. Trust me, the culprit most times are just website images that do not blend with the site's primary colours. Images used in our website design are usually sourced from several places and they come with different colour themes. Injecting these pictures directly into our design automatically creates confusion in the design. So how do we resolve this?

Solution
In order to ensure that your images do not create confusion in the design, the images you use need to be readjusted to harmonize with the primary colour(s) of your design. There are several ways to achieve this, I'll illustrate one of the simplest approach in this post using Adobe Photoshop.
  1. Open the image in Photoshop
  2. Navigate the menu: Image - Adjustments - Photo Filter 
  3. In the Use area, select Color
  4. Select your website's primary colour in the Color Dialog by clicking the currently active color
  5. Adjust the Density while Preview is turned on to achieve desired filter density
  6. Click Ok
  7. Save a copy of the image to use on your website




You will observe that if you stick to this ritual for all images used on your website, the website will immediately have an appealing overall outlook. Its a simple process, but has great impact!

You may take a look at this website where I implemented the technique.




Comments

Post a Comment

Popular posts from this blog

Resize or Crop Image before Upload Using HTML5 File API

Image
I've always loved how Whatsapp, Facebook, Twitter and all the major social network platforms maintained sanity of uploaded profile pictures through the use of instant resize at upload time. Of course not only profile pictures need to be made to conform to a specific dimension, if you find other scenarios during development when you need to ensure that your images are of a specific height and width, or aspect ratio then this article will help you do just that. You may also just want to give the user ability to resize before final upload, this article will help you do just that. Step 1: Download CropperJs Plugin There are lots of plugins that could help to achieve our objective, and I've tried a few. I find this one very robust and easier to use. Here's the github link Step 2: Import the CropperJs Plugin Using your script tag, import the downloaded plugin's Javascript file and link the CSS file too. Note, that for speedy loading, CSS files should be loaded in t
Read more

Exception from HRESULT: 0x80131040

Image
Background: I just recently upgraded to Windows 10, and I must confess, the overall experience immediately got me. I love the fact that our good old start menu was back and better. The tile one was much of a controversy although I have been indifferent about it all the while. I particularly love Cortana, the search assistant who made me remember the office assistants that used to come with the office suite back then. The euphoria I experience was a perfect disguise, however, for the ambush that was ahead. Issue: I went ahead to open VisualStudio and launched the project I was currently working on. I pressed F5 to launch it, only to ram into a jam! The project I still successfully tested only a day before now threw an exception. From my experience, and this situation hasn't proved me wrong, every Microsoft upgrade always has a catch somewhere. This particular one forced me to begin to rectify a fault in an application that was initially 'bug-free' before my u
Read more

Get Creative With Data Tables: Row Click Events

Image
Introduction Datatables from datatables.net are so lovely, especially with the responsive extension that you can enable by including dataTables.responsive.js in your project. I particularly find fascinating the combination of search / filtering, pagination, ordering and exporting features which are available right 'out-of-the-box'. Issue Well, as great as datatables are, you will find it difficult if not impossible to develop a system with acceptable user-experience using bare-bone datatables implementation. In my own case, because I was porting my superb Asset and Inventory Management Application found at asset.bz to the mobile platforms using PhoneGap, I needed the user to be able to tap on any record in order to perform some pre-define operations like editing, approvals etc. Solution Apparently, the solution isn't far fetched. The sample code below would do the job nicely: // HTMLTableData is your array of records to be displayed in the data table
Read more