タグ別アーカイブ: 作り方

vine動画をgifに変換するサイトgifvine

VineをGIFに変換。簡単1分GIFアニメの作り方【GifVine】

VineをGIFに変換するサービスを紹介する。「GifVine」である。

【GifVine】http://www.gifvine.co/

 

【作成したGIF】https://gifvine-gifs.s3.amazonaws.com/hPwl1bruuOi

 

【使い方】

1.GifVineにアクセス。http://www.gifvine.co/

1.gifvine

 

2.Vineで任意の動画のURLをコピーをする。https://vine.co/v/hPwl1bruuOi

2.vineのURLをコピー

 

3.GifVineに戻り、フォームにVineのURLを貼り付ける。

3.GifVineのフォームにコピーしたURLを貼り付け

 

4.貼り付けた後、「Make this Vine a Gif!」をクリック

4.貼り付けた

 

5.完成。

5.GIFが完成

 

 

【今回作成したGIF】

 

作業時間自体は3分ほどで終了した。非常に簡単にGIFが作成できた。Vineでパラパラ漫画を作り、GIFに変換するなどして楽しんでいるユーザーもいるようだ。皆さんも試してみてはいかがだろうか。

youtube動画をGIFに変換する

youtubeをGIFに変換。簡単GIFアニメの作成サイト4つを紹介。

youtubeを個人的にGIFにしてみたい人もいるのではないか。今回は、youtubeをGIFアニメに変換するサイト4つご紹介しよう。

  1. 【GIFMAGAZINE】http://gif.gifmagazine.net/movietogif
  2. 【gifSOUP】http://gifsoup.com/
  3. 【Giflike】http://www.giflike.com/
  4. 【imgflip】https://imgflip.com/gifgenerator

youtubeを素材にGIFを作成してみるのはいかがだろうか。その後の発想やクリエイティブなイメージを高めるためにははまず自分でGIFを作りだしてみると良いだろう。 

1【GIFMAGAZINE】 http://gif.gifmagazine.net/movietogif

コチラにも詳しい操作方法を記載した。非常に簡単で最もおすすめである。

YouTubeの動画をGIFアニメに変換できるWEBサービス”GIFMAGAZINE”【GIFアニメの作り方】

【所要時間1分】

1.【GIFMAGAZINE】にアクセスする。

1.youtubeに投稿した動画をGIFに変換するWEBサービスGIFMAGAZINEにアクセスする。

 

2.youtubeのURLをコピーして、ペーストする。

2.youtubeのURLをコピーして、ペーストする。

 

3.youtube動画のGIFにしたい部分を指定する。

※100フレーム以内。fpsは1~15まで指定することが可能。(fpsとは1秒あたりのフレーム数のこと)

3.youtubeの動画でGIFにしたい部分を指定する。

 

4.GIFに変換したyoutube動画にタイトルをつける。

4.GIFに変換したyoutubeの動画にタイトルをつける。

 

5.URLが発行されるので、そのままTwitterやfacebookにシェアすることができる。右クリックでGIF画像を保存することもできる。

5.URLが発行されるのでGIF自体が必要な場合、画像として保存する。

 

 

 

 

2【gifSOUP】http://gifsoup.com/

1gifsoup
 
youtubeの動画をGIFに変換する。無料会員登録が煩わしいかもしれないが、非常に簡単にGIFが作成できる。右下には「gifSOUP」のテキストが入る。使い方はyoutubeの動画のURLをコピーしgifSOUPのフォームに貼り付けて「Create Gifs」をクリックする。サイト自体もGIFを閲覧できるようになっている。
2gifsoupの作成画面gifSOUPのGIF作成画面
 
 

3【Giflike】http://www.giflike.com/

3giflike
 
こちらもyoutubeの動画を簡単にGIFアニメに変換ができる。URLを入力するだけで、GIFにする範囲を指定するだけである。非常に簡単で、UIもシンプルでわかりやすい。
 
giflikeのgif作成画面GiflikeのGIF作成画面
 
 

4【imgflip】https://imgflip.com/gifgenerator

5imgflip

youtubeと動画ファイルのアップロードに対応している。スライダーで範囲を指定するだけで非常に簡単にGIFが作成できる。

6imgflipのgif作成画面ImgflipのGIF作成画面

 

いかがだったろうか。パラパラ漫画のようなGIFを作りたいという要望は多いが様々なクリエイティブなアウトプットするために、まずは既存の素晴らしい動画作品を元にしながらイメージを膨らませてみてはどうであろうか。

進捗どうですか?

進捗どうですか?Photoshopで10分、GIFアニメの作り方【位置テクニック】

Adobe Photoshop を用いて10分でできる「位置」を操作した簡単なアニメーションGIFの作成方法について説明する。画像素材さえ準備してしまえば10分ほどで完成してしまうので、GIF初心者のあなたも簡単にチャレンジできるのではないだろうか。単純に位置が移動するという表現は様々な発想の源だと思うので、読者もこの方法を用いてどんどんクリエイティブな作品作りに挑戦して欲しい。

 

 

今回作成したGIFはこちら。

弊社でもエンジニアに進捗を伺う時は、細心の優しさを持って。そう、細心の優しさを。
弊社でもエンジニアに進捗を伺う時は、細心の優しさを持って接する。そう、細心の優しさを表現しなければならない。

 

 

 

自分が欲しい物を創りだす。これぞクリエイターの鏡ではなかろうか。弊社には優秀なエンジニアが多数在籍している。彼らは忙しいのだ。そう、忙しいのだ。そんな中、どうしてもクリエイティブの修正やバグの修正等の進捗がどうなったのか気になってしまう。そう気になって眠れないのである。クライアントと板挟みの営業がエンジニアやデザイナーに最も聴きやすい状況を創りだすには。。

 

 

 

そう、彼らのコミュニケーションの橋渡しとなるアートが誕生した。

 

 

 

「バカねこ」、その表情からはクライアントから受けた厳しいお叱りを「前向きにチームで打開しよう!」という高い視座、そして大らかで広いこころを表現している。「猫のひたい」とはよく言ったものだ。額の狭さと心の広さを対比的に表現しているのである。そして、それを大きく包むオレンジの光。まるで1秒毎に新年を迎えたような、この高揚感。エンジニア、デザイナーもこれには「賀正。」と高らかに叫ぶであろう。しかし勝負はそこからである。クライアントはお怒りなのである。「進捗どうですか?」と、はんなりフォントで描き、ビジネスとしての厳しさを持って対峙するのである。そんなビジネスの生き様が凝縮されたGIFアートである。

 

 

 

 

【使用した素材】

1.猫の画像(tumblrで最もおばかな表情をした猫の画像をお借りした。)

これでもかというバカな顔の猫。
これでもかというバカな顔の猫。

http://funny-gifs-animated-gif-creator.tumblr.com/post/72077147099/gifmagazine-would-it-be-fantastic-to-experience

 

2.夕日の画像

哀愁が漂いすぎてヤバイ夕日の画像。the 黄昏。lalala
哀愁が漂いすぎてやばい夕日の画像。the 黄昏。lalala

http://kurokill.deviantart.com/art/Space-1-256188923

 

 

 

【作成手順】

1.photoshopを起動、「ファイル」、「新規」で幅300px、高さ300pxでキャンバスを作成する。

1.キャンパスサイズの設定

 

2.キャンバスが開かれる。300px × 300pxで2MBならtumblrにアップロードも可能だ。 

スクリーンショット 2014-01-15 0.03.11

 

3.用意した夕日の画像をドラッグしてキャンバスにドロップする。

2.素材画像をドラッグアンドドロップ

 

4.宇宙の画像を好みの大きさに拡大し、配置した。

3.適切なサイズにリサイズ

 

5.「選択ツール」で海と山を選択する。

4.夕日と海の断絶

 

6.海と山を切り取る。

5.海の切り取り

 

7.海と山を貼り付ける。

6.海の貼り付け

 

8.夕日とピッタリ合うように「海と山レイヤー」を移動させる。

7.海をいい位置に配置

9.バカねこ画像をドラッグ&ドロップをしてキャンパスに入れる。

8.バカ猫画像をドラッグアンドドロップ

 

10.バカねこのフェイスラインを「選択ツール」で選択する。 

9.バカ猫の顔を選択ツールで選択

 

11.バカねこの顔を切り取り、貼り付ける。

10.バカ猫の顔を切り取り貼り付け

 

12.バカねこの元の背景レイヤーを削除する。

11.バカ猫の背景レイヤーを削除

 

13.「バカねこレイヤー」の順序を「海と山レイヤー」より下にする。

12.バカ猫のレイヤーを海よりしたで夕日よりは上にする

 

14.夕日と馴染むように「バカねこレイヤー」のレイヤーを「輝度」に変える。

13.バカ猫のレイヤーを「輝度」に変更する

 

15.テキストツールで文字を入力し、「レイヤー効果」で境界線を太くする。

14.テキストツールで文字を記述、レイヤー効果で境界線を太く加工する

 

16.「進捗どうですか?レイヤー」と「バカねこレイヤー」をリンクさせる。

15.テキストレイヤーと猫レイヤーをリンクさせる

 

17.リンクさせた「進捗どうですか?バカねこレイヤー」の位置を「海と山レイヤー」に隠れる位置まで移動させる。

16.リンクしたレイヤーの位置を下に移動する。

 

18.「ウィンドウ」の「アニメーションウィンドウ」を起動する。

17.アニメーションのウィンドウを起動する

 

19.アニメーションウィンドウのフレームの間隔を「0.1秒」にする。

18.フレームの間隔を0.1秒にする

 

20.フレームのリピート回数を「無限」にする。

19.フレームのリピート回数を無限にする

 

21.アニメーションウィンドウの現在のフレームを「コピー」する。※アニメーションウィンドウのゴミ箱アイコンの左である。20.アニメーションウィンドウでフレームをコピーする

 

22.コピーしたフレームの「進捗どうですか?バカねこレイヤー」の位置を適切な位置まで移動する。

21コピーしたフレームの猫&テキストレイヤーの位置を適切な位置に移動させる。

 

23.アニメーションウィンドウの「トゥイーン」をクリックし、パラメーターの「位置」にチェックが入っているかを確認し、追加するフレームを「15」にして「OK」をクリックする。

22.アニメーションのトゥイーンをクリックしフレームを15枚追加する。位置パラメータにチェック

 

24. トゥイーンを実施するとこのようになる。

23.トゥイーンの実施後

 

25.バカねこが最上部まで到達した時に余韻を残すために、最後のフレームを5回ほどコピーする。24.余韻を残すために最後のフレームを5回ほどコピー

 

26.バカねこを山と海に沈めるため、最後のフレームの「進捗どうですか?バカねこレイヤー」の位置を適切な位置まで移動する。

25.海に返すために最後のフレームの猫テキストレイヤーの位置を移動させる。

 

27.「ファイル」、「Webおよびデバイス用に保存」をクリックする。26.WEB

 

28.保存形式で「GIF」を選択する。

27.GIFを選択

 

29.適切な名前を付けて保存。

28保存

 

 

 

30.完成。

ビジネスはドラマである。
ビジネスはドラマである。

 

 

いかがだったろうか?今回はGIFアニメの作り方だけでなく、そこにストーリーをもたせることにも注力をした。位置を移動するだけでこんなにこじつけられるのである。読者の皆様もあいた10分でGIFアニメ作りに挑戦してみてはいかがだろうか?

 

そしてエンジニア・デザイナーに進捗を確認するときにはこのGIFアニメでコミュニケーションしてみてはいかがだろうか。

 

 

earth

1分、写真10枚で作るパラパラマンガ。簡単GIF作品の作り方2つ

今回は1分でできる簡単GIFアニメ作品の作り方をご紹介したい。adobeのAfter Effectsで作成する方や、CINEMA 4Dなど高度なアプリケーションで動画を作成したあとjpegにレンダリングし直して作る方もいるが、今回は「誰でも簡単にできる」というところをフォーカスしてGIFの作り方を2つご紹介したい。

 

方法1.GIFMAGAZINE

方法 2.BANNER KOUBOU.com

 

 

手書きパラパラマンガに関しては以下に解説をしているので、ご覧頂けると幸いだ。

5分、写真7枚で作る。手書きパラパラ漫画GIF。【パラパラ漫画の作り方】

 

 

【方法1:パラパラ漫画GIFの作り方(GIFMAGAZINE Image to GIF作業手順)】

GIFアニメ好きが集まるGIF作品の投稿・共有サービスの「GIFMAGAZINE」では、jpg,png気にせず画像数枚を選択すればブラウザ上でパラパラ漫画GIFアニメを作ることができ、URLをブラウザで開いたままであれば、オフラインでもGIFアニメが作ることができる。「GIFMAGAZINE Image to GIF」 

1.GIFMAGAZINE Image to GIF にアクセスする。

1.GIFMAGAZINE Image to GIFにアクセスする。

 

 

2.任意の写真を、任意の枚数分「ファイルを選択」で選ぶ。

2.任意の写真を、任意の枚数分「ファイルを選択」で選ぶ。

 

3.「横幅(px)」「縦幅(px)」「ループの間隔(ms)ミリ秒」を数値入力する。

3.「横幅(px)」「縦幅(px)」「ループの間隔(ms)ミリ秒」を数値入力する。

 

4.「gifを生成する」をクリックをする。

4.「gifを生成する」をクリックをする。

 

5.「Clickしてダウンロード」をクリックする。

5.「Clickしてダウンロード」をクリックする。

 

【完成】

GIFMAGAZINE Image to GIFで制作したGIFアニメ

 

 

 

 

【方法2:パラパラ漫画GIFの作り方(BANNER KOUBOU.com作業手順)】

【所要時間】1分

【必要なもの】写真10枚(※最大20枚)

「宇宙の無料素材」と検索し、こちらのサイトhttp://www.yuguri.com/2013/02/2spacebg/から背景の宇宙画像と地球の画像をお借りした。photoshopでレイヤーを少しずつ動かしながら、12枚の地球が動く画像を用意した。こちらはiphoneに入っている写真や今まで書いた画像でも構わない。

3 5 7 9

【用いるサイト】BANNER KOUBOU.com様 http://www.bannerkoubou.com/anime/

【今回作成できたGIF】

幻想的な背景にうごめく地球が美しいGIF作品が感性した、このスピードから感じるキッチュさがまたGIFの良さを引き出しているのではないだろうか。

earth

それでは以下に作成方法をしめしていく。

 

【作成方法】

1.BANNER KOUBOU.com様にアクセスする http://www.bannerkoubou.com/anime/

BANNER KOUBOU.com様

BANNER KOUBOU.com様

非常にポップでかわいいサイトである。

 

2. 任意の写真を「ファイルを選択」でアップロードする。

こちらに任意枚数の写真をアップロードして終了
BANNER KOUBOU.com様

今回用意した12枚を全てアップロード完了した。

 

3.画像を選択できたら。「ループをする」を選択して、「画像を加工する」をクリックすれば完了である。

「画像を加工する」で終了となる。
「画像を加工する」で終了となる。

 

4.完成

earth

 

いかがだったであろうか?画像加工の初心者の方や画像を用意するのが難しいという方は「イラスト 素材 無料」と検索するなどで、フリーの素材を用いて作業の手間を省きながらGIFアートに挑戦するのはいかがだろうか?

 

【BANNER KOUBOU.com様】

http://www.bannerkoubou.com/anime/