フォトショップ エレメンツ ビギナーのために
                        Windows編

画像(写真)に影を付ける

ホームページ作成において掲載写真の各種画像編集が必要になります。 当サイトでは、PhotoshopElements初心者を対象として ホームページ作成・運営で必要な各種画像編集を中心とした操作を紹介します。

画像の縁に影を描く(ドロップシャドウ) − 概要



ホームページ(HP)に写真画像を掲載する時、見栄え良く また カッコ良く掲載した〜い! なんて思う時ってありますよね。
画像に影を付けると。。。。なんと! 見違えてしまったと思うくらい変わることもあるでしょう。

またHP掲載だけでなく、写真アルバムなどの冊子や資料を作る時にも、見栄え良くできます。


。。。。ということで画像に影を付ける操作を説明します。


この 「画像に影を付ける」 ページでは、アートワーク・エフェクトのドロップシャドウにより画像(写真)の縁に影をつけます。


■ 画像に影を付けるイメージ ■


オリジナル画像
オリジナル画像




  
ドロップシャドウ
ドロップシャドウ後
ドロップシャドウ後画像

※ドロップシャドウ後画像は、台紙部分を含めるため実画像より一回り大きな画像になります。
 この例では台紙が、白のため背景色と同化しています。
※オリジナル画像(450×338px)をダウンロードすることができます。
 ダウンロードし 「操作方法」 に従い操作を試してみてはいかがでしょうか。

■オリジナル画像のダウンロード方法
@ オリジナル画像をクリックすると画像イメージが表示されます。
A 表示画像内を 「右クリック」 し 「名前をつけて保存」などを選択するとダウンロードできます。

■画像に影を付ける − 操作概要

@ オリジナル画像を開く
A 台紙用の白紙ファイルを作成
B オリジナル画像のイメージを白紙ファイルへコピー
C 白紙ファイルの画像イメージにドロップシャドウ処理
D 必要に応じて影の角度、距離を調整変更



画像に影を付ける− 操作方法


1. モードの確認
モードの確認
モードの確認
「画像編集モード」 、 「スタンダード編集」 であることを確認します。

2. 画像を開く

(1)画像を開く

   ファイルの開き方は、「 ファイルを開く 」を参照ください。
(2)オリジナル画像の表示
オリジナル画像の表示
オリジナル画像の表示
JPEG形式のオリジナル画像(450×338px)が表示されます。

レイヤーパレット(ウインドウ右側)には、背景のレイヤーのみが表示されています。
3. 台紙用の白紙ファイル作成

(1) 白紙ファイルの選択
白紙ファイルの選択
白紙ファイルの選択
メニューバーから 『ファイル』 → 『新規』 → 『白紙ファイル』 を選択します。


(2) 白紙ファイルの設定
白紙ファイルの設定
白紙ファイルの設定
『新規』ダイアログが表示されます。

台紙用の白紙ファイルのサイズ(幅、高さ)を指定します。
サイズは、オリジナル画像サイズより適当に大きなサイズです。
不要な余白部分は、後でトリミング削除できます。

OKをクリック
例では、600×500を指定。
(3) 白紙ファイルの表示
白紙ファイルの表示
白紙ファイルの表示
白紙ファイルが表示されます。

レイヤーパレット(ウインドウ右側)に、背景のレイヤーのみが表示されています。
4. オリジナル画像イメージを台紙用の白紙ファイルへコピー(複写)

(1)オリジナル画像の全範囲の選択
オリジナル画像の選択
オリジナル画像全範囲の選択
@オリジナル画像のウインドウをアクティブにします。
ウインドウ内をクリックすると、グレーアウトしていたウインドウが前面に表示されアクティブになります。
Aメニューバーから『選択範囲』 → 『すべてを選択』 を選択します。
選択されるとオリジナル画像の縁に点線が表示されます。
なお Ctrl+AキーでもOKです。
(2)オリジナル画像イメージのコピー
オリジナル画像のコピー
オリジナル画像のコピー
@メニューバーから『編集』 → 『コピー』 を選択
なお Ctrl+CキーでもOKです。

オリジナル画像イメージがクリップボードにコピーされます。
クリプボードは、メモリ上にあるもので、見た目には何も変化しません。
(3)白紙ファイル(台紙用)へオリジナル画像イメージをペースト
オリジナル画像のペースト
オリジナル画像のペースト
@白紙ファイルのウインドウをアクティブにします。 白紙ファイルのウインドウ内をクリックすると、ウインドウが前面に表示されアクティブになります。
Aメニューバーから『編集』 → 『ペースト』 を選択
なお Ctrl+VキーでもOKです。

オリジナル画像イメージがクリップボードから白紙ファイルの中央にペーストされ、イメージが表示されます。
(4)白紙ファイル(台紙用)にオリジナル画像イメージの表示
オリジナル画像イメージ表示
オリジナル画像イメージ表示
@白紙ファイルにオリジナル画像イメージが表示されます。
Aペースト操作により 『レイヤー1』 が作成されます。


Bオリジナル画像ウインドウを閉じる。 この時点でオリジナル画像ウインドウは、不要になります。
オリジナル画像ウインドウの右上の 『×印』にて閉じます。
この時、『保存しない』 様に注意しましょう。

5. 白紙ファイルの画像イメージに影を付ける

  画像の影は、アートワーク・エフェクトの写真効果、ドロップシャドウを使用します。

(1) 画像イメージ部分(レイヤー1)をアクティブに
レイヤー1をアクティブに
レイヤー1をアクティブに
白紙ファイルの 『レイヤー1』(画像イメージ部分)をクリックし、レイヤーをアクティブにします。

(2) アートワーク・エフェクトパレットの表示
アートワーク・エフェクトパレットの表示
アートワーク・エフェクトパレットの表示
@ メニューバーから 『ウインドウ』 → 『アートワークエフェクト』 を選択(チェック)します。

この操作によりウインドウ右側にアートワーク・エフェクトパレットが表示されます。
なおパレット部分が表示されていない場合、パレット内の△印をクリックすると表示されます。

Photoshop Elements 8.0の時
メニューバーから『ウインドウ』→『効果』を選択。
(3) アートワーク・エフェクトパレットの設定
アートワーク・エフェクトパレットの設定
アートワーク・エフェクトパレットの設定
@ アートワークエフェクトパレットが表示されます。
Aカテゴリから 『エフェクト、フィルタ、レイヤースタイルを適用』 ボタンを選択します。
Bサブカテゴリの左部分から 『写真効果』 を選択します。
Cサブカテゴリの右部分から 『フレーム』 を選択します。
Dサンプルから 『ドロップシャドウ』 を選択します。

これで準備完了です。

Photoshop Elements 8.0の時
効果パレットの設定
(4) 写真画像に影を付ける (ドロプシャドウ)
写真画像に影を付ける
写真画像に影を付ける
@アートワークエフェクトパレット下にある 『適用』 をクリックします。

これでドロップシャドウが適用され、画像に影が付きます。
この時、白紙ファイルのサイズが少し大きくなります。
この操作により『レイヤー1のコピー』名でレイヤースタイルが作成されます。
このレイヤー名の右に星印が表示されます。この星印は、スタイルが適用されているレイヤーを意味し、影の角度、長さなど変更する時に使用します。

(5) 写真画像に影を付ける 完成イメージ  − できあがり〜! (^^)
画像に影 完成イメージ
画像に影を付ける(ドロップシャドウ)の完成イメージ

画像の影 光の角度、影の色、長さの調整変更− 操作方法


6. 画像につけた影の調整変更

(1)スタイル設定の表示選択
スタイル設定の表示
スタイル設定の表示
@メニューバーの 『レイヤー』 → 『レイヤースタイル』 → 『スタイル設定』 を選択します。
スタイル設定の表示選択
スタイル設定の表示選択
Aあるいはレイヤーパレットの 『レイヤー1のコピー』 の星印(レイヤースタイル)をダブルクリックします。

(2)スタイル設定の表示
スタイル設定の表示
スタイル設定の表示
@スタイル設定ダイアログが表示されます。

A角度:光源の角度を指定
右0°〜左180° 上部をプラス値 下部をマイナス値にて指定
あるいはアイコンの 『針』をドラッグにて。

Bサイズ:影の長さを指定

C距離:画像から影までの長さを指定

D色:影の色


E設定後、OKをクリック

(3) 影の調整変更 完成イメージ  − できあがり〜! (^^)
影の変更 完成イメージ
影(ドロップシャドウ)の角度等の変更完成イメージ

この例は、光源の角度を右上(45°)、画像からの距離を40pxに増やし、不透明度を比率を上げています。
また台紙(白紙ファイル)にグレー色にて塗り潰しています。


7. 画像ファイルの保存

   ファイルの保存は、「 ファイルを保存 」 または 「 Web用に保存 」を参照ください。