Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 17
  1. #1

    Default How can I draw/create the wavy lines in this way?

    Hello, maybe someone can give me some tips: How can I draw/create the wavy lines (see images) in this way? I have already tried it a few times with the "Pen Tool" but somehow the line always becomes a bit "angular". In addition, it seems to me that it should actually be more like 2 filled (wave) shapes which are then assigned different transparency and which partially overlap.

    However, the image ("shape") must also be rounded off at the bottom or at least cut out so that you can later use any image as a filling.

    Is there something like this in the Xara design templates (or in the case of free templates, vectors) that you can convert. But I found nothing.

    I have been using Xara for 15 years but only for graphics/websites. Unfortunately, I have almost no experience with drawing such curves,

    Thanks for any help.

    Tom

    Click image for larger version. 

Name:	waves1.jpg 
Views:	114 
Size:	76.3 KB 
ID:	133253

    Click image for larger version. 

Name:	waves2.jpg 
Views:	98 
Size:	81.6 KB 
ID:	133254

  2. #2

    Default Re: How can I draw/create the wavy lines in this way?

    Additional info: The "original" is from a wordpress template, the waves are SVG generated with 3 paths. The seems generated at runtime so you can not copy anything to use as "blueprint".

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: How can I draw/create the wavy lines in this way?

    Tom, the quickest way is to use three copies of the image and slice each with a wavy line and discard the bottom cut-out.
    you then just stack the three parts and give two of them a 50% Linear Transparency.

    Each horizontal line starts outside the image and would have three points (left, middle right) all connected as Make Curve and Smooth Join.
    This allows to to smoothly adjust the curve.

    With a Line in position over one image , select Both and pick Combine Shapes > Slice.

    If you Clone the three Lines, you can thereafter adjust the curves and width to suit for new designs.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  4. #4

    Default Re: How can I draw/create the wavy lines in this way?

    Quote Originally Posted by Acorn View Post
    Tom, the quickest way is to use three copies of the image and slice each with a wavy line and discard the bottom cut-out.
    you then just stack the three parts and give two of them a 50% Linear Transparency.

    Each horizontal line starts outside the image and would have three points (left, middle right) all connected as Make Curve and Smooth Join.
    This allows to to smoothly adjust the curve.

    With a Line in position over one image , select Both and pick Combine Shapes > Slice.

    If you Clone the three Lines, you can thereafter adjust the curves and width to suit for new designs.

    Acorn

    Thanks a lot, Acorn for the explanation. I will try my luck tomorrow with it.

    Tom

  5. #5
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    22,090

    Default Re: How can I draw/create the wavy lines in this way?

    There's an alternative non-destructive way if you have a version of Xara that can export Shapes as SVG. (If not it's a great reason to purchase an upgrade!)



    I've also attached the constructor xar file.

    You can also go further and have the overlay as an animated svg:

    DEMO
    Attached Files Attached Files
    Last edited by Egg Bramhill; 16 January 2023 at 12:08 AM. Reason: Because my brains addled!
    Egg

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  6. #6
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    22,090

    Default Re: How can I draw/create the wavy lines in this way?

    Here's a further example of using vector shapes:

    DEMO
    Egg

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  7. #7
    Join Date
    Mar 2009
    Posts
    4,522

    Default Re: How can I draw/create the wavy lines in this way?

    Quote Originally Posted by Egg Bramhill View Post
    You can also go further and have the overlay as an animated svg:

    DEMO
    That's a really interesting effect you created, Egg!

  8. #8
    Join Date
    Jul 2015
    Location
    Currently New York State
    Posts
    777

    Default Re: How can I draw/create the wavy lines in this way?

    If you are using this as a graphic then it is fairly easy to setup.

    Make a white box that covers the bottom of the picture.
    Covert the box to shapes.
    Using the shape tool add two points along the top line on the for where you will want the top part of the curve and the bottom part. Make sure you have smooth join selected for the shape tool in order to have curves.
    Move these two points up or down for the position you want.
    Adjust the handles of the top lines points to give you the curve you want.
    Copy the box 2 times and apply transparency and size as required to give you the same effect.
    Group all four items.

    Ray

  9. #9
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    961

    Default Re: How can I draw/create the wavy lines in this way?

    All the approaches here worked well; liked Egg's animated SVG's. Ray's probably the simplest. Had a go with a video background using Acorn's solution: https://initiostar.co.uk/demo/grass/
    Gary
    www.initiostar.co.uk


    Xara Designer Pro+ and Xara Designer Pro X 19.0.1.65946 DL x64 Feb 7 2023

  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: How can I draw/create the wavy lines in this way?

    Quote Originally Posted by Initiostar View Post
    All the approaches here worked well; liked Egg's animated SVG's. Ray's probably the simplest. Had a go with a video background using Acorn's solution: https://initiostar.co.uk/demo/grass/
    Gary, most kind to showcase your work here.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •