Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    922
    Thanks
    302
    Thanked 3 Times in 3 Posts

    Question Merging Images to Create Site Header.

    Hi,

    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.

    http://www.imagebam.com/image/2e932b5247952
    http://www.imagebam.com/image/b7d8765247954
    http://www.imagebam.com/image/b19c8b5247955
    http://www.imagebam.com/image/e87e7e5247956
    http://www.imagebam.com/image/2b9ebb5247957



    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.

    http://www.imagebam.com/image/e97a345247777


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

  • #2
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    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.

    John
    Last edited by Actinia; 04-20-2008 at 05:53 PM.

  • #3
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    922
    Thanks
    302
    Thanked 3 Times in 3 Posts
    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?


    http://www.psdnow.com/download/file/ktjIQ4wvcH/

  • #4
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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/pho...ade-layer-mask A nice tutorial.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •