まるで無料のPhotoshop！ブラウザツールで誰でもバナー広告を作れる６つの手順

バナーを作りたいけどPhotoshopは高いし・・そんな時に便利な無料の画像編集ツールをご紹介！

- Sponsored Link -

バナーを作りたいけどPhotoshopは高いし・・そんな時に便利な無料の画像編集ツールをご紹介！

今この瞬間、誰でも出来る無料のバナー作成

Photoshopは少し敷居が高い・・

特にグラフィックデザイン等の実務経験は無いけどそういった事をやってみたい、あるいはSOHOでバナー作成などをしておこずかいを稼いでみたい、と考えている人は多いのではないでしょうか。実際、最近はクラウドソーシングのサイトが増えて、技術とセンスさえあれば誰でもデザインでお金を稼げる時代になりつつあります。

しかしそんな時にネックなのがツールです。Webのバナー作成で多く使われるのがこのPhotoshop。

Adobe Photoshop CC 3か月版 [ダウンロードカード]

出版社/メーカー: アドビシステムズ
発売日: 2013/10/18
メディア: License
この商品を含むブログを見る

サブスクリプションになって手を出しやすくはなっていますが、3ヶ月版が現在Amazonで5600円ほど。操作方法も分からないのに手を出すのはちょっと気が引けるところです。

それならまずは、無料のブラウザツールでやってみよう！

「パソコンを使ってグラフィックデザインをしてみたい」「でもPhotoshopを買うのはちょっと・・」という方におすすめなのが、「Pixlr」というブラウザだけで使える無料の画像編集ツールです。つまりソフトのダウンロードすら不要で、ここにアクセスしさえすればデザインが開始出来てしまいます。

操作もPhotoshopにかなり近い感覚で出来るので、これをまず入り口にしてみる、というのが良いのでは無いでしょうか。機能はもちろん本家に比べると劣りますが、無料だと考えればかなり優秀なソフトですので、これで色々遊ぶだけでもかなり楽しいです。

実際にバナー作成して操作を覚える

そこで以下では、実際に手順を追ってバナー作成しながら、Pixlrの使い方を覚えていけるようなチャートを示しました。書いてある通りに操作していけば、全く未経験の方でもごくカンタンなバナー作成が出来るかと思います。

今回つくるのは、こんなものです。

f:id:thablue19:20150207173618j:plain

300×250サイズの、Web広告でよく見かけるサイズのもの。ごくシンプルですが、基本的な機能を使用して作りましたので、これを作ってみてから色々アレンジを加えていけばもっと本格的なものを作る事も可能です。画像の編集やテキストのスタイリング等を中心に詳しく説明しています。是非、以下をご覧になりながら実践してみて下さい。

無料のツールと無料素材だけでバナーを作成する手順

①画像の素材を準備する

今回は人物の画像を使いたいので、今人気の「無料素材アイドル」ことMIKA★RIKAさんの画像をお借りします。

人物無料素材

▲ こちらからこの画像をダウンロード。

画像の準備は終わり。これから無料のツールを使って、バナーを作成していきます。

②Pixlr Editor を開く

Pixlr Editor （ http://apps.pixlr.com/editor/ ）を開きます。

f:id:thablue19:20150207153242j:plain

▲「新しい画像を作成」> 「幅：300px、高さ：250px」と設定して編集スタート。このようなPhotohshop風の画面になります。既にPhotoshopに慣れている人でも違和感なく使えますね。

③描画ツールを使ってバナーの土台を作る

長方形や円を簡単に描ける「描画」というツールを使って全体の土台を作ります。

f:id:thablue19:20150207154016j:plain

▲左側のツールバー、丸と四角が重なっているアイコンの「描画ツール」をクリック。

f:id:thablue19:20150207154342j:plain

▲「シェイプを塗りつぶす」の横にある黒い四角をクリックすると、カラーチャートが出ます。「#」のフォームに「A0C453」と入力して描画する色を設定します。

※操作を間違えた時は「編集 > 取り消す」で元に戻す事が出来ます。

f:id:thablue19:20150207155710j:plain

▲画面右側の「レイヤー」ウィンドウの中の下部分にある、紙がぺろっとなっているような部分をクリックすると、新しいレイヤーが追加されます。こうしてレイヤーを追加して切り替えて作業していく事で効率的に作業が出来ます。

f:id:thablue19:20150207160153j:plain

▲「レイヤー１」が選択された状態で、描画ツールでキャンバス全体を描画。先ほど設定した色で塗りつぶされます。

f:id:thablue19:20150207160540j:plain

▲同様の作業を以下のように繰り返して別の色の長方形を置きます。

①「ボーダーサイズ：0」

②レイヤーを追加して選択

③シェイプの色を「#F5FFD6」に変更

④キャンバスの上半分ぐらい（大きさは大体でOK）に長方形を描画。一度描画したものは一番上にある「編集 > 自由変形」で大きさを調整できます。

これで大まかな土台が出来ました。続いて人物の画像を取り込んでいきます。

④画像の編集

f:id:thablue19:20150207162716j:plain

▲「ファイル > 画像を開く」で先ほどダウンロードしておいた画像を開きます。そのままでは画像がでかすぎるので、「画像 > 画像サイズ」で幅500pxぐらいにいったん縮小。ズームを100%まで拡大します。

さらに、「編集 > 全てを選択」「編集 > コピー」で画像をコピー状態に。事前に作った緑色の土台があるウインドウにフォーカスし、編集 > 貼付け」。画像がレイヤーにコピーされます。

f:id:thablue19:20150207181958j:plain

▲ここで少し高度なテクニックを使います。「レイヤー」ウィンドウから小さい方の長方形のレイヤーの印がついている部分をクリック。画像のように、該当のレイヤーがある部分だけが選択された状態になります。

f:id:thablue19:20150207182541j:plain

▲ここで人物画像のレイヤーを選択し、印のついている「レイヤーマスクを追加」ボタンをクリック。このようにもともとあった長方形の形に画像がくりぬかれた状態になります。これで画像の編集は一旦終了。続いてコピーやテキストを追加していきます。

⑤テキストの追加

f:id:thablue19:20150207163845j:plain

▲レイヤーを一枚追加し、左側のツールバーの中の「A」という文字の「タイプツール」を選択します。この状態でキャンバス上でテキストを入れたい部分をクリックするとこのように文字を追加出来る状態になります。

f:id:thablue19:20150207164843j:plain

▲「完全無料」というコピーを入れたいのですが、ここでは一文字ずつ入れていきます。手頃なフォントとサイズを選択します。ここでは「フォント：Osaka_Unicode、サイズ：65、スタイル：太字」にします。さらに「色：D67800」としておきます。

f:id:thablue19:20150207182902j:plain

▲ここで文字のスタイリング。「レイヤー」ウィンドウのレイヤースタイルボタンをクリック。レイヤースタイルの設定画面が開くので、「アウターグロー」にチェックを入れて以下のように設定します。

不透明度：100

硬さ：10

サイズ：5

色：真っ白

f:id:thablue19:20150207170128j:plain

▲「完」のレイヤーを「レイヤー > 重複レイヤー」で複製し、位置を少しずらしたあとにタイプツールでクリック。スタイルはそのままで文字や文字の色、大きさなどを編集し直すことができます。「全」と打ち込んでここでは色を「#D6545B」にします。

f:id:thablue19:20150207170659j:plain

▲同様に「無」と「料」も配置。色はそれぞれ「#4E6EA2」と「#008EC0」です。文字の間隔を詰めていい感じに調整。

f:id:thablue19:20150207171455j:plain

▲更にどうようの作業を繰り返し、テキストを追加していきます。この辺りの色味や文言は自由で大丈夫。

⑥細かな装飾や調整

仕上げに吹き出しを入れたりして、もっと楽しげで派手な感じにしていきたいと思います。フキダシデザイン様のこちらの素材を拝借。ダウンロードして以下の様に配置していきます。

f:id:thablue19:20150207172513j:plain

▲人物画像を取り込んだときの要領で吹き出しを配置。自由変形でぴったりくる形にするほか、「レイヤー > レイヤーを水平に反転」で素材をくるっと反転させたりしています。

f:id:thablue19:20150207172944j:plain

▲吹き出しの中にテキストを追加。これだと収まりが悪い感じがするので、文字を傾けてみましょう。

f:id:thablue19:20150207173230j:plain

▲テキストのレイヤーの所で左クリック。「レイヤーをラスタライズ」を選択します。ラスタライズするとテキストは画像のような扱いになり、タイプツールで編集する事が出来なくなってしまうので要注意。

f:id:thablue19:20150207173341j:plain

▲自由変形で文字を斜めに傾けます。かなりシンプルではありますが、一旦これで出来たという事にしましょう。「ファイル > 画像を保存」でjpgを書き出します。

そしてこれが完成品。

↓　↓　↓

無料ツールバナー

まとめ：無料ツールでバナーを作ってみた感想

当たり前ですが、Photoshopに慣れている人からすると効率面ではかなり劣りますし、重要な機能がいくつか足りないので作れるものも限られてきてしまいます。

f:id:thablue19:20150207174432j:plain

ただ、見て不自然でない程度のバナーを作るぐらいの事は出来ますし、高度な画像編集をする事がないのであれば無料ツールだけで十分ということも多いにあり得るのではないでしょうか。

また、Photoshopを持っていない、バナーを作った事が特に無いという人にとっては、このPixlr Editorはかなりおすすめです。使い勝手そのものはPhotoshopに近いアので、Pixlrを触ってみて「もっと色々高度な作業をしてみたい」と感じたらそこでPhotoshopを導入してみてはいかがでしょうか。

本気でWeb制作するならこちらがおすすめ！