従来のPixlr EditorはFlashが必要で不便でしたが、Pixlr EとPixlr XはFlash不要で使いやすくなったので、スマホARで撮影した画像を写真合成してみたので紹介します。
はじめに
従来のPixlr Editorを使った写真合成を以下の記事で紹介しています。
メインPCをMacからChromebookに変えたので従来の写真合成とは違った方法を模索してきましたが、今回は無料のAndroidアプリ「Photoshop Mix」と無料のWebアプリ「Pixlr Editor」を使った方法を紹介します[…]
今回は、Flashが不要で使いやすくなった「Pixlr E」と、シンプルな「Pixlr X」を使った写真合成を紹介します。
合成する画像の準備
以下の記事で紹介したスマホARによるガラステーブルと、3DCG女性モデルの写真を使います。
Chromebookでは使えなかったオンライン3DCG Webアプリ「Vectary」がChromebookのChromeでも使えるようになったので、スマホで楽しめるARコードを生成してこの記事に埋め込んでみたので紹介します。[…]
事前テストで使ったガラステーブルの画像は以下です。
![](https://chrome-vr.com/wp-content/uploads/2020/05/IMG_20200511_170305-2-649x1024.jpg)
3DCG女性モデルの画像は以下です。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-13.33.37.jpg)
女性モデルがガラステーブルの上に乗っているシーンを合成した作品を制作してみます。
Pixlr Xで女性モデルの背景を消す
Pixlr Xのサイトに行きます。
Looking for advanced photo editing capabilities right in you…
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-13.38.20-1024x593.png)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-13.38.58.png)
「OPEN IMAGE」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-13.50.29.png)
女性モデル画像を選んで「開く」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-13.52.36-1024x592.jpg)
デフォールトの言語は英語ですが、今回は日本語に変更します。
左下の歯車アイコンをクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-13.58.55.png)
「Language」から「日本語」を選択します。ホーム画面に戻り、日本語表示になります。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-13.59.19-1024x592.jpg)
女性モデル画像をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-14.02.00-1024x593.jpg)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-14.02.36.png)
左端のツールバーから「切り抜き」を選びます。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-14.04.57-1024x591.jpg)
女性モデルを四角枠で囲むようエッジをドラッグします。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-14.06.50.png)
「適用」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-14.07.54-1024x593.png)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-13-at-09.23.58.png)
左端のツールバーから「カットアウト」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-14.09.32.png)
「ツール > マジック」を選択します。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-14.11.33.png)
背景を消すので「消去」を選択し、「公差」や「硬さ」は試行錯誤で調整します。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-14.16.20.png)
「公差」が「32」だと、背景と人物の色が近いので、上記のように人物の一部も消去されてしまいました。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-14.18.41.png)
右下の「履歴」で一つ前の状態に戻し、「公差」を適当な値に調整します。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-14.24.27.png)
「公差」を「8」に固定して、背景を細かく消去したのが以下です。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-14.24.09.png)
今回の画像の背景は、マジックカットには合わない気がします。機能の紹介ということにします。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-14.33.25.png)
消しゴムツールが無いので「ブラシ」で「消去」にして代用します。
★ 描画ツールに「消しゴム」がありました。コチラの方が馴染みがありますが・・・
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-13-at-09.32.50.png)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-17.07.17.png)
以下は、「カットアウト」の「ブラシ」で消去する方法です。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-14.36.45.png)
背景を大雑把に消します。ワンストロークで消している部分が赤く表示されています。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-14.38.09.png)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-14.42.16.png)
ブラシの「サイズ」と「硬さ」を変えて、画像をマウスホイールで拡大して、細かく背景を消します。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-14.42.56.png)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-15.27.09-1024x595.png)
Pixlr Xではブラシで透明部分を描くことができなかったので、背景の消去が完了したら、いったん「保存」しておきます。
★ 「描画ツール」の「ブラシ」で透明部分に描けます。上記は「カットアウト」だったので描けなかっただけですが・・・
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-15.30.03.png)
「保存」をクリック。
ファイル名を入力して、ファイルタイプは透明部分の情報も含まれる「PNG」を選択して「ダウンロード」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-15.33.08.png)
ちなみに、レイヤー構造などシーンすべての情報を保存するには「PXD」を選びます。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-15.33.19.png)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-15.33.41.png)
「保存」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-15.34.03.png)
「CLOSE」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-15.34.30-1024x591.png)
Pixlr Eで写真を合成する
画面トップの「PIXLR E」をクリックして、Pixlr Eに切り替えます。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-15.35.28.png)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-15.35.15-1024x591.jpg)
左側の「画像を開く」ボタンをクリックして保存したファイルを開きます。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-15.35.51-1024x591.png)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-15.48.00.png)
とりあえず、女性モデル画像の「ロックを解除」しておきます。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-15.49.26.png)
メニュー「ファイル > 画像を開く…」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-15.51.11.png)
ガラステーブル画像を選んで「開く」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-15.51.28-1024x589.jpg)
新しいタブが開きます。Photoshopと同様のウィンドウ形式です。こちらも「ロックを解除」しておきます。
女性モデル画像のタブをクリックして切り替えます。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-15.55.21.png)
「選択 > 全て選択」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-15.57.26.png)
「編集 > コピー」をクリック。
ガラステーブル画像タブをクリックして切り替えます。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-15.59.16.jpg)
「編集 > 貼り付け」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-16.06.01-1024x594.jpg)
女性モデルをドラッグして移動し、四隅の小さい四角をドラッグすると拡大縮小できます。トップの小さい丸をドラッグすると回転できます。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-16.10.11.jpg)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-16.11.44-1024x591.jpg)
上部を正方形に切り抜きます。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-16.13.20.png)
「マーキー選択」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-16.14.28.jpg)
正方形に横幅いっぱいに選択します。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-16.17.30.png)
「編集 > 切り抜き」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-16.18.10.jpg)
あとは、好みで背景を暗くするなど画像加工します。
仕上げ加工
先ず、背景を加工します。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-16.24.38.png)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-16.25.10.png)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-16.29.22.jpg)
「適用」をクリック。
次に、女性モデルを加工します。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-16.32.10.jpg)
「適用」をクリック。
2つのレイヤーを統合化します。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-16.33.12.png)
明るさを非線形に加工します。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-16.33.42.png)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-16.36.44.jpg)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-12-at-16.37.02.png)
名前を付けて.JPGで保存します。以下のようになりました。
![](https://chrome-vr.com/wp-content/uploads/2020/05/ar-taey-02-1-glass-table-2-1024x1024.jpg)
ガラスに人物が映ったり、影を付けたりなどができますが、今回はここまでとします。
まとめ
まだ使いこなすまでには至っていませんが、PhotoshopやLightroomを使うほどのことでもない場合は、この2つのWebアプリである程度のことができます。
Pixlr Xの左端のツールバーがシンプルなので、最初は機能が限定的だと思いこんでいましたが、ツールバーのアイコンをクリックすると現れるパネルのトップで関連する機能が選べるので、かなり多彩な機能が使えます。
ChromebookやCloudReadyの場合は、オンラインWebアプリを使う場合が多いので、こういった便利なツールを探して紹介していきたいと思います。
ではでは、きらやん