-本日のアジェンダ-
1限目
学科 ECサイトデザイン基礎①
Photoshopの機能について
2限目
学科 ECサイトデザイン基礎①
Photoshopの機能について
3限目
学科 ECサイトデザイン基礎①
バナー模写練習
4限目
学科 ECサイトデザイン基礎①
バナー模写練習
5限目
学科 ECサイトデザイン基礎①
ECサイトについて
本日のテーマ
バナー「模写」で練習しましょう
覚えておくと良い基本操作（Ps）
- シェイプ・パス・ピクセル
- 描画ツール
- パス選択ツール
シェイプ・パス・ピクセル
【シェイプ】
ベクトルデータで図形を描画します。塗り、線色、線幅を設定することが出来て、後で形状や塗りを変更することが出来ます。また、描画後に自動でベクトルレイヤーが作成されます。
【パス】
アウトラインデータだけのシェイプです。塗り、線色、線幅が設定されていません。主に選択範囲を作成する際に使用します。
【ピクセル】
ラスターデータで図形を描画します。後で形状や塗りを変更することが出来ません。
参考サイト
- 【Photoshop】シェイプとは？ピクセルとは？パスとの違いは？
- Photoshop のシェイプツールを使ったシェイブの描画 – Adobe Help Center
- 「シェイプツール」の３つの描画モード「シェイプ」「パス」「ピクセル」 －Photoshop－
描画ツール
複数のアンカーポイントという点を結んだ線（パス）で描かれた図形のことです。
矩形や円、五角形などの所謂、図形を描いたり、カスタムシェイプツールを使って複雑な図形を描くことができます。
- 長方形ツール
- 角丸長方形ツール
- 楕円形ツール
- 多角形ツール
- カスタムシェイプツール
参考サイト
- Photoshop のシェイプツールを使ったシェイブの描画 – Adobe Help Center
- Adobe Photoshop での描画モード – Adobe Help Center
- 【photoshop】図形ツールで図形を描く！シェイプの使い方① | じーだぶるーむ
パス選択ツール
【Photoshop基本操作】［パス選択ツール］とは、アンカーポイントの移動や方向線の調整など、主にパスの操作を行うツールです。 その活用範囲は広く、他のツールからキー操作で切り替えて使用することも多いです。 クリックして選択が基本！ パス選択ツールの操作は、「掴んで離す」ようなドラッグ＆ドロップがほとんどです。
参考サイト
バナー制作で覚えておきたい復習
- スマートオブジェクト
- 調整レイヤー
- トリミング復習
- レタッチ復習
- 色調補正
- クリッピングマスク
- レイヤーマスク
- ベクトルマスク
バナー制作で覚えておきたい技術
- 枠作成（レイヤースタイル）
- グラデーション（レイヤースタイル）
- 境界線（レイヤースタイル）
- 光と影（レイヤースタイル）
- レイアウト/文字/配色
- カンバスサイズ
- Web用に書き出し（ jpg gif png ）
本日の課題
「ファッション」をテーマにバナー（模写）を作成してみましょう。
レイアウトは正方形(250px×250px)です。
作成したバナーを5限目終了までにドロップボックスにUPしてください。
※提出先・・・提出＞【0344】バナー模写② 1月6日(木)
※ファイル名は、bnr_xxxx_20220106.jpg