3.画像処理演習～ブログのキャッチ画像を作る

完成イメージ

ブログでは、投稿した記事の冒頭に、記事を印象づけるような画像を掲載することが主流です。それをキャッチ画像といいます。

新聞や雑誌などでも、まず写真に目がいき、その記事の概要（リード）を読み、さらに知りたければ本文を読む、という作りになっています。ブログでも慣れ親しんだ読み手の誘導をすることが多いのです。

完成イメージ

本演習で学ぶことは次のとおりです。

1. 画像の読み込み
2. 画像サイズの変更
3. レイヤーの作成
4. 塗りつぶし
5. 文字入れ
6. フィルター（モザイク）
7. ファイル保存

1.画像の読み込み

あらかじめ画像を用意しておきます。前述のファイル形式のものを用意します。

Pixlr Editor（ピクセラエディター）にアクセスすると、初期画面で新しく画像を作る、ファイルを開くなどといった画面がでますので、コンピュータから画像を開くを選び、用意した画像を開きます。

画像を開く

2.画像サイズの変更

ブログにあった画像サイズに整えます。たとえば、投稿したいブログの本文の横幅600ピクセルというサイズでしたら、あらかじめ画像もそれに合わせておく、ということです。

画像メニューから「画像サイズ」を選びます。

画像サイズを変える

横幅を適正値に変更し「OK」をクリックします。
このとき、縦横比を固定としておけば、縦サイズは自動的に計算されますので、とても便利です。

なお、縮小したら、マウスのホイール操作で、拡大縮小ができますので、作業しやすいよう調整してください。

3.レイヤーの作成

つぎにタイトルの下地になる黒い部分を作っていきましょう。

手順としてはレイヤーと呼ばれる透明シートのようなものを、新しく画像の上に作ります。そこに黒い四角形を選択し塗りつぶします。

新規レイヤ

新しいレイヤーという名称が作られます。それが選択されているのを確認します。

4.塗りつぶし

選択範囲ツールを選びます。文字を入れます下地を作ります。

以下のようにドラッグすると、長方形で点滅がされます。これがある範囲の選択、という操作です。

範囲選択

塗りつぶしツールを選び、描画色を黒にします。その上で、選択範囲の内側をクリックします。すると、黒く塗りつぶされます。

塗りつぶしの色を黒にする

レイヤーパレットの下図のマークをクリックし、透明度を下げましょう。

レイヤーの透明度を下げる

下地として背景になじむのがわかります。

途中まで完成

5.文字入れ

文字ツールを選び、画面をクリックします。文字入力モードになりますので、文字を入力します。

文字入れ

Pixlr Editor（ピクセラエディター）は日本語フォントにも対応しています。書体や文字サイズ、色、位置を決めて「OK」をクリックします。

6.フィルター（モザイク）

プライバシーに配慮するときには、人物にモザイクをかけます。

まず背景レイヤーをクリックし選択します。これで、背景にモザイクをかける、という準備になります。

モザイクをかける

選択範囲ツールを選び、モザイクをかけたいところをドラッグします。

そして、画面上方のメニューから、フィルター＞ピクセレートを選びます。適当なモザイクサイズにし「OK」をクリックします。

ピクセレート

7.ファイル保存

ファイルを保存するときは、2つの形式で保存することをオススメします。

レイヤーなどすべての操作情報が含まれますPXD形式で、まずは保存し「原本」としましょう。何か修正が必要なときは、これを直せば効率的です。

ファイル保存は原本とホームページで使えるJPEG

ファイル＞保存 と選びます。ワードやエクセルでいいます「名前をつけて保存」に該当しますのが「保存」です。上書きされませんので、安心して下さい。

PXD形式で保存し、あらためて次に、JPEG形式で保存します。ファイル名は日本語を使わないようにして、任意のものをつけてください。

これで完成です。

参考リンク：Photo editor online / free image editing direct in your browser - Pixlr.com