シャツセットセールPhotoshopデータ全体今日の「ホームページ制作の現場」は、前回に引き続き、楽天人気ショップ店「紳士服のオルボ」様の画像制作についてご紹介します。
以下のページの写真加工についてです。
シャツ5枚セット5,250円セール

今回はPhotoshopの「マスク」の勉強です。
前回の「レイヤースタイル」に加え、プロ必須のとても便利な機能なので是非覚えて下さい。


レイヤーまず、レイヤーの紹介です。今回はとってもシンプル。
1枚の写真あたり、たったの2枚しかレイヤーがありません。
四角い写真の比率は、うさこはたいてい4:3にしています。
この写真の場合、横160px、縦120pxとなっています。



元データ
元データはこちらの通り。ちょっとぼやけていますね。

まず、このファイルをPhotoshopで開き、移動ツールでドラッグ&ドロップし、全体を並べているphotoshopファイルに持っていきます。



チャンネル次に、写真を切りとります。
ここが今日のポイント♪
まず、写真のレイヤーを選択後、「長方形選択ツール」を選択、オプションバーの「スタイル」を「標準」から「固定」に変更し、「幅:160px」「高さ:120px」とします。
この状態で、画面をクリックすると、160×120pxの点線の枠が出てきますね。
ちょうどいいと思える所に枠を設置し、レイヤーウィンドウ一番下の、左から3番目のボタン「レイヤーマスクを追加」をクリックします。

すると、レイヤーに、黒の中に白い四角があるものが表示されます。これがレイヤーマスクです。白い部分が見える部分、黒い部分が隠した部分です。
レイヤーマスクはレイヤーの画像とリンクしていますが、レイヤーに表示される鎖のマークをクリックして無くすと、画像は画像で、マスクはマスクで拡大縮小、移動することができます。
リンクを外して、ちょうど良い位置、大きさになる様に画像を調整します。
今回は触りませんが、レイヤーマスクは「チャンネル」ウィンドウにも追加されています。(画像参照)
このチャンネルで白黒のグラデーションをかけると、写真の端が消えていく表現が可能です。


ドロップシャドウ境界線

次に前回利用した「レイヤースタイル」で「ドロップシャドウ」と「境界線」を追加します。
境界線は「内側」に入れるのがコツ。外側や中央にすると、線や角がぼやけてしまいます。
写真側のレイヤーはこれで作業終了ですね。
写真をシャープにしたい場合は「フィルタ」の「シャープ(輪郭のみ)」等をかけておくと良いでしょう。

一つ上のレイヤーは白いラインです。
こちらは鉛筆ツールでチマチマ線を引くのも良いですが、簡単な方法をご紹介しましょう。

まず、新規レイヤーを用意します。
キーボードのコマンドキー(Windowsはコントロールキー)を押しながら、先程の写真レイヤーの「マスク部分(黒に白の四角がある画像)」をクリックします。
そうすると、マスクの形の選択範囲ができますね。もちろんサイズは160×120pxです。

選択範囲を縮小次に「選択範囲」から「選択範囲を変更」の「縮小…」を選択します。
「2px」縮小します。選択範囲が156×116pxとなります。


境界線次に「編集」から「境界線を描く…」を選択し、「内側」「1px」「白」の境界線を設定します。
以上で、くっきりとした白い枠が完成です。


文字と画像だけでは説明が解りにくいと思いますので、解らないことがあったら、コメント欄で教えて下さい。
詳細に解説します。(^-^)

PhotoshopはCS2を利用していますが、Photoshop6以上であれば同等のことが可能です。
(バージョン5.5でも方法は違いますが、なんとかできると思います。)

このエントリーをはてなブックマークに追加