There has to be an easy way to do this

July 5, 2009 7:33 PM

Is there an easy way to edit segments of a set of tiled images that make up a webpage?

(I don't know the proper terms for many of the things I'm about to discuss, so I apologize if it's unclear or if my searching of previous questions overlooked something similar.)

The website I maintain for my employer has a splash screen that consists of an irregularly-sliced full-screen image -- it's sliced up so that different segments of the image can be links to different parts of the site. (I feel the need to emphasize that I didn't design the website.) The image includes photographs that my employer wants to replace. This by itself is not a problem; I am more than capable of altering the images in Photoshop and uploading them to the server. The problem is that the photographs are sliced up along with the image, such that each photograph is in multiple panels. I'm having a hard time thinking up a way to do this efficiently; I'm guessing the first step is to join all of the panels together into a single image in Photoshop, but how do I then ensure that, once I am done replacing the photos, I re-slice the image along precisely the same lines? I'm sure I could improvise some way of doing it, but it would no doubt be needlessly complex. Thoughts?

(Skill level: good at basic image manipulation in Photoshop but largely unfamiliar with the more technical aspects of the software. And in case it's relevant, I know HTML and CSS. Memail me if you want to see the website I'm talking about.)

posted by pluckemin to Computers & Internet (4 answers total)

you don't have to join all the panels together into a single image. You can jut printscreen the photo and post it in a new document in photoshop.

It would take some work, but you could also join each slice as a different layer in photoshop, and then take your complete image and stick it in a layer over the old image.. then select an old section, use the magic wand tool in the negative space, inverse the selection, then switch to the new image and copy the selection into a new document.
posted by royalsong at 7:39 PM on July 5, 2009

> it's sliced up so that different segments of the image can be links to different parts of the site

Is that really the only reason? Because that can be achieved without slicing the image, using an image map.

Normally the reason things are sliced is because of things like rollovers where the image has to actually do something when hovered over or clicked.
posted by AmbroseChapel at 10:46 PM on July 5, 2009

Here is how I would do this, because I'm a brute force kind of gal:

1/ Take each slice and arrange it on its own layer in PS, moving the pieces together until they seamlessly make up a whole picture.

2/ Create a new layer and add your new photos, etc on it.

3/ Hide the underneath pieces adjoining the slice you want to replace so that you can select the exact shape of the replacement piece including the new stuff on top.

4/ Copy and paste the merged slice.

4/ Repeat for each slice.
posted by DarlingBri at 6:12 AM on July 6, 2009

You mention not knowing technical terms for things - are you sure these images are sliced, specifically? Or are these images just cut up / divided into different sections? Because slicing means something very specific in Photoshop and the website you've described really doesn't require that.

If it's just cut up sections, I'd print-screen the splash page at the native resolution and then use Photoshop to find out the exact dimensions of each section. Then I'd make a separate image with the new photographs and crop out each replacement section. Take the replacement sections, superimpose them on the previous splash page print screen in the appropriate panels, flatten the image, and re-upload the splash page banner.

Unless I've totally misunderstood what you're trying to do...
posted by Phire at 6:34 AM on July 6, 2009