03 バナー作成講座 背景に写真・さくら吹雪のブラシ
目次
在宅・フリーランスになるためのバナー作成講座
![](https://fukuokamiyako.com/wp-content/uploads/2022/11/cropped-2022M_1200_1200_72.png)
Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop バナーで、背景に写真やイラストを設置してみます。
![](https://fukuokamiyako.com/wp-content/uploads/2020/05/22030534.png)
![](https://fukuokamiyako.com/wp-content/uploads/2020/05/22030534.png)
![](https://fukuokamiyako.com/wp-content/uploads/2020/05/22030534.png)
バナー作成講座の2回目で、キャッチコピーを入力して配置やデザインもきめたのですが、今から背景ですか?イメージくずれませんか?
![](https://fukuokamiyako.com/wp-content/uploads/2022/11/cropped-2022M_1200_1200_72.png)
![](https://fukuokamiyako.com/wp-content/uploads/2022/11/cropped-2022M_1200_1200_72.png)
![](https://fukuokamiyako.com/wp-content/uploads/2022/11/cropped-2022M_1200_1200_72.png)
そうですね。最初に背景から決めて文字を配置してもいいのですが、背景や色にとらわれると、コピー文そのものの効果とか強調性が決めにくくなるので、今回はあと回しにしてみました。
![](https://fukuokamiyako.com/wp-content/uploads/2020/05/23087410.png)
![](https://fukuokamiyako.com/wp-content/uploads/2020/05/23087410.png)
![](https://fukuokamiyako.com/wp-content/uploads/2020/05/23087410.png)
なるほど〜 いろいろな手段があるんですね。背景に惑わされそう〜
バナーの背景向きな写真
バナーの背景写真は、センターにテキストを入れる場合が多いので、フレームのように左右に写真要素があるものがよいですね。今回の動画もフレームのようなさくらの写真を使っています。画像は下記のサイトで無料の素材サイトを紹介しています。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://fukuokamiyako.com/wp-content/uploads/2022/05/アートボード-1-300x169.jpg)
![](https://fukuokamiyako.com/wp-content/uploads/2022/05/アートボード-1-300x169.jpg)
![](https://fukuokamiyako.com/wp-content/uploads/2022/05/アートボード-1-300x169.jpg)
現役Webデザイナーがここは使える!写真素材サイトを紹介
Webサイト制作において、必要な写真素材サイトを紹介します。 Webサイト制作をおこなう際に、良質の写真を使うことは、本当に大変です。写真素材の良し悪しで、Webサイ...
さくら吹雪は、ブラシを使って
バナー作成は、時間勝負なところもあります。時間をかけて凝ったデザインをつくりたいのは山々ですが、そうはいっても量も作らないといけません。質と量は時間と反比例です。
今回は、Photoshop のブラシを使ってさくら吹雪を散らしてみます。
動画で使わせていただいたのは 小樽総合デザイン事務局さんのさくらブラシです。
小樽総合デザイン事務局|デザイン…
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://otarunet.com/wordpress/wp-content/uploads/2017/03/20170323ec.png)
![](https://otarunet.com/wordpress/wp-content/uploads/2017/03/20170323ec.png)
![](https://otarunet.com/wordpress/wp-content/uploads/2017/03/20170323ec.png)
【フリー素材】写真やイラストに使える桜吹雪ブラシ:Photoshop
簡単に桜吹雪を降らせることができる桜ブラシを作りました。 シルエット素材なので単体で使うには不向きですが、写真やイラストと合わせると良い感じになるかもしれません…
在宅・フリーランスになるためのバナー作成講座3回目
今回は、背景に写真を入れ、色彩計画も写真に合わせた色に変更しています。
![](http://fukuokamiyako.com/wp-content/uploads/2020/03/lesson_bn_m02.jpg)
![](http://fukuokamiyako.com/wp-content/uploads/2020/03/lesson_bn_m02.jpg)
続きは動画でチェック!
動画で学ぶWebデザイン教室 Fuku…
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://fukuokamiyako.com/wp-content/uploads/2020/03/bana01.jpg)
![](https://fukuokamiyako.com/wp-content/uploads/2020/03/bana01.jpg)
![](https://fukuokamiyako.com/wp-content/uploads/2020/03/bana01.jpg)
01 バナー作成講座 まずは基本のサイズとフォント設定 | 動画で学ぶWebデザイン教室 Fukuokamiyako
バナー作成するための準備 バナーを作成するアプリは、特にこれでないとダメ!と決まりがあるわけではありません。使いやすい、慣れたプログラムでもかまいません 但し、We…
動画で学ぶWebデザイン教室 Fuku…
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://fukuokamiyako.com/wp-content/uploads/2020/03/bana02.jpg)
![](https://fukuokamiyako.com/wp-content/uploads/2020/03/bana02.jpg)
![](https://fukuokamiyako.com/wp-content/uploads/2020/03/bana02.jpg)
02 バナー作成講座 コピー文をバナーらしく載せる | 動画で学ぶWebデザイン教室 Fukuokamiyako
在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop にコピー文を広告バナーらしく入力していきます! バナー…
動画で学ぶWebデザイン教室 Fuku…
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://fukuokamiyako.com/wp-content/uploads/2020/03/bana03.jpg)
![](https://fukuokamiyako.com/wp-content/uploads/2020/03/bana03.jpg)
![](https://fukuokamiyako.com/wp-content/uploads/2020/03/bana03.jpg)
03 バナー作成講座 背景に写真・さくら吹雪のブラシ | 動画で学ぶWebデザイン教室 Fukuokamiyako
在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop バナーで、背景に写真やイラストを設置してみます。 バナ…
動画で学ぶWebデザイン教室 Fuku…
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://fukuokamiyako.com/wp-content/uploads/2020/03/bana04.jpg)
![](https://fukuokamiyako.com/wp-content/uploads/2020/03/bana04.jpg)
![](https://fukuokamiyako.com/wp-content/uploads/2020/03/bana04.jpg)
04 バナー作成講座 PSDファイルからの書き出し | 動画で学ぶWebデザイン教室 Fukuokamiyako
在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」作成講座4回目です。今回は、Photoshopを使ってアートボードごとに作成したバ…
動画で学ぶWebデザイン教室 Fuku…
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://fukuokamiyako.com/wp-content/uploads/2020/04/bana05.jpg)
![](https://fukuokamiyako.com/wp-content/uploads/2020/04/bana05.jpg)
![](https://fukuokamiyako.com/wp-content/uploads/2020/04/bana05.jpg)
05 バナー作成講座 バナーをIllustratorで作ってみた | 動画で学ぶWebデザイン教室 Fukuokamiyako
在宅・フリーランスになるためのバナー作成講座・イラレ編 5回目のバナー作成講座は、Illustratorを使って、バナーを作成していきます。Photoshopと異なり、写真加工は得意…
動画で学ぶWebデザイン教室 Fuku…
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://fukuokamiyako.com/wp-content/uploads/2020/05/bana06.jpg)
![](https://fukuokamiyako.com/wp-content/uploads/2020/05/bana06.jpg)
![](https://fukuokamiyako.com/wp-content/uploads/2020/05/bana06.jpg)
06 バナー作成講座 バナーをIllustratorで作って書き出し | 動画で学ぶWebデザイン教室 Fukuokamiyako
在宅・フリーランスになるためのバナー作成講座・イラレ編 6回目のバナー作成講座は、5回目からの引き続き下半分のデザインをIllustratorで作成していきます。上記のよう…