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,
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".
14 January 2023, 01:43 PM
Acorn
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
14 January 2023, 09:42 PM
TomTom66
Re: How can I draw/create the wavy lines in this way?
Quote:
Originally Posted by Acorn
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
15 January 2023, 10:51 PM
Egg Bramhill
1 Attachment(s)
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:
That's a really interesting effect you created, Egg!
16 January 2023, 02:06 PM
RKissane
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
16 January 2023, 09:24 PM
Initiostar
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/
16 January 2023, 09:43 PM
Acorn
Re: How can I draw/create the wavy lines in this way?
Quote:
Originally Posted by Initiostar
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/