バナーデザインの練習のお話

本日、Webクリエイタースクールの初授業でした。
今日はPhotoshopの授業。

職業柄、Photoshopを使って写真のレタッチなんかはよくする。
でも正直、使うところも限られてるので、
デザインはまるで初心者です。

ただweb制作のアシスタントもしてるので
デザインデータを触ったり、画像をスライスしたりはするので、
今日の授業で色々勉強になりました。

あ、なるほどこないだのデザインデータであぁなってたのは
こう言うことね。と、点と点が線で繋がった感じ。

で具体的に何を学んだか、
その日のうちに忘れないようにメモしようと思う。

人間というのは忘れる生き物なので。
特に私はすぐに忘れる。
仕事もやる事を忘れることが多々あったので
きっちりメモを取り、やる事リストを作成し、
終わったらチェックを外す。
それをしてても忘れることがあるから大変だ。
たまったもんじゃねぇ。

なのでメモは大事なのです。

【本日の授業内容】
・Photoshopでバナー作成

【作業工程】
①アートボードを新規作成
・ファイル→新規作成→webを選択→プリセットの詳細で幅と高さを入力
※カラーボードはRGB/解像度は72


②使用する画像を配置
・ファイル→埋め込みを配置
※埋め込み配置にスマートオブジェクトになっているか確認する事！
スマートオブジェクトになっていない場合はレイヤーから画像をクリックしスマートオブジェクトに変換する。
《スマートオブジェクトとは？》
画像が劣化しないオブジェクトのこと。画像をそのまま配置すると拡大縮小を繰り返すうちに画像が劣化してしまう。

③人物の切り取り

・ツールバーからクイック選択ツールを選択→上のバーから被写体を選択を押す→選択されている状態でレイヤーパネル下のマスクボタンを押す
※綺麗に切り抜きができていない時はレイヤーパネルのマスクされたオブジェクトを選んでダブルクリックすると属性が出てくる↓

属性の表示モードの表示押す→オーバーレイに変更→上のバーのマイナスのボタンを押してはみ出ている部分を選択していく

④文字入力
・ツールバーのテキストツール→レイヤー内でクリック→文章入力
※長文の際はドラッグすると選択範囲内に文字を入力でき、端まできたら自動的に改行してくれる。文字のウィンドウについては以下の通り

①フォントの種類
②フォントの太さ
③フォントサイズ
④行間（こだわりがなければ（自動））
⑤ カーニング（字間を1文字ずつ調整したいときに使う）
※文字と文字の間にカーソルを合わせ、option+矢印ボタンで細かく文字間を変更可能
⑥トラッキング　（文字列を均一に調整）
⑦文字詰め（文字間の左右両側の字間を調整）
⑧垂直比率（文字の縦の長さの度合い、1文字だけ小さくしたいときなど）
⑨水平比率（文字の横の長さの度合い、1文字だけ小さくしたいときなど）
⑩ ベースライン調整（文字の上下の位置を調整）
※文字パネルの参考サイト
https://saruwakakun.com/design/photoshop/text

④吹き出し画像
・リンク埋め込みで画像を配置
・人物の画像より下に置く場合はレイヤーを人物より下にする
・吹き出し画像レイヤーの何もないところをクリックしレイヤースタイルを開く→境界線クリックし、線のサイズと位置（外側、内側、中央)、塗りつぶしの色を選ぶ
・レイヤースタイル→ドロップシャドウ（影）→角度、距離、サイズを選ぶ

⑤チェックマーク作成
・ツールパネルから長方形ツールで四角を書く
・ペンツールで”レ”チェックマークを書く
※ペンツールにした際に上のバーが「シェイプ」にする事を必ず確認！色の変更は塗りと線で変更可能。変更の際はペンツールを選択した状態で変更可
※ペンツールで書いたシェイプはパス選択ツールで後から修正可能

⑥背景画像の設定
・長方形ツールでカンバスサイズより大きく長方形を配置
・レイヤーを１番下へ

⑦背景にパターン画像を配置
・⑥で設定した長方形レイヤーの何もないところをクリックしレイヤースタイルを開く
・パターンオーバーレイを選択→パターンから選びたい画像を選択
・描画モードは通常
あ、やべパターン登録のところだけメモしてねえ！！

⑧文字部分に重ねるグラデーション
・長方形ツールでグラデーションをかけたいところを選択
・作成した長方形レイヤーにマスクをかける
・マスクの方を選択しツールバーのグラデーションツールを選択→
上のバーのグラデーションの中から黒、白のグラデーションを選択
グラデーションをかけた部分をドラッグする

メモしたものと今日作業したPhotoshopのレイヤーを見ながら
もう一回復習も兼ねて実践。
会社からはとにかくコーディングの質と速さを求められてるけど
できることに越したことはないな。

出来上がったのがこれ。
授業中に作成したものそのままなので雑だし、劇的にダサいw

正直、バナー制作任せられないw
この先デザインがうまくなるのか！？乞うご期待！！

追伸：小沢健二の新しいアルバムが良すぎて３周目。
本日のBGM:So kakkoii 宇宙/小沢健二

このジャケットデザイン最高やな。