タグ

gifに関するaoiasabaのブックマーク (12)

  • この発想はすごい!アニメーションgifの再生・停止をコントロールできるJavaScriptライブラリ -Freezeframe.js

    アニメーションgifの再生・停止をホバー・クリック・タップ、そしてボタン・アイコンでコントロールできる軽量JavaScriptライブラリを紹介します。 canvasに書き込むという発想がすごいですね。 通常アニメーションgifは自動再生されますが、このスクリプトを使用すると、ユーザーの操作をトリガーに再生・停止させることができます。 Freezeframe.js -GitHub Freezeframe.jsの特徴 Freezeframe.jsのデモ Freezeframe.jsの使い方 Freezeframe.jsの特徴 Freezeframe.jsではアニメーションgifの最初のフレームだけをcanvasに書き込み、gifの静止画バージョンを自動作成します。あとは、この静止画バージョンとアニメーションgifをトリガーで切り替え、アニメーションgifを再生・停止させます。 下記は、ホバーで

    この発想はすごい!アニメーションgifの再生・停止をコントロールできるJavaScriptライブラリ -Freezeframe.js
  • Animate CCで円に沿ってモーションさせたいが、やり方がわからない。

    /t5/animate%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A9%E3%83%A0-discussions/animate-cc%E3%81%A7%E5%86%86%E3%81%AB%E6%B2%BF%E3%81%A3%E3%81%A6%E3%83%A2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%95%E3%81%9B%E3%81%9F%E3%81%84%E3%81%8C-%E3%82%84%E3%82%8A%E6%96%B9%E3%81%8C%E3%82%8F%E3%81%8B%E3%82%89%E3%81%AA%E3%81%84/td-p/9627621 Dec 27, 2017 Dec 27, 2017

    Animate CCで円に沿ってモーションさせたいが、やり方がわからない。
  • これは簡単!ユーザーの流入率を高めるアニメーションGIFの作り方|LINE CREATIVE CENTER

    こんにちは、UI2チームのブログ担当です!普段は、LINEトラベルをメインに担当しております。今回皆さんに紹介したいと思っていますのはアニメーションGIFバナーについてです。 皆さん、最近SNSで流れているバナーの中でアニメーションGIFバナーが多くなったことに気づいてましたか? SNSに乗せるバナーとして、画像よりGIFの方がユーザーの流入率が高いという結果が出ましたので最近LINEでもアニメーションGIFを作り始めました。 ツールに詳しいデザイナーだけでなくもっと多い方に参考になれれば嬉しいと思いまして、フォトショップでの簡単なアニメーションGIF作り方を紹介させていただきます。方法は色々ありますが、今の時点ではフォトショップが一番便利ではないかと思います。 では、4/16〜5/15にコラボLINEスタンプを配信して好評だった、LINEトラベルと心くばりペンギンの告知バナーをベースに作

    これは簡単!ユーザーの流入率を高めるアニメーションGIFの作り方|LINE CREATIVE CENTER
    aoiasaba
    aoiasaba 2019/06/13
    GIFアニメーション
  • スライドへのアニメーション GIF の追加 - Microsoft サポート

    他の画像ファイルの操作と同じように、PowerPoint スライドにアニメーション GIF (またはミーム)を追加することができます。 お使いのコンピューターのハード ディスクまたは OneDrive に保存されている GIF ファイルを挿入することができます。 アニメーション GIF を追加するスライドを選びます。 リボンの [挿入] タブで [画像] をクリックします。 [ 画像の挿入元] ダイアログ ボックスで、追加するアニメーション GIF の場所に移動します。 ファイルを選択し、[ 挿入] をクリックします。 アニメーションを再生するには、リボンの [スライド ショー] タブを選択し、[スライド ショーの開始] グループで [現在のスライドから] を選択します。 Web 上のアニメーション GIF を検索します。 PowerPoint のバージョンに応じて、[オンライン画像の挿入

    スライドへのアニメーション GIF の追加 - Microsoft サポート
  • Gyazoへようこそ : スクリーンショットの瞬間共有

    Gyazoを使えば、スクリーンショットを撮ったり、ビデオを録画して、すぐにアップロードできます。どのアプリでも、新しいリンクを貼り付けるだけで共有できます。

    Gyazoへようこそ : スクリーンショットの瞬間共有
  • GIF(ジフ)アニメーションを無料で作成できるサービス10選

    GIFアニメーションは、複数の静止画をひとつの動画のようにコマ送りで表示し、動いているように見せる画像のことです。動きがある分、静止画よりも直感的にわかりやすく伝えられるのがGIFアニメーションのメリット。 作成が難しそうに感じるGIFアニメーションですが、実はツールやWebサービスを使えば誰でも簡単に作成ができます。今回は、誰でも簡単にGIFアニメーションを無料で作成できるツールやWebサービスをまとめて紹介します。 目次 そもそもGIF(ジフ)とは GIF(ジフ)は動画ほどなめらかな動きを表現できない ## GIF(ジフ)を利用するメリット GIF(ジフ)を使う時はファイルサイズに注意しよう 動画からGIF(ジフ)アニメーションを作成できるサービス YouTubeの動画を簡単にGIFアニメーションに出来る「gifs」 写真・動画からGIF(ジフ)アニメーションが作れる「PicGIF L

    GIF(ジフ)アニメーションを無料で作成できるサービス10選
    aoiasaba
    aoiasaba 2015/11/30
  • Animated GIF Maker - Make GIFs from Images or Videos

    GIFMaker.me Frequently Asked Questions 1. My images are not uploaded successfully. Please resize your images to smaller dimensions and upload them again. If your images are uploaded successfully, you'll see the image thumbnails under the "Upload Images" button. If you encountered the "upload error 500" message on GIFMaker.me, it means that your files are not uploaded successfully, or can't be proc

    aoiasaba
    aoiasaba 2015/11/22
  • ほぼ劣化なしでJPG/GIF/PNG/SVG画像を超軽量化してくれる「Compressor.io」は要ブックマーク!|男子ハック

    Webサービスほぼ劣化なしでJPG/GIF/PNG/SVG画像を超軽量化してくれる「Compressor.io」は要ブックマーク!2014年6月13日1 @JUNP_Nです。オンラインで利用することができる無料のWebサービス「Compressor.io」はJPG、GIF、PNG、SVGの画像をビックリするほど軽量化してくれます。面倒なアカウント登録などもなしで、画像をドラッグ&ドロップだけで使えて超便利! 無料で多様な画像ファイルに対応しているのが嬉しい画像軽量化サービス!Compressor.io - optimize and compress your images and photos オフラインではJPEGの画像軽量化には「JPEG mini」を利用、それ以外の画像については「ImageOptim」を利用していたのですが、これだけではGIF動画の軽量化がもの凄く難しい。 関連:1

    ほぼ劣化なしでJPG/GIF/PNG/SVG画像を超軽量化してくれる「Compressor.io」は要ブックマーク!|男子ハック
  • 超簡単にシネマグラフ(一部分だけが動いているgif画像)を作成できるアプリ「Cinemagram」が凄い!

    Cinemagram – create fun, short videos. アプリを開くと簡単なチュートリアルが。 仕組みとしては、まず短い動画を撮影→アニメーションにする部分を選択→書き出し、と言う感じ。って言うかそれだけ。 渋谷のスクランブル交差点で実際にやってみました。まずは2秒ほどの動画を撮影します。手ブレしないように注意。 すると、自動でアプリが動いている部分を判断して勝手にシネマグラフを作ってくれます。エフェクトを加えれば取りあえず完成しちゃいます。 これでも十分凄いのですが、動いている部分を調整したい時は「EDIT」をタップしましょう。 こちらがマスクの編集画面。適宜、画像の動かしたい部分にマスクをかけてあげましょう。マスク部分は黒く半透明で表示されます。 一番右「loop」をオンにすると、逆再生の動画を付け加えたgif画像が作成されます:) PLAYボタンで画像のできを確

    超簡単にシネマグラフ(一部分だけが動いているgif画像)を作成できるアプリ「Cinemagram」が凄い!
  • アニメGIFに縦線2本を入れるだけで3D化できることが話題に | Token Spoken

    アニメGIFに何か縦線を入れるだけで、アニメGIFを3D化出来ると言う信じられない話が、日欧米で話題になっておりました。 それでは早速12連発でどうぞ! 1 2 3 4 5 6 7 8 9 10 11 12 縦線の奥行きでの位置(Y)を決めて、その前後に物をはみ出させたり引っ込めたりすることによって、人間の目があたかも当に奥行きがあるかのように錯覚してしまうんですねぇ。 いやしかし、我々人間の脳と、こんな事を思いつく方が素晴らしい! 普段は欧米の最先端テクノロジー業界情報を配信しておりますので、twitterやFacebookページ、Google+で是非フォローをお待ちしております。 また、記事の買い取り行ってますのでKataribeも是非よろしくお願いします! GIFs: 3D pictures become possible with two straight lines

    アニメGIFに縦線2本を入れるだけで3D化できることが話題に | Token Spoken
  • 【メモ】photoshop webおよびデバイス用に保存で強制終了エラー | All Japan Step Exercise Association

    Photoshopでgif画像を作成しようとすると何故かエラーが出る。 症状としてはこう webおよびデバイス用に保存を選択してダイアログボックスを表示 プルダウンメニューよりgifを選択 カラーテーブルが表示されず、ダイアログボックス内のステータスバーは途中で止まったまま。一応保存するところまで操作でき、指定フォルダにgifファイルは作られるが、正しく作成されておらず表示できない。 ダイアログボックスの完了またはキャンセルをクリックすると、「問題が発生したため、Adobe Photoshop を終了します。ご不便をおかけして申し訳ありません。」と表示され強制 終了 動作環境はWindows 7?64bit、Photoshop CS4 ver 11.0 ソフトの再インストール含め色々試した結果、どうやらワークスペースに置いていたkulerが原因のよう。 この表示を切ればとりあえずエラーは起

    aoiasaba
    aoiasaba 2014/01/31
    エラーに強いサイト!
  • 透明GIF画像の書き出し方法 - シンプルシンプルデザイン Fireworks

    たとえば、白文字が混じった画像を透明GIFにする場合、背景だけでなく白文字までが透明化されてしまう。 ずっと悩んでいたがようやく解決できたので覚え書き。 形式の選択項目から「GIF」を選択 「すべての色を割り付け」を選択 「インデックス透明」を選択 背景色と馴染ませる必要がある場合、背景色を選択する。 「すべての色を割り付け」にすべきところを、いつも「アダプティブ」を選択していたため、うまいように透明GIFをコントロールすることができなかったのだ。なるほど〜。

    aoiasaba
    aoiasaba 2011/10/18
    透過GIF
  • 1