1. WebPとは？Googleが開発している静止画像フォーマット です。 特徴としては、高圧縮率、アルファチャンネル可、アニメーション可能、と言ったところです。 アニメーションできる画像形式としては animated gif とか APNG とかもありますが、クオリティとファイルサイズと将来性の面で WebP が有利かなと思う次第です。 （主要なOS・ブラウザは対応している） 本記事では、アニメーション WebP の作り方を解説します。 2. 何でアニメーションを作ればいい？アニメーション制作ツールは何でもいいですが、最終的に「連番 PNG ファイル」に出力できる物を使ってください。 筆者は After Effects が良いと思います！ 3. 何で変換するの？「アニメ画像に変換する君」Microsoft Store でダウンロード(無料) ググると良く紹介されているツールですが、大きな
Photoshopのタイムライン機能を使ってアニメーションを作成し、APNGやWebPアニメーションとして書き出す方法についてご紹介します。 #朝までフォトショ 私のセッションでは、Photoshopのタイムライン機能と、APNGやWebPアニメーションとして書き出す方法についてご紹介します✨ pic.twitter.com/ZMgH0bAJyY — Eri Matsushita 松下 絵梨 (@matsu_eri) June 22, 2023 タイムラインパネル「m_logo.psd」をPhotoshopで開き、メニューバーの「ウィンドウ」から「タイムライン」をクリックして、タイムラインパネルを表示します。 下向き矢印をクリックし、プルダウンメニューから「ビデオタイムラインを作成」を選択します。 矢印の左側にある「ビデオタイムラインを作成」ボタンをクリックします。 レイヤーごとに、タイム
クックパッド デザイナーのよーた（@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ページを開く
アニメーション WebP の作り方 | OPENSPHERE Inc. Blog
PhotoshopでAPNGやWebPアニメーションを作ろう｜松下 絵梨
Figmaでここまで！？ゼロからはじめるUIアニメーションデザイン｜よーた / Yota Suzuki