11 Replies Latest reply on Oct 18, 2009 8:27 PM by John Dunning

    Crop overlapping bitmaps

    Knubbi Level 1

      Fireworks can cut/merge overlapping path objects like shown here:



      Can this also be done with *bitmaps*? If not with Fireworks CS4, then in PS CS4?


      Here is the application:



      I have several bitmap objects of decreasing transparency. But I do not want to let the underlying objects shine through the overlying window bitmap. That is why I want to crop the underlying windows with the shape of the overlying windows.


      Your help would be very much appreciated.

        • 1. Re: Crop overlapping bitmaps
          pixlor Level 4

          What happens if you just put a solid vector rectangle behind each transparent bitmap? Make the rectangles the same size as the bitmaps. With the image you have shown, you'd probably want to use the dark blue. Does that give you the effect you want? Given your image, I don't think you want a gap between the images.


          To simplify the layer stack, you might want to group each bitmap/rectangle pair.




          To answer your question, though, yes, you can make shapes like your green one and use it as a mask on the bitmap. Set the color to white, have the shape above the bitmap, select both the shape and the bitmap, then go to the menu: Modify > Mask > Group as Mask. Where the mask is white, the bitmap will show through. Where the mask is black or transparent, the bitmap will be transparent. Grey or partially transparent values in the mask will make the bitmap partially transparent, in proportion.


          But I think that would be more work.

          1 person found this helpful
          • 2. Re: Crop overlapping bitmaps
            Knubbi Level 1

            Unfortunately, both are not a solution, because all windows are transparent and the monitor desktop shall still shine through; just the underlying windows shouldnt.


            An alternative could be a motion blur effect, but I would need one which can blur along a rounded curve. Any clue?

            • 3. Re: Crop overlapping bitmaps
              pixlor Level 4

              If the blue background is a solid color, just set the transparency of your bitmaps over the opaque rectangles, which will look exactly like the background.


              If the background is not a solid color then the mask technique will work just fine. Apply the fully opaque mask to the fully opaque bitmap, then set the transparency on the resulting compound object. I can't seem to insert my example image today, so I uploaded it to my drop.io:


              It's a Fireworks .png document, so you can see how it works.


              If this isn't the effect you're going for, then I'm afraid I don't understand your question.

              • 4. Re: Crop overlapping bitmaps
                Knubbi Level 1

                Great, it looks like what I want but how have you created the (rotated) L-shaped masks??? Drawn by hand or how have you generated them, please?

                • 5. Re: Crop overlapping bitmaps
                  pixlor Level 4



                  Create two rectangles, the size of your bitmaps. Offset the upper one by the position you want your next bitmap to be (the one that will look like it's on top). Select both rectangles and go to menu: Modify > Combine Paths > Punch. The upper object "punches" a hole in the lower object.


                  I offset the rectangles by 50 pixels, because I knew that would make positioning the resulting masked objects easier.


                  Make sure the resulting L-shaped object is white before you use it as a mask.

                  • 6. Re: Crop overlapping bitmaps
                    Knubbi Level 1

                    Ah, my hope was that there is a way to create a rectangle directly from the shape of the bitmap. Thanks anyway. You have been very helpful.

                    • 7. Re: Crop overlapping bitmaps
                      pixlor Level 4

                      You could use the pen tool and draw one or you could take two rectangles (one horizontal and one vertical) and use menu: Modify > Combine Paths > Union.


                      There is usually more than one way to accomplish the same thing. I used Punch, as it seemed to mimic the action I wanted to take; I wanted to place another object of the same size and shape in that location, and needed an empty spot.


                      Hmm.... If the window images you want to display have rounded corners, you can use rounded corner rectangles instead of standard. You'll need to play with the radius to see what matches. The technique will still work, though.

                      • 8. Re: Crop overlapping bitmaps
                        Knubbi Level 1

                        In an ideal world I would love to have a brush that can be a bitmap. Then I just draw the swoosh of window bitmaps. CorelPhotopaint was able to do this...

                        • 9. Re: Crop overlapping bitmaps
                          pixlor Level 4

                          Fireworks does not have brushes, although Photoshop does and you can define your own custom brushes based on any bitmap. However, I don't think you'd be able to get the fading effect you show. I also don't think you'd be able to place your images with precision.

                          • 10. Re: Crop overlapping bitmaps
                            pixlor Level 4

                            Also, I only made one mask and compound object, which I then duplicated. This meant that I had to place the fading images at regular intervals. If you wanted, you could make a number of separate masks of varying widths, giving you more of a "swooshing" effect when you placed the compound objects. I just wanted to show you the technique as quickly and simply as possible.


                            Good luck!

                            • 11. Re: Crop overlapping bitmaps
                              John Dunning Level 1

                              Sorry for the late reply, but I think the Smart Punch extension may do what you want: http://bit.ly/tq8nc


                              It lets you punch one bitmap into a lower one.  The shape of the pixels in the upper bitmap (the puncher) are removed from the lower one (the punchee).  You'll want to clone the puncher before running the command, as it's deleted in the process of punching.


                              You can also punch with, and into, vectors, auto shapes and text.