【GIMP】フリーPC素材で作るWebサイト実績画像の作り方
こんにちは、koheiです。
Webサイト制作会社やWebデザイナーのホームページを見ると、PC画像に制作したWebページがはめ込まれた画像（Webサイト実績画像）をよく見かけると思います。
ということで、今回は、GIMPを使って、Webサイト実績画像の作り方を紹介します。
目次
1.PC素材を読み込む
PC素材とスマホ素材は、私が作ったフリーの素材を使います。
まずは、以下からファイルをダウンロードしましょう！
まずは、ダウンロードした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だけの画像が出来上がります。
[ファイル]→[レイヤーとして開く]を選択し、スマホ用のスクリーンショット画像を開きます。
開いた画像のレイヤーをスマホ画像レイヤーの下へ移動させます。
画像の縮小→移動→不要部分の削除を実施して、スマホ画像を作成しましょう。詳しくは、「3.PC素材とWebページの画像を合成する」をご覧ください。
以上で、完成です。
5.画像をエクスポートする
最後に、完成した画像をpngファイルとしてエクスポートしましょう。
[ファイル]→[名前を付けてエクスポート]を選択します。
ファイル名に[xxxxx.png]を付け、ファイルの種類を[PNG画像(*.png)]を選択し、エクスポートをクリックします。
圧縮レベルなどを設定し、エクスポートをクリックします。※圧縮レベルは、画像サイズ、画質を確認しながら最適なレベルを設定してくださいね。
以上で、Webサイト実績画像が完成です！
最後に
以上、GIMPでWebサイト実績画像を作る方法を説明しました。
少しでも参考になれば幸いです。
それでは！！
スポンサーリンク
飲食店用WordPress無料テーマ「InomaRestaurantBasic」
飲食店用の無料WordPressテーマを作成しました。
店のコンセプト、メニュー、アクセスなど
飲食店に必要な最低限の機能を搭載しました。
これから飲食店のホームページを開設したい方、
この無料テーマを是非活用してみてください。
ブログ用WordPress無料テーマ「chameleon(カメレオン)」
WordPressテーマ（chameleon）は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。 初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください！
士業用WordPress無料テーマ「InomaExpertBasic」
士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。
