7 Replies Latest reply on Nov 21, 2010 6:56 AM by neiller199

    Knock out a shape from a bitmap

    luckynorth Level 1



      i'm confused because i don't know how to do a simple task. It's like my brain is is empty ...


      I need a frame for web graphics. The pic shows what i want:


      Screen shot 2010-09-16 at 11.37.07.png


      The dark grey frame (with the rounded borders inside) will be an overlay for the pics. So the blue rectangle is a placeholder for the pics. The grey frame as seen here is a bitmap i made (because of the attached glow). Now how can i knock out the area for the pic ( the blue rectangle)? "Punch path" is not possible, because of the bitmap. I've to use the mask solution, but how?


      Here is what it should look like, done in Photoshop (unfortunately).


      Screen shot 2010-09-16 at 17.53.37.png





        • 1. Re: Knock out a shape from a bitmap
          Jeff Cairns Level 1

          Hi Mario,


          Not sure if I fully understand your question, but there are a couple of ways to accomplish what I think you're looking for.


          1) Create a couple of layers - on the top layer, draw your Bitmap and the cut a hole in it with the Marquee tool. (Select and delete selection). Then add a vector element with the Rectangle tool and apply a filter to it to get what-ever bevel effect you're looking for. Lastly, paste the image you want to display in the frame on the bottom layer and position as required. (See sample file link, appended).


          2) the second method would be to paste the image and then paste a vector rectangle element over it using Edit >> Paste As Mask.


          Others may have more elegant solutions.


          Here is a sample file - you should be able to download it and open it in FW.



          Hope that helps - Jeff

          • 2. Re: Knock out a shape from a bitmap
            Linda Nicholls Level 4

            Why not just add an inner bevel to the image itself?

            • 3. Re: Knock out a shape from a bitmap
              luckynorth Level 1

              Hi Jeff, Hi Linda,



              thanks for your reply! I think i was not able to describe the problem exactly. It's not a bevel. I've a couple of pictures with the same dimensions at the website. I need rounded corners and a drop shadow effect (looks a little bit like white glow). So i use the original picture and apply the frame like an overlay with css. So every time when you add an new picture and you apply the css class, the pic has rounded corners and the glow.


              The pic:



              and the frame


              Screen shot 2010-09-17 at 09.37.15.png


              will "merge" to this:


              Screen shot 2010-09-17 at 09.23.37.png


              My problem is to knock out the area for the pic. Of course i can knock out a rectangle with the Marquee Tool. But i want rounded corners.


              In Photoshop i create a path with rounded corners, use this as selection, select the layer and hit delete ...




              • 4. Re: Knock out a shape from a bitmap
                pixlor Level 4

                Make a vector rectangle the size of your frame bitmap. Make a rounded rectangle the size of your desired cutout area. Select both, then

                Modify > Combine Paths > Punch


                Select your frame bitmap and copy it. (Make sure everything is perfectly lined up first.) Select the vector frame, then

                Edit > Paste Inside



                However! For this to look good on your Web site, you'll need nicely anti-aliased, transparent pixels along the inside rounded corners. If you have any visitors that are still using IE6, then you're going to have to either a) use a transparent PNG32 and to add code for IE6 support (every method will fail under some situation) or b) use a PNG8 and the IE6 people will see your semi-transparent pixels as fully transparent, thus losing any anti-aliasing (also you'll have to tweak the color palette manually before you export).


                On the other hand, if you prep the images to incorporate the frame, you will have no problems with CSS or extra browser-specific code or behaviors.

                • 5. Re: Knock out a shape from a bitmap
                  luckynorth Level 1

                  Thanks, but it seems that it's still not clear what i want. When i combine the paths and punch i lost the drop shadow! I want the drop shadow (or the glow or whatever) but i don't want that path itself. This area i want to be transparent.


                  And the ****** IE6 is the reason why i want to do it like this. Because this grey around the pic is also the website's background. So i don't have to deal with semi transparency. The shadow or glow is in the frame, which sit on top of the pic. Maybe this image makes it clear:




                  I want the background and the drop shadow, but i don't want the orange rectangle. It has to be "knocked out" , means transparent ...





                  • 6. Re: Knock out a shape from a bitmap
                    pixlor Level 4

                    luckynorth wrote:



                    I want the background and the drop shadow, but i don't want the orange rectangle. It has to be "knocked out" , means transparent ...



                    Yes, but your thread title is to knock a shape out from a bitmap, not a vector, so I thought you meant your frame was a bitmap. So make it one. Take the image you just included, change the orange to a grey so you don't get a halo, export a PNG24 bitmap, and add that bitmap back in. Duplicate the rounded rectangle and punch it out of the bitmap.


                    And the ****** IE6 is the reason why i want to do it like this. ...



                    From your posts, I understood that you want to create a frame with a transparent center that you will overlay onto your images with CSS. In order to do this, you will need a transparent PNG (8- or 32-bits) to get the inner corners nicely anti-aliased. Each method for getting PNG32s to display in IE6 can fail as each depends on other technologies that users may or may not have. IE6 displays the semi-transparent pixels of a PNG8 image as fully transparent. As long as you're going to put images on your site, anyway, why not prepare them with the frame and export that version to use on your site? Then, you will have no trouble with any browser that can display graphics. You won't have problems with badly anti-aliased pixels, you won't have to pick a technology to depend on for PNG32 transparency (or code for it). You just export well-supported JPEGs or PNG24s.

                    • 7. Re: Knock out a shape from a bitmap

                      Hi there,


                      Sorry if this is a bit late - You may have figured out a solution to this already. But I thought I would leave this here as I have been scratching my head about how to do exactly this!


                      I think what you want to do is pretty simple:


                      1. Open your bitmap - i.e. the background frame with shadow, etc. flattened on to it.


                      2. Draw the shape you want to cut out using the rounded rectangle tool (it helps at this stage if you have the original layers which made up your bitmap so that you can copy the rounded rectangle shape exactly).


                      3. With the rectangle still selected, go to: Modify > Convert path to marquee


                      4. You will get a little dialogue box - Set your anti-aliasing and click ok.


                      5. Now just hit delete to remove the marquee.


                      Hope this helps someone!


                      I got the idea to do this because I have done the opposite (Select > Convert marquee to path) loads of times before. Didn't think to look for doing it the other way around... Obvious really!