WEB制作の学習帳

WEB制作を様々な視点から学ぶブログ

IllustratorとPhotoshopの連携でバナーを作る3

Photoshopでバナーの土台を制作

Photoshopを立ち上げCtrl + Nでファイルの新規作成

幅:300px

高さ:100px

解像度:72

RGBカラー

カンバスカラー:白

レイヤーパネルの下から白と黒のボールをクリックしてグラデーションを選択。

f:id:s19biz:20150701202324j:plain

グラデーション:の黒→透明のパネルをクリック

f:id:s19biz:20150701202333j:plain

 

カラー分岐点をダブルクリックして

左:#93d2ef

右:#dae8fe

f:id:s19biz:20150701202651j:plain

f:id:s19biz:20150701202701j:plain

Illustratorで作ったサンバーストをPhotoshopniペースト(スマートオブジェクトにチェック)

W:50% H:50%にしてShiftを押しながら上にあげる

f:id:s19biz:20150701204544j:plain

Alt + Shiftを押しながら右下バウンディングボックスを右下にドラッグしてカンバスサイズより大きくなったらEnterで確定

f:id:s19biz:20150701204822j:plain

Illustratorからコピーしたレイヤーをサンバーストに変更。

サンバーストレイヤーを選択した状態でレイヤーパネルの下部にある【fx】ボタンから【レイヤースタイルを追加】から【カラーオーバーレイ】を選択。

描画モード:通常の四角いパネルをクリックして#ffffffにする。

f:id:s19biz:20150701220500j:plain

移動ツールでサンバースト画像の白い部分を下にドラッグして中心部が下にはみ出す位にする。

f:id:s19biz:20150701220749j:plain

タスクバーから日本語入力がオフになっている状態で【3】キーを押す。(サンバーストレイヤーの不透明度が30%になる)

 

IllustratorからリボンをコピーしてPhotoshopにペースト(スマートオブジェクトにチェック)

f:id:s19biz:20150701221525j:plain

ペーストしたレイヤー名をリボンに変更してレイヤーパネルの下部【fx】から【レイヤースタイルを追加】→【グラデーションオーバーレイ】を選択。

f:id:s19biz:20150701222713j:plain

左カラー分岐点を#ffba00

右カラー分岐点を#fffc00

f:id:s19biz:20150701222729j:plain

バナー下地完成

f:id:s19biz:20150701222852j:plain