Photoshopのタイムライン機能を使ってアニメーションを作成し、APNGやWebPアニメーションとして書き出す方法についてご紹介します。 #朝までフォトショ 私のセッションでは、Photoshopのタイムライン機能と、APNGやWebPアニメーションとして書き出す方法についてご紹介します✨ pic.twitter.com/ZMgH0bAJyY — Eri Matsushita 松下 絵梨 (@matsu_eri) June 22, 2023 タイムラインパネル「m_logo.psd」をPhotoshopで開き、メニューバーの「ウィンドウ」から「タイムライン」をクリックして、タイムラインパネルを表示します。 下向き矢印をクリックし、プルダウンメニューから「ビデオタイムラインを作成」を選択します。 矢印の左側にある「ビデオタイムラインを作成」ボタンをクリックします。 レイヤーごとに、タイム
1. WebPとは？Googleが開発している静止画像フォーマット です。 特徴としては、高圧縮率、アルファチャンネル可、アニメーション可能、と言ったところです。 アニメーションできる画像形式としては animated gif とか APNG とかもありますが、クオリティとファイルサイズと将来性の面で WebP が有利かなと思う次第です。 （主要なOS・ブラウザは対応している） 本記事では、アニメーション WebP の作り方を解説します。 2. 何でアニメーションを作ればいい？アニメーション制作ツールは何でもいいですが、最終的に「連番 PNG ファイル」に出力できる物を使ってください。 筆者は After Effects が良いと思います！ 3. 何で変換するの？「アニメ画像に変換する君」Microsoft Store でダウンロード(無料) ググると良く紹介されているツールですが、大きな
クックパッド デザイナーのよーた（@yotaszk）です。突然ですが、あなたは「Figma」にどんなイメージをもっていますか？ UIデザインツール？、プロトタイプングツール？・・・もしそのイメージだけに留まっているなら、めっちゃ勿体無い。めっちゃ勿体無いです（本当に勿体無いので2回）。 もちろん基本的な機能は、UIデザインやプロトタイピングです。ただし、Figma Communityのプラグインを活用することで、3Dデザイン・アニメーションなど、ハイクオリティなデザインを簡単につくれます。 このnoteでは、実際に「クックパッド」アプリに取り入れた知見をもとに、Figmaでアニメーションを制作する事例、作り方、なぜ入れたか3つをまとめます！ 事例：レシピ/つくれぽ投稿機能をまとめた「のせる」のお知らせベルアイコンFigmaのプラグインで作ったアニメーションはこちら。お知らせが来ると右上のポ
アニメーションWebPの作り方 - Qiita
先日調べたWebPにアニメーションを持たせることが出来るとわかったので試しに作ってみた。作る方法は限られているがGIFアニメより制約がな無い分使う機会は多いと感じた。以下にテストで作った手順をまとめる。 テストで使う動画は以前作った動画を使う。尺も短く8秒だからテスト素材には丁度よい尺の動画。この動画をアニメーションwebpに変換してみる。 手順 手順はとてもシンプル アニメーション連番PNGを用意。 アプリ「アニメ画像に変換する君」で変換。 まず連番PNG用意。今回はテストなので小さめにBlenderから直接960 x 430pxフレームレートは24fpsで書き出す。 次にMS Storeから「アニメ画像に変換する君」というアプリをインストール。名前はふざけているが使いやすく優秀なソフト。 アプリを開いて先程書き出したPNGをインポート。フレームレートを設定して「LINEアニメーションス
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PhotoshopでAPNGやWebPアニメーションを作ろう｜松下 絵梨
アニメーション WebP の作り方 | OPENSPHERE Inc. Blog
Figmaでここまで！？ゼロからはじめるUIアニメーションデザイン｜よーた / Yota Suzuki