포토샵 기본기 하루 5분, 3주 만에 끝내기
디자인베이스
비전공자도 쉽게 배우는 포토샵 기초 강좌입니다. 빠르게 포토샵 툴을 배워야하는 디자인과 1,2학년 분들, 포토샵으로 부업하고 싶은 분들, 본인의 사업을 꾸미고 싶은 분들, 유튜브 크리에이터나 블로그와 인스타그램을 운영하시는 분들이 배우면 아주 도움됩니다! 시작이 반입니다 여러분... 겁먹지 마세요.
입문
Photoshop
Understanding Lottie to Improve Designer Skills
You don't have to rely on Gif or Video anymore. You will learn how to output animations created in After Effects as code and implement various interactions through JavaScript. You can also create an attractive website.
Reviews from Early Learners
What you will learn!
How to export animations created in After Effects as Lottie files
How to implement movement on the web through JavaScript from a JSON file output by Lottie
A library created by Airbnb
Get started with Lottie 🎈
moving images
Would you like to make it?
Have you heard of Lottie , the hot library created by Airbnb?
Lottie allows you to create high-quality animations
You can make it freely.
Let's first introduce Lottie. It's a technology that outputs data values for moving animations in JSON format, allowing them to be applied as actual code on the web and in apps . Learning this technology will allow you to implement moving animations without relying on GIFs or videos.
This course will teach you everything you need to know about Lottie. We'll first set up the environment for using Lottie, then learn how to convert animations created in After Effects into code using Bodymovin and implement various interactions using JavaScript.
Implemented with Lottie
animated images
You can see more examples made with lottie at that link.
Example - Screen that runs Roti animation when clicked
Example - Running Roti Animation Based on Scroll Depth
Example - Animation created and output using After Effects
Who would benefit from listening?
At a standstill
No more
Not satisfied
Passionate designer
I worked on it
Animation to Code
I want to apply it to the web
Competent Designer
Lottie.js
In a short time
I want to learn
Web publisher
hello,
Product Designer Who Codes
This is the design base .
I'm a product designer who codes. I empathize deeply with the challenges designers face and the areas they want to implement.
What we're trying to learn isn't something daunting. It's just something that seemed difficult and was being avoided, but if you put your mind to it, anyone can do it. Learn Roti and create some attractive designs.
Please note that this course does not teach you how to create sensational animations using After Effects. It focuses on how to output your animations as code, apply them to the web, and implement interactions using JavaScript. This course is short and focused, focusing on the essentials.
Let's learn in order!
There are a total of 9 lecture videos prepared, divided into two sections: basic and advanced.
In the basics, you'll learn how to analyze Lottie code and split it into easy-to-use HTML, CSS, JS, and JSON files. You'll also learn how to use Lottie's built-in features.
In advanced cases, you can implement various interactions, such as mouseovers, scrolling, and clicks, through JavaScript. This is the biggest difference from GIFs: you can directly control the frames as desired.
Frequently Asked Questions 💬
Q. What are the benefits of learning roti?
You can apply animations created with After Effects to web and app applications. This element enhances the quality of your designs.
Q. I'm a designer who doesn't know any code at all. Will this help?
Just knowing what Lottie is and how it works can make collaborating with developers a lot of fun. However, basic knowledge of HTML/CSS and JavaScript will allow you to utilize it even more effectively.
Q. Is there anything I need to prepare before attending the lecture?
The tools used in this course are After Effects, Visual Studio, and Illustrator. It's recommended that you familiarize yourself with these tools. Furthermore, a basic understanding of JavaScript is essential for successfully completing advanced courses.
Q. Do you provide example files?
Of course, we provide example files used in the lectures to make your study as easy as possible.
Q. Can you also teach me how to use After Effects or create animations?
This course doesn't teach you how to create sensational animations with After Effects. It focuses on how to output your animations as code, apply them to the web, and implement interactions with JavaScript.
Recommended for
these people
Who is this course right for?
UI designer interested in animation and interaction
Web designer who is good at web coding
Web publishers who want to learn how to use Roti
Need to know before starting?
Basic knowledge of HTML and CSS
Basic knowledge of Javascript
How to use After Effects
35,229
Learners
388
Reviews
32
Answers
4.8
Rating
5
Courses
디자인베이스는 누구나 쉽게 디자인을 배울 수 있도록 디자인 강좌를 만들고 있습니다.
저는 현업에서 UXUI 디자이너로 활동 중이며 입문자의 입장을 잘 알기 때문에 꼭 필요한 내용만 담아 강의를 제작합니다. 포토샵, 일러스트레이터뿐만 아니라 프로덕트 디자이너로서 알아야 할 다양한 툴과 코딩 지식을 갖추고 있습니다. 😊
- 인프런 수강생 3.1만 명 / 수강평 4.8점
- 실무 경력 8년차 디자이너 (스타트업 창업, 에이전시, 인하우스)
- 유튜브 구독자 8.1만 명
실무에서 바로 사용하실 수 있도록 정확한 내용과 양질의 강의를 제공하겠습니다. 📖
Curriculum
All
9 lectures ∙ (55min)
Course Materials:
Lecture resources
Published:
Last updated:
Reviews
All
10 reviews
4.6
10 reviews
dicahyunseReviews 1
∙
Average Rating 5.0
- Gichul Roh
Reviews 14
∙
Average Rating 4.7
- 날아라못난
Reviews 4
∙
Average Rating 5.0
- 테이
Reviews 20
∙
Average Rating 4.8
$26.40
designbase's other courses
Check out other courses by the instructor!
Similar courses
Explore other courses in the same field!
![부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프강의 썸네일](https://cdn.inflearn.com/public/courses/333141/cover/2e0b10d5-7e3c-4dd9-ace8-b3374cb55007/333141.jpg?f=avif&w=420)
![[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core강의 썸네일](https://cdn.inflearn.com/public/courses/331985/cover/f0501069-2139-4112-aafa-a9b3a2932860/331985-eng.png?f=avif&w=420)
![풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]강의 썸네일](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?f=avif&w=420)
![[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드강의 썸네일](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![[LottieFiles 공식] After Effects로 만드는 Lottie 애니메이션 (수료증 발급)강의 썸네일](https://cdn.inflearn.com/public/files/courses/338082/cover/01k0ra1r4y627eeazr0e855txg?f=avif&w=420)