
PhotoshopスキルUPのための本番講座!
designbase
Photoshopの基礎講座とは違うスキルUP本番講座です! さまざまな例に従い、熟した後は、あなたの頭の中にあるデザインをビジュアル的に十分に表現することができます。
中級以上
Photoshop
これ以上Gif、Videoに頼る必要はありません。アフターエフェクトで制作したアニメーションをコードで出力し、JavaScriptでさまざまなインタラクションを実装する方法を学びます。あなたも魅力的なウェブサイトを作ることができます。
受講生 140名
難易度 初級
受講期間 12か月

学習した受講者のレビュー
5.0
Gichul Roh
短い講義ですが、あるのはすべてありますね。実務ではもう少し活用して書けばいいですよ。低夜デザイナーで始まったパブリッシャー、フロントアンド開発に移り、理解が容易になりました。しかし、UIデザイナーは知っておくべき開発コンセプトがあるはずです。 PDF文書のようなもので簡単な説明のようなものも添削すれば大丈夫そうです。
5.0
힘!
私にとって本当に役に立つ講義でした。 エペックもスクリプトもよく分からないデザイナーなのになんだか!私も作れるだろうな~という感じを受けます。先生ありがとうございます。
5.0
날아라못난
かなり速いですね、トリムパスするのかわかりませんが、ㅜ
アフターエフェクトで作業したアニメーションをLottieファイルに出力する方法
Lottieで出力したJSONファイルをJavaScript経由でWeb上でモーションを実装する方法
Airbnbで作成されたライブラリ
Lottieを始めましょう🎈
Airbnbで作られたホットなライブラリ、 Lottieをご存知ですか?

Lottieを使用すると、高品質のアニメーション
自由に作れます。
Lottieについて最初に紹介すると、動くアニメーションのデータ値をJSON形式で出力し、実際のコードでWebやアプリで適用できるようにする技術です。そのスキルを学ぶと、もうGif、Videoに頼らなくても動くアニメーションを実装できるようになります。
このレッスンでは、ロッティについて詳しく学ぶことができます。 Lotyを使うための環境を最初に設定し、アフターエフェクトで制作したアニメーションをBodymovinを介してコードに出力し、JavaScriptでさまざまなインタラクションを実装する方法を学びましょう。
そのリンクから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の使い方
31,435
受講生
338
受講レビュー
32
回答
4.8
講座評価
4
講座
デザインベースは、誰もが簡単にデザインを学べるようにデザイン講座を制作しています。
私は現役のUXUIデザイナーとして活動しており、初心者の立場をよく理解しているため、本当に必要な内容だけを凝縮して講義を制作しています。フォトショップやイラストレーターだけでなく、プロダクトデザイナーとして知っておくべき様々なツールやコーディングの知識も備えています。 😊
- インフラン受講生 3.1万人 / 受講評価 4.8点
- 実務経歴 8年目のデザイナー (スタートアップ創業、エージェンシー、インハウス)
- YouTube登録者 8.1万人
実務ですぐに活用できるよう、正確な内容と質の高い講義を提供いたします。📖
あなた(スタートアップ創業、エージェンシー、インハウス)- YouTube登録者数 8.1万人。実務ですぐに活用できるよう、正確な内容と質の高い講義を提供します。 📖
全体
9件 ∙ (55分)
講座資料(こうぎしりょう):
全体
12件
4.7
12件の受講レビュー
受講レビュー 14
∙
平均評価 4.7
受講レビュー 5
∙
平均評価 5.0
5
私にとって本当に役に立つ講義でした。 エペックもスクリプトもよく分からないデザイナーなのになんだか!私も作れるだろうな~という感じを受けます。先生ありがとうございます。
力になるスカンピョンありがとうございます!ㅎㅎㅎ
受講レビュー 1
∙
平均評価 5.0
受講レビュー 1
∙
平均評価 5.0
受講レビュー 1
∙
平均評価 5.0
¥4,190
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!