WordPressを運営してると写真やイラストは欠かせませんよね。
でも”もう少し手を加えたいな”とか”この画像他のサイトでも使ってたな･･･”とか、かぶったりすることもあります。
そこで今回は無料で手に入るPhotoshopCS２で画像加工の最も簡単な方法をお教えします。
TOP画像なども外注に出さずとも、お金をかけず自分で納得のゆくまで作ることもできます。
オリジナリティ溢れるサイト作りにぜひ役立ててください＾＾
Contents
WordPressのアイキャッチやTOP画像を無料のフォトショップCS２で簡単に加工する方法
PhotoshopCS２はWindowsXP全盛時代のソフトですから、Windows10では当然サポート外です。
というかサポート自体終了していて起動しないとか、バグが出るなど不具合があっても全て自己責任で解決しなくてはなりません。
＜PhotoshopCS２ダウンロード先（日本語）＞
もちろんPhotoshopCS２でなくても、最新のクラウドPhotoshopでもやり方は同じですので。
無料でやりたいかお金を払ってやりたいかの差です。
頻繁に写真やイラストなどの作業をする方であれば使用料を払う価値はあるでしょうが、たまにしかやらない方は無料のCS２で十分じゃないでしょうか。
さて私のPCはWindows10なんですが、ちょっとしたバグはたまにあるもののｗ、作業自体は何の問題も無く出来ています。
中にはうまく起動しないという方もおられるかも知れません、その際はこちらのサイトの手順で動くようになるそうです。↓
参考にしてみてください。
画像加工
画像加工はレイヤーの概念を理解したら簡単です、文具店などで売っているトレース用の薄い紙ありますよね。
あれです。
つまりトレーシング・ペーパーを重ねたり、挿し込んだり、入れ替えたりをデジタルでやってるだけのことです。
この記事のTOP画像はCS２で加工したものです↓
（After）
↓（Before）
ただの女性の写真でしたが、果物などを入れてみたくなり加工しました。
所要時間は５分程度でしょうか。
私が運営しているアフィリエイトサイトで酵素ドリンクや酵素スムージーの記事のアイキャッチ画像に使いました。
ちょっと手を加えるだけで全く雰囲気の違ったものになります。
このちょっとの手間が後の大きな差になると私は思っています。
TOPページの画像はどうでもいい、むしろアイキャッチが重要！
サイトの記事のアイキャッチは読者の目に最初に飛び込んでくる画像です。ここが貧相な画像では”なんだかなぁ･･･”と思われて離脱される恐れがあります。
サイトの顔でもあるTOP画像にこだわる人もいますが、実はTOP画像はどうでもいいくらいのレベルだと思ってもらってかまいません。
なぜならサイトのTOPから読者はあまり入ってこないからです。
サイトアフィリにしろトレンドブログにしろ、SEOをやってるはずです。
読者は打ち込んだキーワード経由でいきなり記事にやってくることがほとんどです。
実はTOPページってそんなに見られていません。
なのでTOP画像に力入れてこだわる必用もないんです。（あ、やりたければ別にこだわってもいいんですよｗ）
そんな時間があるなら１記事でも書いた方が得です。
画像加工実践
１、下準備
横道に逸れましたが、free素材サイトなどから素材を用意してフォトショップの上へ素材をドラッグしましょう。
”F”キーを押して素材をフル画面で扱えるようにします。
”Space”キーで手のひらツールになるので、自由に画像を動かすことができます。
カラダで覚えましょう。
（マックのコマンドは知りませんのであしからず、まぁ大体は似てると思います）
素材は失敗した時のことを考えオリジナルとして触りません、レイヤーをコピーし素材の複製をいじります。
まずは取り込んだ素材のコピーを右側にあるレイヤーからコピーし複製を作りましょう。
マウスの右クリックからでも出来ますし、素材をレイヤーアイコンにそのままドラッグしても複製を作れます。
２、レイヤー３枚が基本
複製を作ったのですから、現在レイヤーは２枚になっています。
そのまま複製をいじってもオリジナル画像があると、分かりづらいので間にもう一枚レイヤーを挿し込みます。
普通にレイヤーアイコンをクリックすれば一枚無地（透明）のレイヤーが増えます。
今右のレイヤー枠には、「オリジナル⇒複製⇒透明レイヤー」と３層になっているはずです。
透明レイヤーでは意味が無いので透明レイヤーの上（キャンパス上の）で右クリック（選択ツール状態で）して「全てを選択」を選び選択し、上の編集から「塗りつぶし」を選んで真っ白に塗りつぶします。
白く塗られたレイヤーを一つ下へ移動させます。
現在イメージとしてはこうなっているはずです↓
↑（ちなみにこれもCS2で作りました。自由変形は選択した後ctrl+Tです）
何をするにしてもこれが基本の３枚となります。もし間違えて保存してしまってもオリジナルのレイヤーがあれば元に戻せます。
３、選択
フォトショップは選択するテクニックさえ覚えたら鬼に金棒です。
投げ縄、矩形、円形など選択ツールは色々あるんですが基本的には自動選択ツールが簡単です。
赤い矢印のが自動選択ツール。
ジャマだな、ここ消したいなという所を自動選択ツールで選択しますが、どうしてもはみ出したり不足したりすることがあります。
なのでどこか選択した状態でかまいませんから、マスキングボタンを押してください。
マスキングボタン↓
すると選択した部分が赤く表示されます。（設定で逆にもできます、非選択を赤くするとか）
この様に選択したところが赤く塗られます。残りも同様に選択し塗りつぶしていけば完了です。
塗りつぶしのバケツツールで一気に塗りつぶしましょう。
細かな部分は筆に持ち替えて塗ることも出来ます。
間違えた場合や消したいところは消しゴムツールを使って消しましょう。
※（自動選択ツールの設定は「全レイヤーを対象」にチェックを入れておきましょう）
今は分からなくても、いろいろ触っているうちに意味が分かってくるようになります。
４、部分削除
マスキングボタンの左のボタンを押してマスキング状態を解除してください。
そしてBACKキーかDELキーで削除するとこの様に下の白いレイヤーが見える状態になります。↓ 選択ツールを持った状態なら素材の周りのグレーの部分をタッチすれば選択が解除されます、または上のメニューから「レイヤー⇒選択を解除」でも同じです。
ここまで来たら完成したも同然。
５、他の素材を挿し込む
今回はフルーツを入れたかったので、その写真を白いレイヤーの上（女性レイヤーの下）に挿し込みます。（右のレイヤー一覧から直接移動させましょう）
素材自体の移動はドラッグしてさらに”CTRL”キーを押しながらマウスの左ボタンを同時に押し込みつつ移動させます。
すると右のレイヤー枠にその素材がレイヤーとして増えているはずです。
（何だか複雑そうですが、体で覚えてしまえば簡単です。）
そのレイヤーの順番を下へ移動させてあげればいいだけ。
現在の状態のイメージはこんな感じです↓
↓
素材を挿し込む↓
レイヤーの操作で入れ替えます。
後は”CTRL”キーとマウスの左ボタンを上手く操作しながら、位置調整すれば完成です。
完成です。
保存
そのまま保存するとPSDファイルになり数メガバイトとかなり容量が大きいものになりますし、PSDファイルはブログでは使えません。
なので「別名で保存」をしてください。ファイルタイプはJPGがいいでしょう。
その際必ずレイヤーの統合をしてくださいね。
（JPGで保存できない場合は作成したチャンネルを削除したら上手くいきます。右レイヤーのタグにチャンネルというのがあると思います）
バカでかい素材を使った場合はメニューの「イメージ」から、解像度またはピクセルの大きさなどを調整しサイズを軽くしましょう。
WordPressに画像を最適な大きさに自動調整してくれるプラグインなども入れておくといいです。
例えば「EWWW Image Optimizer」など。他にも沢山あると思うので探してみてください。
その他のテクニック
とにかくフォトショップはいじくり倒せば倒すほどスキルは上がっていきますから、どんどん加工してみてください。
楽しくなってきますよ。
遠近感を出すために遠くをぼかしたり、透明感を出したりスピード感を出したり、色調をいじってみたり、フィルターをつかって様々な効果を出せます。
もちろん文字も加工して入れることが出来ます。
YouTube動画などではサムネイルは非常に重要です、フォトショップを使えば目立つサムネイル画像が簡単に作れます。
しかもベースとなるテンプレートをレイヤーで保存しておけば、タイトル文字と写真を入れ替えるだけで短時間でサムネイル画像が作れるようになります。
色々試しながら試行錯誤して自分の技を見つけてください。
最後に
他にもレタッチソフトなど沢山ありますが、やはりフォトショップは最強だとおもいます。
世界標準ツールになったのにはそれなりの理由があるからです。
ぜひあなたも使いこなせるようになってください。
上達するコツはいじっていじりくり回して、遊ぶことです。
★他にもメルマガ読者限定の
「アドセンスだけで10年安定して食っていく資産ブログの作り方」の
講座無料読み放題！
↓ ↓ ↓ ↓ ↓
