スポンサーリンク

 

この記事を書いた人 ーWRITERー

原宿の美容室でフリーランスとして働いています。美容師歴12年。薬剤やヘアケアに関する知識が豊富。ショート〜ボブのパーマスタイルが得意です。丁寧なカウンセリングが信条。美意識の高い大人の女性からの評価をいただいています。
詳しいプロフィールはこちらから

シンバカズヤ

 

こんにちは。シンバです。

今日は少し趣向を変えて、ブログに関してのお話です。

最近こういうやつ、

とかこれみたいな、

いわゆる「動く」バナー画像やアイキャッチ画像の作り方を聞かれたので書いてみます。

基本的にはぜんぶiPhoneで完結します。

慣れてしまえば簡単に作れるのでぜひお試しを。

ただし、僕のブログ環境はWordPressです。他のブログサービスなどでは動作の保証ができないので悪しからず・・・。

使うのはこちらのアプリ

アドビのSpark PostというアプリとImgPlayという2つです。

たぶんこれじゃなくても作れるけど、僕はこの2つで作っています。

本当に両方とも便利で、無料なのが嘘みたいなアプリです。

 

まれに他のアプリも使いますが、画像の作成は基本これだけです。

僕はiPhoneなのでAndroidで同様のアプリがあるかはわからないのですが・・・

ちなみに同じ名前のブラウザ版のサービスがAdobeにあるのでそちらでもいいのですが、なぜかアプリの方が使い勝手は格段にいいです。

上記のSparkPostで作ったアニメーション(mp4)を2つ目のImgPlayでGIFに変換する、言葉にするとこれだけなんです。

それでは以下に自分が作成する時の手順を説明していきます。

①使用する画像素材の用意

これはあってもなくてもいいのですが、僕は大体用意します。

最悪なければアプリ内の画像でもいいですし、ご自身で撮った写真があればそれで大丈夫です。

ただ僕ばだいたいフリー素材のサイトを利用します。

よく使うのはほとんどここ。

無料の会員登録をすると使えます。

ただし無料会員だと1日に検索の回数やダウンロードできる枚数に限りがあります。

なので有料会員枠もあって、有料会員になるとその制限が外れます。

まぁこの辺はそれぞれですね。

数が少なければ無料でも全然いけます。

話がそれましが、作りたい画像やバナーの内容に合わせて素材を探してダウンロードします。

②SparkPostでつくっていきます

まずはログイン

まずダウンロードして開くとこうなります。

Banarcreate2

ログインしないと使えない仕様なので、お好みの方法でログインしましょう。

FacebookかGoogleアカウントがあれば楽チンです。

ちないにAdobeのアカウントがある方はそちらでもログインできます。

Banarcreate3

Adobeでログインする場合はこんな画面になるので、こちらからアドレスとパスワード入れてログインします。

Banarcreate1

使い始める時にはチュートリアルが出ます。

全部英語なんで分かる方はざっと見ると使い方がなんとなくわかります。

いざ画像メイク!

チュートリアル終わるとこんな画面になります。

左下のTemplatesってところから作ってもいいのですが、今回は真ん中の+マークのところから作成していきます。

Banarcreate16

するとこんな画面になりますので、基本は矢印で示しているところをタップして使いたい画像を選んでいきます。

この辺はよくある画像加工アプリと同じですね。

Banarcreate17

こんな感じで選んでいきます。

Banarcreate6

そして画像を選ぶと最初にサイズを選ぶことになります。

このサイズはかなりたくさんあって、何に使うかによって最適なサイズを選びやすいようになっているので用途に応じて色々試してみてください。

後からでも変更できますが、レイアウトが変わってしまうので先に決めておいた方が無難です。

Banarcreate18

そしてサイズを選ぶと下記のような画面になります。

文字を入れる場合にはテキスト部分をタップして編集できます。

また、青枠で囲った部分で文字の色やフォント、スタイルなどを変更できます

フォントが日本語がないのであまり選べないのが難点ですが、僕はあまり気にしません。

個人的には「Style」の機能が神がかっています。

勝手にフォントやレイアウト、文字色などを提案してくれます。

Banarcreate19

これ、たぶん背景色などから解析して提案してくるんですがほんとセンスいいんですよ。

結構フォント選びや配置、配色ってセンスでるので自分自身ではやらないんですが、こいつに任せるとかなりいい感じに仕上がる気がします。

以上、ここまでが通常の画像の作り方です。

動かなくてもいい場合にはここで保存すればOKです。

文字や画像を動かすには

上記までの手順で画像のレイアウトまで作成したらもう一息です。

右下の「Animation」をタップします。

Banarcreate20

するとこのように、画像内の要素の動かし方、アニメーションのエフェクトが選べるようになります。

これらは何種類かあるので試してみて、気にいるタイプのエフェクトを選びましょう。

Banarcreate12

選んだら、右上の「Shere」をタップします。

するとこう聞かれるので、「Video」を選びましょう。

Banarcreate21

そして保存する

最後に保存します。

左下の「Save Video」をタップして完了です!

Banarcreate14

③最後に動画ファイルをGIFに変換する

ここでやっとImgPlayの出番がやってきます。

IMG 6245

アプリを開いて先ほど保存した動画(4秒ほどの動画になってるはずです)を選択すると、上記のような画面になります。

必要に応じて再生速度の調整や、繰り返し再生などの設定をしておきましょう。

IMG 6246

右上の「次へ」をタップするとプレビュー画面になります。

ここで実際に再生してみて問題がないか確認しておきましょう。

よければ保存します。

IMG 6247

最後に保存形式を確認されますので、必ずGIFで保存しましょう。

これで作成の過程は完了です。

④メディアへアップロードして完成

これで本当に最後です。

作成したGIFファイルをアップロードして貼り付けるのみです。

注意点は、GIFの場合サイズを必ずフルサイズでアップロードしないとうまく動かないので気を付けましょう。

僕もよくハマっています。

また、バナーなどのようにリンクを設定すればボタンとしても機能します。

ぜひお試しを。

慣れれば5~10分で作れます。

また、参考にさせていただいたサイトを貼っておきますのでよろしければこちらもご覧ください。

Adobe Spark Post がすごい!スマホだけで簡単におしゃれなアイキャッチが作れちゃう(iOS) - シロクマは冬眠したい

長くなってしまいましたが、参考になれば幸いです。

 

保存保存

スポンサーリンク
スポンサーリンク

髪型が思い通りにならない原因を知ってますか?

世の中を見回してみると、意外にも髪型が思い通りになっている人というのは少ないように感じます。

 

あなた自身はどうでしょうか?

 

これだけヘアスタイルや髪の毛に関する「情報」はあふれているのになぜでしょうか?

 

これには明確な原因があります。

 

いままで通りの美容師やサロンのあり方では解決しにくい問題です。

 

「美容室は好きじゃない」「いつも髪型が思った通りにならない」

 

そんな方はぜひご覧になってみてください。

 

 

この記事が気に入ったら
フォローお願いします!

最新情報をお届けします

Twitterでフォロー!

おすすめの記事