多彩なエフェクトを使っておしゃれな画像加工がカンタンにできるウェブアプリ「PIXLR EXPRESS」

ウェブ

最近オリジナルアイキャッチ作りにハマってますアットホームギーク(@drying)です。

今までは画像加工ができるようなツールも持ってないしめんどくさがってフリー素材をそのまま使ってアイキャッチにしてました。すると所々で同じ画像を使ってる方を目にするんですよね。それってオリジナリティ出てないしなんか嫌やなと。

カンタンにアイキャッチを自作できないかなといろいろ調べていて見つけたブラウザ上で画像を編集できる高機能なウェブアプリ「PIXLR EXPRESS」をご紹介します!

サイト紹介

160301-1

PIXLR EXPRESS
https://pixlr.com/express/

「PIXLR EXPRESS」はAUTODESK社が提供しているウェブアプリです。操作もカンタンでスマフォアプリでなんらかしらの画像編集したことがある人なら使えてしまう優秀さ。

他にもフォトショップ的な使い方ができる「PIXLR EDITOR」、デスクトップアプリやスマフォアプリと用途、場所やデバイスを選ばずに画像編集が楽しめます。

画像編集ができることはもちろんなんですがそれがブラウザでできるという手軽さが気に入っています。僕はなんでもシンプルが好きなんで。

ウェブアプリ
・PIXLR EXPRESS
https://pixlr.com/express/

・PIXLR EDITOR
https://pixlr.com/editor/デスクトップアプリ(Mac・Windows両対応)
こちらから無料でダウンロード
(メンバーになることで様々な機能が使用できる)スマフォアプリ

Pixlr フォトエディタ

Pixlr フォトエディタ
開発元:Autodesk Inc.
無料
posted with アプリーチ

「PIXLR EXPRESS」でできること

160301-2

「PIXLR EXPRESS」ではこんな機能が使えます。

  • Adjustement(切り抜きやリサイズ)
  • Effect(フィルター)
  • Overlay(レイヤーを重ねる)
  • Borders(フレームを追加)
  • Stickeys(スタンプを追加)
  • Type(文字を追加)

これだけあればだいたいのことは事足ります。

また画像編集の流れですがこれを繰り返していきます

  1. エフェクトを選ぶ
  2. パラメーターをいじる
  3. Applyで適用

注意しないといけないのはひとつ前にしかUndoできないことです。文字にはフィルターをかけたくないって時は1番最後に追加すれば問題ないんでその構造を頭ん中で組み立てるのが最初は少し難しいかもしれませんね。

またリロードすると今までの努力が水の泡にうわーってなります。

また画面上部に出てくるコレで画面を拡大したり、UndoやRedoすることもできます。すべての編集が終われば「 Save」で保存できます。
160301-4

「PIXLR EXPRESS」の使い方

ではこれからアイキャッチ画像を作る過程を解説しながら使い方を説明したいと思います。

今回用意した画像はこちら。ステキ女子が恋バナでもしてるんですかねーこれをビンデージ感あふれる感じにしていきます。
160301-3

ちなみにこのフリー素材は日本語を自動翻訳して全世界からフリー素材を探してくれるウェブサイト「O-DAN」から用意しました。

O-DAN(オーダン)
http://o-dan.net/ja/

PIXLR EXPRESS」にアクセスしたら「Browse」」をクリックし画像を選びましょう。画像はURLを指定する方法とウェブカメラから取り込む方法とあります。また「Collage」で1枚の画像に複数の画像を並べるいわゆるコラージュを作ることができます。スマフォアプリなんかでは有名ですよね。
160301-1

まずはフィルターをかけていきましょう。「Effect」を選んでシーンを表示させます。今回は「Unicolor」を選びました。画像に一色だけのフィルターをかけることができます。
160301-5

するとフィルターがいろいろ出てくるので好きなものを選びましょう。また矢印をクリックするとフィルターがスクロールし、シャッフルボタンを押すとランダムでフィルターを選んでくれます。また「Amount」のバーを調整してフィルターの効き具合を調整できます。
160301-7

今回選んだフィルターは「Jonathan」です。いい感じでビンテージ臭が漂ってますね。これでよければ「Apply」でフィルターが適用されます。もし違うシーンに選び直す場合は、「Cancel」をクリックしましょう。
160301-8

さて続いては「Type」で文字を入力しましょう。この中からフォントグループを選ぶことができます。今回はビンテージ感を出したいので「Retro」にしました。
160301-9

「Type your……」に文字を入力することができます。またフォントは真ん中に出てくるウィンドウから選ぶことができます。今回は「Airstream」を選びました。
160301-10

文字を入力して文字を真ん中寄せしました。ちなみに「Font」の下にあるアイコンは左から、「左寄せ、真ん中寄せ、右寄せ」になっています。文字の白枠をマウスでつかむことにより文字を移動や拡大・収縮することができます。
160301-11

また文字色はデフォルトでは白なんですが「Color」でパラメータを調整することで色や色の濃さを変更できます。今回は白色で90%にしました。
160301-12

最後に「Overlay」でレイヤーを重ねます。種類がたくさんあるので迷いそうですよね。今回は「Canvas」にしました。
160301-13

あとは他と一緒で好きなフィルターを選ぶだけです。今回は「Soft」で「Amount」を85%にしました。
160301-15

これで加工が終わったので「Save」をクリックし保存します。「Name」で名前を、「Quality」で画質(たぶん)を選べます。デフォルトが85%なのでそれでいいはず。
160301-16

オリジナリティが出せるよ!ビフォーアフターはこちら

さて先ほど編集した画像はどんな感じになったのでしょうか。

まずはビフォーから
160301-3

アフターはこちら
160301-17

どうですか?だいぶオリジナリティでましたよね!

今回は3つのエフェクトしか使ってませんが「Adjustment」ではぼかしを入れることができたり一部の色だけ残してあとはグレーといったような使い方もすることもできるので使いこなせばもっと画像加工の幅が広がると思います。いろいろイジってみて自分だけのオリジナルアイキャッチを作ってみてください。

いつも同じウェブサイトからフリー素材探してネタ不足じゃないですか?この記事で使った「O-DAN」をはじめとしたウェブサイトやWordpressプラグインを使うことで作業がすこぶる捗るよ!

タイトルとURLをコピーしました