あなたのカラダの悩みからガジェットノウハウまで。ハイブリッドに情報発信するマニアックブログ

HAYAMIZ BLOG

WordPress

ワードプレスでカッコいい画像をフリー素材だけで作る方法を公開。簡単に作れておすすめです

  1. HOME >
  2. ブログノウハウ >
  3. WordPress >

ワードプレスでカッコいい画像をフリー素材だけで作る方法を公開。簡単に作れておすすめです

ブログを始めるうえで魅力的な画像も重要なひとつだと思います。

しかしこれがなかなか難しいと感じる人は多いかもしれません。

 

わたしも絵のセンスはゼロで娘に「お父さんお絵かきしよ~」とせがまれてもなかなかうまい絵がかけずに四苦八苦しております。

 

この記事では、そんな絵のセンスがひとつもない素人のひとでも魅力的な画像の作り方を紹介します。

 

準備するもの

準備するものをは以下のとおりです。

  • もととなる画像
  • 画像を編集するソフトウェア
  • WEBサービス

 

もととなる画像

今回は例として、「写真ACという著作権フリーの写真」を利用させていただきます。

 

あなたが良いとおもった画像を選んでください。

 

※なお、無料提供していただいている写真ACでは以下の規約があります。

下記は写真ACの利用規約の抜粋です。

写真をダウンロードした利用者は、商業目的その他目的を問わず、写真を自由に改変、編集および使用することができます。 ダウンロードした利用者が利用することはもちろん、取引先への提供の為に、あるいは教育目的のために、あるいは、広告やパンフレット等の印刷物や、ホームページ等のマルチメディアコンテンツ、映像、ゲーム、ソフトウエア等の構成要素の一部として、使用することも自由です。
ただし、以下の使用方法は禁止されます。禁止事項に違反する利用方法は、弊社の著作権の侵害となりますので、ご注意ください。

 

写真ACでは、このように画像は自由に使ってもよいと明記されているので安心して利用できます。

他サイトでの画像の利用はそのサイトの利用規約に沿った利用をお願いします。

 

画像編集ソフトウェア「PhotoScape」

この編集ソフトはフリーでありながら結構高度なことまでできてしまう優れたソフトウェアです。

 

下記よりダウンロード、PCへインストールしてください。

 

こちらも写真ACと同様、利用規約に注意してください。

まあ、普通に使う分には問題はないです。

 

これで準備が整いました。

 

画像作成の開始

いよいよ、PhotoScapeを使って画像作成に入ります。

 

画像編集

step
1
先ほどインストールしたPhotoScapeを起動しましょう。

下図のように起動出来たら先ほど写真ACなどからダウンロードした画像を読み込みます。

 

step
2
読み込みが完了すると画像が表示されます。

「トリミングタブ」をクリックします。

 

step
3
画像をトリミング(切り抜き)します。任意の大きさに切り抜きましょう。

切り抜き範囲を選択できたら、「トリミング」ボタンをクリックします。

 

step
4
切り抜きが完了しました。

続いて、「オブジェクト」をクリックします。

 

step
5
次にタイトルを入力します。

本ブログのタイトル名は「HAYAMIZ Blog」ですので、デカデカと設定しました。

 

主に設定する箇所は下記になります。

 

フォントタイプ・フォントサイズ・文字色

わたしのサイトの例で説明すると、フォントタイプは游ゴシック、フォントサイズは85、文字色は黒となります。

 

アウトライン

適用にチェックを入れ、好きな色を設定します。わたしのサイトの例では白を選択しています。

 

シャドウ

これは好みですね。シャドウ(影)をつけると立体的でかっこいいイメージになります。

 

step
6
サブタイトルも入力した画像が以下となります。

以下で一通り、完成です。とっても簡単です!

 

step
7
最後に画面右下にある「保存」をクリックして、作成した画像を保存して完成です。

ただ、まだ、少しさみしいなと思いましたので、追加でアイコンを作成します。

 

アイコン作成

Design Evo

 

上記のサイトはWEBブラウザー上でタイトルロゴ作成などがフリーでできてしまう素晴らしいサイトです。英語ではありますが、直感的に操作ができ、英語がわからない方でも安心です。

ちなみにピンとこないであろう英語をまとめました。ご参考にどうぞ。

  • Transparent トランスペアレント:透過する
  • Background バックグランド:背景
  • Layout レイアウト:アイコンや文字の構成
  • Preview プレビュー:画像確認
  • Undo アンドゥ:戻る
  • Redo リドゥ:進む

 

step
1
以下はDesign Evoの画面です。

アクセスが完了すると下図のような画面になりますので、はじめにアイコンサイズを決めます。

デフォルト(初期値)では500×500pxですが、そのままでも良いです。

 

step
2
Search millions of now...の部分にて検索するアイコン名を入力します。

かなり曖昧な部分ですが、わたしのサイトで使っているアイコンでは「RSS」と検索しました。するとアイコンがずら~っと並びますので、お好きなアイコンを選んでください。

難点は、英語で検索しなければならないという点ですね。

 

step
3
アイコンができました。

色が黒いので下記の部分をクリックして、色を選びます。

 

step
4
色の変更が完了しました。

ちなみに「Gradient」を選ぶと、グラデーションをつけることができます。

 

step
5
アイコンが完成したら「Download」をクリックして、ファイルを端末へ保存します。

ダウンロードする際は、DESIGNEVOを宣伝してくださいといったメッセージがでますので、いいなと思ったらぜひ拡散してください。

 

ダウンロードが完了すると、下記の3つの画像データが取得できます。

今回は、3番目のTransparent版を使用します。

 

画像を合成する

PhotoScapeに戻り、PhotoScapeで作った画像とDESIGNEVOで作成したロゴを合成します。

 

step
1
下図の赤枠が示す部分のアイコンをクリックし、「Photo...」をクリックしてください。

 

step
2
先ほどDESIGNEVOで作成し、ダウンロードしたファイルから下記を選択します。

 

step
3
あらたに画像が追加されるので、配置したい場所へアイコンを移動させます。

サイズもこのとき適正なサイズに調整します。

 

step
4
最後に「保存」をクリックして画像を保存して完成です!

おつかれさまでした!!

 

おわりに

すべてフリーで入手、画像編集ソフト等を使って画像作成の手順を書きました。

 

絵のセンスがなくて、ハードルがたかいな~と思っている方でも十分にかっこいい画像は作れます!

わたしのようにセンスのない人間でもできたので、皆さんもできます。

 

ペイントショップなどの画像編集ソフトを使うことでより繊細な画像作成が可能です。

フリーだとやはり限界もあるので、本格的な画像作成には、こういった編集ソフトがあるととても便利ですね。

 

 

参考になれば幸いです。

関連コンテンツ

-WordPress
-ワードプレステーマ

Copyright© HAYAMIZ BLOG , 2019 All Rights Reserved.