Results 1 to 6 of 6
  1. #1
    New Member
    Join Date
    Sep 2008
    Location
    Winnipeg
    Posts
    3

    Combined images to make a seamless image

    Many websites cut up a larger image and then recombine them to make a seamless full image on the site. How do I do that? What is that called? I don't even know how to search the "Help" because I do not know what to name it.

    Does anyone know what I am talking about?

  2. #2
    Administrator Dave's Avatar
    Join Date
    Sep 2004
    Location
    Te Awamutu, New Zealand
    Posts
    3,959
    Blog Entries
    79
    It's called splicing or slicing. Photoshop and other applications have specialist tools to do it but it's also possible to do it manually. What application are you using?
    Dave Owen
    MediaCollege.com

  3. #3
    As Dave said, it's called Slicing. An application like Photoshop has a dedicated Slice tool - which, oddly enough, is shaped like a scalpel.

    Essentially what happens is that the original image is "sliced" into smaller images and exported as Gifs or Jpgs, which are then assembled into an HTML table, like the parts of a jigsaw puzzle, to recreate the original image in its entirety.

  4. #4
    New Member
    Join Date
    Sep 2008
    Location
    Winnipeg
    Posts
    3
    I am using Photoshop 7 and Dreamweaver MX. What is the strategy with using this approach?
    Last edited by gbh854; 2nd Oct 2008 at 15:44.

  5. #5
    Administrator Dave's Avatar
    Join Date
    Sep 2004
    Location
    Te Awamutu, New Zealand
    Posts
    3,959
    Blog Entries
    79
    Well, here's a start:
    http://www.mediacollege.com/adobe/ph...ool/slice.html

    After that it's really a case of experimenting and practice. I'm sure there are lots of other tutorials on the net as well.
    Dave Owen
    MediaCollege.com

  6. #6
    I wouldn't recommend anyone to use tables in new layouts, its just to much work. New layouts are increasingly being build using pure CSS with little markup, such as positioned or floated division elements.

    I'm not sure what exactly you mean by seamless, as that's usually means that the background will be able to repeat itself, which isn't the case if you slice the image.

    When you cut out a large image into several smaller images, you may want to consider if the the extra http requests are worth it, also the potential extra file-size. There is a technique called CSS Sprites which will solve this problem, usually that involves positioning of background-images.


    There is a complex technique to get an image appear as if it was a full image, in almost any screen resolution. This involves complex CSS positioning of division elements, with alpha transparent pngs used as backgrounds, often you will find that there only is one seamless background-image, where other objects are placed on top of this.

    A populer layout is using a sky background in the header row, usually applied in a fixed-width layout. However it is possible to make the sky fit the browser window, however this requires objects to be placed on top of the sky. I.e. You will need to cut out the sun, and place it on top, you would also need to make the sky hoizontally seamless, and blend with a color twords the bottom. This is where the alpha transparent pngs comes in.

    A simple example can be seen on my blog, which uses the technique to make an underwater appearance.
    Last edited by BlueBoden; 14th Oct 2008 at 12:47.

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Subscribe to us on YouTube