Workshop Mission Services Portfolio Content Contact
  bookmark me  
Home > Content

Creating a seamless background can be a daunting task. Fireworks is a superb program for creating Javascript rollovers, buttons and animating but it does not possess Photoshop's offset filter. But when there's a will there is a way.

1) I chose an image of M & Ms at 200 pixels x 150 pixels. I generally try to create my tileable graphics using identical heights and widths. I also use even numbers. So I 'cropped' my image down to 150 x 150.

2) I'm going to use a similar procedure that worked in Paintshop Pro. Under 'View' I first turn on my 'grid' with 'snap to grid' on. I edit the grid size to be 75 pixels (one half of 150 pixels).

(1) Image after cropping

(2) Remember to use 'snap'

3) Now go - Edit - Select All (Ctrl-A). Copy the image (Ctrl-C). Bring up the layer palette and click 'New/Duplicate Layer.' Turn off the background. This will aid your image offsetting. Then go - Edit - Paste to place a copy of the M & Ms in the new layer. Use the 'Pointer' tool to shift the image down and to the right, snapping the upper left corner into the center. Go - Edit - Paste - again. Now do the opposite. Drag the image up and to the left, snapping the lower right corner into the center. Do this twice more. If you are confused follow the layout below. Once you are finished go - Modify - Merge Layers.

(3) Manually offset 4 copies of M & Ms to this configuration


4) By offsetting the same image you now have a tileable background. But you still must removed the internal seams.

(4) Results of offsetting

5) There are two ways to remove the internal seams. The first is to use the 'lasso' tool to select several of the M & Ms then copy and paste them over the seams in a random pattern. Another is to use the 'Rubber Stamp' tool. Zoom in 300% to get close. Now select the 'Rubber Stamp' tool from the tool palette. Its corresponding option palette appears. For this particular project I chose a round shaped button, about the same size as a full M & M. l softened the edge of the brush and selected 'Fixed.'

(5) Rubber Stamp Tool

6) To select a source image center the cursor over part of the image you wish to sample. I chose a red M & M first. Now click once to sample the image. Test it over a seam by tapping several times in the same place. You should see a red M & M. There may be some fluff around the edge but when you zoom out most of that will be lost. If you don't like the results edit the settings of tool and resample another area. Add M & Ms along the seams. Resample other colored M & Ms and continue. Remember to be very careful around the outer edges of the image. If you go over them the image will not seam properly.

(6) Zoom close to work those seams

7) When you think you are done Save and test the image. Here are the results of my efforts.

 

 

 

1.818.509.2649