本日は『スマホで出来る簡単なGIF画像の作り方』を紹介したいと思います。
文章と文章の間などに貼り付けてやると、ページ全体の雰囲気が変わり、ちょっと楽しい感じになったりしますよね。
記事の内容が、うっすくなっちゃった時なんかに活用するのもアリかなと思いマス☆ (^^)
スマホだけで簡単に出来ちゃいますので、ぜひ一度作ってみて下さい。
けっこう面白いですよ♪
スマホでGIF☆初級☆基礎編
GIF画像は自動ループアニメーションですので、まず元となる絵を描くところから始めます。
ネット上に落ちている画像なんかを使っても全然OKですが、せっかくなのでオリジナルでいきましょうよ♪簡単なモノで構いません。
私はとりあえず見本サンプル的な感じで、男の子の目玉をキョロキョロさせたGIF画像を作ってみますね。
イラストをスマホに取り込む方法としましては、カメラで撮影しても良いですし、セブンイレブンのコピー機でスキャンする事も出来ます。
30円かかりますが、カメラで撮影するよりもキレイです。
《使用アプリ》 セブン-イレブン マルチコピー
白黒でもイイんですけど、色を付けてポップな感じにしようと思います。
《使用アプリ》PicsArt Colorペイント
あ…少し線が荒れちゃいましたが(汗)
気にしない♪気にしない♪
これをトリミングして、｢お顔｣と｢黒目｣それぞれ1枚ずつの画像に分けて
｢お顔｣画像の大きさと位置を決めます。
《使用アプリ》写真コラージュ
エディット→比例→好きな大きさ→セーブ
白目の部分に黒目を乗っけますね。
｢お顔｣画像を背景設定にして、そこに｢黒目｣画像を追加。
その時に｢黒目｣を背景透明化します。
《使用アプリ》photolayers合成写真･背景透明化
背景画像を開く→完了→写真を追加→完了→切り取り(背景透明化)→完了→合成する→保存
｢黒目｣を白目にはめ込んで保存。
もう1枚、別バージョンも保存。
これで準備完了です。
あとは、この2枚のイラストを交互にループさせるだけ☆
作業現場はコチラになります。
www.bannerkoubou.com
ページの上から順に設定を入力していけば、誰でも簡単に作れる優しい仕様となっております。
■オプション設定(全体設定)■
①最大枚数･･･今回は2枚しか使わないので ｢10枚｣で設定。
②ループ･･･｢ループする｣で設定。
③点滅間隔･･･お好みの秒数でOKです。
■画像選択時の切り取り設定■
④画像の大きさは同じにしてあるので、｢画像選択時に切り取らない｣でOK。
⑤1枚目の画像を選択。
⑥2枚目の画像を選択。この時に各画像ごとにそれぞれの秒数を変えて設定する事も出来ます。
⑦最後に［GIFアニメを作る］ボタンをプッシュ♪
⑧完成です。
⑨ダウンロードしてスマホに保存。ブログなどに貼り付けましょう♪
シンプルなイラストでも
パターンや
カラー次第で
色々と遊べます v(^-^)ﾆｯｺﾘ
スマホでGIF☆応用編
次は男の子を歩かせてみようと思います。
用意したイラストは、｢お顔｣と新たに描いた｢身体｣の部分です。
｢身体｣は足を2パターン。今回は上半身は固定にして足だけを動かす感じにしてみます。
これを先ほどと同様 photolayersで｢お顔｣と｢身体｣を合成してくっつけて、2つの画像を準備。
で、これをまたバナー工房に持ち込んで、秒数を設定します。
出来ました☆
あれ？
なんかちょっと…変な歩き方になっちゃった(笑)
(・ω<) ﾃﾍﾍﾟﾛ♪
更に、男の子を右から左の方向へ歩かせてみようと思います。
男の子の身体全体をアプリで背景透明化して、バックに風景画像を使用。
男の子を右から左へ少しずつ動かした画像を保存していきます。
途中で背景パターンを変えると
こんな感じに。
画像は全部で15枚。
写真を使った合成画像は、容量が一気にふくれ上がってしまうので、あえてシンプルで小さめの背景素材を使いました。これで4.6MBです。
出来上がったPIG画像はバナー工房内で、再編集したりサイズを縮小する事も可能ですよ。
Twitterで公開する時は5MB以下。
ブログの場合は、おそらく10MB以下にした方が良さそうです。PCの場合は分かりませんが、スマホでやった時は11MBでアップロード出来ませんでしたので。
最初からサイズダウンしたい時は、予め使う画像を圧縮しておくのも一つの手ですね☆
《使用アプリ》
imguma.com
いかがだったでしょう (^^)
ちょっとだけ面倒な工程もありますが、ムズくはないと思います。
自分で描いた絵が動くというのは、結構楽しいですよ♪
色々なGIFアニメにチャレンジしてみて下さい。
