新型コロナウイルス拡大防止策による在宅勤務のご案内

誠に勝手ながら、新型コロナウイルスの拡大防止策の一環として3月27日より在宅勤務とさせていただいております。
そのため、代表番号(03-6416-5195)にお掛けいただいた場合、誠に申し訳ございませんが、お電話が繋がりません。お問い合わせをご希望のお客様に関しては 当サイトの問い合わせフォームよりご連絡を下さいますようお願い申し上げます。

問い合わせフォームはこちら

フリー素材を使用してバナーを作成する方法!

1.はじめに

Photoshop初心者のEC担当者様向けPhotoshop講座。

今回のコラムでは、「フリー素材を使用してバナーを作成する方法」をご紹介します!

2.作り方

Photoshopは、1つの画像を作るのに何通りもの作り方ができるツールです。

今回は2つの素材を使用して簡易的なセールイベント用バナーを作成します。

2-1.まず、フォトショップを開きましょう。

「新規作成」をクリックして、制作したいアイコンの「サイズ」を設定します。
合成する画像にもよりますが、今回はサイズを「1000px × 450px」、カラーモードを「RGBカラー/8bit」、 カンバスカラー「白」に設定してください。

選択し開くと、フォトショップ上にカンバスが表示されます。

2-2.上部のウインドウを開きましょう。

今回使用したいウインドウは、

・プロパティ

・レイヤー

・文字

この3つです。

これらのウインドウを表示させてから作業を進めると作業がスムーズです。

(すでに該当のウインドウが表示されている場合は、割愛してください)

2-3.早速バナーを作成していきましょう。

今回はこちらのバナーを作成していきます!

使用するフリー素材は、以下のサイトからダウンロードした素材を使用いたします。

【リボン素材】

http://ribbon-freaks.com/

【集中線】

https://mangasozai.com/

いずれのサイトも利用規約を遵守した上でご使用ください。

2-3-1. 長方形を使ってバナーの背景を置く

まず、バナーの土台となる背景を作成します。

ツール内にある四角の書かれたボタンを長押しすると表示される「長方形ツール」を選択してください。

選択をするとカーソルが十字に変わりますので、カンバスを対角線にドラッグしてください。

するとカンバスを覆うように長方形が作成されます。

※この時、カンバスピッタリの長方形を作成しなくても大丈夫です。カンバスからはみ出た部分は完成バナーに影響しませんので、ざっくりとカンバスを覆える大きさで作成できれば問題ありません。

今回はセールらしい「赤」をメインにバナーを作っていきますので、上部にある「塗り」から色を変更しました。

仕上げに、レイヤータブにある鍵マークをクリックしてレイヤーをロック(固定)します。

2-3-2.素材を使って背景に模様をつける

次に、素材を使用して背景に模様をつけます。

あまり模様が派手すぎるとメインとなる文字より目立ってしまい、本来伝えたい情報が埋もれてしまうので、少しバナーを華やかにする程度、を意識して飾りましょう!

あらかじめダウンロードした素材をカンバス上へドラッグ&ドロップで、新しいレイヤーに追加されます。

今回使用した素材はこちらです。(PNG素材)

放射線71

この素材を使って目指すのは、太陽の光が下から差しているイメージです。

セールバナーとしてよく使われるデザインなので、見たことがある方も多いのではないでしょうか?

頭になんとなくイメージが湧き上がったところで、それに近づけるよう素材の大きさ・位置を調整します。

拡大・移動は選択ツールで行います。Shiftを押しながらドラッグすることで、縦横の比率が変わることなく大きさ調整ができます。

拡大・移動が終了したら、素材をレイヤータブで選択したまま、下部にある「レイヤースタイル」をクリックします。

「レイヤースタイル」とは、該当のレイヤーに対して様々な加工が行える機能です。

ここでは素材の色を変更したいので、「カラーオーバーレイ」を使用します。

色を選べるところまでいったら、背景と同系色で暗い色を選択してください。

無事色が変更できましたら、次はレイヤータブの上部にある「不透明度」から素材の透明度を調整します。

先ほども説明したように、背景が目立ちすぎると本来伝えたい情報が埋もれてしまうので、少しばかり透明にして模様の存在感を薄くします。

ここでは40%に設定しました。

最後は長方形同様にレイヤーロックをかけてください。

2-3-3.リボン素材を使ってタイトルをつける

次は新たにリボンの素材を使用してタイトルをつけましょう。

ここで使用した素材はこちらです。

(中位の大きさをPNGでダウンロードしました。)

http://ribbon-freaks.com/2016/11/22/ribbon27/

ダウンロードしたら、ドラッグ&ドロップでレイヤーへ追加してください。

そうしましたら、背景素材同様にレイヤースタイルから色変更を行います。

(今回は白へ変更を行いました。)

色が変更できたら、この後入力するアイコンが見やすいよう上の方へ移動しておきましょう。

◆レイヤーをカンバスの中心に移動させたい時

選択ツールでレイヤーを移動させると、中心を指し示すピンク色のガイド線が現れ、カンバスの上での中心を見つけることができます!

リボンが置けたら、次はセールイベントのタイトルを入力しましょう。

今回は「楽天お買い物マラソン」をイベント名とします。

文字ツールを使って文字を入力してください。

文字がリボンに対して大きい、または小さい場合、選択ツールでの調整を行ってください。

2-3-4.開催期間を入力する

次は、イベントの開催期間を記載するため、ここまでで使用してきた「長方形ツール」「文字ツール」を用いて日付を入力していきましょう。

長方形ツールで長方形を作成したら、色変更や大きさ調整などを行い、バナー下部へ設置してください。

文字を入力する際は、今作った長方形の上以外の場所をクリックして入力を始め、入力後長方形の上へ移動させてください。

2-3-5.メイン情報とアイコンを記載する

ここからは一番目立たせたい情報部分を作成していきます!

まずはアイコンから。

長方形ツールを長押しして、楕円形ツールを選択します。

円を作成したら、「プロパティ」タブの「塗り」「線」から色や線の太さを調節してください。

この円では、

色=背景と同色

線=白、太さ8px

へ設定いたしました。

次は、ポイント倍率への説明として「ポイント最大」の文字を入力します。

ですがこのままだとバランスが悪いため、「ポイント」部分だけ小さく表示させましょう。

文字ツールで「ポイント」を選択し、文字タブで大きさを調整します。

ちょうどいい大きさに調整できましたたら、次は文字を全選択して、行間・文字間の調整を行いましょう。

文字のバランスが整ったら、円も含めたアイコン全体のバランスを見ながら大きさ・位置を調整してください。

同じ要領で、バナー中心に置く「44倍」(ポイント倍率)と、右側にもう一つアイコンを作ってみましょう。

これで伝えたい情報は全て記載することができました!

2-3-6. 飾りをプラスして見栄えを整えよう

ここまできたらあともう一息です!

バナーとしてはまだ少し寂しい印象なので、紙吹雪を足してバナーを賑やかにしていきます。

長方形ツールで四角を作成したら、角度や大きさ・色を変更してください。

一つ出来上がったら、レイヤータブ上で該当の四角を右クリック、「レイヤーを複製」で四角を複製し、それぞれ色や角度を変更したり調整してみてください。

最後にバナー全体のバランスを見ながら、アイコンや文字などそれぞれの要素の大きさや位置を調整して、バナーは完成です!

2-3-7. 保存方法

バナーがが完成したら、「ファイル」から、「保存」を選択し、ファイル名を記入後psdデータを保存してください。

PSDデータが保存できたら、jpgファイルも保存しましょう。

「ファイル」から「別名に保存」を選択して、ウインドウの下部にある拡張子を選ぶタブからjpgを選び、保存してください。

3.最後に

いかがでしたか?

素材を使用することで、より目に留まる華やかなバナーを作成することができたかと思います。みなさんも今回の記事を参考に、様々なデザインにチャレンジしてみてください!

お取引先様一覧(一部) -多くのお客様に弊社サービスを導入頂いております-

楽天 Amazon Yahoo

ユーグレナ・オンライン様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10 Wowma!

チャップアップ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10 Wowma!

クリアネオ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo

ベルタ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10 Wowma!

ブレスマイル様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10

アクセサリー ジュエルVOX 様

運営代行、コンサルをさせて頂いております。

楽天 Yahoo Qoo10

セレクトショップMOMO様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10

美マルシェ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Yahoo Qoo10

プロ愛用ジェルネイル通販ジェルネ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天

出島オンライン様

運営代行、コンサルをさせて頂いております。

楽天

スタイリンカー様

運営代行、コンサルをさせて頂いております。

Qoo10

ル・フタール様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10

Smart Beam Laser正規代理店 MONCHUA様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Yahoo 製作

ヘアケアラボ様

コンサル、各種制作をさせて頂いております。

自社サイト

VENOSAN SHOP様

運営代行、コンサル、各種製作をさせて頂いております。

オウンドメディア

MUKUMI 様

オウンドメディアの構築、コンサルをさせて頂いております。

Qoo10

弾性ストッキングファクトリー様

運営代行、コンサル、各種製作をさせて頂いております。

制作 広告運用

東京血管外科クリニック様・ハンドベイン(手の血管)手術

広告運用代行、コンサル、各種製作をさせて頂いております。

制作

メンズスタイル様

同梱冊子の製作をさせて頂きました。

製作 広告運用

東京血管外科クリニック様・下肢静脈瘤手術

広告運用代行、コンサル、各種製作をさせて頂いております。

楽天 Yahoo 製作

ヘアケアプラス様

コンサル、各種制作をさせて頂いております。

楽天 Qoo10

Hera-Witch様

運営代行、コンサルをさせて頂いております。

楽天 Yahoo

フラコスメ様

運営代行、コンサル、各種製作をさせて頂いております。

オウンドメディア

beauty air様

オウンドメディアの構築、コンサルをさせて頂きました。

制作

株式会社ペンギントレード様

コーポレートサイトの制作をさせて頂きました。

オウンドメディア

ブランド図鑑.com 様

オウンドメディアの構築、コンサルをさせて頂きました。

製作

こころ卓球様

商品ページの製作をさせて頂きました。

制作

株式会社メディソリーゾ様

商品ページの製作をさせて頂きました。

オウンドメディア

住宅ローンSOS様

オウンドメディアの構築、コンサルをさせて頂いております。

制作

マハロネイルサロン 様

HPや販促チラシなどの製作をさせて頂きました。

制作

マハロヌイロア 様

HPや販促チラシなどの製作をさせて頂きました。

製作

アトリエKT-2様

HPや販促チラシなどの製作をさせて頂きました。

制作 Qoo10

海外ブランドならサウスコースト 様

運営代行、コンサル、各種制作をさせて頂いております。

Amazon Yahoo 制作 Qoo10

レディースシューズ ALETTA(アレッタ)様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 制作

美甘麗茶 楽天市場支店様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 制作

palclair楽天市場支店様

運営代行、コンサル、各種制作をさせて頂いております。

楽天

靴ネット通販コア様

コンサルティングをさせていただいております。

SNS

SHOEZOO様

インスタグラムの運用をさせて頂いております。

楽天 Yahoo 製作

ヘアケアフェスタ様

コンサル、各種制作をさせて頂いております。

製作

カジヤ様

各種制作をさせて頂いております。

楽天 制作

ブルービーセレクト 様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 制作

Rifle楽天市場店 様

運営代行、コンサル、各種制作をさせて頂いております。

Yahoo コンサル

PARFUM 様

コンサルティングをさせて頂いております

楽天 制作

カルトラーレ 様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 制作

きらりセレクション 様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 Yahoo 製作 コンサル

ブリッサリットル 様

コンサル、制作をさせていただいております。

楽天 Yahoo 製作 コンサル

インテローグ様

コンサル、制作をさせていただいております。

楽天

PENGUIN VINTAGE様

運営代行、コンサルをさせて頂いております。

その他サービス