6 Replies Latest reply on Jun 1, 2009 12:35 PM by pixlor

    Removing image that isn't within a vector

    Civmaster

      I have a rounded rectangle vector on my canvas.  I also have an ellipse that covers the top have of the rounded rectangle.  The background is

      transparent, and I only want the ellipse to be visible when its over the rounded rectangle.  I also want the ellipse to become more and more transparent when it gets to the edge of the rounded rectangle because the edges of the rounded rectangle are anti-alias.  Basically, I want to cut out a piece from the ellipse that is the exact shape as the top of the rounded rectangle, anti-alias and all.  How do I do that?

      MajorButtonImage.png

       

      Thanks,

      Russell

        • 1. Re: Removing image that isn't within a vector
          Panos Zygopoulos Level 3

          Cut the rest of the image you want to get rid off using the eraser,  and keep the remains. It's the more simple way.

          1 person found this helpful
          • 2. Re: Removing image that isn't within a vector
            Civmaster Level 1

            The eraser tool is helpful, but not what I'm looking for.  The image is of the background of a button for a calculator iPhone application I'm making, and there's a black textured background behind the button.  If the ellipse doesn't disappear perfectly with the rounded rectangle, it'll look funny.  It has to be cut perfectly.

            • 3. Re: Removing image that isn't within a vector
              Panos Zygopoulos Level 3

              There many different ways to do this, but i suppose you want to do it easily and be sure of the result.

              Try this:

               

              Draw an elipse, make it look like the white bitmap and place it over the rounded rectangle. Open the path panel and select crop paths. This way you will get a vector image to which you can apply the white fade out effect you want and the anti-alias edge and of course you can easily change its size.

              • 4. Re: Removing image that isn't within a vector
                Panos Zygopoulos Level 3

                I forgot.

                 

                The result of this should be placed over your brown rectangle, so keep a copy and place the result on it.

                • 5. Re: Removing image that isn't within a vector
                  no nicknames left Level 1

                  First up i would have to say that it would be easier and more usefull for future changes if you built the button with vectors and gradients.

                  Butt...

                  If you wish to crop the image to the exact shape of the button, whether the button is a vector or a bitmap.

                   

                  Masking is the way to go

                  Copy the button shape. Place it on top of the image.

                  Select both. Go to the modify Menu > Mask >Group as mask.

                   

                  The bottom selection will now be within the bounds of the top selection.

                   

                  if you with the bottom selection to be faded around the edges etc. Copy you butoon shape. If it is a vector feather the edge of the fill and remove the stroke or use other gradient that suits. If an image select around it, feather the selection and delete the selection.

                   

                  This will then create a mask layer that you can mask the bottom bitmap layer with that will fade the edges of it without destroying the vector.

                   

                  Maak

                  1 person found this helpful
                  • 6. Re: Removing image that isn't within a vector
                    pixlor Level 4

                    Civmaster wrote:

                     

                     

                    I have a rounded rectangle vector on my canvas.  I also have an ellipse that covers the top have of the rounded rectangle.  The background is transparent, and I only want the ellipse to be visible when its over the rounded rectangle.  I also want the ellipse to become more and more transparent when it gets to the edge of the rounded rectangle because the edges of the rounded rectangle are anti-alias.  Basically, I want to cut out a piece from the ellipse that is the exact shape as the top of the rounded rectangle, anti-alias and all.  How do I do that?

                    MajorButtonImage.png

                     

                    Thanks,

                    Russell

                     

                     

                    To have visible only the part of the elipse that is over your rounded rectangle, you should use a mask. Copy your rounded rectangle, move the copy above your elipse and set the color of the fill and stroke to white. Select all three objects, then to go the menu and choose

                    Modify > Mask > Group as Mask

                     

                    For a mask, white makes the underlying objects visible, black or transparent cuts off their visibility. Grey values will make the underlying object transparent, lighter greys are more opaque.

                     

                    Because the mask is the same shape as the original rectangle, the elipse is cut off at the rectangle edges including the anti-aliasing. If you still wish to have your elipse fade to transparent, here is an easy way to add a fade to the elipse. (First, undo the masking and move the white masking rectangle below the elipse.) Select the elipse. From the meno, choose

                    Commands > Creative > Fade Image

                    and choose the type of transparent gradient from the examples shown. You can then adjust the handles on the transparency gradient.

                     

                    When you have your elipse transparency the way you want it, move the white masking rectangle back to the top of the object stack, select all three objects and Group as Mask again.

                     

                    (Note: I'm using CS3, I don't know if the Creative command has moved in CS4.)