WordPress自作テーマ画像の作り方

Hello World!!
杉山です。

今日は、WordPressの自作テーマの画像の作り方について記事にしていきたいと思います。ちなみに、自作テーマの画像ってなんだって感じの人もいるとおもうので説明しておきます。

こういうやつですね、自分の作った自作テーマのスクリーンショットをそれぞれの画面にはめ込んだ画像です。

有料テーマを販売しているようなサイト等では、絶対に見かけると思います。

私も自分で、WordPressのテーマを作っていて、公開するときはこの画像を作って公開したいと決めていました。

でも、どうやって作るんだろう…。と、もやもやしながら作業に勤しんでいましたが。いざ完成して、やり方を探すけれども、どこにもこの情報がなかったのです。

いろいろな、検索をかけてみましたが見つかりませんでした。

Adobe系のソフトを使えばきっと作れるんだろうな。とは思ったものの、この為だけに買うのは気が引けるお値段ですし。

それなりに試行錯誤して、無料で作れる方法をあみ出した?のでそれを公開します。

用意するべきソフト及び素材

  • GIMP
  • はめ込み用画像

GIMP

まずは、画像をはめ込むための編集用のソフトをご自身のパソコンにインストールしましょう。Windowsのペイントなどのソフトでは無理でしたので、超優良級最強画像編集ソフトのGIMPを使います。

超優良級最強画像編集ソフトですけど、無料なので安心してください。
以下の公式サイトよりダウンロード&インストールしましょう

GIMP公式サイト

英語のサイトですが、翻訳を使いながらダウンロード&インストールしてください。

はめ込み用画像

次は、はめ込み用の画像をダウンロードしましょう。

はめ込み用の画像のことをモックアップ画像というそうです。
私は、この件で鬼の検索をかけていたときにはじめて出会った言葉でした。

このモックアップ画像ですが、Facebookが作成して無料でダウンロードできるサイトがあります。

Facebook Devices

このサイトも英語ですが、英語がわからなくてもまったく問題ありません。
下にスクロールしていくと、デバイスの一覧がでてきますので、ご自身で好きなものを選んで、ダウンロードしてください。

画像をクリックするとzipファイルがダウンロードされます。

zipファイルを開けてみてください。
そして、そこから画像(png)を任意の場所の移動させておきましょう。

モックアップ画像に、スクリーンショットをはめ込む

では、次に実際にモックアップ画像にGIMPを使ってご自身の自作テーマのスクリーンショットをはめ込んでいきましょう。

では、まずはじめに先ほどインストールしたGIMPを開きましょう。
GIMPを開いたら、下記のようにモックアップ画像と埋め込みたいスクリーンショットをドラックアンドドロップしましょう。

モックアップ画像の下にスクリーンショットを表示させる必要があるため、優先順位を変えましょう。

もうここまでくれば、半分完成したようなものですね。
後は、スクリーンショットの画像を大きくして、画面上に表示させるように演出するだけですね。

移動カーソルでスクリーンショットを、モックアップ画像の画面の左上まで持ってきて、拡大カーソルで右上をつまんで、ひっぱって拡大させましょう。

そうすれば、下記のような感じになると思います。

あとは、邪魔な画面外にでているスクリーンショットの画像を切り取るだけですね。

モックアップ画像も一緒に切り取ってしまってはダメなので、スクリーンショットをまず選択します。

ここをクリックしておけば、作業画面上でなにをしようがモックアップ画像のほうに危害を与えることはありません。

では、後は切り取るだけですね。
選択カーソルで、切り取りたい部分を選択してキーボードの「delete」キーをクリックです。

はい、こんな感じですね。実はこれで完成です。
どうでしょう?かなり簡単だったのではないでしょうか?

後は、こちらを保存するだけになります。
このGIMPのソフトは保存の仕方も特殊なので、一緒に見ていきましょう

上記の画像のように、「こちらです」と書いているところが、いわゆるいつもの保存の仕方と同じ個所になりますのでお間違いのないように、使ってください。

上書きでも、名前を付けてエクスポートでもどちらでもいいと思いますが、これで完成になります。

同じ要領で、ラップトップの埋め込み画像を作るもよし、スマホ用を作るもよし、タブレット用を作るもよしです。

そして、全部が出来上がれば。
今度は一つの画像の中に、自分の好きなようにそれぞれの画像を配置すれば、自作テーマの画像の完成になります。

これなら、誰にでもできて、かつ無料なのでいいと思います。
是非、参考になったならうれしく思います。

長い文章でしたが最後まで読んでいただき、ありがとうございました。