포토샵 기본기 하루 5분, 3주 만에 끝내기
디자인베이스
비전공자도 쉽게 배우는 포토샵 기초 강좌입니다. 빠르게 포토샵 툴을 배워야하는 디자인과 1,2학년 분들, 포토샵으로 부업하고 싶은 분들, 본인의 사업을 꾸미고 싶은 분들, 유튜브 크리에이터나 블로그와 인스타그램을 운영하시는 분들이 배우면 아주 도움됩니다! 시작이 반입니다 여러분... 겁먹지 마세요.
입문
Photoshop
デザイナーのスキルアップのためのLottieの完璧な理解
これ以上Gif、Videoに頼る必要はありません。アフターエフェクトで制作したアニメーションをコードで出力し、JavaScriptでさまざまなインタラクションを実装する方法を学びます。あなたも魅力的なウェブサイトを作ることができます。
学習した受講者のレビュー
こんなことが学べます
アフターエフェクトで作業したアニメーションをLottieファイルに出力する方法
Lottieで出力したJSONファイルをJavaScript経由でWeb上でモーションを実装する方法
Airbnbで作成されたライブラリ
Lottieを始めましょう🎈
動く画像
作ってみますか？
Airbnbで作られたホットなライブラリ、 Lottieをご存知ですか？
Lottieを使用すると、高品質のアニメーション
自由に作れます。
Lottieについて最初に紹介すると、動くアニメーションのデータ値をJSON形式で出力し、実際のコードでWebやアプリで適用できるようにする技術です。そのスキルを学ぶと、もうGif、Videoに頼らなくても動くアニメーションを実装できるようになります。
このレッスンでは、ロッティについて詳しく学ぶことができます。 Lotyを使うための環境を最初に設定し、アフターエフェクトで制作したアニメーションをBodymovinを介してコードに出力し、JavaScriptでさまざまなインタラクションを実装する方法を学びましょう。
Lottieで実装
アニメーション画像
そのリンクからlottieで作られた例をもっと見ることができます。
例 - クリックしたときにロティアニメーションを実行する画面
例 - スクロールの度合いによるロティアニメーションの実行
例 - アフターエフェクトで製作して出力したアニメーション
誰が聞くといいですか？
止まっていることに
これ以上
満足できない
情熱マンレップデザイナー
私が働いた
アニメーションをコードに
Webに適用したい
能力型デザイナー
Lottie.js
早い時間で
身につけたい
Webパブリッシャー
こんにちは、
コーディングするプロダクトデザイナー
デザインベースです。
私はコーディングを行うプロダクトデザイナーです。デザイナーの観点からどのような部分が難しく、どの部分を実装したいのかについて非常に共感しています。
私たちが学ぶことは途方もないものではありません。難しく見せていなかっただけで、いざとすれば誰でもできることです。ロティを学び、魅力的なデザインをしましょう。
ちなみに、アフターエフェクトで感覚的なアニメーションを教える講義ではありません。作業したアニメーションをコードで出力する方法、Webに適用する方法、およびJavaScriptでどのようにインタラクションを実装するかに焦点を当てた講義です。短くて密度の高いコアだけを教えてくれます。
順番に学習してみてください！
合計9つの講座映像が用意されており、基礎と上級こうして2つのセクションに分かれます。
基礎では、Lottieコードを分析し、使いやすくHTML、CSS、JS、JSONファイルに分割する方法をまず学びます。 Lottieが基本的に提供する機能を使用し、操作方法を習得できます。
Advancedでは、JavaScriptを使用してマウスオーバー、スクロール、クリックなど、さまざまなアクションへのインタラクションを実装できます。 GIFとは最大の違いです。フレームを好きなように直接コントロールできます。
よくある質問💬
Q. ロティを学ぶと何がいいですか？
エペックで作業したアニメーションをWeb、アプリに適用できます。デザインのクオリティを高める要素です。
Q.コードを知らないデザイナーですが、役に立ちますか？
Lottieが何であるか、どのように機能するかという原則だけを知っていても、開発者とコラボレーションするときに楽しい作業をすることができます。ただし、基本的なHTML / CSSおよびJavaScriptの知識があれば、より豊富な活用が可能です。
Q. 講義を聞く前に準備すべきことはありますか？
講義に使用されるツールは、アフターエフェクト、ビジュアルスタジオ、イラストレーターです。そのツールの使い方を知ってみることをお勧めします。そしてJavaScriptの基礎知識を持っていなければ、高度な講座を難なく聞くことができます。
Q. サンプルファイルを提供しますか？
当然提供します。勉強することができる限り難しくないように講義に使用したサンプルファイルを提供します。
Q. アフターエフェクトの使い方やアニメーション制作法も教えてください。
アフターエフェクトで感覚的なアニメーションを教える講義ではありません。作業したアニメーションをコードで出力する方法、Webに適用する方法、およびJavaScriptでどのようにインタラクションを実装するかに焦点を当てた講義です。
こんな方に
おすすめです
学習対象は
誰でしょう？
アニメーションとインタラクションに興味を持つ多くのUIデザイナー
Webコーディングの良いWebデザイナー
ロッティの使い方を習得したいWebパブリッシャー
前提知識、
必要でしょうか？
HTML、CSSの基礎知識
Javascriptの基礎知識
After Effectの使い方
35,123
受講生
386
受講レビュー
32
回答
4.8
講座評価
5
講座
디자인베이스는 누구나 쉽게 디자인을 배울 수 있도록 디자인 강좌를 만들고 있습니다.
저는 현업에서 UXUI 디자이너로 활동 중이며 입문자의 입장을 잘 알기 때문에 꼭 필요한 내용만 담아 강의를 제작합니다. 포토샵, 일러스트레이터뿐만 아니라 프로덕트 디자이너로서 알아야 할 다양한 툴과 코딩 지식을 갖추고 있습니다. 😊
- 인프런 수강생 3.1만 명 / 수강평 4.8점
- 실무 경력 8년차 디자이너 (스타트업 창업, 에이전시, 인하우스)
- 유튜브 구독자 8.1만 명
실무에서 바로 사용하실 수 있도록 정확한 내용과 양질의 강의를 제공하겠습니다. 📖
カリキュラム
全体
9件 ∙ (55分)
講座資料（こうぎしりょう）:
授業資料
講座掲載日:
最終更新日:
受講レビュー
全体
10件
4.6
10件の受講レビュー
dicahyunse受講レビュー 1
∙
平均評価 5.0
- Gichul Roh
受講レビュー 14
∙
平均評価 4.7
- 날아라못난
受講レビュー 4
∙
平均評価 5.0
- 테이
受講レビュー 20
∙
平均評価 4.8
￥4,035
designbaseの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![[React 2부] 고급 주제와 훅강의 썸네일](https://cdn.inflearn.com/public/courses/332123/cover/62407827-5375-47cf-91fa-4877bf72c139/332123-eng.png?f=avif&w=420)
![순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프강의 썸네일](https://cdn.inflearn.com/public/courses/333180/cover/26ede6df-032a-40f2-9670-f6748785eba5/333180.jpg?f=avif&w=420)
![[LottieFiles 공식] After Effects로 만드는 Lottie 애니메이션 (수료증 발급)강의 썸네일](https://cdn.inflearn.com/public/files/courses/338082/cover/01k0ra1r4y627eeazr0e855txg?f=avif&w=420)
![[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스강의 썸네일](https://cdn.inflearn.com/public/files/courses/332860/cover/01jnwb77yxra1hp8cm9hed0wnd?f=avif&w=420)
