TOP  MENU


写真を変形フレームにおさめた画像に加工する(Photoshop) 基本編  応用編

デモ画像は縮小表示されています。各画像をクリックすると拡大して表示されます。
フレームに使うGIF画像です。
四角のフレームならきっちり写真をはめられますが、複雑な形のフレームにもすっきりと写真をおさめる方法が知りたいとのご希望がありましたので、説明していきます。

写真の画像ファイルを開きます。
なるべくこの時点で「背景」を「レイヤー」に変えておきます。
「背景」のままだと、変形は出来ないし、レイヤーの上下移動も出来ないし、出来ないことだらけなので困ることになります(笑)
レイヤーパレットをダブルクリックするだけですから、とりあえず「レイヤー0」にしておいてください。
フレーム画像を写真画像の上に引っ張り込むようにドラッグします。
するとフレーム画像がコピーされて写真レイヤーの上に新しいレイヤーとして取り込まれます。もちろんフレーム画像を「全て選択」して「編集→コピー」して写真画像の上で「ペースト」しても同じ事ですが、小生はめんどくさがりなので引っ張ります(笑)

フレーム画像のレイヤーを一枚コピーします。
レイヤーコピーをするにはレイヤーパレットの「ゴミ箱のとなり」にある
「新規レイヤー」のアイコンめがけて、コピーしたいレイヤーをドラッグします。
「新規レイヤー」アイコンだけを押すと、何も描かれていない空っぽのレイヤーが新しく出来ます。

コピーしたフレームの画像の内側を、何色でも良いですから塗りつぶしてしまいます。
この画像が写真を切り抜く際の「型紙」になります。

※まあ、この場合は写真が収まる場所が綺麗な楕円なので、わざわざ塗りつぶしをしなくてもその形で切り抜けばいいのですが、変則的な形の場合(応用編参照)であっても使える方法として見ていってください。


塗りつぶしたフレーム画像を、写真のレイヤーの下に移動させます。
レイヤーパレットで目的のレイヤーをドラッグすれば移動できます。

一番上になったフレームのみの画像は、しばらく作業に関係ないので、「目玉」をクリックして非表示にしておきます。

写真のレイヤーを選択(レイヤーパレットがグレーになっているはずです)し、Ctrlキー(たぶん左手の小指当たりに見つかります)を押しながら、レイヤーパレットの「一番下のレイヤー」をクリックします。

すると、塗りつぶしたフレームの形に選択範囲を示す破線がチカチカと生じてくるはずです。


選択範囲が表示されたら、ツールバーの「選択範囲」をクリックし、「選択範囲を反転」を選びます。

すると選択範囲が切り替わり、フレームの形の外側の部分が選択範囲として新たに表示されます。

この状態でDeleteキーを押すと、選択範囲に指定されていた部分が消去されます。

余計な部分をすっきり消去したい時は、このように選択範囲の反転をうまいこと利用してください。楽です。


めでたく切り抜かれた画像に、さっき非表示にしておいたフレーム画像を表示させるとこのようになります。

「表示レイヤーを結合」させてひとつにまとめます。

このまま保存すると、周りの余白部分までいっしょにくっついてくるので、
イメージ→トリミング→透明ピクセルのトリミングですっきりさせます。

「切り抜きツール(シャープ#みたいなアイコンのやつ)」を使ってももちろんかまいません。


Web用にJPG画像で保存します。写真の場合は色数が多いのでGIFにするとファイルサイズが馬鹿でかくなったり、減色しすぎると「点描」みたいになってしまいます。それがいいという場合もたま〜にありますが(笑)

表示するページの背景色によって、画像のまわりの色を変化させておくこともできます。

JPEGで保存するときに「マット」という選択があるので、そこでカラーを指定することも出来ますし、トリミングした後の画像の下に新しいレイヤーを作って、そこを希望の色で塗りつぶし、再度レイヤーを結合するという方法でも同じ結果が得られます。

例では薄紫色にマットしてみました。実際のWebページの背景色を、この薄紫と同じにすれば、画像の周りが「いかにも四角いのよ」という表示から脱却できます。
表示ページ例はこちら