VectorStyler
    • Categories
    • Unread
    • Recent
    • Tags
    • Popular
    • Register
    • Login

    Best way to Crop an Image?

    Scheduled Pinned Locked Moved Questions and Support
    53 Posts 8 Posters 143.0k Views 7 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S Offline
      Subpath
      last edited by Subpath

      Hi

      Well, i am not against a Crop Tool.

      Maybe i am a bit slow in mind ๐Ÿ™‚
      But why does we need a Crop Tool when in my Opion
      a Boolean "Intersect" or Clipping could solve that ?
      In both cases you could use any Shape.

      Bitmap cropping

      Win 11
      CPU: AMD Ryzen 5 9600X, 6-core.
      GPU: Nvidia Geforce RTX 5070.

      1 Reply Last reply Reply Quote 2
      • BoldlineB Offline
        Boldline
        last edited by

        @Subpath yeah I typically just make a shape and then clip a jpeg inside if I need to control cropping. I don't necessarily see the need to add another tool. Just my thoughts

        ๐ŸŽ macOS Sequoia 15.3, Mac mini (M1, 2020), Chip Apple M1, Memory 16 GB
        Cintiq 27QHD Display and LG Ultra HD Display

        1 Reply Last reply Reply Quote 2
        • Victor VectorV Offline
          Victor Vector
          last edited by Victor Vector

          @Subpath I tried the example of the Boolean Intersect. With an image on the bottom and a solid rectangle on top, I hit the boolean intersect button and I don't get your result. My result is in the GIF below. Not sure why. I am running on Win11, VS 1.1.028 just started up, with a newly opened file.

          alt text

          I would argue that @vectoradmin's method of the "Transform tool, 4th tool in the Context Panel" is much simpler and easier for a basic rectangle crop even if it doesn't use a frame adjustment method to do the crop.

          @Boldline The clip method (as seen in my first post) is possible to work with all shapes, but the prepackaged shapes (rectangle, ellipse, start, etc.) have to first be converted to curves before they can nested/clipped together or else you just get the shape editor control handles when you attempt to use the Shape editor tool (node editor).

          So the best solution for rectangular cropping is: to use the "Transform Tool, 4th tool in the Context Panel" as it is, with the future option of updating the user interface to crop with frame handles, if there is a demand.
          The best solution for a shape other than a rectangle is: to use the clipping method, but just make sure your shapes are converted to curves before nesting/clipping. Boolean Intersect is good if it works like @Subpath's does, but it's not working for me.

          Thank you all, I learned a lot!

          S 1 Reply Last reply Reply Quote 0
          • IngolfI Offline
            Ingolf
            last edited by

            To me this is the most simple and logical approach in a vector drawing program with no built-in crop tool:
            Cropping a'la Ingolf

            ๐Ÿ macOS Sequoia Apple Silicon

            Victor VectorV 1 Reply Last reply Reply Quote 0
            • Victor VectorV Offline
              Victor Vector @Ingolf
              last edited by

              @Ingolf How would you resize the crop if you needed to alter it afterwards?

              IngolfI 1 Reply Last reply Reply Quote 0
              • IngolfI Offline
                Ingolf @Victor Vector
                last edited by Ingolf

                @Victor-Vector Rasterizing it is optional. If you don't you can resize the image and the object that frames it as you please. Rasterizing is just to trim the image for good.

                ๐Ÿ macOS Sequoia Apple Silicon

                Victor VectorV 1 Reply Last reply Reply Quote 0
                • Victor VectorV Offline
                  Victor Vector @Ingolf
                  last edited by Victor Vector

                  @Ingolf Ah okay, so the nested/clipping method, with a rectangle converted to curves for any future crop resizing. Got it!

                  IngolfI 1 Reply Last reply Reply Quote 0
                  • IngolfI Offline
                    Ingolf @Victor Vector
                    last edited by Ingolf

                    @Victor-Vector said in Best way to Crop an Image?:

                    @Ingolf Ah okay, so the nested/clipping method, with a rectangle converted to curves for any future crop resizing. Got it!

                    Yep, you can adjust the rectangle with the shape editor or un-nest the image for a while to adjust the rectangle with the transform tool.

                    There is a great usability lesson in this method; you will remember it.

                    ๐Ÿ macOS Sequoia Apple Silicon

                    1 Reply Last reply Reply Quote 0
                    • S Offline
                      Subpath @Victor Vector
                      last edited by Subpath

                      @Victor-Vector ....I tried the example of the Boolean Intersect....

                      Here's how the Boolean method works:

                      The Order of Selection matters.
                      so selection Rectangle want work

                      1. Place your shape on your bitmap.

                      2. Hold down the Shift key and select the shape.

                      3. keep holding the Shift key and now select the bitmap

                      4. now select Boolean "Intersect" and you have
                        the result like in the gif-anim

                      Importand Note: With the Boolean Methode your
                      Bitmap will be Cropped ( not need to Rasterize it later on)
                      But also you couldnt extent the Cropped Area later on!
                      Like in the Clipping Methode.
                      .
                      .
                      .
                      Here's how the Clipping Method works
                      The Shape doesnt need to be in Curves at first.
                      You need his only if you like to extend the clipped Area.
                      Experiment a bit to get the feel of it

                      Cropping ala Ingolf is just the same as Clipping,
                      is just a other way to clip.

                      some pictures
                      shape in curves is on the right

                      0_1649136869013_Shape-Clipping-1.png

                      0_1649136884804_Shape-Clipping-2.png

                      Win 11
                      CPU: AMD Ryzen 5 9600X, 6-core.
                      GPU: Nvidia Geforce RTX 5070.

                      Victor VectorV 1 Reply Last reply Reply Quote 2
                      • b77B Offline
                        b77
                        last edited by b77

                        Why not simply double-click an image to enter crop mode?

                        What is most important is thatโ€ฆ

                        • cropping is done quickly, it's intuitive (the less people need to RTM or ask Support about it, the better) andโ€ฆ
                        • it's non-destructive โ€” the original bitmap can be cropped again.

                        I don't think rasterizing bitmaps in the document is important, except for extreme cases โ€” huge image from which you need a very small part/slice.

                        Rasterizing can be done at export, and it's enough.

                        MacBook Pro (Intel) running Monterey 12.6.4

                        Victor VectorV 1 Reply Last reply Reply Quote 2
                        • S Offline
                          Subpath
                          last edited by Subpath

                          When I saw the cat picture, I remembered an image conversion
                          I once did for a friend.

                          Everything was done with Vectortools, no bitmap program was involved.
                          The cats were cropped using the clipping method.

                          I have done this in Magix Graphix Designer (formely known as Xara)

                          original picture
                          0_1649153872126_Original Cats.png

                          Christmas conversion
                          0_1649153882235_Christmas-Cats.png

                          Win 11
                          CPU: AMD Ryzen 5 9600X, 6-core.
                          GPU: Nvidia Geforce RTX 5070.

                          1 Reply Last reply Reply Quote 2
                          • Victor VectorV Offline
                            Victor Vector @Subpath
                            last edited by

                            @Subpath said in Best way to Crop an Image?:

                            @Victor-Vector ....I tried the example of the Boolean Intersect....

                            Here's how the Boolean method works:

                            The Order of Selection matters.

                            Thank you for expanding my knowledge on the subtleties of selection order! It was not intuitive and was a bit of an awakening for me. Usually a user imports an image first, then creates the crop shape. Selecting both with the box select will always put the image first and the shape second, so the boolean result would never yield your result. I appreciate you sharing this nuance about selection order.
                            Usability issues aside, I also noticed that in your example the boolean intersect technique actually resizes the image into fill the shape, something that is rarely desired in an image cropping scenario.

                            @Subpath said in Best way to Crop an Image?:

                            When I saw the cat picture, I remembered an image conversion
                            I once did for a friend.

                            That's pretty impressive to tackle that fun holiday cat project all with vector tools. I imagine the cat's cutout shape would take a lot time. It's truly inspirational what can be achieved with vectors.

                            For the record, I am not a cat fanatic! โ˜บ

                            S 1 Reply Last reply Reply Quote 0
                            • Victor VectorV Offline
                              Victor Vector @b77
                              last edited by

                              @b77 said in Best way to Crop an Image?:

                              Why not simply double-click an image to enter crop mode?

                              What is most important is thatโ€ฆ

                              • cropping is done quickly, it's intuitive (the less people need to RTM or ask Support about it, the better) andโ€ฆ
                              • it's non-destructive โ€” the original bitmap can be cropped again.

                              I like your idea of the double-click to enter crop mode. VS already has that functionality with isolation mode, so it would be a great place to put all the controls without overcomplication.

                              Great points! They are indeed the most important with this functionality.

                              1 Reply Last reply Reply Quote 2
                              • S Offline
                                Subpath @Victor Vector
                                last edited by Subpath

                                @Victor-Vector

                                ...Thank you for expanding my knowledge on the subtleties of selection order!...

                                Anytime gladly.
                                That the order of the selection of objects plays a role, is as
                                far as I know always with Boolean. At least I know it that way.
                                Because finally it must be somehow recognizable which part is cut off
                                from which. That is why the selection rectangle does not work, in any case.

                                ... I imagine the cat's cutout shape would take a lot time...

                                You'd be surprised how fast it goes. Of course, you can't keep up
                                with today's selection tools. Can only recommend experimenting a bit yourself.

                                Here is another Example with combined Shapes
                                0_1649175970064_Watch-cutout.png

                                Win 11
                                CPU: AMD Ryzen 5 9600X, 6-core.
                                GPU: Nvidia Geforce RTX 5070.

                                1 Reply Last reply Reply Quote 1
                                • S Offline
                                  Subpath
                                  last edited by Subpath

                                  @Victor-Vector
                                  ... I imagine the cat's cutout shape would take a lot time ...

                                  Victor

                                  To answer your question, I have been traced the Cats again
                                  by hand and counted the time. It took me 7/8 minutes in VS.

                                  I have to say that when I trace a bitmap by hand.
                                  I usually just use straight lines to get the shape.

                                  Then I select all the nodes and convert them to
                                  curves and move or delete nodes where should
                                  be curves.

                                  something like this:
                                  Video: Hand tracing
                                  0_1649669239772_Hand-tracing.png

                                  Magix Graphics Designer also has an advantage over VS,
                                  in MGD you can blur the shape on its outer contour.
                                  This way the fur of the cats looks better. While VS blurs
                                  the whole bitmap in the shape.

                                  Video: Blur MGD in VS

                                  0_1649669339263_Xara-Blur.png

                                  0_1649669349132_VS Blur.png

                                  Edit:
                                  ... must correct me while i get some Infos from @vectoradmin
                                  i doesnt know before. If you set "Preserve Colors" to checked
                                  and "Preserve Alpha" unchecked you would get a better result. Like this here.
                                  0_1649757716946_1649675401916-vs-blur-now.png

                                  Win 11
                                  CPU: AMD Ryzen 5 9600X, 6-core.
                                  GPU: Nvidia Geforce RTX 5070.

                                  b77B Victor VectorV 2 Replies Last reply Reply Quote 1
                                  • b77B Offline
                                    b77 @Subpath
                                    last edited by

                                    @Subpath Why not try the Spikes distortion effect on the cat's fur. ๐Ÿ™‚

                                    MacBook Pro (Intel) running Monterey 12.6.4

                                    S 1 Reply Last reply Reply Quote 0
                                    • S Offline
                                      Subpath @b77
                                      last edited by

                                      @b77

                                      Didnt know it ๐Ÿ™‚
                                      (Thanks for you Tip, will give it a try)

                                      But no, I was mainly trying to recreate a project in VS.
                                      that I had created some time ago in Magix Graphics Designer.
                                      And in this case I had used the Blur function of MGD.

                                      Win 11
                                      CPU: AMD Ryzen 5 9600X, 6-core.
                                      GPU: Nvidia Geforce RTX 5070.

                                      1 Reply Last reply Reply Quote 1
                                      • Victor VectorV Offline
                                        Victor Vector @Subpath
                                        last edited by

                                        @Subpath That's what I love about this forum. I ask something embarrassingly basic and I learn a ton of new things!
                                        I appreciate you sharing the outlining technique. I have learned over the years to use node handles and break node handles, to draw complicated shapes. I had never thought about just drawing it with straight lines and converting them to curves. Add to that a "simplify path" if needed, and it's a very quick and accurate way to trace an image. Thank you for sharing that technique.

                                        @b77 I experimented with your effect concept and the closest I could get was a Shape Effect called "Outline Zigzag" on the image within the shape. I couldn't get the edge fine enough. It's close, but it ain't no blur!

                                        0_1649726597689_Outline ZigZag Shape Effect.png

                                        @vectoradmin if you ever find yourself craving to add yet another effect to the enormous roster of Image/Shape Effects (haha), perhaps this would be a useful one. Call it "Edge Feather"? "Edge Fuzz"? ๐Ÿ˜ณ

                                        Or perhaps there is a way to do this with masks and other tricks?

                                        VectorStylerV b77B 2 Replies Last reply Reply Quote 1
                                        • VectorStylerV Offline
                                          VectorStyler @Victor Vector
                                          last edited by

                                          @Victor-Vector said in Best way to Crop an Image?:

                                          if you ever find yourself craving to add yet another effect to the enormous roster of Image/Shape Effects (haha), perhaps this would be a useful one. Call it "Edge Feather"? "Edge Fuzz

                                          I will look into what is going on with the blur effect with image masks.

                                          1 Reply Last reply Reply Quote 1
                                          • b77B Offline
                                            b77 @Victor Vector
                                            last edited by

                                            @Victor-Vector It was a suggestion I made half-jokingly โ€” the Spikes effect AND slight Blur would work nice on cat fur, I think. ๐Ÿ™‚

                                            MacBook Pro (Intel) running Monterey 12.6.4

                                            S 1 Reply Last reply Reply Quote 3
                                            • First post
                                              Last post