If you’ve been following the tutorial, you should have two copies of this card.Next, let’s add animations to the big cards. Apply the other Lottie animations – S Light Blue.json and S Purple.json onto the other small cards.Select your Lottie JSON file – we’ll use S Orange.json that’s included in the design assets folder.Choose “Animation” from the drop-down menu.Look for the “Color” icon in the sidebar.Your 3D scene is finally ready to add Lottie animations. Add Lottie animations to your 3D designs in Vectary Add a Lottie animation Select each big card element and press Ctrl + D, or right click and select “Duplicate”.ħ.One workaround is to create a duplicate of the element and converting it to a plane – then applying the Lottie animation onto it.īut we’ll still need the original copy of the elements, as converting them to planes will get rid of the text, avatar and button elements on the cards. If you try adding Lottie animations directly to these geometries, your animations may look stretched out. Next, we’ll convert the big cards into geometries. Convert the other small cards into geometries and delete the same Groups to get rid of the art layers.This will get rid of the art layer so you’ll be left with a blank card. In the “Orange - baked” element, delete the Group shown above.Select the “Orange” element and convert it into geometry.Now we’ll convert the small card elements into geometries: Delete the group Do the same for the “iPhone 13 Bezel” element.Double click on the element to convert to geometry, then click “Bake”. So let’s convert our elements into geometries: Convert to geometry This turns them into 3D materials, allowing us to change their colors, materials and apply other 3D functions.īut once you convert an element into geometry, you won’t have access to the SVG Object transformations anymore – so make sure that you’ve applied all the SVG transformations you need before converting. Next, we need to convert the elements into geometries. Arrange the small card elements – “Orange”, “Purple” and “Sky Blue” – in the same way.Arrange the big card elements – “Deep Purple”, “Eternal Pillars” and “Purple Rome” – so that they overlap each other like in the screenshot above.Drag the green arrow to move them forwards.Select all the elements except for the “Mobile” and “iPhone 13 Bezel” elements.To avoid hiding some of the elements, let’s bring them to the front of the mobile screen. Select the “Mobile” and “iPhone 13 Bezel” elements.Right now, the plane is looking flat – so let’s add some thickness. Drag the “Deep Purple” element to the left.ĥ.Drag the “Eternal Pillars” element to the right.Drag the green arrow to bring the elements to the front.ĭrag these elements to the right and left.Drag the blue arrow to bring the elements to the bottom.Move the “Orange”, “Purple” and “Sky Blue” elements to match the screenshot above.Arrange the order of the elements to match the screenshot above.Organize the elements Arrange the order of the elements Drag the blue arrow upwards to move all the elements above the plane.Ĥ.To reangle the elements, drag the red circle.You can also use the Transformation values in the sidebar as shown above. Resize to about half the original size.Resize the elements by selecting all of them, then drag one of these cubes inwards.Edit and resize elements Resizing in Vectary ![]() Wait for Vectary to load the SVG files.ģ. ![]() Drag and drop all the SVG files provided in the design assets folder. ![]() In this tutorial, we’ll start from scratch with a blank template. When you start a new project, Vectary will give you the option of starting from different templates.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |