画像加工ソフトは必要なし!無料でブログ記事用のカッコいい画像の作り方

無料で画像加工

アフィリエイトやブログなどのコンテンツの重要な部分は「文章」つまり「文字データ」です。

Googleがその文字データを解析して、どういう内容が書かれているのかを判断して検索結果の順位に反映させます。

だから、乱暴に言えば文字だけきちんと書いてれば、検索順位はそこそこまではあがります。

ただ、やはり画像があるほうが読者の目を引きやすいですし、内容の理解度を高め、長い文章も飽きずに読ませることができます。

今回は必要最低限覚えておくと便利な画像加工方法を解説します。(記事内の画像はクリックで大きく見ることができるものがあります)

画像加工ができるとカッコいい

とりあえず、今回の記事を読むと以下のような画像が作れるようになります。

 

画像加工見本

 

これくらいのことができれば、画像でブログの差別化ができてくると思います。

慣れれば5分もあれば作ることができるので、覚えておいて損は無いですよ。

 

画像加工はブラウザのみでできる

画像加工といえばPhotoshopなどの有料のソフトが必要だと思いがちですが、簡単な加工くらいなら(知識があれば難しい加工でも)、今はブラウザから無料で使えるサービスがあります。

ブラウザで画像加工ができるということは、サブのパソコンでもネットカフェのパソコンでもインターネット環境があればできるということになります。

 

>>ブラウザで画像加工できるWEBサービス Photopea | Online Image Editor

 

Photopeaにアクセスしたら、おそらく英語表記になっていると思います。

なので、まずは上部のメニューから more > language >日本語 に設定しましょう。

 

日本語化

 

そうするとメニューを含めすべて日本語表記になり使いやすくなります。

 

日本語になった

 

画像加工で覚えておきたい機能

日本語設定ができたけど、メニューやアイコンが多すぎて「自分にはできないかも・・・」と思うかもしれません。

しかし、画像加工なんて必要最低限の機能だけ覚えておけば十分です。

それらの基本機能を応用するだけで、たいていのことはできますよ。

 

ファイルを開く・新規作成

画像加工にあたってまずすることといえば、キャンバスを用意することです。これは実際に絵を描くときもそうですよね。

ペンがあっても描く紙がなければどうしようもないのと同じです。

画像加工の場合、真っ白なキャンバスを用意する「新規作成」と、すでに持っているイラストや写真を開く「ファイルを開く」パターンの2種類あります。

 

上部メニューの ファイル > 新規 なら新規作成、 ファイル > 開く なら既存の画像ファイルを開くということになります。

 

「新規」の場合はキャンバスのサイズ選択のウィンドウが出るので、スクリーン > 680×480 のサイズを選んでおけばブログなどにはちょうどいいでしょう。

「開く」の場合は、パソコンなどの中にある任意の画像データを選択して開きます。

 

画像サイズの編集

「新規」の場合はキャンバスサイズを決めることができますが、既存の画像データを「開く」場合には、その画像のサイズのままとなります。

無料写真素材やイラスト、自分で撮った写真などはアフィリエイトブログに載せるサイズにしては大きいものもあります。

サイズが大きいまま掲載しても、たいてい表示サイズは適宜縮小されて読者が見る分には影響はないでしょう。

しかし、画像データの容量が大きくなると、ブログの表示速度(読み込み速度)が遅くなってしまうので、Googleのサイト評価が下がります。

それを避けるために、最初に画像のサイズを適当な大きさに縮小しておくことが望ましいです。

 

上部メニューの イメージ > 画像サイズ を選択します。(キャンバスサイズではないので注意!)

画像サイズのウィンドウで「縦横比を維持する」にチェックが入っていることを確認して、「幅」の数値を変更しましょう。

「縦横比を維持する」にチェックがあることで、「幅」の数値を変更すると自動的に「高さ」の数値も幅に合わせて変わります。

ブログのサイズはせいぜい幅640pxあれば十分でしょう。その辺は自分のブログの幅に合わせてください。

 

画像サイズを小さくしたときに表示が小さくなった場合は、上部メニューの 表示 > 拡大(または縮小) などで調整してください。

左の虫眼鏡のアイコンでも拡大・縮小可能です。

 

レイヤーの概念を知ろう

画像加工に欠かせないのがレイヤーなんですが、これが苦手な人が結構多いんですよね。

レイヤーというのは、洋服で言えば「重ね着」みたいなことです。

例えばワイシャツにセーターを重ねると、セーターは全体が見えますが、ワイシャツは襟か袖口くらいしか見えませんよね。

画像加工でも同じように、背景の絵の上に文字を置くと、文字と重なる背景は消えたわけではなく隠れているだけです。

 

最初の画像を例にあげると、このようにレイヤーを分解することができます。

背景の写真の上に、透明なフィルムに描いた文字などを重ねるイメージをすればわかりやすいと思います。

レイヤーが便利なところは、各階層ごとに(文字なら文字だけというように)編集ができるので、背景の写真をいじらずに加工ができる点です。

 

Photopeaの表示では右側にレイヤーの構造がわかるようになっています。

ここでレイヤーを入れ替えたり編集したりすることができます。

色が違うレイヤーが「現在編集可能」なレイヤーになります。別のレイヤーを編集したい場合は、そのレイヤーをクリックして「選択状態」にしなければなりません。(これが忘れやすいので注意です)

 

実際の画像加工の手順

基本機能が理解できたら、実際に画像加工をしてカッコいい写真を作ってみましょう。

新規で作るのは手間ですから、まずは背景となる写真を無料素材サイトなどでダウンロードします。

 

1.画像を開いてサイズを整える

Photopeaへアクセスして ファイル > 開く からダウンロードした画像を開きます。

そして、イメージ > 画像サイズ で幅を640pxにしましょう。

 

2.半透明の黒い帯を入れる

次に黒い半透明の帯を入れていきます。

 

右側のレイヤー管理の部分で「レイヤーの追加ボタン」を押します。

「レイヤーの追加」は、写真の上の透明のフィルムを乗せた状態をイメージしてください。(上の画像では「レイヤー1」が透明フィルム)

 

左のアイコンから矩形選択のアイコン(点線の四角)を押します。

そして、黒い帯を作りたい箇所をマウスでドラッグします。(矢印のように左上から右下にドラッグ)

黒い帯を作りたい箇所が点線で囲まれればOKです。

 

黒い帯を作りたい部分が点線で囲まれていることを確認し、上部メニューの 編集 > 塗りつぶし を選びます。

塗りつぶしウィンドウで、「Black」を選択してOKを押します。

 

このように点線の中が真っ黒になれば成功です。(透明フィルムの一部が黒く塗りつぶされたイメージです)

 

次は真っ黒に塗りつぶした部分を半透明にします。

右のレイヤー管理のところで、黒い帯のレイヤーを選択して、「不透明度」を70%にします。

背景が透けたらOKです。

 

3.文字を入れる

次に文字を入れていきます。

 

右側の「文字」という箇所を押します。

文字の情報が出現します。

 

フォント(文字の種類)を選びます。

「source code pro」という部分を押して、「Chi-Jap-Kor」というところをチェックしてください。(おそらく中国語・日本語・韓国語のフィルタ)

ゴシックなら「NanumGothic」、明朝なら「SoukouMincho」を選びます。日本語はこの2種類のみです。

英語表記の場合は「Chi-Jap-Kor」のチェックをせずに、好きなフォントを選んでください。

 

次に文字の色を選びます。パレット選択して、ウィンドウが出たら「白」を選択してOKを押します。

今回は白を使うのですが、別の色にしたい場合は左のカラーピッカーから好きな色を選んでください。

 

左のアイコンから「T」(文字入力)を選び、文字を書きたい場所をクリックして、キーボードで文字を入力します。

文字は自動的に新しいレイヤーを作成して描かれます。

 

左のアイコンの矢印を押して、文字の部分にカーソルを合わせてドラッグすると文字を動かせます。

文字を好きな位置に動かします。

 

文字の大きさは上部メニューの 編集 > 自由変形 で大きさを変えられます。

 

おなじように「natural life」という文字も入れてみましょう。

 

完成したら ファイル > として出力 > jpg を選んで画像を保存します。

jpgやpngで保存をした画像は、レイヤーが統合(合体)されるので編集できなくなりますのでご注意ください。

再度編集するためにデータを残したい場合は、ファイル > psdで保存 を選んで編集用のデータを残しておくと、再度編集可能です。

※ブログなどに使用する場合はjpgやpng形式でないといけません。psdはあくまで編集用に別で保存しておくということです。

 

画像加工まとめ

画像加工はなんか難しいイメージがありますが、元の写真が良ければ文字を追加するだけでもそれなりに見栄えが良くなります。

この方法だけでもブログの記事に使う写真のほか、ブログやSNS、facebookページのヘッダーなどにも応用できますのでご活用ください。

↓↓ブログランキング参加中m(_ _)m↓↓


ご登録はこちらをクリック

“画像加工ソフトは必要なし!無料でブログ記事用のカッコいい画像の作り方” への1件のコメント

  1. TREETOP より:

    うちむーさん、こんにちは♪
    写真加工は、慣れてくると楽しいですよね!
    わかりやすい説明でした!また訪問させていだたきます。
    応援していきます♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です