[PhotoShop]画像入りWEB用ヘッダーの作成

[PhotoShop]画像入りWEB用ヘッダーの作成

前々回に作成したバナーの応用として、今回は背景に画像を加えて作ってみる.
・PhotoshopでWebバナーを制作
https://kocoffy.com/programmer_cat/photoshop/post-449/

画像の挿入

メニューから「ファイル」>「開く」を選択.

画像を開く

 

適当に画像を選択して「開く」.

画像選択

 

今回はこの写真を使う.

猫のあくび

 

ちなみに背景に直接画像を開いてしまうとサイズ変更などができないみたいです…
レイヤーのカギマーク(下記赤丸のとこ)をクリックして外すと編集できるようになります.

背景からレイヤーへ

 

このままだと大きいのでサイズを変更する.
メニューから「編集」>「変形」>「拡大・縮小」を選択.

変形サイズ変更

 

枠が出てくるのでドラッグでサイズを変更する.
その際「shift」キーを押しながらドラッグすることで縦横の比率を変えずの拡大・縮小ができる.

サイズ

 

横が大体800pxぐらいになるように縮小した.

サイズ変更

 

続いて事前に作っていたパネルへ画像を移す.
画像を掴んだまま隣のタブに持っていく.

ドラッグ

 

すると隣のタブが表示されるのでその中のどこかで離す.
画像がコピーされる.

ドラッグ完了

 

サイズを調整します.

サイズ調整

 

また、せっかくなので画像の回転もしてみる.
メニューから「編集」>「自由変形」を選択.(Macだと「command + T」でショートカットできる.)

自由変形

 

選択したら下記赤丸らへんにカーソルを持っていくといかにも回転してくれそうなカーソルに変わる.

回転

 

ドラッグで回転させるとカーソルの右上に角度も表示されるみたい.

回転完了

 

テキスト追加

あとは前々回(以下のリンク)の時みたくテキストを挿入して仕上げていきます。
・PhotoshopでWebバナーを制作

PhotoshopでWebバナーを制作

こんな感じになりました!(結局回転は戻した..)

完成

 

保存

JPEGで書き出します.
「ファイル」>「書き出し」>「Web用に保存(従来)」を選択.

Web用に保存

 

形式をJPEGにしたり、以下のように設定した.
「保存」をクリック.

JPEGで保存

 

開いてみる.

画像ありWebバナー