9 Replies Latest reply on Aug 7, 2008 7:46 PM by pixlor

    Image cutting or image slicing

    ed19
      Hi, I would like to know how to cut a piece of a background image I have made so I can copy and paste it over to another canvas?

      For example:the background of this page has light grey shapes in it, say I want to slice a small rectangle (marquee) out of it so I can copy and paste that over to another canvas.

      I need to cut this small rectangle out somewhere in the middle of the page, because I have a css rectangle made out in DW, but can't make that rectangle transparent in css properties, so that my page background thats already there shows thru my css rectangle; therefore I thought I can just put a cutout of that spot in my background pic into css as the background image to make it seem like you are looking thru.
      Can you make CSS rectangle transparent?

      What do you think?
      thanks
        • 1. Image cutting or image slicing
          pixlor Level 4
          quote:

          Originally posted by: ed19
          Hi, I would like to know how to cut a piece of a background image I have made so I can copy and paste it over to another canvas?

          For example:the background of this page has light grey shapes in it, say I want to slice a small rectangle (marquee) out of it so I can copy and paste that over to another canvas.

          This is easy. Use the marquee (upper left under Bitmap, on the toolbar) tool to select the area you want, and copy it from there to your other canvas with your normal copy and paste routine (CTRL-C, switch, CTRL-V works for me).

          If that doesn't give you enough precision, you can use the crop tool (lower right under Select on the toolbar), to drag a region, then move the sides where you want them. Press enter to crop. Then, copy and paste the result. Make sure you work with a copy of your image or do NOT save it!

          What I tend to do, however, is make a vector rectangle, move it where I want it, hide my bitmap, then use Modify>Canvas>Trim Canvas. Again, work with a copy or remember to NOT save.

          quote:

          I need to cut this small rectangle out somewhere in the middle of the page, because I have a css rectangle made out in DW, but can't make that rectangle transparent in css properties, so that my page background thats already there shows thru my css rectangle; therefore I thought I can just put a cutout of that spot in my background pic into css as the background image to make it seem like you are looking thru.
          Can you make CSS rectangle transparent?


          Sorry, I don't understand. Is it that you want a hole in your image so that your background shows through? If so, then you can achieve this with a transparent .gif by adding a rectangular area, setting the color to something not in the rest of your image, then exporting with the odd color set to be transparent. You can make a transparent .png, but that doesn't work in every browser. Other than that, make a table of nine sliced images, and don't put the middle one in the table.

          If that isn't what you want, then could you try explaining a different way?
          • 2. Re: Image cutting or image slicing
            ed19 Level 1
            thank you, I like how we get answers and questions so quickly on here :)

            To clearify my goal:

            Say you have a clean page
            1. there is a page background which was created with FW cs3 that has a downward gradient from dark to a light color.
            2. you have a top banner on your page in as the css background (thats fine)
            3. then there is about 1cm space down and you have floating nav buttons and beneath that you have the white main body
            4. ? behind the floating nav buttons I want to show the gradient of the background image? I know of only putting a css background because my nav buttons are inserted as images in a 5 column table that is in a css rectangle.

            So I thought if I could take my original FW bg image and measure down to where that nav section is and cut a small rectangle out of it - I can use that as my css bg and it would appear that the buttons are on the background and my top header is separated from my nav buttons and the bottom white main body --- wooo that was long :)

            I hope thats more clear - and if it doesn't make sense, I will try your first suggestion with marquee

            do i simply make a box around any area of the bg image in FW and cntrl+c ? thats it?

            thanks for reading all this
            ed
            • 3. Image cutting or image slicing
              pixlor Level 4
              Ed, if you're using CSS and you already have the nav buttons contained in something then this should be really easy. No need to crop out a section of you background image or anything.

              Let's say the container for your nav buttons is a div with an id of 'nav' (your table is inside a div). If not, then you can use what you have or add another div on the outside. Then, in your CSS file, just add some padding or margin (maybe both top and bottom) to that id element. That will separate your nav elements from your header and your content, without having to worry about getting the exact piece of your background image cut out...AND getting it lined up.

              (I haven't had to worry about this for a while, but it used to be that different browsers would start content at different positions, so getting content precisely aligned with a background image wasn't possible without lots of hacking. Don't know if it's still a problem though!)

              If you need more info, I did a Web search and these pages look helpful:
              CSS and Spacing
              Margins and Padding
              and I think what you want is kind of like this:
              CSS Tutorial: Layout a Page with CSS
              • 4. Re: Image cutting or image slicing
                ed19 Level 1
                Thanks Pixlor for all the help and links . What I didn't mention was that my nav buttons are spaced out and they are rounded rectangles so this leaves some space around the corners too (FW I did the canvass fit). They are not touching each other or anything, I want to give them the floating effect.

                I tried to make my div background transparent in css but that makes it white and covers up the page bg. I am going to try making a transparent .gif and use that as the div bg tonight and I'll let you know how that works.
                • 5. Re: Image cutting or image slicing
                  pixlor Level 4
                  Oh! If your images are .jpgs, then, no, there's no transparency in that format. So, right. You'll either need a transparent .gif or .png. (Note: partial transparency isn't supported in browsers, so keep that simple.)

                  If you don't give your div a background color or image, it should be transparent.
                  • 6. Re: Image cutting or image slicing
                    ed19 Level 1
                    Pixlor,

                    It works now!! The problem was I had a div in another div So my top div was transparent but the bottom div was white, I noticed that until I fiddled with it for a while! All is well with that thank you.

                    But the nav buttons are rounded and when I place them you can see a white bg on the nav.jpg buttons. They are high glossy and rounded. I did what you suggested to change to .gif and the bg of the button became transparent which is great but It looks more textured rather than a nice glossy image. Is gif a cheaper quality or is there a way to make it look nice and fine like jpg? Whats the diff between index and alpha transparency?

                    thanks a bunch
                    • 7. Re: Image cutting or image slicing
                      pixlor Level 4
                      quote:

                      Originally posted by: ed19
                      Pixlor,

                      It works now!! The problem was I had a div in another div So my top div was transparent but the bottom div was white, I noticed that until I fiddled with it for a while! All is well with that thank you.

                      But the nav buttons are rounded and when I place them you can see a white bg on the nav.jpg buttons. They are high glossy and rounded. I did what you suggested to change to .gif and the bg of the button became transparent which is great but It looks more textured rather than a nice glossy image. Is gif a cheaper quality or is there a way to make it look nice and fine like jpg? Whats the diff between index and alpha transparency?

                      thanks a bunch


                      Yay for solving the div problem! Now for a quick tour of image formats.

                      JPG: This format has all 16.7 million colors, but it compresses by throwing away "high-frequency" information (sharp edges will blur funny). This format is good for photographs and other images where colors change slightly from one pixel to another (as in gradients). This format does not have transparency.

                      GIF: This format retains color information, but can only support 256 colors - any 256, though. It supports transparency, you can set one of your 256 colors to be transparent. This format is good for graphics with areas of solid colors. This format can also support multiple frames in the same file, giving rise to animation.

                      PNG: This format retains color information like .gif and has 16.7 million colors, like .jpg. It handles transparency, too. What's not to love? Well, not all browsers show .png files properly. The major ones will, though, so if you know your audience is mostly on one of the major or newer browsers (intranet use? check your log files?), then you should be okay.

                      Index and alpha transparency. Index transparency means, more or less, "make every pixel that is THIS color fully transparent and every other pixel fully opaque. Alpha transparency (often done with a mask of some kind) means you can set the transparency of a pixel in the range from fully opaque to fully transparent, from 0-255. These images are 32 bit: 8 bits for Red, 8 bits for Green, 8 bits for Blue, and 8 bits for alpha transparency.

                      For the Web, you probably want to use index transparency, because support for alpha transparency on .png files can be a bit flakey. Support for index transparency is pretty good with the newer browsers, but if a good portion of your audience is using older browsers, you have some design trade-offs to make.
                      Probably good to read up on things: Google search for png support in browsers.

                      Hmm...I haven't tried it, but you might see about exporting as Flash? The Flash plug-in is installed on over 98% (I think it is) of browsing machines.

                      • 8. Re: Image cutting or image slicing
                        ed19 Level 1
                        thanks Lorraine for your help! Now I have a div layout question, do I need to open a new thread?
                        • 9. Re: Image cutting or image slicing
                          pixlor Level 4
                          Er...well...since a div layout question really isn't a Fireworks question, I'd say post on the Dreamweaver forum (especially if you're using Dreamweaver).