View Full Version : Merging Images to Create Site Header.

04-20-2008, 09:27 AM

I am new to photoshop and I need of your help. I searched Google for this but in vain.

I have the following 5 images and I want to merge (or whatever you guys call it in your graphical language) them all and create a single header for my new site. Giving it one color tone which is #456389.


For example i got the following header from a site and this guy has used 6-7 images to create one single header. Also see the images has one single color tone matching the color theme of that site.


Please guide me the steps how do I use the above 5 images to create one single header in Photoshop.

04-20-2008, 05:48 PM
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.


04-20-2008, 08:01 PM
I have made a sample merginng using photoshop but I am not at all happy with it. Could u please download the file and check what wrong am I doing?


04-20-2008, 10:14 PM
Well the document has the layers merged, which makes it hard to say what exactly went wrong. Don't merge the layers, put them each on their own.

I think part of the issue was with gradient masks. You didn't fade the graphic all the way to 0&#37; opacity (which is actually 100% white on the mask layer).

http://www.sitepoint.com/article/photoshop-fade-layer-mask A nice tutorial.