Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

Pixlr E Pixlr X Chromebook 写真合成 2D Edit 2DCG/Photo Edit

従来のPixlr EditorはFlashが必要で不便でしたが、Pixlr EとPixlr XはFlash不要で使いやすくなったので、スマホARで撮影した画像を写真合成してみたので紹介します。

はじめに

従来のPixlr Editorを使った写真合成を以下の記事で紹介しています。

今回は、Flashが不要で使いやすくなった「Pixlr E」と、シンプルな「Pixlr X」を使った写真合成を紹介します。

合成する画像の準備

以下の記事で紹介したスマホARによるガラステーブルと、3DCG女性モデルの写真を使います。

事前テストで使ったガラステーブルの画像は以下です。

IMG 20200511 170305 2 649x1024 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

3DCG女性モデルの画像は以下です。

Screenshot 2020 05 12 at 13.33.37 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

女性モデルガラステーブル上に乗っているシーンを合成した作品を制作してみます。

Pixlr Xで女性モデルの背景を消す

Pixlr Xのサイトに行きます。

https%3A%2F%2Fpixlr - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!
Photo Editor : Pixlr.com - free image editing online
Looking for advanced photo editing capabilities right in your browser, Pixlr X is the next generation photo editor! No installation and registration required. U...
Screenshot 2020 05 12 at 13.38.20 1024x593 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!
Screenshot 2020 05 12 at 13.38.58 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

OPEN IMAGE」をクリック。

Screenshot 2020 05 12 at 13.50.29 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

女性モデル画像を選んで「開く」をクリック。

Screenshot 2020 05 12 at 13.52.36 1024x592 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

デフォールトの言語は英語ですが、今回は日本語に変更します。

左下の歯車アイコンをクリック。

Screenshot 2020 05 12 at 13.58.55 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

Language」から「日本語」を選択します。ホーム画面に戻り、日本語表示になります。

Screenshot 2020 05 12 at 13.59.19 1024x592 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

女性モデル画像をクリック。

Screenshot 2020 05 12 at 14.02.00 1024x593 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!
Screenshot 2020 05 12 at 14.02.36 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

左端のツールバーから「切り抜き」を選びます。

Screenshot 2020 05 12 at 14.04.57 1024x591 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

女性モデルを四角枠で囲むようエッジをドラッグします。

Screenshot 2020 05 12 at 14.06.50 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

適用」をクリック。

Screenshot 2020 05 12 at 14.07.54 1024x593 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!
Screenshot 2020 05 13 at 09.23.58 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

左端のツールバーから「カットアウト」をクリック。

Screenshot 2020 05 12 at 14.09.32 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

ツール > マジック」を選択します。

Screenshot 2020 05 12 at 14.11.33 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

背景を消すので「消去」を選択し、「公差」や「硬さ」は試行錯誤で調整します。

Screenshot 2020 05 12 at 14.16.20 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

公差」が「32」だと、背景と人物の色が近いので、上記のように人物の一部も消去されてしまいました。

Screenshot 2020 05 12 at 14.18.41 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

右下の「履歴」で一つ前の状態に戻し、「公差」を適当な値に調整します。

Screenshot 2020 05 12 at 14.24.27 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

公差」を「8」に固定して、背景を細かく消去したのが以下です。

Screenshot 2020 05 12 at 14.24.09 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

今回の画像の背景は、マジックカットには合わない気がします。機能の紹介ということにします。

Screenshot 2020 05 12 at 14.33.25 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

消しゴムツールが無いのでブラシ」で「消去」にして代用します。

★ 描画ツールに「消しゴム」がありました。コチラの方が馴染みがありますが・・・

Screenshot 2020 05 13 at 09.32.50 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!
Screenshot 2020 05 12 at 17.07.17 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

以下は、「カットアウト」の「ブラシ」で消去する方法です。

Screenshot 2020 05 12 at 14.36.45 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

背景を大雑把に消します。ワンストロークで消している部分が赤く表示されています。

Screenshot 2020 05 12 at 14.38.09 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!
Screenshot 2020 05 12 at 14.42.16 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

ブラシの「サイズ」と「硬さ」を変えて、画像をマウスホイールで拡大して、細かく背景を消します。

Screenshot 2020 05 12 at 14.42.56 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!
Screenshot 2020 05 12 at 15.27.09 1024x595 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

Pixlr Xではブラシで透明部分を描くことができなかったので、背景の消去が完了したら、いったん「保存」しておきます。

★ 「描画ツール」の「ブラシ」で透明部分に描けます。上記は「カットアウト」だったので描けなかっただけですが・・・

Screenshot 2020 05 12 at 15.30.03 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

保存」をクリック。

ファイル名を入力して、ファイルタイプは透明部分の情報も含まれる「PNG」を選択して「ダウンロード」をクリック。

Screenshot 2020 05 12 at 15.33.08 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

ちなみに、レイヤー構造などシーンすべての情報を保存するには「PXD」を選びます。

Screenshot 2020 05 12 at 15.33.19 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!
Screenshot 2020 05 12 at 15.33.41 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

保存」をクリック。

Screenshot 2020 05 12 at 15.34.03 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

CLOSE」をクリック。

Screenshot 2020 05 12 at 15.34.30 1024x591 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

Pixlr Eで写真を合成する

画面トップの「PIXLR E」をクリックして、Pixlr Eに切り替えます。

Screenshot 2020 05 12 at 15.35.28 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!
Screenshot 2020 05 12 at 15.35.15 1024x591 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

左側の「画像を開く」ボタンをクリックして保存したファイルを開きます。

Screenshot 2020 05 12 at 15.35.51 1024x591 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!
Screenshot 2020 05 12 at 15.48.00 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

とりあえず、女性モデル画像の「ロックを解除」しておきます。

Screenshot 2020 05 12 at 15.49.26 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

メニュー「ファイル > 画像を開く…」をクリック。

Screenshot 2020 05 12 at 15.51.11 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

ガラステーブル画像を選んで「開く」をクリック。

Screenshot 2020 05 12 at 15.51.28 1024x589 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

新しいタブが開きます。Photoshopと同様のウィンドウ形式です。こちらも「ロックを解除」しておきます。

女性モデル画像のタブをクリックして切り替えます。

Screenshot 2020 05 12 at 15.55.21 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

選択 > 全て選択」をクリック。

Screenshot 2020 05 12 at 15.57.26 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

編集 > コピー」をクリック。

ガラステーブル画像タブをクリックして切り替えます。

Screenshot 2020 05 12 at 15.59.16 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

編集 > 貼り付け」をクリック。

Screenshot 2020 05 12 at 16.06.01 1024x594 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

女性モデルをドラッグして移動し、四隅の小さい四角をドラッグすると拡大縮小できます。トップの小さい丸をドラッグすると回転できます。

Screenshot 2020 05 12 at 16.10.11 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!
Screenshot 2020 05 12 at 16.11.44 1024x591 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

上部を正方形に切り抜きます。

Screenshot 2020 05 12 at 16.13.20 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

マーキー選択」をクリック。

Screenshot 2020 05 12 at 16.14.28 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

正方形に横幅いっぱいに選択します。

Screenshot 2020 05 12 at 16.17.30 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

編集 > 切り抜き」をクリック。

Screenshot 2020 05 12 at 16.18.10 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

あとは、好みで背景を暗くするなど画像加工します。

仕上げ加工

先ず、背景を加工します。

Screenshot 2020 05 12 at 16.24.38 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!
Screenshot 2020 05 12 at 16.25.10 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!
Screenshot 2020 05 12 at 16.29.22 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

適用」をクリック。

次に、女性モデルを加工します。

Screenshot 2020 05 12 at 16.32.10 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

適用」をクリック。

2つのレイヤーを統合化します。

Screenshot 2020 05 12 at 16.33.12 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

明るさを非線形に加工します。

Screenshot 2020 05 12 at 16.33.42 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!
Screenshot 2020 05 12 at 16.36.44 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!
Screenshot 2020 05 12 at 16.37.02 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

名前を付けて.JPGで保存します。以下のようになりました。

ar taey 02 1 glass table 2 1024x1024 - Chromebookで写真合成?オンライン2D Webアプリ「Pixlr E」と「Pixlr X」でFlash不要?!

ガラスに人物が映ったり、影を付けたりなどができますが、今回はここまでとします。

まとめ

まだ使いこなすまでには至っていませんが、PhotoshopやLightroomを使うほどのことでもない場合は、この2つのWebアプリである程度のことができます。

Pixlr Xの左端のツールバーがシンプルなので、最初は機能が限定的だと思いこんでいましたが、ツールバーのアイコンをクリックすると現れるパネルのトップで関連する機能が選べるので、かなり多彩な機能が使えます。

ChromebookCloudReadyの場合は、オンラインWebアプリを使う場合が多いので、こういった便利なツールを探して紹介していきたいと思います。

ではでは、きらやん

(Visited 15 times, 1 visits today)

コメント