SAMPLE IMAGE この画像は差し替えてご利用ください

P30 画像にキャッチバナーを付ける

キャッチバナー

サイトのキャッチ画像を作ります。ページの冒頭にあり、ページ内容を印象付ける画像です。そのために、画像に印象的な言葉でのバナーを付けます。

Before

a0002_011979_m.jpg
a0002_011979_m.jpg

After

a0002_011979_mAfter.jpg
a0002_011979_mAfter.jpg

➊ ピクセラエディターを起動し、画像を読み込みます。

p30_01:画像を読み込む
p30_01:画像を読み込む

➋ 画像サイズを変更します。

1)ページサイズに合った画像サイズにします。ここでは横幅 910px の画像を使います。

p30_02:画像サイズの変更
p30_02:画像サイズの変更

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

➌ レイヤーの作成

タイトルの下地になる部分を作ります。

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

p30_03:レイヤーの作成
p30_03:レイヤーの作成

❹ 文字を入れる下地を作る

1)[選択範囲]ツールで範囲を選択する。長方形の点滅で、範囲が選択されていることが分かる。

p30_04:範囲を選択する
p30_04:範囲を選択する

2)塗りつぶす色を設定する

p30_05:塗りつぶす色を設定する
p30_05:塗りつぶす色を設定する

3)「塗りつぶし」ツールで選択範囲の内側をクリックすると、描画色で塗りつぶされる。

p30_07:選択範囲を塗りつぶす
p30_07:選択範囲を塗りつぶす

❺ 透明度を指定する

p30_08:透明度を指定する
p30_08:透明度を指定する

1)レイヤーパレットのマークをクリックして、不透明度を下げます。

❽ 文字入れ

1)「文字」ツールを選び、画面をクリックすると、文字入力モードになります。

2)文字レイヤーが追加されて、文字を入力することができます。

p30_09:文字入れ
p30_09:文字入れ

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

「OK」をクリックした後で、文字を編集(追加・変更や削除)するには、文字のレイヤーが選択されている(青色になっている)ことを確認し、「文字」ツールが選ばれている状態で該当の文字列の上でクリックします。これにより、再度文字入力モードになります。

❾ ファイル保存

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

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

p30_10:PXD 形式での保存
p30_10:PXD 形式での保存

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

p30_11:JPEG 形式での保存
p30_11:JPEG 形式での保存