3 Replies Latest reply on Oct 22, 2009 1:37 PM by pixlor

    How to create a sem-transparent png


      I have created a rounded corner rectangle in Fireworks and I would like to save it as a transparent png, so that the middle part of the rectangle is transparent, but the outside of the corners is not transparent.  This is so that I can overlay it onto a background image in a webpage thus making the image have rounded corners.  How do I make the middle of the rectangle only be transparent?

        • 1. Re: How to create a sem-transparent png
          pixlor Level 4

          Make a standard rectangle that is the same size as your rounded rectangle (or whatever it is you want to show). The Info panel is an easy way to ensure the dimensions and placement are exact.


          Using the Layers panel, move the rectangle below your rounded rectangle.


          Select both objects, then go to the menu Modify > Combine Paths > Punch. This will punch a rounded rectangle hole in your rectangle.


          (The Punch command punches the upper shape from the lower shape, which is why your existing rounded rectangle needs to be above your new standard rectangle in the layer stack.)


          Something like this (where I have the standard rectangle bigger than the rounded rectangle). The upper half of the image shows the two individual shapes. The lower half shows the standard rectangle with the rounded rectangle punched out of it.



          But...what you can do is select your image, copy it (Ctrl-C), then select your rounded rectangle (or any shape), then go to menu Edit > Paste Inside (or Ctrl-Shift-V). (This is a good technique when your image is exactly the size you want, you just want the corners rounded off.)


          Or, you can make a white rounded rectangle, place it over the part of your image you want to be displayed, select both the image and the rectangle and go to menu Modify > Mask > Group as Mask. (This is a good technique when your image is larger than the portion you want to display, but you aren't sure exactly what you want to do.)

          • 2. Re: How to create a sem-transparent png
            Maximo65 Level 1

            Thank you so much Pixlor - that's exactly what I wanted to do!

            • 3. Re: How to create a sem-transparent png
              pixlor Level 4

              Glad I could help!


              Remember that all three methods can be useful, depending on the situation.