【GIMP】フリーPC素材で作るWebサイト実績画像の作り方

こんにちは、koheiです。
Webサイト制作会社やWebデザイナーのホームページを見ると、PC画像に制作したWebページがはめ込まれた画像（Webサイト実績画像）をよく見かけると思います。
ということで、今回は、GIMPを使って、Webサイト実績画像の作り方を紹介します。

1.PC素材を読み込む

PC素材とスマホ素材は、私が作ったフリーの素材を使います。
まずは、以下からファイルをダウンロードしましょう！

PC素材_モバイル素材

1 file(s)   66.41 KB

Download

まずは、ダウンロードしたPC素材のファイル「pc_mobile_image.psd」をGIMPで読み込みましょう。
GIMPを起動したら、[ファイル]→[開く/インポート]を選択します。

ダウンロードしたPC素材ファイル「pc_mobile_image.psd」を選択し、[開く]をクリックします。

PC素材には、カラープロファイルが埋め込まれていますので、以下の画面が表示されます。
どちらを選択しても問題にはなりませんが、ここでは「変換」をクリックしておきます。

これで、PC素材をGIMPで開くことができました。

2.Webページのスクリーンショットを撮る

次にPC素材に合成させるWebページの画像を用意します。
MACの場合は、Command+shift+4で選択範囲を指定してスクリーンショットが撮れます。WindowsではPrintScreenボタンなどを使って画像として保存しましょう。

3.PC素材とWebページの画像を合成する

GIMPの[ファイル]→[レイヤーとして開く]を選択します。

先ほどスクリーンショットで保存したWebサイトの画像を選択します。

Webサイトの画像を開いたら、開いた画像のレイヤーをドラッグして、PC画像レイヤーの下に移動させてください。

次に、ツールボックスの[拡大・縮小]を選択します。

ちょうどいいサイズになるように、ドラッグして画像を縮小させます。

この時、注意してほしいのが、拡大・縮小パネルの幅と高さの比率が変わらないように以下画面の鎖マークをクリックしておいてください。※縦横比が変わると画像が潰れたようになって見た目が悪くなります。

次に、ツールボックスの[移動]を選択し、最適な位置へ移動させましょう。

位置の調整が終わったら、PCフレームからはみ出した部分を削除します。※サイズ調整でPCフレームに収まる場合は、削除しなくて結構です。

ツールボックスの[短形選択]を選択します。

最終的に残したいWebサイト画面を短形選択で選択します。

メニューの[選択]→[選択範囲の反転]をクリックします。

選択範囲が反転され、以下のように削除したい部分が選択されます。

メニュー[編集]→[消去]をクリックします。

消去できたら、[選択]→[選択を解除]をクリックし、選択範囲を解除しておきましょう。

不要な部分が削除され、PC用画像が完成しました。

4.スマホ素材とWebページの画像を合成する

今度は、スマホ素材とWebページの画像を合成します。

スマホ画像が不要な場合
もし、スマホ画像が不要なら、以下のようにスマホ画像を非表示にして、手順5の「画像をエクスポートする」に進んでください。PCだけの画像が出来上がります。

[ファイル]→[レイヤーとして開く]を選択し、スマホ用のスクリーンショット画像を開きます。
開いた画像のレイヤーをスマホ画像レイヤーの下へ移動させます。

以上で、完成です。

5.画像をエクスポートする

最後に、完成した画像をpngファイルとしてエクスポートしましょう。
※jpgファイルは、背景の透過ができません。今回のように背景を透過している画像は、png(ピング）としてエクスポートすることをおすすめします。

[ファイル]→[名前を付けてエクスポート]を選択します。

ファイル名に[xxxxx.png]を付け、ファイルの種類を[PNG画像(*.png)]を選択し、エクスポートをクリックします。

圧縮レベルなどを設定し、エクスポートをクリックします。※圧縮レベルは、画像サイズ、画質を確認しながら最適なレベルを設定してくださいね。

以上で、Webサイト実績画像が完成です！

最後に

以上、GIMPでWebサイト実績画像を作る方法を説明しました。
少しでも参考になれば幸いです。
それでは！！

スポンサーリンク