3 Replies Latest reply on Dec 4, 2008 8:16 PM by pixlor

    Creating a transparent circle in FW CS3

    Jim4573910
      I am a total, total newbie with FW. I want to create a square GIF with a transparent background. On top of this transparent background I want to place a coloured square which covers the entire background. I then want to cut a circle out of the centre of the square, so that I can see the transparent background through the square.

      Then I'd like to cut the resulting image into four equal squares.

      Can anyone help me do this?
        • 1. Re: Creating a transparent circle in FW CS3
          pixlor Level 4
          Sure.

          To make the base image you want:
          1) Make a new image the size you want with a transparent background.
          2) Make a square the color you want and set the dimensions to overlap your canvas (just as you describe).
          3) Make a circle, any color, to the size and position you want, over your square (visible with the square behind it). In the Properties panel, set the Edge to hard (since you know you want a transparent .gif in the long run).
          4) Select both your square and your circle.
          5) Use Modify>Combine Paths> Punch (CS3, anyway) to punch your circle out of your square.

          To slice it up:
          1) Turn on rulers if they aren't.
          2) Drag a horizontal and vertical guide from the rulers.
          3) Under View>Guides, make sure Snap to Guides is checked.
          4) Use the slice tool (looks like a green rectangle) to draw four slices, using the guide lines to help.
          5) In the Properties panel, set the file type for each slice to GIF.
          6) In the Layers palette, in the Web layer, its useful to give each slice a unique name, instead of "Slice."

          To export:
          1) Use File>Image Preview (again, CS3).
          2) Set the Transparency to Alpha Transparency.
          3) Export!
          • 2. Re: Creating a transparent circle in FW CS3
            Jim4573910 Level 1
            Wow - thanks! Worked perfectly.
            • 3. Re: Creating a transparent circle in FW CS3
              pixlor Level 4
              You're welcome!

              Welcome to vector shape combinations! ;) Fun, isn't it?