Sponsored Link

 

今日完成させたGIFアニメ画像

広告バナーGIFの作り方

作成した画像

広告GIF作り方

<<作業工程>>

STEP1.『Pixlr Editor』でスライドさせる画像を全て作成する(15分)

STEP2.『BANNER KOUBOU.com』でGIF画像を作る(5分)

STEP3.『EZGIF.COM』でGIF画像のファイルサイズの圧縮をする(2分)


 

最初に伝えたい宣伝文句を考えます。

例:「この夏、あの人が帰ってくる!8月15日から動画配信、乞うご期待!!!」

今回は「宣伝の為のGIFアニメーションをWEB上で簡単に作る方法」とします。

背景は80万点以上の超有料級の画像がライセンスフリーで商用利用可能で使用できるという最もクオリティが高い無料画像素材サイトの1つ『Pixabay.com』で気に入った画像を選択しマウスを右クリックして「画像アドレスをコピー(ブラウザがGoogle Chromeの場合)」をしてPixlr Editorのレイヤーに追加していきます。

宣伝文句を1文字づつ、もしくは単語づつに細切れにして、単語ごとのイメージに合った背景の上に文字を追加していき7~30枚(上限)程度の連続してスライドさせる画像を作ります。

今回はフレーズごとに14枚の画像を作成したので、1枚づつ「1.jpg」、「2.jpg」、「3.jpg」….「14.jpg」といった感じでPCに保存します。


『<a href=”http://www.bannerkoubou.com”>BANNER KOUBOU.com</a>』を開き、メニューバーから「GIFアニメ/動く画像」を選択します。

1~30枚の画像をアップロードできるので、今回は14枚の画像をアップロードします。

事前に順番が分からなくならないように「1.jpg」「2.jpg」と保存しておく必要があります。

画像を全てアップロードし終えたら、画像がスライドしていく秒数を決める「点滅間隔」を選択します。

どのようなGIF画像にも対応しテンポよくまたストレスなくGIFアニメが見れてまた文字が読めるスピードとして「0.5秒」をお勧めします。

「ループ設定」とは、GIFアニメが表示されている間は永遠に繰り返すか1度表示されたら停止するかの選択ですが、これは「ループする(繰り返し再生/推奨)」を選択します。

最後に「GIFアニメを作成する」ボタンをクリックして、GIFアニメを出力します。

広告バナーGIFの作り方

このように出力されますので「ダウンロード」ボタンを押すか、マウスを右クリックして「画像アドレスをコピー」します。

 

広告GIF作り方

ここでの作業は「Optimization method(see description at bottom of the page)」のスクロールダウンメニューから圧縮レベルを選択するのみです。

「Loossy GIF level 30(slight)」「Loossy GIF level 80(medium)」「Loossy GIF level 140(heavy)」の3つから選択できますが、

どうせ圧縮するならばしっかりと圧縮したいものですので、「Loossy GIF level 140(heavy)」を選択することを推奨します。

準備が出来たら「Optimize it!」ボタンをクリックして圧縮されたGIF画像を出力します。

広告GIF作り方

「save」のアイコンをクリックしてPCに保存することが出来ますが、任意の名前を設定できないために、
マウスを右クリックして「名前を付けて画像を保存」で分かり易い任意の名前を付けてPCの任意の場所に保存することを推奨します。

あとは、Wordpressなど目的のメディアにアップロードしてWEB上での表示を確認して完成です。





📹合わせて観たい

ViVidWood(ヴィヴィドウッズ)デザイン&画像制作 完全動画マニュアル
ヴィジュアルコンテンツの重要性
デザイン力を高める方法
最も簡単にプロ級画像が創れる黄金の方程式
魅力的なフリーフォントをPCに追加しよう
フォントでロゴをデザインしよう
PNG画像で絵を創りだす
自由変形と自由歪ませをマスターしよう
特定の部分だけに色を付けよう
ガラス、銃弾、炎を表現しよう
写真をアニメやコミック風に変えよう
文字の大きさや位置を変える
画像に本のタイトル風の帯を付けよう
クリスタルな表現方法を学ぼう


画像を重ね合わせる
ポップな画像を創ろう
破く表現方法
ホラー風の画像を創ろう
画像編集の基礎を始めから丁寧に
画像編集の基礎を初めから丁寧に
画像編集の基礎
画像編集の基礎
画像編集の基礎
画像編集の基礎を始めから丁寧に
画像編集の基礎を始めから丁寧に
画像編集の基礎を始めから丁寧に
画像編集の基礎
写真加工 やり方
Photoshop vs pixlr
youtube サムネイル画像 作り方
サイトのヘッダー画像を作る
Wordpress 記事 アイキャッチ画像 作り方 サイズ
バナー作成方法
WoodsPress(ウッズプレス)ワードプレスWEBサイト作成完全動画マニュアル
WoodsEquip(ウッズイクイップ)WEB制作の為の便利なツールと必要知識
WoodsTalk(ウッズトーク)


☥IBORCを応援して下さい。