Thursday 18 August 2011

How to create composite image of 2 photos side-by-side


I have shown how to display 2 images side by side using the HTML table tag <table> but because a blogger asked to display a particular pair of photos side by side which actually turned out to be a single composite picture of 2 photos side by side, I am going to illustrate how this alternative method do displaying 2 photos side-by-side using my favorite free Irfanview photo editor.

First I am going to upload 2 photos of some trishaws (pedicab, bikecab, cyclo, becak, or rickshaw or in my country, becha) taken during my holidays in idyllic Terengganu displayed below using HTML table tag
:



Say, supposed you are HTMLphbic, meaning you hate HTML, here is how to make a single composite image of 2 photos side-by-side. First, open Irfanview or similar photo editors. I then go to Menu > Create New (Empty) Image (see screen shot below) and create an empty image, say, 800x500. Using the mouse, drag and drop to select a rectangle roughly proportional to the size of the photo (see screen shot below, red arrow to highlight selected rectangle):

Drag and drop with mouse to create selection with Irfanview
Screen shot 2


Now go to one of the photo, right-click on the photo and select COPY IMAGE to copy into clipboard (see screen shot below):

Screen shot 3


Now go to the first image that you want in the composite picture, either right-click on the image and select COPY IMAGE or go to the Menu, click EDIT > COPY IMAGE to copy image into clipboard. Now go back to the created image with the selected rectangle (screen shot 2), go to MENU > EDIT > PASTE and the first photo will be pasted into the selected triangle just like the screen shot below:

After pasting first photo, creating second rectangle to paste second photo of composite image

Now drag and drop to create the second selection (see screen shot above) and copy-paste the second photo and you will end up with the single composite photo with 2 images side-by-side:

Final composite image comprising 2 photos side-by-side

No comments: