こんにちは！Ryota(@ryota3587)です！
今回は無料で使える画像編集ソフトの
「Pixlr Editor」(ピクセルエディター)をご紹介します！
Pixlr Editor(ピクセルエディター)
無料で使える画像編集ツールの代表的存在です！
ソフトではなく、サイトにアクセスして、サイト上で全て
画像作成・編集・保存が完了できます！
つまりネットに繋がる所ならばどこでも使える！
ということになりますので、
外出先で撮影した写真などをその場でパパッ！と編集できます。
※注意
この「Pixlr Editor」が動くには「Adobe Flash Player」
(サイト上で動画再生や画像効果を発揮させる)が必要ですので、
Flashを動かせないiPhoneなどのiOSスマートフォン(iPadも同様)と、
AQUOSやXperiaなどのAndroidスマートフォンは、
アクセスすると「iOS専用アプリ」と
「Android専用アプリ」」のダウンロード画面に飛ぶので、
ここでの解説は、WindowsパソコンやiMacなどの
iOSパソコンを使う事を前提としていますので、お気を付けください。
Windowsパソコンに標準で入っている「ペイント」
Windowsパソコンにはほぼ必ず入っている
標準ソフトの「ペイント」ですが、
こちらもあなどれません！！
編集したい画像を「貼り付け」て、
必要なところだけ選択して切り取ってしまう
「トリミング」や、サイズ変更・隠したいところを
四角や丸の色で塗りつぶしてしまう機能など、
まず、本格的な画像編集の開始の前に、
「無駄な部分をそぎ落としておく」
「簡単な編集は済ませておく」という「下準備」という使い方ができるので、
Windowsのパソコンを使っている人は、必ず使ってください！
実際に画像編集してみよう！
では、「Pixlr Editor」で実際の画像編集に移っていきましょう！
ここでは「YouTube」への動画投稿の際に使う
「サムネイル」のような画像作りの仕方を例に解説していきます！
Pixlr Editorを起動
Pixlr Editorは、ネット上で全部作成・編集・保存を済ませるツールなので、
まず↓の「Pixlr Editor」のサイトにアクセスしましょう。
このツールは全て「Adobe Flash Player」で動くので、
初めてアクセスしたときには「右クリック」して
「Adobe Flash Player」の実行を「許可」してください。
そうすると以下の初期画面になります。
ツールバーの機能はこれだけ覚えれば大丈夫！
Pixlr Editorの左部分には、↓のようなツールバーがあり、
いろんな画像編集をここから一発で
始めることができるようになっています。
たくさんあって「こんなに覚えないといけないの？」
と思ったと思いますが…
心配無用です！以下の5つだけ
覚えればほとんどの編集はできます！！
上から、
「移動ツール」
「一列選択ツール」
「ペイントバケツツール」
「タイプツール」
「カラーピッカーツール」
他の機能は覚えなくてもこの5つの機能の
使い方だけ覚えればオッケーです！
実際使っているうちに、ツールに慣れて、
自然に他の機能も使いたくなりますし、
自然に覚えていきますよ！
開始画面
作業を開始するときは、必ずこの画面からになります。
「新しい画像を作成」
→全く白紙の状態から画像を作成する場合に選択します。
このレポートでは、既にある画像に加工を施していく場合を
ご紹介していますので、短くご紹介します。
まず最初に、「どれくらいの大きさで画像を作りますか？」
と↓の画像のように聞いてくれます。
YouTubeに使う「サムネイル」だと
1280×740の大きさが定番ですが、
ここではあなたが今作る必要がある大きさ
(正確には「解像度」)を確認した上で、
プリセットを選択するとよいでしょう。
プリセットに適した大きさがない場合にも、
一番下の「幅×高さ」の数字を入力することで
好きな大きさを指定することができますのでご安心を！
大きさの指定が完了すると、真っ白の背景が現れ、作成開始に移れます。
「コンピューターから画像を開く」
今回はこちらの機能をメインに覚えてください！
選択すると、「どの画像フォルダの画像を使いますか？」
と聞いてくれるので、編集したい画像があるフォルダなどに移動し、
画像をダブルクリックで選択。すると、画像が開いた状態の
↓の画面になり、編集が開始できます。
ここで例に挙げる「画像編集」では、
「上部には「青文字」で「夏の涼しい風鈴の画像」、
背景は「黒」でちょっと「透けてる」」
「下部には「赤文字」で「Ryotaのレポート」で「立体的」、
背景は「赤」、だけど「透けてる」
という編集をしていきます！
実際の編集事例を見せながら、機能を紹介していきます！
文字を書けるようにする
まず、「文字をどこに書きたいか」を指定します。
「一行選択ツール」をクリックし、
範囲選択ができるようにしましょう。
カーソルを「指定したい範囲の左上」に持ってきて、
そこからマウスをクリックしたまま
「ギューッと」範囲指定したい「右下」に引っ張ります。
すると以下のように書きたい範囲が指定されます。
③ そして、左のツールバーの
「A」と書いてある「タイプツール」をクリックし、
文字が書けるモードへと切り替えて、
点線の範囲内でクリック！すると以下のように
文字が入力できる準備状態になりますので、
テキストの入力部分の中に入れたい文字をそのまま入力します。
文字の大きさを変えるには「サイズ」の数字を変えて、
太い文字に変えたい場合は
「スタイル」から選択、色も変える事ができます。
フォントも多数あります。
いずれも「リアルタイム」でプレビューされるので便利です。
色を変える時は、「色」と書いてある下の
「色のついている部分」をクリックすると、
以下の画面が出ます。
4つ程何か英語で色の種類が書いてありますが、
ここではネット上にアップする画像の編集を
したいわけなので、「Web」を選択してください。
↓の画像はその過程も含んでいます。
そして、この画面の上にカーソルを持ってくると、
スポイトのカーソルに変化するので、
あなたが変えたい色の上までカーソルを移動し、真上でクリックすると、
一度で文字の色が変わります。
作った文字を移動させる
文字を入力できたけど、
「思っていたのと位置が違う所になった」
「やっぱり別のところに移動したい」場合も簡単です！
まずはツールバーから「移動ツール」を選択して、
「文字を動かせるモード」に切り替えましょう。
そして、入力した文字の真上でクリックすると、
文字全部が移動可能になります。
選択したらマウスでクリックしたまま
「ギューッと」文字を置きなおしたい所へ
持っていきます。
↓のような感じで、囲んだ部分はそのまま残って、文字だけが移動できた、
ということです。
文字の背景の色を透かしたような感じにする
では、「夏の涼しい風鈴の画像」のバックの部分に「黒色」を載せ、
なおかつ、黒が弱くなり「透けている」感じにしてみましょう！
まず、背景に色を付けるには、
「レイヤー」という「効果を付ける専用のパーツ」を作成
する必要があります。
別に「赤くしたい」「透明にしたい」
「文字を自由に変形させたい」など、
色んな「効果」を別個で専門に受け持ってくれる
のが「レイヤー」です！
まず、最初は、初めから背景に色を付ける「効果」を
付けることがわかっているので、
最初から「背景色の効果」用の
「レイヤー」を新規に作成
します。
画面右側にある「レイヤー」のタブの下に
「紙の左下がめくれている画像」がありますから、
そこをクリックすると新しい「レイヤー1」ができます。
これを色んな効果を付けるために使っていきます！
その後で先程ご紹介したように、
文字を入力したい場所を選択し、
文字を入力。そして実際に黒く塗りつぶされるのは、
この点線で囲った範囲になります。
そして、ツールバーの
「バケツ」のロゴをした「ペイントバケツツール」をクリック。
すると、指定範囲を一度で「塗りつぶし」が
できるモードに変わります。
そして、ペンキロゴのままクリックすると、
以下のように背景が真っ黒になります
(ただし、設定していた色が違う場合はその限りではありません)。
でもこのままでは「真っ黒」なので、
さっき見えていた背景が透けるように、
バックの「不透明度」を下げてみましょう。
さっきの「レイヤー」のタブに戻ってください。
ここには「不透明度」と書かれたバーが
あるはずなのですが…！？
あれ！？ない！？
いえ、違うんです。
デフォルトでは「レイヤー」の設定機能が
「隠れてしまっている」んです
(何故最初から表示したままにしておかないのか分かりませんが)。
レイヤーの設定を登場させるには、
「レイヤー」タブの左にある
「音量調節のような」マークをクリックしてください。
これで「不透明度」の設定画面が表示され、
背景の色の設定を変える事ができるようになります。
ここはデフォルトが100(つまり全く透明ではない)なので、
数を減らしてみます。
ここではバーをクリックして
左へ掴み動かしながら「45」まで下げます。
すると↓のように、黒が弱くなり透けた感じになりました！
最後に、さらに左下に赤色で
「Ryotaのレポート」と表示してみましょう。
2つめの「レイヤー」をさっきの
「新しいレイヤー」ボタンで作成した後で、
文字を表示したい範囲を「一列ツール」で選択。
そして、色を最初から変えておきたいので、
ツールバーの一番下の一番大きな色の部分をダブルクリック！
するとさっきの「色設定」画面がでてきますので、
カーソルで「赤色」の部分をクリックし、赤色に変更。
すると、↓のような感じになるはずです。
そして、「Ryotaのレポート」の文字を
「浮き上がった」感じの「立体的な」
文字に変えてみましょう。
上部の「レイヤー」タブから「レイヤースタイル」を
選択してください。
すると、文字の脇に、↓のような設定画面が出てきます。
左に「ドロップシャドウ」「内側のシャドウ」
「ベベル」「アウターグロウ」
「インナーグロウ」があります。
この中で「浮いたように見せる」のは
「ドロップシャドウ」です。ここを変えていきましょう。
ここも簡単に設定変更できます。
まず、「ドロップシャドウ」などに設定名にクリックでチェックを入れると、
効果がリアルタイムでプレビューされます。
チェックしたままでバーを左右に動かして数値を変えるだけで、
リアルタイムに文字が変わっていくので、
あなたが思った通りの浮き具合に調整してください！
例として「ドロップシャドウ」の距離を10から52に変えてみました。
浮いた部分を表現する「黒文字」の部分が赤文字から離れていますよね？
この数字を調整して、表現したい文字に変えてください！
画像を保存する
画像が完成したので、「保存」しておきましょう！
上のタブの「ファイル」から「保存」をクリック！
すると、↓のように保存設定画面がでますので、ファイル名を指定、
フォーマットを選んでOKボタンをクリック！
フォルダが開きますので、あなたが保存したいフォルダを選びなおして
OKボタンで保存して完了です。
画像保存と同時に「プロジェクトファイル」を保存しておこう！
例えば、画像が完成したけど、
「やっぱりここの文字の色を変えたい！」
「背景や文字効果はそのままで、
日付の数字だけを変えて別の画像を作りたい！」
など、画像の一部を変更したくなる状況は、
今後いくらでもでてきます！
そのためにも、画像そのものだけでなく、
作業過程を保存できる「プロジェクトファイル」も
同時に保存しておきましょう！
方法は、さっきの「保存」から、「PXD」を選択し、
ファイル名を決めてOKボタンをクリックするだけで完了！
ここでのコツは、
「画像本体」と「プロジェクトファイル」の
「ファイル名」は「まったく同一にしておく」
ということです。
後でプロジェクトファイルから編集したい時に、
「あの画像の編集したのはどのファイルだったっけ？」
ということがなくなり、
すぐに該当のプロジェクトファイルを探すことができるので、
すぐ作業に移ることができます。
これで後で保存したプロジェクトファイルを開くと、
またさっき終わった時の状態から編集が開始できます。