広告バナーをPixlrで作成しWordpressに載せるまで

今日は自社の系列サイトやネットショップ、管理人ブログやメールマガジンへ誘導する宣伝バナーやバナー広告と言われるバナーを制作します。

WEB上でブラウザで無料で扱える世界的人気画像処理ソフト『Pixlr Editor(ピクセラエディタ)』を使い、自力で10分程度で作り、Wordpressにアップロードするまでの流れを解説していきたいと思います。
記事下の動画でも詳細に実演解説をしています。

表示したいバナーのサイズとアスペクト比を大まかに決める

出典：iborc.com

サイドバーに表示して誘導したいのならば、アスペクト比（画像の縦と横の長さ（ピクセル数）の比）は「5:3」か「3:2」で良いでしょう。

Wordpresのテンプレートのウィジットの設定で最終的に「横300px:縦180px」などと手動で入力して表示サイズを変えることが出来ますので、初めに「横1000px:縦600px」など編集しやすい大きなピクセルサイズの画像で作成していきます。

また他社のWEBサイトやブログ記事に広告を出稿するなどの場合は、Googleアドセンスのレスポンシブで記事の合間などに最も表示されやすい細長い長方形タイプを作る必要があります。

この場合はピクセルサイズは「横730px 縦90px」程度、最初に大きいピクセルサイズの画像で制作・編集しておきたい場合はアスペクト比は「10:1.2」程度にしておく必要があります。

各ASP(アフィリエイト・サービス・プロバイダー)でサイズも違いますので、より詳細なサイズは広告出稿するASPに各自で問い合わせて確認をして下さい。

使用する背景や画像素材をライセンスフリーで調達する。

出典：google.com

自社の系列サイトやメールマガジンなどのコンテンツの宣伝バナーでしたら背景は無料画像素材サイト『Pixabay.com』を利用すると良いでしょう。

無料画像素材サイトは沢山ありますが、中でも最も高品質で有料級の画像が80万枚以上も商用利用可能で帰属表示の必要がない『Pixabay.com』は世界でもとても人気が高く筆者が最も気に入って利用しているサイトですので、これを読んでいる方にも太鼓判を押してお勧めします。

次に宣伝したいサイトやコンテンツの画像を切り抜いて貼っても良いですし、イメージ画像として連想できる人物やモノを『Pixabay.com』のカテゴリーから選んだり、検索窓から検索して切り抜いて使用しても良いでしょう。

元々切り抜かれた透明レイヤーのPNGファイル画像が欲しい場合は、検索エンジンで英語で「apple png」などと入力して画像検索を掛けます。

この際に注意してよいのが画像の著作権の問題ですが、Googleの検索窓で検索をしてメニューバーの「画像」をクリックして画像一覧が出てきた際にメニューバー（右上）にある歯車アイコンの「オプション」をクリックして出てくる「検索オプション」をクリックし、一番下の「ライセンス」⇒「営利目的を含め自由に使用、共有、または変更できる」を選択して「詳細を検索」で検索をし直せば、ライセンスフリーの画像が沢山出てきます。

いよいよPixlrでバナーを制作する

出典：YouTube この記事の動画
『Pixlr Editor(ピクセラエディタ)』のトップページで「新しい画像を作成」をクリックし、上記の説明の通りピクセルサイズを指定します。
使用する背景画像やイメージ画像などを操作パネルのメニューバーの「レイヤー」をクリックし「画像URLをレイヤーとして開く」で背景として使用する画像の「画像アドレス」をコピー&ペーストします。「画像をレイヤーとして開く」でPCやクラウドに保存した画像を読み込んでも構いません。

各レイヤーごとにメニューバーの「編集」⇒「自由変形」でサイズを調節し、それぞれの画像が合体して違和感がないように配置しなおし、レイヤーパネルの「レイヤースタイル」で影を付けたり光沢を付けたりして際立たせていきます。
最後に操作パネル左の「ツール」パネルから「T(テキスト)」を選択して、宣伝したいサイト名やコンテンツ名、伝えたいキャッチフレーズや誘導文句を入力します。

メニューバーの「ファイル」⇒「保存」⇒でPCやクラウドに任意の名前で画像を保存します。

最後に仕上げとして『Pixlr Express(ピクセラエクスプレス)』で画像全体の色合いを再設定し直しエフェクトやオーバーレイ、枠を付ければ完成です。