chot.design 初心者のバナー作り【通販サイト】バナーサイズは?文字が浮き出して見える?メモ

ちょっとデザインのサイトを参考にPhotoshop/フォトショップを使ったバナー作りを始めました。
以前は、月額制で有料(1100円)だったサイトですが、
2022年9月現在は無料で学ぶことができます。(また、変わるかもしれません)

chot.design
chot.design - 毎日ちょっとずつデザインを学ぼう chot.designはWebデザインやUI/UXデザイン、その他デザイン制作について学べるサイトです。

ちょっとデザインではバナー作りから初めてみることに☆

その中で、毎回ちょっとしたことが分からなくて・・諦めそうになりましたが、
調べたり実践しながら仕上げています^^
その内容をメモしますね!

自己流のところもありますので、ご了承ください。

今回は、「通販サイト」です。

目次

通販サイトのバナーを作ろう バナーサイズは?

ちょっとデザインのこちらを参考に作りました。

chot.design
通販サイトのバナーを作ろう(後半) | バナー制作テクニック このレッスンでは、Photoshopを使ってお題に沿ったバナーを制作していきます。後半では本格的にバナーのデザインを行っていきます。
通販サイトのバナーを作ろう(後半)
1.文字と写真をバナー詰め込もう

バナーサイズの指定はありませんが、画像を見た時に
レクタングル(正方形に近いサイズ)なので

横   300px   縦  250pxだと思いました。(横336px 縦280pxの可能性も)
横 1200px 縦1000pxで作りました。(同じ比率で解像度が上がった時に対応できるように)

***

(2022.9.12追記:
chot design バナー制作テクニック<いろんなサイズのバナーを作ろう!①(上から7番目)に
アートボードの作り方が載っていました。
ここでは↓幅300×高さ250px/解像度72ピクセル/インチで作っていることが分かりました💡
バナー制作テクニック<いろんなサイズのバナーを作ろう!③でいくつかバナーサイズが紹介されています。

chot.design
いろんなサイズのバナーを作ろう!① | バナー制作テクニック このレッスンでは、Photoshopを使ってお題に沿ったバナーを制作していきます。 ①ではバナーを制作する前の下準備を行っていきます。 実際の案件では、同じ内容のバナー...

***

写真右の完成と書かれている方がchot designさんのページのバナーで、
左が私がフォトショップで練習用にマネして作ったものです。

同じ比率の大きめのサイズで作成しておくと
書き出し時に縮小するだけで済むので解像度が上がった場合にも対応可能ということで・・

こちらのHPを参考にさせていただきました。

321web
【Photoshop】バナー広告デザインの作り方を具体的に解説 | 321web 本記事ではPhotoshopを使ってバナーをデザインしていく具体的な手法・ソフトの使い方を解説します。 サンプルバナー完成イメージ 解説どおりに進めていけば初心者でもかん...

バナーサイズは、バナーサイズのきほんという本の
54〜55ページいろいろなバナーサイズに載っています♪
バナー作りに役立つ本ですのでおすすめです/

よりキャッチコピーを読みやすくしよう 文字が浮き出て見える

3.文字組みをして整えよう<よりキャッチコピーを読みやすくしようのところで、
レイヤースタイルで「光彩(外側)」にチェックしましたが、
なかなか同じ画面が出ず、

文字が浮き出て見えるようにできませんでした。

ですので、試行錯誤して、境界線を二つ入れて似せてみました。
レイヤースタイル → 上の境界線 → サイズ6px 不透明度100%
下の境界線 → サイズ10px 不透明度60%

合ってるか分かりませんが似た感じに見えたので「良し」としました。
右がちょっとデザインさん、左が私のフォトショ画面です。

現在AdobeCC使用今後は・・

chot.designの中にPhotoshopの授業もあります。

私はデジハリから基礎の動画教材とAdobe CC(creative cloud)がセットになった
Adobeマスター講座を受講したので、1ヶ月間無料でイラストレーターとフォトショップの講座の動画を閲覧しました。(流し見にはなってしまいましたが、時々作業しながら一応目を通しました。)
そういう理由で、バナー作りから始めています。

デジハリ・オンラインスクール | W...
Adobe(アドビ)マスター講座(Adobe Creative Cloudライセンス付属)【デジハリ公式】|通信講座 |デジハ... 動画教材とAdobe CC がセットでついてくる「Adobeマスター講座」ページです。デジハリはAdobe(アドビ)のスクールパートナー認定校です。デジハリ・オンラインスクールの...

以前にどこかでみた・・・同じような条件で動画学習が1年というところがあったので
見つけたら追記しますね。
来年は、フォトショとイラレを1年分購入しようかと考えています。(他は使っていないので)

最後に

作り終えた後のメモになってしまったので、つまづいた箇所を忘れているところもあるかもしれません。
作り終えることが出来たことが私にとってすごく自信になりましたし、
フォントサイズなど、思ったのと全然違いとても勉強になりました。

ちょっとデザインさんや、バナーの作り方の記事を書いて下さっている方、書籍を出版された方に感謝です。皆さんの練習用バナーも完成しますように!✨

いくつかバナーを作り終えていますので、またアップします。

お読みいただきありがとうございました。
他の記事も良かったらご覧ください^^

オシャレで素人っぽく見えないデザインのコツが
分かりやすく書いてあります♪
ある程度作れるようになった人にいいかも

コメント

コメントする

CAPTCHA


目次