Your page would probably load faster if you loaded the five images separately rather than as one large image.
If you want to merge the five images in photoshop, you need first to create a new blank image big enough to accommodate all five. Then, for each of your five images:
Select the entire image (Control-A)
Copy this entire image (Control-C)
Go to your new image
Paste in the copied image (Control-V)
Ensure that the Pointer icon is selected from the toolbar at the side (like an oblique arrow). This ensures that the pasted image is selected.
Click and drag the pasted image and move it into the correct position, using the arrow buttons for fine positioning.
Finally, merge all the added layers (Layer, Merge layers).
I'm not sure what you mean by
Also see the images has one single color tone matching the color theme of that site.
To stack five separate images side-to-side, put them all into a single div which has been given a width to accommodate all five. It might be advisable to style each image with float: left; padding: 0; margin: 0;
You will also need to ensure that there is no space between the <img...> tags as this can add extra space in IE.