How To Import SVG Files Into After Effects
Вставка
- Опубліковано 4 лип 2024
- Adobe After Effects CC 2024: How To Import SVG Files
This tutorial will show you how to import SVG (Scaleable Vector Graphic) Files into Adobe After Effects CC 2024 via Adobe Illustrator.
Workflow:
Download SVG File
Open in Adobe Illustrator
Convert all to Layers
Rename Layers
Save As Illustrator (.ai) File
Import .ai File as ‘Composition-Retain Layer Sizes’ in After Effects
Double-Click Composition to view all layers
SVG stands for Scaleable Vector Graphic.
This file format is popular for displaying two-dimensional graphics, charts, and illustrations on websites and is a vector file so it can be scaled up or down without losing any of its resolution. www.adobe.com/creativecloud/f...
Free SVG Files:
SVG Repo
www.svgrepo.com/
-------
To try or buy Adobe After Effects CC 2024:
mikemurphy.co/adobe (affiliate link)
Terrapin Textures Video Assets:
mikemurphy.gumroad.com/l/oran...
⭕️ Check out my new Domestika Course on Adobe Audition:
mikemurphy.co/domestika
Murphy Doodle Font:
mikemurphy.gumroad.com/l/murp...
------
Chapters:
00:00 Intro: About The Tutorial
00:29 What Are SVG Files?
00:55 Download SVG File (SVG REPO)
01:21 Open SVG in Adobe Illustrator
01:46 Release To Layers (Sequence)
02:22 Rename Illustrator Layers
02:49 Save As Illustrator File
03:12 Import To After Effects
03:43 Open SVG Composition
03:56 Fix Vector Resolution Quality
------
How To Download SVG Files
1. Open web browser
2. Go to svgrepo.com
3. Browse collections
4. Click on an SVG Graphic
5. Click on ‘Download SVG Vector’ to download to computer
How To Open & Prepare SVG File in Adobe Illustrator:
1. Drag SVG File onto Illustrator application (Macs)
2. Go to the ‘Layers Panel’
3. Click on ‘Layer 1’ in the Layers Panel
4. Click on the Hamburger (3 horizontal lines) in the top right of the Layers Panel
5. Select ‘Release To Layers (Sequence)’
6. Drag all layers outside of Layer 1
7. Delete Layer 1 (select and click Trash Can at the bottom of Layers Panel)
8. Double-click on each Layer to Rename
9. Go to File Menu
10. Click ‘Save As’
11. Change Format to ‘Adobe Illustrator (.ai)
12. Rename File
13. Click ‘Save’
14. Select Latest Version of After Effects
15. Click ‘OK’
How To Import Illustrator (.ai) File into After Effects
1. Open After Effects Project
2. Double-click on empty space in Project Panel to open Import Dialogue Box
3. Select Illustrator (.ai) File
4. Change Import As to ‘Composition-Retain Layer Sizes’
5. Click ‘Open’
6. Double-Click new SVG Composition to Reveal All Layers
7. Drag new SVG Composition into the Main Composition
8. Double-Click SVG Composition at any time to reveal all layers
How To Fix Resolution Quality of SVG in After Effects
1. Right-click on the top of the Layers Panel in the Header Row
2. Make sure ‘Switches’ is checked
3. Double-click to to open the SVG Comp so all layers are visible
4. Select all layers
5. Tick one of the boxes under the * column to ‘Continuously Rasterize’
6. A * should be in the column for all layers
7. Return to the main column
8. Tick the box to add a * next to the Comp for ‘Collapse Transformation’
9. Tap ’S’ for Scale
10. Scale up and the Vector Graphic should be sharp and high-quality!
---------------------------------------------------------------
➜Amazon Influencer Store: www.amazon.com/shop/mikemurphyco
➜See All My Gear: www.mikemurphy.co/podgear
➜ Get Adobe Creative Cloud: mikemurphy.co/adobe
➜Screencast Software:
Screenflow: mikemurphy.co/screenflow
---------------------------------------------------------------
➜ VISIT MY WEBSITE:
- mikemurphy.co
➜ SUBSCRIBE TO PODCAST
-mikemurphy.co/mmu
➜ SOCIAL MEDIA:
- Instagram: / mikeunplugged
- Facebook: mikemurphy.co/facebook
- Twitter: / mikeunplugged
- UA-cam: mikemurphy.co/youtube
Amazon Associates Disclosure:
Mike Murphy is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com
Thanks Mike, that was fab!
Thank you, That's so helpful
You are welcome…glad it helped! 👍
I couldn't have asked for a better tutorial--thank you so much!
And I couldn’t have asked for a better comment…thanks ! 👊👍✌️
Thank u very much
You are welcome! 👍
Grateful!
Thanks! 🙏
another problem is he stills pixelated in small icale icons like 24x24 and 48x48px theres any fix for that? since i intent to lottie some animated icons for my UI
Did you follow the steps in the tutorial and it is not working for you? Please provide details of what steps you are taking and where you are running into problems so I can better understand.
If you are running into vector graphics looking 'pixelated' in After Effects, look for the little 'star' icon in the 'Switches' header panel, and tick the box which is called 'Continuously Rasterize'
Can you do a video showing your process of creating a terrapin texture? Or even just a timelapse?
Thanks for the suggestion and the interest! I have a ton of work to do still with Terrapin Textures, but I plan to make tutorials and share my process on how I create textures in the future. Stay tuned! 👍
p.s. What part about making textures are you most interested in?
@@MikeMurphyCo Not any particular part. Just wanted to see how you come up with an idea and then collect and use the materials to create it.
@@ksaravan910 Awesome, thanks for sharing and will see what I can come up with!
only impor as a directory in my project
I will help you troubleshoot, but I do not understand your issue. What are the exact steps you are doing and what problems are you having?
You don't show how to import SVG into AE but how convert a SVG to AI file :|
Thanks. 👍