![](https://i0.wp.com/design-school.online/jd/wp-content/uploads/2020/04/linerichi08.jpg?resize=654%2C654&ssl=1)
今回は、
実際にバナーって
どうやって作られているのか?
についてお話しますね。
バナーの作り方も今後
お届けできたらと思うのですが
どのように作られているか知らないと
実際に作るのもイメージしづらいですよね。
バナーを作ったことがない人は作る前に
バナーやPhotoshopって何?
となっているかもしれませんね。
もしかすると
Photoshopを開いてみたけど挫折した
という人もいるかもしれません。
![](https://japan-design.jp/jd3/wp-content/uploads/2024/01/26335366_s-edited.jpg)
たしかに、
WEBデザイン未経験の方からすると
聞き慣れない言葉やツールなので
難しいと感じますよね。
WEBデザイン初心者です!
という方でもわかりやすいように、
お伝えしていこうと思うので、
このレッスンを見て、
「意外と簡単なんだ」
「私でもできそう!」
と感じてもらえたら嬉しいです!
では、さっそくですが、
まずバナーの完成形から
お見せしますね。
分かりやすくハロウィンのバナーで
お伝えしていこうと思います。
![](https://i2.wp.com/design-school.online/jd/wp-content/uploads/2020/07/halloween.png?resize=531%2C120&ssl=1)
このバナー1枚のように見えますが、
実は、5枚の画像を重ねて作られています。
①背景:全面紫色一色の一枚の画像
②文字:「10月27日 ハロウィンパーティを開催♪」
③飾り付き文字:Happy Haloween
④写真素材:かぼちゃ写真
⑤丸の図形:紫の丸図形 二つ(角はカットしていません)
![](https://i2.wp.com/design-school.online/jd/wp-content/uploads/2020/07/cb369d0dab9543605edd1c0ed76b409c.png?resize=654%2C909&ssl=1)
この5枚の画像を組み合わせると
ハロウィンバナーの出来上がりです!
![](https://i0.wp.com/design-school.online/jd/wp-content/uploads/2020/07/475c06d8c863840964b1802985a521d5.png?resize=654%2C454&ssl=1)
どうでしょうか?
組み合わせると
難しいように感じますが、
1枚ずつで見ると、
大したことはしていないですよね。
バナーによっては
もう少し写真や絵の素材を
入れたりするので、
画像はもう少し増えますが、
やることはこれだけなんです。
![](https://japan-design.jp/jd3/wp-content/uploads/2024/01/DSC07186-1-edited.jpg)
思っていたよりシンプル
だったんじゃないかな
と思います。
ちなみに1枚ずつの画像のことを
レイヤーといいます。
レイヤーは、「段」という意味で、
何枚も重ねて1つのバナーが
できているんです。
これはPhotoshop独特の考え方なので
最初は難しいと感じてしまう
と思うのですが、
1つずつ丁寧に見ていけば
使いこなせるようになりますよ。
良いバナーを作るには、
- 良いレイアウト
- 良い配色
- 良い素材選び
が必要になるので、
この辺りはデザインのルールを
学ぶ必要がありますが、
Photoshopの基本的な機能だけ使えれば
バナーは完成できます。
![](https://japan-design.jp/jd3/wp-content/uploads/2024/01/24549387_l-edited.jpg)
デザイン未経験の方だと
よくPhotoshopを覚えられない!
という相談を受けることもありますが、
そういった方の共通点は、
分厚い参考書を1ページ目から
全部覚えようとしているんです。
ここでお伝えしたいのは、
全部覚える必要はない
ということなんです!
![](https://japan-design.jp/jd3/wp-content/uploads/2024/01/24879339_s-1-edited.jpg)
このレッスンでソフトの使い方よりも
デザインの仕方が重要ということを
わかっていただけたんじゃないでしょうか?
実は、WEBデザインをお仕事にするには
デザインを学ぶことが一番大事なのですが、
実際に働くときには、
- どうやってお仕事を取るのか
- どれくらい稼げるのか
- 未経験OKの求人なのに採用されない理由
- 採用されるデザイナーの共通点
など現場目線の情報を知ってほしいなと思います。
それを3時間で丸ごと知れちゃう
セミナーを無料開催しています!
WEBデザイナーのリアルな働き方を限定公開!
もちろん独学などでも
お仕事を取れるかもしれません。
ですが、現場目線の情報を知ったうえで
勉強しないと
「せっかく時間をかけたのに
お仕事が取れない、、、」
なんてことも。
実際にそのような方も見てきました。
せっかくご縁のあるあなたには
そのようになってほしくないので、
これからWEBデザインを始める前に
参加してみてくださいね。
ということで、
バナーの作り方はいかがでしたか?
今回のレッスンを見て、
もし自分でもやってみたい!と思った方は、
バナーレッスンの動画があるので
チャレンジしてみてくださいね。
【photoshop講座:まずは超基礎!
photoshopに慣れよう!】
【photoshop講座|photoshopでバナー作成・
バナーの作り方】
Photoshopのお申し込みはこちら
https://www.adobe.com/jp/products/photoshop.html
※Photoshopは、月額1,078円(税込)で使用できます。
最初の7日間は無料で使えるので、
不要であれば無料期間内に
やめることもできます。
バナーレッスン動画を見て
まずは「どんな感じなのかな〜」くらいの感覚で
試してみてくださいね!
ということで次はこちらのレッスンです!
![](https://japan-design.jp/jd3/wp-content/uploads/2023/04/image-24.jpg)
▼▼今までのレッスンはこちらから見れます▼▼
LESSON1:意外に知られていない稼ぐWEBデザイナーのお仕事
LESSON2:未経験からWEBデザイナーへの最短ルート
LESSON3:本当に必要?プログラミングスキルを学ばない理由
LESSON4:どうやったらWEBデザインができる?
LESSON5:デザインセンスはどのくらい必要?
LESSON6:絵が上手くなきゃWEBデザイナーになれない?
LESSON7:WEBデザイナーってどれぐらいでなれる?経験必要?