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アニメーションス
Photoshopのタイムライン機能を使ってアニメーションを作成し、APNGやWebPアニメーションとして書き出す方法についてご紹介します。 #朝までフォトショ 私のセッションでは、Photoshopのタイムライン機能と、APNGやWebPアニメーションとして書き出す方法についてご紹介します✨ pic.twitter.com/ZMgH0bAJyY — Eri Matsushita 松下 絵梨 (@matsu_eri) June 22, 2023 タイムラインパネル「m_logo.psd」をPhotoshopで開き、メニューバーの「ウィンドウ」から「タイムライン」をクリックして、タイムラインパネルを表示します。 下向き矢印をクリックし、プルダウンメニューから「ビデオタイムラインを作成」を選択します。 矢印の左側にある「ビデオタイムラインを作成」ボタンをクリックします。 レイヤーごとに、タイム
APNGとはAnimated Portable Network Graphicsの略で、静止画連番ファイルをひとつのファイルに格納してパラパラ漫画のようにアニメーション再生を可能にするフォーマットです。 よく聞く代替フォーマットとしてGIFやWebPフォーマットもありますが、私たちはLINEスタンプの作成で馴染みのあるフォーマットなので今回はAPNGを紹介します。 APNGについて簡単にそのファイルの仕組みを説明します。APNGなどの静止画連番ファイルは、見た目はひとつのファイルにみえていてもその中身には、連番ファイルから変換した時の何十フレーム（何十枚もの静止画ファイル）が格納されています。実は、現在のデジタルシネマの映像もこの静止画連番ファルを再生する方式です。 APNGに変換できるソフトを紹介 現在、容易にAPNGファイルに変換できるアプリケーションは２種類あります。ひとつは「アニメ
という感じ。作ったことがない人からしたら？？？って感じになるかもしれないけど、実際はそんな難しい事ではないのでご安心を 書き出しファイルはAPNGまず書き出しファイルについてはAPNGという形式のファイルでないといけない。 APNGって聞きなれないけど、要はPNG画像を繋げてアニメーション化した、アニメーションPNGファイルの事。 自分は動くスタンプはGIFかと思っていたけど、違うらしい。このAPNG形式でないとアップロードできないので注意してください。 APNGの書き出し方法は、PNGの連番を「アニメ画像に変換する君」等のフリーソフトで変換する方法もあるが、CLIPSTUDIOなら直接APNGとして書き出せる。 ファイル→アニメーション書き出し→アニメーションスタンプ(APNG)で書き出しが出来る。 サイズは幅320×高さ270px以内 ファイルサイズに関しては320×270px以内。
こんにちは、 フロントエンドエンジニア坂本です。 今回は、いにしえのインターネットの演出を支え、今なお根強い支持を得ているGIFアニメーションについてお話させてください。 個人的には、簡単にブラウザで動く演出を作ることができたり、いろんな人がいろんなGIFアニメーションを作ったりしていて、コンテンツとしてGIFアニメがすごく好きなんです。 ただ、この子かなり癖が強い…。 ということで、そんな癖の強いGIFアニメーションとうまく付き合っていくための話をします。 GIFアニメーションを仕事の制作物として使用したいと考え始めている方に読んでいただきたいです。 GIFアニメーションとは ※一応お約束でGIFアニメーションの説明 概要 まず、GIFというのはPNGとかJPEGみたいな画像の形式のこと。 そして、GIFアニメーションはその名の通り、GIF形式の画像でアニメーションするやつ。 Wikip
はじめに アニメーションスタンプやアニメーション絵文字の制作は難しいイメージがありますが、実は静止画スタンプや絵文字を作ったことがある人であれば誰でも簡単に作れます。 今回は、クリエイターレベルがワンランク上がった(気になれる)、アニメーション制作方法についてご紹介します（筆者も初めての挑戦でした 汗）。 おすすめポイント ● 少し動かす（アニメーションさせる）程度であれば必要な画像点数は意外に少ない。 ● 特にクリスマスや年末年始といったシーズンで、静止画系よりも アニメーション系の売上が高い傾向にある。※ ● 申請数が多い静止画系よりも、アニメーション系がランキング上位を狙いやすいと言える。 近日中にリリース予定のアニメーション絵文字、そして、年末年始に備えてアニメーションの作り方を覚えておきましょう！ ※ この記事で、アニメーション系とは「アニメーション,ポップアップ,エフェクトスタ
Electron（エレクトロン）とは、ウェブ技術でデスクトップアプリケーションを作成できるテクノロジーです。HTMLとCSS、JavaScriptを使って開発し、WindowsとmacOSの両OSのアプリケーションを1つのコードから作ることができます。近年、注目度が高まっておりマイクロソフトやGitHubなど、有名企業も採用しています。 Electronエレクトロン製のアプリケーションはChromiumクロミウム（Chromeブラウザの元となるもの）とNode.jsノードジェイエスがランタイムとなっています。ウェブコンテンツをそのままアプリケーションとして動かしたり、デスクトップアプリケーションとしてブラウザだけで実現できない機能を組み込めるのが特徴です。 利用用途として、テキストエディターやユーティリティーソフト、デザインツールなどの小規模な使い方から、イントラネット内のクライアントツー
透過アニメーションの作り方 - 百合評
初めに,プレビュー.appなどで背景を透過させた画像を作成しておく。 --- 一枚のGIFを作る場合 (適切なパレットを生成) ffmpeg -i in.png -vf palettegen palette.png && ffmpeg -i in.png -i palette.png -filter_complex paletteuse out.gif ーーー 連番画像からGIFアニメを生成 (パレット生成) ffmpeg -i %d.png -vf palettegen palette.png && ffmpeg -f image2 -r 1 -i %d.png -i palette.png -filter_complex paletteuse out.gif 一コマンドで ffmpeg -f image2 -r 1 -i %d.png -filter_complex "split
こんにちは。クックパッドのデザイナーの三嶋です。 クックパッドでのローディングアニメの制作方法について今日は書きます。 もともと読み込みのときにはくるくると回るiOS標準のものを表示していました。クックパッドでは「毎日の料理を楽しみにする」ことの実現に注力しています。少しでもクックパッドのアプリに来てくれる時間にちょっとした楽しさを演出するために、オリジナルのローディングアニメを少し前から制作していました。 lottieやwebPなども検討したのですがアニメを作る際になかなか癖があることと、今回採用したのはiOSが動画として再生しやすいapngになります。LINEスタンプのアニメなどで使われている規格になります。拡張子が「.png」なので少し紛らわしいのが玉に瑕です。 ＜アニメの作り方＞１.Adobe Illustratorで必要なコマのパスを全部書く たとえば拡大すると下記のようなパスで
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アニメーション WebP の作り方 | OPENSPHERE Inc. Blog
Figmaでここまで！？ゼロからはじめるUIアニメーションデザイン｜よーた / Yota Suzuki
PhotoshopでAPNGやWebPアニメーションを作ろう｜松下 絵梨
APNGの作り方|アニメーションファイル作成アプリを紹介｜ユニコブログ®
ラインの動くスタンプを作って販売してみた！CLIPSTUDIOを使った作り方
「GIF重いね」の話 - 重すぎるGIFアニメーション- | 株式会社ニジボックス
実は簡単だった!!アニメーションの作り方をご紹介 : LINEスタンプ公式ブログ
最新版で学ぶElectron入門 - ウェブ技術でPCアプリを開発しよう - ICS MEDIA
ちょっとした楽しいを演出したい！ローディングアニメの作り方｜kaori mishima / みっしー@cookpad