バナー模写練習2023/12/26

by amisaitoin 訓練日誌on 投稿日:

-本日のアジェンダ-

1限目
学科　ECサイト運用基礎②
Photoshopの機能について

2限目
学科　ECサイト運用基礎②
Photoshopの機能について

3限目
学科　ECサイト運用基礎②
バナー模写練習

4限目
学科　ECサイト運用基礎②
バナー模写練習

5限目
学科　ECサイト運用基礎②
バナー模写練習

本日のテーマ

まずはバナー「模写」で表現の完全コピーを目指しましょう

覚えておくと良い基本操作

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

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

本日の課題

バナー作成練習 (模写)

ご自身で選んだジャンルのバナー模写を作成し、5時限目終了までにご自身のポートフォリオサイトにアップしてください。
※バナーサイズ設定は自由です。
※目標2つ以上で制作しましょう。
※講評はありません。

学んだこと

  • バウンディングボックスにチェック
  • 画像をまずスマートオブジェクト化する
  • ペイント・焼きこみなどはできなくなる
  • 調整レイヤー(月のようなマーク)
  • 色相
  • クリッピングマスク(alt押しながらかけたいレイヤーまでドラッグ)
  • 切り抜きたい画像の上に切り抜きたい形のオブジェクトを用意する
  • レイヤーマスク：選択ツールで選択→レイヤー下のカメラのようなマーク→選択したところが残る
  • ブラシツール：一部を消すことができる。黒だと100パーセント、グレーだと
  • グラデーションマスク：クリッピングマスク→マスクのほうのレイヤーを選択→グラデーションツール(モードは基本的に通常)→グラデーションしたい方向にクリックしてドラッグ
  • ベクトルマスク：ペンツールマスクを選択。書いたものにマスクをかけられる。選択ツールで範囲を選択しなおすのも簡単。
  • レイヤースタイル：レイヤーに対していろいろな加工ができる。レイヤー→fx選択で好みのレイヤーに変更。
  • 描写モード：写真に対して色や模様を重ねる
  • カンパスサイズ：編集範囲を広げる。背景をレイヤーに変えて、編集用レイヤーを追加する…Photoshopを起動し、「ファイル」→「開く」を選択して、編集するファイルを開きます。 「イメージ」→「カンバスサイズ」を選択します。 「カンバス」ダイアログボックスが開きます。 カンバスサイズを変更するには、「幅」と「高さ」に変更したいサイズを入力します。
  • 文字の自由変形：画面の上の部分から「編集」→「自由変形」をクリックします。 「自由変形」をクリックすると、このような状態になります。 文字の周りにある四角をドラッグすると文字を変形させることができます。 文字の周りの四角を、command（Ctrl）を押しながらドラッグすることで遠近感を出すことができます。
  • 文字レイヤーをシェイプに変換：文字レイヤーを選択した状態で右クリックします。オプションの中に「シェイプに変換」がありますので、こちらをクリックします。そうするとパスパネルに「シェイプパス」が作成されます。要は今までフォントだったものが「パス化」され、図形のような扱いになった感じです。Illustratorで言えば「アウトライン化」されたのと同じですね。ツールバーから「パスコンポーネント選択ツール」を選択。変形・移動させたい文字だけを囲うように選択すると、選択した文字だけパスが浮き出た上智になります。もちろん複数も選択できます。一度選択したあとでも「Shift」を押しながら再度ドラッグして他の文字を囲めば、追加で選択できます。この時点で「パスコンポーネント選択ツール」で選択した文字は移動させることができます。
  • それでは「B」の文字を先ほどの「パスコンポーネント選択ツール」で選択した状態で「Command」+「T」で「自由変形」にします。オプションバーの「編集」「自由変形」から選択してもいのですが、いちいち手間になるので「Command」+「T」を覚えておいた方が圧倒的に楽です。「自由変形」状態では選択されたパスの部分だけ囲われた形になり、四隅の点の部分を引っ張ることで拡大・縮小と回転さすことができます。「自由変形」でも文字に触れた状態であれば移動もできますので、デザイン的に配置したりするのは「パスコンポーネント選択ツール」で選択した時でなく、ここでひとまとめで調整していく方がしっくりくると思います。また「自由変形」中、四隅の一片を「Command」を押しながらドラッグすると、文字を変形させることが可能です。