Learn how to create interactive infographics with Adobe Illustrator + InDesign
Вставка
- Опубліковано 20 лип 2024
- Follow along in this tutorial and #learn how to create simple infographics in Adobe Illustrator, transfer them to an InDesign layout and add interactivity. In this lesson, also learn how to publish the project online and view the infographic presentation in a web browser.
Full tutorial w/ lesson notes 👉 bit.ly/3ag6F6X
Download lesson material 👉 bit.ly/3lSkiM9
Filson Pro Font Download 👉 fonts.adobe.com/fonts/filson
#adobeindesign #adobeillustrator #infographics #interactiveinfographics #brandingdesign #digitaldesign #graphicdesign #teach #design #digitalpublishing #animation
0:00 - Tutorial Intro
0:33 - Setting up Adobe Illustrator Document
1:45 - Creating Pie Infographic
10:00 - Creating Pillar Infographic
13:53 - Placing Infographics into InDesign Project
19:30 - Adding Interactivity to Pie Infographic
28:08 - Adding Interactivity to Pillar Infographic
43:35 - Adding Interactivity to Map Infographic
48:00 - Adding Animation to an Infographic
49:35 - Publishing Project Online
Want to learn more about Digital Publishing in Adobe InDesign? Check out these tutorials:
Create an interactive flyer with animation in Adobe InDesign: • Create an interactive ...
Learn how to create an interactive business magazine in Adobe InDesign: • Learn how to create an...
Create an interactive poster with animation using Adobe InDesign: • Create an interactive ...
Create interactive recipe cards with pop-out videos in Adobe InDesign: • Create interactive rec...
Learn how to create an interactive holiday greeting card in Adobe InDesign: • Learn how to create an...
Learn how to add videos to a mobile project in Adobe InDesign: • Learn how to add video...
Create an interactive magazine with sidebar menu in Adobe InDesign: • Create an interactive ...
Create a digital brochure with pop-out windows in Adobe InDesign: • Create a digital broch...
Learn how to create an interactive image slider in Adobe InDesign: • Learn how to create an...
Learn how to add interactivity to branding design projects in Adobe InDesign: • Learn how to add inter...
Create a digital catalogue layout with interactive product buttons in Adobe InDesign: • Create a digital catal...
so much knowledge and absolutely free. Thanks
amazing tutorial wonderful techniques tons of thanks 🙏🙏🙏🙏🙏
Thank you so much! This was just so awesome to follow along and do. Great stuff!
Awesome! I am glad you enjoyed it!
you tutorial is amazing ❤️
Thank you for the excellent training session. I enjoyed every aspect of it. I never imagined the grand impact of the training session today. It was a very educative one.
Thanks for the kind words! I am glad you it helped and you enjoyed it!
I want to thank you for your videos as they are so easy to follow. I'm having a problem trying to replicate what you do with the switch infographic. I brought my icons in from Illustrator as you did but they won't stay grouped once I make them a button so when I try to click on them I have to click just on the background circle and not on the icon itself. I've watched and rewatched trying to match exactly what you do but I can't get mine to work.
Very cool, I would like to ask about displaying the magazine on the screen in the form of a video, how do I do that,
Does the screen capture a video or what do you do to display only the content of the magazine as a video
Great video as usual. I know you do a lot of digital InDesign work but I was wondering if you could do a design for those retractable banners that you see at conferences. I get a lot of requests for them. You're designs are always so great that I bet you could make a killer one.
Thank you :)
I could definitely add that to my tutorial ideas Randie! I create a lot of them for clients so I'd love to share my tips, tricks. Take care!
@@AngeloMontilla Thank you so much!
Excellent tutorial!
Thank you!
Cool
the text change on hover is soooo slow. any way to speed that up? overall this is so helpful!
HI Angelo, The inner shadow effect is not appearing on the donut infographic chart even when you publish it online. I have tested that transparency and shadow effects do not work on design elements that are converted to interactive buttons. Is there any solution to apply to still apply these transparency effects?
thank you,Great video
Is it possible to suggest a topic for implementation?
I would like to suggest anything related to climate change
Thanks Kasara! I'll keep it in mind!
Hi thanks very much, I want to know how I make video in mockup for magazine to share in Facebook , pls I want know the program that you use to that
Why use InDesign instead of Animate? I am guessing this is for those who are into digital publishing more than animation and interactivity? Either way, cool that you can do this with InDesign. Then again it isn't a surprise that an app originally focused on print has more digital publishing features these days. I'm a long time Adobe fan, from my days of learning Photoshop 3 in 1995 at Texas Tech University.
Hi! great video! I have a question: I want to put the html in a wordpress post. Is it possible to put the html that gives the indesign?
Great question Diego. The answer is yes - but two parts:
1) The simple way is the Publish Online feature in InDesign and then copying the embed code and pasting into a WordPress post.
2) But if you mean creating a separate HTML page that you can host on your WP site, that takes a little more work. You'd have to File > Export > HTML in InDesign. This creates the css and java code folders, images/fonts that you share with a developer or if you know how to transfer it to your WP site yourself.
I know In5 has a WordPress plug-in that allows you to go from InDesign to WordPress seamlessly and is responsive, but of course that comes at a cost with a full In5 license. Just another thing to consider. Thanks for following along!
@@AngeloMontilla
Excellent answer. For a couple of weeks I have been looking for the best way to make interactive infographics to publish in a Wordpress. I tried Adobe Animate and now I'm studying HTML and CSS. But I think that with Indesign it will be easier to create interactive infographics. Regarding your comment about how to publish in Wordpress, I need to not have to deal with the web page programmer. That's why I want to do it with HTML code only. Thanks for your answer!
@@AngeloMontilla I have another question.
How can I paste the embed code in a Wordpress post? Where do I find that code?
OK I already understood what you propose to do with the embedded code. Unfortunately that option does not work for me because I have to do it through the adobe link. I need to have the html to place it on the page. I see that the best option is still to do everything directly in html with css :(
there is any way not to export E pub, just pdf? or any website to convert epub to pdf whit the animations and buttons?
Where can I test this interactive infographic? I hope ur video could make more showcase or demonstration before tutorials
Hey there! Check out my other tutorials. There are many on how to Publish Online and export as a EPub (Fixed Layout) for viewing experiences.
I cant copy and paste it into indesign the way you did. When I do and resize it, my icons disappear and everything gets disaligned
Wondering on how to export as an interactive PDF using this technique... when I export it some of the info is missing now. Is there someway to avoid this?
Hi Lollie, a lot of the interactivity from this tutorial will not work for Interactive PDF.
For beginners, it is hard to keep up. I've had to restart over and over. :(
Keep practising and it'll become easier! Stick with it. 👍
the music is stressful
true, got quite unnerving bits, like at 2:45 and 3:50 ...