めめめぶろぐ

Photoshop初心者でノンデザイナーがフォトショップ上達するためにバナー模写(トレース)のやり方・作り方。フォトショップの使い方、ポートフォリオ制作

バナー模写26

バナー模写26目

参考サイトは「マイフェバ」さんのメインビジュアル紹介サイトさんです。

design-source.net

▼参考バナー

f:id:eye_mememe:20200917195652j:plain

▼作成バナー

f:id:eye_mememe:20200917195735j:plain

 

| 作り方

まずはビールの画像を置きます。

この部分

f:id:eye_mememe:20200917195926p:plain

 

水色の線はガイド線です。

上のガイド線は、左右の写真の高さ、下のガイド線は泡の位置を測るために置きました。

 

▼長方形ツール

長方形ツールで画像を入れる枠を作る

このグレーの部分

f:id:eye_mememe:20200917200052p:plain

 

少し斜めにするには、「長方形ツール」を選択したまま

上部のメニューから「編集」「パスを変形」「ゆがみ」で辺の長さが異なる長方形を作ることが出来ます。

 

f:id:eye_mememe:20200917200157p:plain

 

長方形ツールの枠を作ったら、中に画像を入れていきます。

 

クリッピングマスクを作成

長方形ツールの上のレイヤーに画像を置きます。

f:id:eye_mememe:20200917200407p:plain

 

画像は長方形ツールからはみ出している感じになってます。

 

f:id:eye_mememe:20200917200435p:plain

 

レイヤー5のサムネイル画像より右側を右クリックするとメニューが出るので、

クリッピングマスクの作成」を押します。

 

右クリックすると出るメニュー

f:id:eye_mememe:20200917200538p:plain

 

レイヤー5が少し変わりました。

f:id:eye_mememe:20200917200652p:plain

 

画像も枠にぴったりとハマって、はみ出さなくなりました。

f:id:eye_mememe:20200917200727p:plain

 

右側も同じように画像をはめます。

 

f:id:eye_mememe:20200917200803p:plain

 

参考バナーはビールの左右がうっすら白っぽくなっているので、

これを入れます。

 

▼ドロップシャドウ

ビールに入れるのではなく、長方形ツールに入れようと思います。

まずは右側の2つの長方形ツールにかけます。

レイヤーの中で「ドロップシャドウ」をかけたい「長方形」を選択します。

レイヤーの下にある「レイヤースタイルを追加」 f:id:eye_mememe:20200917131403p:plain を押す

「ドロップシャドウ」を選択(チェックを入れる)

数値は・・・感覚で!

 

f:id:eye_mememe:20200917201016p:plain

  1. 描画モード:通常
  2. カラー:ホワイト
  3. 不透明度:88%
  4. 角度:0度
  5. 包括光源を使用にチェック
  6. 距離:6px
  7. スプレッド:0%
  8. サイズ:13px

 

レイヤースタイルをコピーして違う長方形ツールに貼り付けることで、同じレイヤースタイルを再現することができます。

 

レイヤーを右クリックすると出るメニューです。

f:id:eye_mememe:20200917201129p:plain

 

左側の長方形ツールにもそのままコピーしてもOKですが、

光の方向など一部修正する必要があります。

 

左側の長方形ツールのドロップシャドウ

f:id:eye_mememe:20200917201235p:plain

  1. 描画モード:通常
  2. カラー:ホワイト
  3. 不透明度:88%
  4. 角度:180度
  5. 包括光源を使用のチェックを外す
  6. 距離:6px
  7. スプレッド:0%
  8. サイズ:13px

包括光源のチェックを外さないと、角度が他にかけたドロップシャドウに連動してしまいます。

 

↓ドロップシャドウをかけ終わったのがこちら。

f:id:eye_mememe:20200917202910p:plain

 

次はテキストを入れていきます。

 

f:id:eye_mememe:20200917203028p:plain

参考バナーは文字だけだったのですが、背景画像に色々あって読みにくいので、文字にドロップシャドウをかけました。

 

ドロップシャドウをかけると

f:id:eye_mememe:20200917203113p:plain

 

文字にドロップシャドウをかける場合も長方形ツールにかけたものとやり方は同じです。

 

テキストを入れるとこんな感じに。

f:id:eye_mememe:20200917203206p:plain

 

▼文字を湾曲させる

↓この部分

f:id:eye_mememe:20200917203355p:plain

 

左のメニューから「パスツール」 f:id:eye_mememe:20200917174513p:plainを選択

上部のメニューで「ツールモード」で「パス」を選択

f:id:eye_mememe:20200917203538p:plain

曲線を描く。

 

f:id:eye_mememe:20200917203626p:plain

 

左メニューから「横書き文字ツール」 f:id:eye_mememe:20200917203720p:plainを選択

マウスカーソルが下の画像のようになったところでクリックするとペンツールで描いた線に沿ってテキストを湾曲させることができます。

 

↓マウスカーソルが変わったところ

f:id:eye_mememe:20200917203952j:plain

 

▼星マーク作成

↓この部分

f:id:eye_mememe:20200917204115p:plain

 

eye-mememe.hatenablog.com

 

▼リボン作成

↓この部分

f:id:eye_mememe:20200917204448p:plain

 

麦芽の画像を配置して完成!!

 

eye-mememe.hatenablog.com

 

▼感想

作り終わってみて、ビール上部の泡の部分が少し右にはみ出し過ぎているかな・・・と。少し消した方がよかったかな!?

背景画像とビール画像が浮いてしまっているような気がする。