MENU

無料画像編集ソフトPixlr Editor(ピクセラエディタ)で今風のバナーを作る【2016】

2016.7.14 Photoshop

ピクセラエディタはPhotoshopのように画像を加工したり、いろいろなことができます。

  • 無料
  • オンラインで使える(インストール不要)

多機能な上に、この2点が嬉しいですね。

ピクセラエディタでこんなバナーが作れます。

drinks-923380_1280

バナーに載せたい情報を書き出す

今回は、架空の、画像加工のグループレッスンのバナーを作ります。

バナーを見た段階で、自分がそのイベントに行けるのか、日時、場所、料金など判断材料があると親切です。バランスを見て、情報は取捨選択してください。

  • イベントのタイトル
  • 日時
  • 場所
  • 料金

あとは、人が作ったバナーを見て、どんな内容が入っているか参考にしましょう。真似するのが基本です。

おしゃれな画像を用意する

次に、おしゃれな画像を用意します。

使っている人が多いので、他の人とかぶる可能性がありますが、pixabayの写真がオススメです。

drinks-923380_1280

最近の流行り

最近、こんなバナーが流行っています。

  • 画像の上に文字を載せる。
  • 文字は中央揃えで、画面の中央に配置。
  • 文字の色は白、または黒一色。
  • 飾り付けのイラストは手書き風。色は文字の色に合わせる。

実際にバナーを作ってみる

以下の手順で進みます

  • 画像の大きさを整える
  • 画像を少し暗くする
  • 文字を入れる
  • 飾りを入れる
  • 書き出して完成

Pixlr Editor(ピクセラエディタ)を開いて作業をしましょう。

画像を開く

ピクセラエディタを開き、まずは、画像を読み込みます。

1

2

画像をトリミングする(横幅をカットする)

左側のツールの、切り抜きのアイコンをクリックします。

3

切り抜きやすいように画像の大きさを調整します。左上のスライダーのパーセントを変更するか、画面下の赤枠をドラッグして大きさを調整します。

4

マウスをクリックしながら切り抜きたい部分を選択します。

5

エンターキーを押して切り抜きます。

6

7

切り抜きの大きさが気に入らなかった場合は、履歴で作業を巻き戻すことができます。

8

最後に、バナーに丁度いいサイズにします。

素材配布サイトなどでダウンロードできる画像は1000px以上の大きなサイズのものが多いです。バナーは300pxぐらいが丁度いいので、サイズを調整します。

画像サイズを選択します。

01

横幅を入力すると、縦の数字は自動的に変わります。

10

画面が小さくなるので、右上のスライダーを100%にします。そうすると原寸大で表示を確認できます。

11

12

 

新しいレイヤーを作って、黒一色で塗りつぶす

写真を少し暗くするための作業です。

まずは、新しいレイヤーを作ります。赤枠のアイコンをクリックします。

13

レイヤーができます。

14

塗りつぶすための色を選択します。左側のツールの一番下にある赤枠の部分をクリックすると、色が選択できます。

15

次に、左側のツールでバケツのアイコンをクリックします。

16

画面をクリックすると黒く塗りつぶすことができます。

18

レイヤーの不透明度を調整する

先ほど、レイヤーを追加したのと同じように、赤枠のアイコ運をクリックします。

19

不透明度を調整します。

20

21

文字を入れる

左側のツールのAのアイコンをクリックします。

22

キャンバスをクリックすると、テキストボックスが表示されるので、文字を入れたり、大きさや色を調整します。

23

配置を調整します。

24

飾りをつける

今回はこちらの素材を使いました。

素材配布サイトでは、いろいろな形式の素材が配布されていますが、ピクセルエディタで使えるのは、jpgやpngです。

今回のように飾り付けに使う場合は、png形式の素材を使います。

ダウンロードしたら画像を開きます。

25

26

開いた画像を選択した状態で、ハートのレイヤーを、バナー用のキャンバスにドラッグすると、バナーのキャンバスにハートを移すことができます。

27

ハートの色を白に変更します。

レイヤーの下の赤枠のアイコンをクリックし、レイヤースタイルを以下のように設定します。

インナーグローにチェックを入れて、不透明度を100と硬さを10にし、サイズを調整します。

28

ハートが大きすぎるので、大きさを調整します。

29

配置を調整します。

30

JEPG形式で保存します

保存を選択します。

01

バナーとして使うためにはJEPG形式で保存します。

31

次に、今まで作業したファイルを後から開いて編集できるようにpxd形式で保存したら終了です。

01

コメントを残す

*