- 18
- 35 743
まつえりデザインTips
เข้าร่วมเมื่อ 31 ธ.ค. 2020
Web/UIデザイナーの松下絵梨が、デザインにまつわるさまざまなTipsをお届けします。
Phase Japan Meeting 01 - アニメーションツールPhase日本語版リリース記念イベント
2024/08/24(土)に開催した、アニメーションツールPhase日本語版リリース記念イベントのアーカイブ動画です。
tsukiakari.connpass.com/event/328605/
▼目次
0:00:00 - オープニング
0:03:53 - Phaseの基本操作
0:12:04 - パスのトリミング(「チャットボックス」)
0:22:07 - Figmaで作成したデザインをエクスポート
0:23:12 - マスクとモーションパス(「猫と魚」)
0:28:51 - パスのトリミングとモーションパス応用(「葉っぱニョキニョキ」)
0:41:29 - 猫のアニメーション:Phaseでアニメーション作成編
0:54:54 - 猫のアニメーション:実装編
1:11:43 - FAQ
1:15:36 - スクロールに連動するアニメーション
1:28:09 - エンディング
■Phase公式サイト
www.phase.com/ja-JP
■Phaseアカウント登録
app.phase.com/
■Phaseアカウントの作成方法
x.com/matsu_eri/status/1827152056110743757
■イベントページ
※Xなどから直接TH-camの視聴URLをクリックしてご覧くださっている方へ※
Phaseファイルや補足等のフォローアップを受け取るには、下記connpassページから20:30までにお申し込みが必要です。
tsukiakari.connpass.com/event/328605/
■アンケート
イベント終了後にご回答いただくと、特典としてコーディングファイルがダウンロードできます。
bit.ly/4fXJa00
■登壇者
松下 絵梨(Matsushita Eri)x.com/matsu_eri
長谷川 喜洋(Hasegwa Yoshihiro)x.com/hiro_ghap1
池原 健治(Ikehara Kenji)x.com/kenji_clown5
■Phase Japan 公式Instagram
phase_japan
■Phaseコミュニティ
community.phase.com/
tsukiakari.connpass.com/event/328605/
▼目次
0:00:00 - オープニング
0:03:53 - Phaseの基本操作
0:12:04 - パスのトリミング(「チャットボックス」)
0:22:07 - Figmaで作成したデザインをエクスポート
0:23:12 - マスクとモーションパス(「猫と魚」)
0:28:51 - パスのトリミングとモーションパス応用(「葉っぱニョキニョキ」)
0:41:29 - 猫のアニメーション:Phaseでアニメーション作成編
0:54:54 - 猫のアニメーション:実装編
1:11:43 - FAQ
1:15:36 - スクロールに連動するアニメーション
1:28:09 - エンディング
■Phase公式サイト
www.phase.com/ja-JP
■Phaseアカウント登録
app.phase.com/
■Phaseアカウントの作成方法
x.com/matsu_eri/status/1827152056110743757
■イベントページ
※Xなどから直接TH-camの視聴URLをクリックしてご覧くださっている方へ※
Phaseファイルや補足等のフォローアップを受け取るには、下記connpassページから20:30までにお申し込みが必要です。
tsukiakari.connpass.com/event/328605/
■アンケート
イベント終了後にご回答いただくと、特典としてコーディングファイルがダウンロードできます。
bit.ly/4fXJa00
■登壇者
松下 絵梨(Matsushita Eri)x.com/matsu_eri
長谷川 喜洋(Hasegwa Yoshihiro)x.com/hiro_ghap1
池原 健治(Ikehara Kenji)x.com/kenji_clown5
■Phase Japan 公式Instagram
phase_japan
■Phaseコミュニティ
community.phase.com/
มุมมอง: 318
วีดีโอ
LottieFilesを使ってみよう!ローディングアニメーション編
มุมมอง 7204 หลายเดือนก่อน
2024/06/28(金)に開催された「LottieFiles Meeting Osaka 01」のアーカイブ動画です。 tsukiakari.connpass.com/event/319738/ Figmaのスマートアニメート機能で作成したアニメーションを、 プラグイン「LottieFiles for Figma」で書き出し、実装するワークフローについて解説します。 ▼目次 0:00:00 - オープニング 0:00:15 - Lottieとは?LottieFilesとは? 0:03:01 - デザイン編 0:06:40 - スマートアニメート 0:09:19 - 「RotatingCircle」 0:15:10 - 「PulsingCircle」 0:20:41 - 「ShoppingBag」 0:31:08 - FigmaからLottieFilesに書き出し 0:35:25 -...
Figmaの2023年新機能を知ろう / Friends of Figma Osaka #02
มุมมอง 1934 หลายเดือนก่อน
Figmaの2023年新機能を知ろう / Friends of Figma Osaka #02
Figmaの2023年新機能を知ろう/Friends of Figma Osaka #02
มุมมอง 3996 หลายเดือนก่อน
2023年8月9日に開催した、Figma公式コミュニティ Friends of Figma Osakaの第2回目の勉強会&交流会 「Friends of Figma Osaka #02」のアーカイブ動画です。 friends.figma.com/events/details/figma-osaka-presents-friends-of-figma-osaka-02/ 目次: 00:00 オープニング 00:03 フォントプレビュー 01:01 変数(Variables) 05:02 間隔:自動 11:03 コンテナーに合わせて拡大 14:41 折り返し 16:55 最小サイズ・最大サイズ 22:20 バリアブルモード 26:25 高度なプロトタイプ 34:16 Figma for VS Code 出演: 松下 絵梨 x.com/matsu_eri 虎野 とも x.com/toran...
Figmaの基本(Figma Basics 日本語版)をさわってみよう
มุมมอง 15Kปีที่แล้ว
Figmaの公式チュートリアル「Figma Basics」の日本語版を一緒に触りながら、Figmaの8つの特徴について知りましょう! ▼Figmaファイル www.figma.com/community/file/1228577958737472070 ▼目次 00:00 オープニング 00:28 作業の準備 04:38 言語設定を日本語にする 06:40 1.Frames / フレーム 12:22 2.Constraints / 制約 21:01 3.Components / コンポーネント 37:24 4.Styles / カラースタイル・テキストスタイル 43:07 5.Smart Selection / スマートセレクション 47:39 6.Exporting / エクスポート(書き出し) 52:26 7.Commenting / コメント 53:48 8.Sharing /...
Adobe XDでバナーをつくろう! - Adobe XD ユーザーグループ大阪 vol.14 #01
มุมมอง 590ปีที่แล้ว
2023/03/04(土)に大阪で開催した「Adobe XD ユーザーグループ大阪 vol.14」のアーカイブ動画です。 xdstudy-osaka.connpass.com/event/274846/ 話し手:松下 絵梨( matsu_eri ) 聞き手:藤次 夏月( KazukiWeb ) ▼目次 00:00 オープニング 00:22 ファイルの新規作成 06:07 パスの編集 09:42 画像の配置 11:39 カラーパレットの作成(プラグイン「Color Blender」) 18:22 ストライプ模様(リピートグリッド) 24:30 タイトル文字(パディングとスタック) 32:42 ハートの作成(多角形ツール) 35:55 書き出し ▼素材(写真)のダウンロード bit.ly/3ZwErcX ▼#02「Figmaでバナーをつくろ...
Figmaでバナーをつくろう! - Adobe XD ユーザーグループ大阪 vol.14 #02
มุมมอง 3.7Kปีที่แล้ว
▼目次 00:00 オープニング 00:29 チームの新規作成 02:40 ファイルの新規作成 02:55 フレームの作成 07:05 画像の配置(プラグイン「Unsplash」) 13:58 画像の色調補正 17:41 グラデーションマスク 24:26 流体シェイプの作成(プラグイン「Blobs」) 28:03 タイトル文字 30:58 波線の描画(プラグイン「Wave & Curve」) 33:44 矢印ツール 35:56 オートレイアウト 42:25 多角形ツール 45:01 ドロップシャドウ 48:15 書き出し ▼#01「Adobe XDでバナーをつくろう!」 th-cam.com/video/Nfhi6yTIZfc/w-d-xo.html 2023/03/04(土)に大阪で開催したAdobe XD ユーザーグループ大阪 vol.14のセッションのアーカイブ動画です。 xd...
After Effectsで書き出したLottieをXDに読み込む方法
มุมมอง 2.2K3 ปีที่แล้ว
2021年10月のアップデートにより、Adobe XDにLottieファイルが読み込めるようになり、XD上でよりリッチなアニメーション表現が可能になりました。 手軽に、LottieFilesというサイトからダウンロードしたLottieファイルをXDに読み込む方法や、 After Effectsからプラグイン「Bodymovin」を使ってLottieファイルを書き出す方法を解説します。 出演: 松下 絵梨 松川 睦
After Effects基本操作/テキストアニメーション【Webクリエイターに学ぶ#02】
มุมมอง 3923 ปีที่แล้ว
まつえり×Webクリエイターシリーズ第二弾。 映像クリエイターの杉山 圭司さんに、After Effects基本操作について教えてもらいました! ■内容 00:00 オープニング 01:24 本日の完成形(サンプル)の確認 02:15 コンポジションの作成 07:05 テキストの簡易エフェクト 16:38 シェイプの描画 19:25 線幅のキーフレームアニメーション 23:50 映像を書き出してみよう ■出演者 ・杉山 圭司(話し手) 合同会社PALPLAY/映像クリエイター ・松下 絵梨(聞き手) Web/UIデザイナー Twitter: matsu_eri ★この動画は、2021年11月13日開催の、下記イベントのスピンオフ企画として作成しました CSS Nite in Osaka, vol.56「After Effects × Motion Graphic...
【Adobe XD Tips】多角形ツールでもっと簡単!XDでダイヤを描く方法
มุมมอง 1173 ปีที่แล้ว
方法1: 多角形ツールを選択し、クリック&ドラッグで描画している最中に、キーボードの上向き矢印を押して辺の数を4にする 方法2: 多角形ツールで三角形を描画し、プロパティインスペクターのコーナーカウントに「4」と入力してreturn/enterキーを押す
【Adobe XD Tips】XDでダイヤを描く方法
มุมมอง 1353 ปีที่แล้ว
1.楕円形を描画 2.選択ツールでダブルクリックしてアンカーポイントを表示 3.4つのアンカーポイントをダブルクリックして方向線を削除 4.バウンディングボックスのハンドルをドラッグして変形
【Photoshop Tips】新聞の写真風 レトロな網点加工
มุมมอง 3.9K4 ปีที่แล้ว
Photoshopの「ハーフトーンパターン」を使用し、写真を新聞のように網点で表現されたレトロな画像に加工する方法を説明します。 ▼チャプター 00:00 新聞の写真風 レトロな網点加工 OP 00:07 新規ドキュメントを作成する 00:20 写真を配置する 00:36 新規レイヤーを作成しグレーで塗りつぶす 01:08 描画色を黒にする 01:16 フィルターギャラリ→ハーフトーンパターン 01:39 フィルターギャラリ→ぎざぎざのエッジ 02:04 描画モードを「ハードミックス」にする 02:13 グラデーションマップ 02:56 新聞の写真風 レトロな網点加工の完成 03:32 写真の差し替え ▼デモで使用した画像素材(Pixabay) bit.ly/3onMIND
【Photoshop Tips】レイヤースタイルを使った版ずれ文字の作り方(テロップつき)
มุมมอง 3K4 ปีที่แล้ว
【Photoshop Tips】レイヤースタイルを使った版ずれ文字の作り方(テロップつき)
【Illustrator Tips】アピアランスを使った版ずれ文字の作り方(テロップつき)
มุมมอง 1.4K4 ปีที่แล้ว
【Illustrator Tips】アピアランスを使った版ずれ文字の作り方(テロップつき)
【Adobe XD Tips】背景が透けて見える無限ループテキストアニメーションの作り方(テロップつき)
มุมมอง 2.4K4 ปีที่แล้ว
【Adobe XD Tips】背景が透けて見える無限ループテキストアニメーションの作り方(テロップつき)