ひとりぶろぐ

価値ある情報をユーザー視点で発信するブログ

iPhone用Photoshop、Adobe Photoshop Touch for phoneをガチで使ってみた

      2013/10/05

どれぐらい使えるの?iPhone用のPhotoshop

ひとりぶろぐのmoyashi (@hitoriblog) です。

長らくiPad用しかラインナップされていなかったPhotoshop TouchにiPhone用が出ました。450円です。

Adobe Photoshop Touch for phone App
カテゴリ: 写真/ビデオ
価格: ¥450

UIをコンパクトにまとめながらも、機能はiPad版と同様のようです。

早速ガチで使ってみた

実力をはかるべく、画像合成を試してみました。

元画像は以下のフィギュア写真です。Adobe Photoshop Touch for phoneを使い、背景を差し替えてみたいと思います。(続きは[Read More]から)

IMG 1418

画像合成の一部始終

元画像の背景を差し替えるまでの流れを追っていきたいと思います。

結論から言うと、Adobe Photoshop Touch for phoneがめちゃくちゃガチなツールであることが明らかになります。

画像の読み込み

まずは画像を読み込みます。SIGMA DP2 MerrillからPQI Air Card経由でAirPictを使って転送した写真です。

ひとりぶろぐ » PQI Air Cardが見違えるほど使いやすく!代替アプリAirPict for PQI Air Cardが登場

IMG 1451

▲写真ライブラリから読み込み。

IMG 1452

▲読み込まれました。少しでも画面が広く使えるようにステータスバーが非表示ですね。

背景部分を選択する

背景を削除するために、背景を選択します。

IMG 1454

▲自動選択ツールを選択。許容値を25にし、背景をタップします。

IMG 1455

▲人物を囲うように、うまいこと選択範囲が作成されました。

選択もれを処置する

IMG 1456

▲しかし、輪郭の内側に切り抜く領域が隠れていました。こういう離れ小島を処置しなくてはなりません。ちなみに、表示の拡大縮小はピンチ、スクロールは2本指でのドラッグです。

IMG 1457

▲通常の選択モードではタップするたびに一から選択し直してしまいますので、既存の選択範囲に加えて、タップするごとに追加で選択されていくように、選択モードを「+」にします。その上で離れ小島の部分をタップしていくと、選択範囲が追加されていきます。

不本意な選択部分を削除する

IMG 1458

▲バッグの部分を拡大して見てみると、背景色と同系統の色、明度であることから、さっきとは逆にバッグまで不本意な形で選択されてしまっています。

IMG 1461

▲背景とほぼ同化しているので、自動選択ツールでの処理は諦め、ブラシ選択ツールを使います。

IMG 1464

▲ブラシの太さを部分の細密さに応じて調整。

IMG 1463

▲選択モードをさっきとは逆に「ー」に設定し、ブラシで余分な選択部分をヌリヌリしていきます。「ー」なので、ブラシでなぞったところが選択範囲から外れます。

IMG 1465

▲バッグの余分な選択部分をブラシ選択ツールで修正できました。

選択範囲を精密に作ることが綺麗に仕上げるためにはとても大事です。

選択範囲の輪郭をポインターで精密に仕上げる

作業部位が細かくなってくると、指先で作業するのだと作業部位が指で隠れてしまいます。

ポインターを表示させて、あたかもマウスを使うかのように操作します。

IMG 1466

▲スカートのひだの部分は細かく入り組んでいて、ピンチ操作で最大まで拡大しても指先での作業が無理。指で隠れてもしまいます。

IMG 1467

▲そんなときは、ポインターを表示させます。

IMG 1468

▲指でタッチするところとは離れたところにポインターが表示されており、操作はポインターの中央に反映されます。

IMG 1469

▲ポインターをドラッグ操作で動かしている最中は、画面左下にクリックボタンが表示されます。これがマウスのボタンに相当。このポインターで自動選択ツールを操作。選択モードを「+」にして、スカートのひだの部分で選択されていないところを丹念につぶしていきます。非常に細かい部分なので、自動選択ツールの許容値は6と小さく設定して広がりを抑えています。

IMG 1470

▲ポインター操作でスカートのひだの選択もれを綺麗につぶせました。両手の親指で操作しますが、慣れるとマウスで操作しているかのようにできるようになりますよ。

境界線を調整で選択範囲を調整

「境界線を調整」で、インテリジェントな選択範囲の調整。

IMG 1475

▲スカートの影の部分ではバッグの場所よりさらにコントラストが低く、自動選択ツールで作った選択範囲が乱れています。自動選択ツールでの修正ではらちがあきません。

IMG 1477

▲「境界線を調整」を選択。

IMG 1476

▲非選択部分に赤い色が付いています。選択されているべきなのにされていない下の部分を「追加」を選択した後におおざっぱになぞり、選択されているべきでないのに選択されてしまっている中央の部分を「削除」でおおざっぱになぞります。

IMG 1478

▲綺麗に選択範囲が修正されました。おおざっぱになぞっただけなのに、「境界線を調整」は画像の状態を判断して、ある程度「よしなに」処理してくれます。

選択範囲の完成と保存

一番大変な範囲選択の作業が一段落しました。ここで保存しておきましょう。

IMG 1479

▲範囲選択が完了しました。この作業が一番大変なので、この後の工程でおかしくなってもここまで戻れるよう、途中経過を保存しておきます。

Screenshot 2013 02 28 02 38 48

▲左上の完了ボタンを押し、コピーを保存を選択。

これで一安心です。

綺麗な仕上がりの秘訣、選択範囲の拡大

Screenshot 2013 02 28 02 43 09

▲変形ツールを選択。

IMG 1487

▲拡張で1px選択範囲を広げます。スライダーでは恐らく1pxは選択できないはずです。スライダーの左にある数字をタップすると数値入力できるので、そこで1と入力、確定します。数値を扱う際は数値入力ができるようになっています。マニアックだけどとっても重要。

IMG 1488

▲背景を選択し、それを1px拡張したので、人物に対して1px食い込んでいます。これによって、輪郭に残るフリンジを1px分削ったことになります。場合によってはもっと拡張した方がいいかもしれません。ここの試行錯誤のために、さきほど途中経過を保存したのでした。

選択範囲の反転による人物の選択

現在は背景が選択されていますが、本当に欲しいのは人物の方なので選択範囲を反転します。

IMG 1491

▲選択範囲を反転をチョイス。

IMG 1492

▲背景の選択が解除され、代わりに人物が選択されました。

人物のみを取り出しレイヤーを生成

IMG 1494

▲人物が選択された状態で、レイヤーメニューから選択範囲のレイヤーをチョイス。これで選択された人物だけを取り出したレイヤーが新たに生成されます。

IMG 1495

▲元のレイヤーの左上にあるポッチをタップして、非表示にします。このことで、人物のみが取り出されたレイヤーのみが表示されることとなりました。背景の市松模様は透明であることを意味しています。

ゴミ取り

人物のゴミを取って綺麗にします。ゴミ取りには修復ブラシツールを使います。

IMG 1499

▲修復ブラシツールを選択。

IMG 1500

▲ブラシのサイズをゴミの太さに応じて調整。ここでも数値入力でカチっとキメます。

IMG 1501

▲修復ブラシツールは、画像の別の場所をコピーしてきてミックスさせつつ貼り付けるといった働きをします。修正が必要な場所の近くにある、ほぼ同じトーンの部位をサンプリングします。サンプリングは「ソース」をタップし、サンプリング場所をタップするという2行程で完了します。このような繊細な作業は、やはりポインターを使ってやるべきでしょう。

IMG 1502

▲サンプリングを終えたらゴミの部位をなぞります。消えました。

IMG 1510

▲ゴミ取りを終えたら下ごしらえはとりあえず終了。また途中経過を保存しておきます。

背景レイヤーの作成と背景画像の読み込み

IMG 1511

▲人物のレイヤーの一つ下のレイヤーを選択した後で、レイヤーメニューから「+」ボタンを押して、写真レイヤーを選択。レイヤーを追加しつつ、画像を読み込みます。

IMG 1512

▲ここでは、カメラロールに保存していた紅葉の写真を使うことにしました。

IMG 1513

▲読み込んだ背景画像に付いているハンドルを操作し、トリミングします。

IMG 1514

▲こんな感じでしょうか。

背景画像の調整

背景画像そのままでは、コントラストが強く人物が負けてしまっていますので、コントラストを下げて背景っぽく処理します。

IMG 1517

▲明るさ・明暗差を起動。

IMG 1518

▲コントラストを下げ、明るく調整しました。

IMG 1520

▲続いて、彩度を上げて鮮やかに。

さらに背景的な処理を加える

IMG 1521

▲背景画像を読み込んだレイヤーの一つ上に、空白のレイヤーを作成。

IMG 1523

▲グラデーションツールを選択。

IMG 1524

▲紅葉を思わせるような黄色からオレンジへのグラデーションを生成してレイヤーを塗り上げました。

人物の影の作成

人物が背景から浮いたような印象があるので、影を加えます。

IMG 1525

▲グラデーションのレイヤーの上に空白レイヤーを生成。

IMG 1526

▲楕円形選択ツールをチョイス。

IMG 1527

▲人物のお尻の部分に影のような感じで楕円形の選択範囲を作成。

IMG 1528

▲塗りつぶしとストロークツールをチョイス。

IMG 1529 

▲楕円形の選択範囲を黒で塗りつぶします。

IMG 1530

▲ぼかしツールでぼかす。

IMG 1531

▲レイヤーのオプションで合成方法の中からオーバーレイを選択。影を赤くしました。

IMG 1533

▲人物のレイヤーを選んで複製。

IMG 1534

▲レイヤーのポッチで元の人物レイヤーを非表示に。明るさ・明暗差で明るさをめいいっぱい下げて人物を黒塗りの影状態に。

IMG 1536

▲レイヤーのポッチをまた押して人物レイヤーを再表示。影レイヤーを選択し、&の方の変形ツール(選択範囲メニューの中にも変形ツールがあるがそちらではない)をチョイス。

IMG 1537

▲影のレイヤーにシアーをかけて、影っぽい感じに変形。

IMG 1538

▲影レイヤーのレイヤーオプションで描画モードをオーバーレイに変更。

IMG 1542

▲影レイヤーの不透明度を70%程度に。またぼかしツールを少しかけて調整。

おまけ: ロゴの合成

ちょっとはしょりますが、ネットから拾ってきた白地のロゴの合成についてちょっと書いておきます。無論私的利用に限られます。

IMG 1550

▲どこぞより都合してきたロゴ。白地のロゴといった感じになっています。これをロゴ部分のみ切り抜くのは至難の業。

IMG 1551

▲どんなロゴでもこれでOKというわけではありませんが、レイヤーオプションの描画モードを比較(暗)にすれば、綺麗に合成できました。

完成

非常に綺麗な仕上がりになりました。帰宅途中、親指2本で作業した成果です。

IMG 1556

元画像(2048pix × 1365pix)を上の画像からリンクしておきましたので、ぜひクオリティを確かめてみてください。

Adobe Photoshop Touch for phone、これはまさしくPhotoshopの名前を冠するに値するアプリといえるでしょう。450円の価値があると思いますか?

■iPhone用

Adobe Photoshop Touch for phone App
カテゴリ: 写真/ビデオ
価格: ¥450

■iPad用

Adobe Photoshop Touch App
カテゴリ: 写真/ビデオ
価格: ¥850

ソニー デジタル一眼カメラ α NEX-6ズームレンズキット NEX-6L/B
ソニー (2012-11-16)
売り上げランキング: 9,541
シグマ デジタルカメラ DP2 Merrill 4600万画素
シグマ (2012-07-12)
売り上げランキング: 10,382

 - iPhone