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/
Gary, most kind to showcase your work here.
Acorn
17 January 2023, 02:51 AM
Egg Bramhill
Re: How can I draw/create the wavy lines in this way?
Loved your video idea. Hope you don't mind Gary but I've used it here.
17 January 2023, 08:43 AM
Initiostar
Re: How can I draw/create the wavy lines in this way?
Quote:
Originally Posted by Egg Bramhill
Loved your video idea. Hope you don't mind Gary but I've used it here.
You are welcome Egg, great effects :D
17 January 2023, 08:48 AM
Egg Bramhill
Re: How can I draw/create the wavy lines in this way?
Thank you very much Gary ;)
18 January 2023, 01:56 PM
TomTom66
3 Attachment(s)
Re: How can I draw/create the wavy lines in this way?
Thanks to all for the tips and assistance. Just came back to this page, have only seen the many new posts now.
My very first solution (Acorn's instructions) then gave these final results attached. It worked final then. But I could no longer describe to anyone specifically how the way was ;-)
The other solutions / instructions I will also still try.
Re: How can I draw/create the wavy lines in this way?
Tom, I assumed your main issue was creating smooth curves.
Clearly, non-destructive is the best approach.
What you can try is dropping the image onto your design page and then Arrange > Convert to Editable Shapes.
You can then use the Shape Tool to add a mid-point on the bottom edge.
When you select these points, set Make Curve and move it.
Clone twice and adjust the height of the bottom line for all three and set Transparency to 50% for two of them.
Once you have mastered this, you can try with just one image and not three.
The trick to to leave the image on top, untouched, apart from making it a Bleach Transparency.
Against White, it it wholly invisible.
Against Black, it is in full colour.
Effectively, you layer White through Grey to a base of Black for four shapes, White it to the bottom of the picture.
I made my White and Grey ones with a curved top.
One grey has a curved bottom too and had a Transparency applied.
Re: How can I draw/create the wavy lines in this way?
Quote:
Originally Posted by Egg Bramhill
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:
Thats petty cool also, Egg. Thanks a lot also for the detailed video clip and sample!
Tom
18 January 2023, 06:20 PM
TomTom66
Re: How can I draw/create the wavy lines in this way?
Quote:
Originally Posted by Acorn
Tom, I assumed your main issue was creating smooth curves.
Clearly, non-destructive is the best approach.
What you can try is dropping the image onto your design page and then Arrange > Convert to Editable Shapes.
You can then use the Shape Tool to add a mid-point on the bottom edge.
When you select these points, set Make Curve and move it.
Clone twice and adjust the height of the bottom line for all three and set Transparency to 50% for two of them.
Once you have mastered this, you can try with just one image and not three.
The trick to to leave the image on top, untouched, apart from making it a Bleach Transparency.
Against White, it it wholly invisible.
Against Black, it is in full colour.
Effectively, you layer White through Grey to a base of Black for four shapes, White it to the bottom of the picture.
I made my White and Grey ones with a curved top.
One grey has a curved bottom too and had a Transparency applied.
"Tom, I assumed your main issue was creating smooth curves."
= YES, this is exact! I have often the problem they they then become somewhat angular. With one "ponit" for curve no problem, but with two then and when you change height. But with "set curve" this also worke better then.
