How do I use a vector graphic to cut an image in Fireworks?


I am designing a website with Adobe Fireworks and I want to have a design where I have divs with rounded corners. Inside those divs I want to have an image that gets cut (rounded) by the containing div (rectangle in Fireworks) with rounded corners.

I found this tutorial, though it cuts out everything inside the the vector image. With a bit of tricking (ctrl-x) the marquee and delete the old image underneath I was able to do this.

I can't imagine there isn't a better way, but how?

BTW: this is not in HTML or CSS but in Adobe Fireworks.

4/18/2013 8:00:00 AM

Accepted Answer

Sounds like you're describing Fireworks masks (the equivalent of a clipping mask in Illustrator).

In Fireworks:

  • Put the vector you want to crop the image over the image where you want it cropped.
  • Cut it (it remembers where it was)
  • Select the image to be cropped
  • Edit > Paste as Mask.

This crops the image to that shape. Unlike chopping it up manually with a marquee, it keeps the hidden parts of the image intact behind the scenes. If you grab the anchor points of the vector and move them around, the mask moves revealing and hiding different areas of the original image.

4/17/2013 3:23:00 PM