学科 ECサイトデザイン基礎①

-本日のアジェンダ-

1限目
学科　ECサイトデザイン基礎①
Photoshopの機能について

2限目
学科　ECサイトデザイン基礎①
Photoshopの機能について

3限目
学科　ECサイトデザイン基礎①
バナー模写練習

4限目
学科　ECサイトデザイン基礎①
バナー模写練習

5限目
学科　ECサイトデザイン基礎①
ECサイトについて

本日のテーマ

バナー「模写」で練習しましょう

マスクについて

Photoshopのマスクのかけ方は、大きく分けて、『クリッピングマスク』、『レイヤーマスク』、『ベクトルマスク』の3種類があります。
それと選択ツールの調整で使うクイックマスクモードがあります。

参考サイト

本日の基本操作と復習

  • 被写体を選択（Ps）
  • 消しゴムツール （Ps）
  • クイックマスクモード（Ps）
  • パスパネル （Ps）
  • ベクトルマスク（Ps）
  • 選択範囲の反転 （Ps）
  • 境界線をぼかす （Ps）
  • フィルター（Ps）

被写体を選択（Ps）

人工知能を使ってパッと出来ます。

参考サイト

クイックマスクモード （消しゴムツール ）

クイックマスクモードは一時的なマスクを作成するモードで、アルファチャンネルのように保存はできませんが、選択範囲を編集する場合に便利です。 画像に選択範囲を作成します。 ツールボックスの下のほうにある、［クイックマスクモードで編集］ボタンをクリックします。 選択範囲の外がうす赤色で表示されます。

参考サイト

パスパネル （Ps）

パスパネル. ペンツールやシェイプツールで作成したパス一覧を表示してくれます。また、パスで画像をくりぬく”クリッピングマスク”の設定もここでできます。 アクションパネル. Photoshop CC、CS6でこのパネルを使って動画を編集できます。

参考サイト

パス選択ツール

【Photoshop基本操作】［パス選択ツール］とは、アンカーポイントの移動や方向線の調整など、主にパスの操作を行うツールです。 その活用範囲は広く、他のツールからキー操作で切り替えて使用することも多いです。 クリックして選択が基本！ パス選択ツールの操作は、「掴んで離す」ようなドラッグ＆ドロップがほとんどです。

参考サイト

ベクトルマスク（Ps）

ベクトルマスクとは Photoshoのペンツールまたはシェイプツールで作成したベクトル画像を使い、画像全部または、画像の一部を隠す（マスクする）方法です。

参考サイト

選択範囲の反転 （Ps）

選択範囲の反転は、「選択している状態の選択範囲」と「選択していない範囲」を置き換える機能です。 こちらの写真を例に、選択範囲の反転を活用してリンゴを残して背景を切り抜きます。 選択ツールを使い、リンゴを選択します。 … リンゴの範囲選択を終えたら、選択範囲から「選択範囲の反転」をクリックして、選択範囲を反転します。

参考サイト

境界線をぼかす （Ps）

フォトショップで境界線をぼかして画像を切り抜く方法があります。また、ぼかした状態でマスクをする事も可能です。

参考サイト

フィルター（Ps）

hotoshopの機能にフィルターギャラリーというものがあります。 この機能を使うと、1クリックで手元の画像を印象絵画風にしたり、ガラス越しでみた様な形にしたりすることができます。 フィルターギャラリーにある様々なフィルターは、デフォルトでアドビが用意しているものです。

参考サイト

バナー制作で覚えておきたい復習

  • スマートオブジェクト
  • 調整レイヤー
  • トリミング復習
  • レタッチ復習
  • 色調補正
  • クリッピングマスク
  • レイヤーマスク
  • ベクトルマスク

バナー制作で覚えておきたい技術

  • 枠作成（レイヤースタイル）
  • グラデーション（レイヤースタイル）
  • 境界線（レイヤースタイル）
  • 光と影（レイヤースタイル）
  • レイアウト/文字/配色
  • カンバスサイズ
  • Web用に書き出し（ jpg gif png ）
バナー制作の進め方

本日の課題

「ファッション」をテーマにバナー（模写）を作成してみましょう。
レイアウトは正方形です。
作成したバナーを5限目終了までにドロップボックスにUPしてください。
※提出先・・・提出＞【0331】バナー模写② 12月20日(月)
※ファイル名は、bnr_xxxx_20211220.jpg