How to make a 3D presentation from scratch - Part 1 | Ayush Srivastav | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

How to make a 3D presentation from scratch - Part 1

teacher avatar Ayush Srivastav, A skilled designer and presenter

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

10 Lessons (16m)
    • 1. Introduction

    • 2. Choose Your Editor

    • 3. Basic Walkthrough

    • 4. Initial Setup

    • 5. Initial Step

    • 6. Complete Layout

    • 7. Adding 3D

    • 8. Rotations

    • 9. Scaling

    • 10. Ending Note

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Download course files from here and Extract it in your Hard drive.

Do you want to change the way your audience react to your presentation skills?

Are you an active speaker who is just not able to break the ice because of lack of quality presentations?

Or maybe you're seeking something new or a drift in your career growth?

Join thousands of successful people who have decided to learn the art of 3D presentation, upgrade their presentation skills and boost their careers & confidence with this 100% hands-on course.

Save your time and money by making some quality presentations to amaze your audience.

Bonus, You Might Even Get a Raise or a Better Job with These New Skills!

Learning 3D presentation course is aimed not only at design professionals, but at anyone having little or no experience in coding and a great desire to start learning the design from scratch. This hands-on training takes you from "boring slide based presentations" to complex 3D graphically enriched presentations. 

During this course you will learn core concepts which will be relevant to your knowledge and development of your presentations.

We will make a presentation like no one in your business-circle have ever seen.

What are the requirements?

  • You should have a great desire to learn the art of presentation and do it in a hands-on fashion, without having to watch countless lectures filled with slides and theory.
  • Having a basic idea about HTML, CSS, JS will certainly give you a head start though it's not required. I will guide you step-by-step.
  • I am going to use only free tools for this course, Visual Studio Code, Google Chrome
  • All you need is a decent PC with some basic configuration and an internet connection. You will get the rest from me.

What are you going to get from this course?

  • Master all impress.js concepts from scratch
  • Get rid of software dependent presentations like Powerpoint
  • Use HTML/CSS for making browser based presentations
  • Learn how to carry your presentation to practically any device in the world.
  • Get rid of monotonous animating slides
  • Apply various css transformations to create custom animations.
  • Create a visually enriched presentation for your next product launch.
  • Regular course updates: new lectures, presentations and documents.
  • Ask for a raise or apply for a better job
  • Learn how to convert your powerpoint based presentation to a 3D presentation.

Let's create something new. I hope to see you in this course!

Meet Your Teacher

Teacher Profile Image

Ayush Srivastav

A skilled designer and presenter


Ayush Srivastav knows what it takes to grab the attention. A skilled presenter and a programmer has taught more than 10,000 people how to learn the art of programming both software and hardware.

Hailing from India, Ayush made his trek to books to learn the art of programming. He has won praises and a wide following for his engaging style and his knack for transferring programming skills via practical, simple, universal and immediately actionable techniques.

Ayush first made a reputation in software industry with his quick learning and engaging ability. In response to many requests, he began to offer personalized services and quickly developed a following as a skilled presenter.

He has in-depth knowledge of what it takes to engage people and deliver some core progra... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Are you bored with the usual presentation you have been seeing all your life? Perhaps now is the time to make up the creative team. And inside you don't you want to impress your audience with the amazing visualizations? Or don't you want to make them feel border where you are talking about? If yes, then you should try three be present patients. They are very, very easy to make and we will make everything right from scratch. Now is the time to focus on your big ideas and give importance to the tiny ones by positioning, rotating, scaling all your thoughts in an infinite canvas. Even your imagination can stop the evil genius inside. I want to know more. Hit the end roll now button and voice, the whole course still very in and haven more thing. Don't forget to rock your upcoming presentation. Share it with your friends and, of course, with me too. Hello, my name is Ayush and let's get started 2. Choose Your Editor: before we start making our presentation, we need an editor to write the code. So in this video, I am going to show you how to download one of the best editor available for free. Okay, so in your browser, go to Google and type Microsoft Visual cold. This is that about the best editor I have used so far. However, there are other editors to if you already have some editor legs, some blame text or not bad plus plus, then you're good to go. Okay, So I have opened the home page off Microsoft Visual Code. And here's the download button. The best thing about this senator is that it works everywhere. BC, Lennix and Mac. Okay. So don't know according to your requirement. 3. Basic Walkthrough: Okay, so I have downloaded visual court now and install it in my PC. I assume that you have done it too. Now download the files, which I have provided with discourse. It is a basic set up to kick start your according extract the files in your heart Rave on open in visual code. Let me give you a walk through of what is there in this file you can see in the left section that there is one main file called in next or HTML and do other folders with the name off CSS and Js inside CSS folder. We have impressed Imo dot CS is on inside. Jess. We have impressed orgies. Go ahead and click. Impressed. Aren't html to open it. Okay, see that this is just a basic HTM allowed inside head. See that I have included a link tag which include the file impressed demo dot CS is from CSS Fuller. Also inside the body dunk. I have included a script dog which includes impressed or Js file from the Js folder 4. Initial Setup: let's set up a representation so that it will start this spring. The content which weevil code in the next video. Okay, so inside the body dug create a new tiff Tack with the idea off impress To write this just Dave Hash Empress and press stop on your keyboard, it will complete the rest of the syntax. Okay? No, we have our Dave with the idea off, Empress. It's a good practice to write comment on the closing day if tag, this will make it easier to debug if something goes wrong. All right? No, See that there is one script ag right before the ending body dunk. So just below that, create a new script tag inside this right impress, then opening and closing brackets dart in it. And again, opening and closing brackets. We're basically calling the unit function off impress. All right, let's get started 5. Initial Step: I will start off by creating a really, really basic presentation. Then you can use your imagination to create other amazing designs. There are three main attributes off creating presentation in impressed Aren't Js they are. Babe takes data by and data See, they defined the position off our content. Let's see this in action. Inside are impressive dunk create a new live with the class off step. So just write live dot step and pressed up to complete the syntax Now in the same diff Doug , right data dash X equals on inside court. Right, Siegel again. Beta dash vie and inside codes rate zero. Basically, it means that whatever contained we put inside the step back, it will be pleased at 00 location in the canvas. Easy, isn't it? Okay, now inside the stiff on a paragraph, Doug, And write the content as my first presentation. You can write whatever you want, but I'll start off with this again. Right? The government in the closing deaf dark. Open this file from your hard drive in your browser. Just double click the index dot html file by default, it will open in your browser. Okay, so no VCR grunting you might not realize, but this takes is displayed at 00 position. This is easy, isn't it? Let's create some more. 6. Complete Layout: All right. Now, let's create some more steps to complete our basic presentation. Start by making a new motive for the class off step and write data X as zero native I as minus 1000 in Saint the Stiff make a paragraph drag and right Step two again. Make a new diff with the class off step and data X as 1000 and eight of I as zero inside this make a batter off track and right Step three. Then one more live tag with the class off step and data X as zero and data by as 1000. Inside this makeup paragraph tack and write stuff for finally one more. Live with the class off step on data exercise minus 1000 later vie as zero Inside this. Make a paragraph, Doug and right, Step five. Great are basically artist done. That was quick. I know. Save this file and let's see how this looks in the browser. Now go to your browser and hit Refresh. Okay, so this is our first step it right, Otto or space bar on your keyboard. So here comes the Steptoe. Did you notice the animation? It's so easy. I didn't write any fancy code, but still, it works like a job like the right arrow again. So here's to step three. Hit again, didn't step for and stuff five. And finally, we're back to step one. But this looks awkward. This is not how it is supposed to animate right. Let's fix this in the next video. 7. Adding 3D: Let's review our beach once more. We have our first step, and then the Bates lights up to Step two. When we go further, the Bates likes to the location off Step three. Here comes the rule of Data Z. Let's try it out in your good go to the day. Very you have it and Step three and write data Z equals minus 5000. Let's see how this affects Save your beach. I'll again take the page back to Step one and hit. Refresh. Okay, now we have stepped to and there see that Step three appears as if it's coming from behind . That's more appropriate, isn't it? Let's try the same with Step five. Go back to the court in Step five. Ad day. Does he as 5000? This time I'm adding positive. 5000 saved the file and now let's take the page back to Step one. History Fish. Okay, now we have stepped one. Then Step two and then Step three. Coming from back step for And finally, Step five. They're much better than before. Great. Play around with the values off data Z 8. Rotations: Let's talk about rotations. I'll make it quick so that you understand it quickly and play around. Okay. After Step five ADV on motive with the class off step on data, X equals minus 1000 and data vie as zero. See that here date X and data by, say, Mr Five. Okay, now inside this Agon paragraph tag that contend as steps six. If we run this now, both Steph five and Step six will overlap each other, and it will greet the mess. However, let's signed one more attribute. Right data rotate. X equals 90 so this attribute will rotate step 6 90 degrees with respect to X axis. Let's see how it books. Save the file, Open your browser and I'll take the bait back to Step one and refresh. Okay, we have Step one. Step two. Step three, Step four and step five. At this point, Step six is not at all visible. Hit right? Roky there. Did you see the classy animation? This looks good. Let's change this attribute. No, instead of the dollar teen eggs right, they don't date by equals 19. Let's see how the stones old go to the browser and I'll take the page back to step one and re fresh. So now we have Step one. Step two. Step three Step for and Step Fife. Okay, Now hit. Right. Arrow key. Awesome. It looks so cool. Try playing around with the values off data date X and data out of date by I'm sure you'll create something really amazing. 9. Scaling: Let's talk about scaling right now. Whatever we have been creating is that scale off one. There are five skills available in total. This will give you a completely different perspective. Let's see it in action in step to ST State of I attribute to minus 5000 and add data scale attribute So right data dash scale equals three. So here we are, scaling step to 2/3 skill and it will appear slightly raised than all of the levels. Save the file. Go to your browser on. I'll quickly take the page to step one and refresh. So we have step one hit the right arrow key. See, the steptoe appears raised and step one, you can see the glimpse off Step one also. All right, you can use the scaling attributes to good use and create some amazing visual effect. 10. Ending Note: presentations are one of the most effective ways off communicating our ideas to the people who are interested in the topic. Ah, perfect presentation will grab the attention off the audience and give them interested in your ideas. While a bad presentation can bore your audience and destroy your reputation's. This means that the presentation creation tools play a vital role in designing a good presentation. We used a great presentations with popular next, or programs such as Microsoft part point on open office. Things have changed dramatically now, and Web based presentations are gaining more interest from users. The framework which we have used was created to build an only in presentation that also myth fix with the poverty off CSS and JavaScript, the greater off this frame bug mentions that it has been used for various different purposes, expanding the original intentions some of the common users are creating on in presentation port for use sliders, single page websites and what not. You must be wondering why we need to care about such a framework when we have a quality presentation programs such as Power Point. The most important thing we need to look at is the license since most of the online frameworks are licensed under M. I T and G B L. We can even change the source score to customize the framework according to our needs. Also, most of the modern browsers support CSS three transformation, allowing you to eliminating the program dependency presentations. Both textile based presentation and all in presentation are equally good at presenting information to the audience. But all in presentations have a slight advantage over next obese, present patients. Drawbacks. Off extra base presentations compared to an online presentation are the big stop presentation required. A presentation, creation and viewings off there. Therefore, it is difficult to get the same output in different operating system. Extract presentations use standard slide techniques with a common template. Viol. The only presentations lights can be designed in avoid were ideal ways. Modifications are difficult in a next are based presentation, since it required the presentation creation software, the only in presentation can be changed instantly by more differing the HTML content with a simple text editor. Creating presentations is not just about filling our slaves with lord off information and animations. It is a creative process that needs to be planned carefully. Best practices will tell us that we should keep the slights as simple as possible with a very limited information on letting the presenter do that. Detail explanations. The audience does not have any idea about the things you are going to present prior to the start of presentation. If your presentation is not up to the standard, the audience will wonder how many boarding slights are yet to come and what contents are going to be Steps in online presentation, which you create our place in three D space, each slightest position. Relatively. Generally, we will not have an idea about house lights are placed when the presentation is on the screen. You can zoom in on steps by using the scaling feature. In this way, we can create additional steps containing the overview of presentation. By using the scaling feature, we cannot give the audience interested just by scrolling down the presentation. Slight presentations need Toby. Intellect and animations are great for getting the attention of the audience. Generally views animations for slight transitions. Even though presentation tools provide advanced animation, it's your responsibility to choose the animations. Mostly, most people like to make the design off their presentation as cool as possible sometimes take it carried away and juice on the best teams available in the presentation tools. Teams provided by tools are pretty find on are designed to suit a general purpose. Your presentation might be a unique, and choosing an existing thing can destroy your uniqueness. The best practice is to create good on team for your presentations. Onley in presentation framework does not come with building things. Hence there is no option other than to create a new team from scratch. Only presentations are different to each other, unlike the standard presentation. So you have the freedom to create a team or designed for each of the steps just by using simple HTML in C asses. Apart from the things which I have mentioned, you can use typography in majors on videos to create a better design for your presentation .