ベクター画像作成ツール(2) ｢SvgPathEditor｣(2)

今回は前回に作った描画を変更してみます(こちら)。

描画の直線の終点を選んで｢･･･｣→｢Convert to｣→｢C Curve to｣とすると(こちら)、直線上に2点が付加されます(こちら)。

その点を左右に動かす事で直線が曲線になります(こちら)。

最後に｢･･･｣→｢Insert After｣→｢Z Close Path｣で、終点と開始点を結んでこちらの描画になります。

長方形についても同様の操作で変形ができます(こちら)。

プレビュー画像がこちらになります。

こちらではファイル出力に当たり既定の領域を広げると共に描画の色を変更しています。

出力したファイルをPC上で(ブラウザにより)表示した所がこちら。

作成した作業データはブラウザ毎の継続情報として保存できます(こちら、複数個可能)。

ブラウザ自体を閉じたり、｢SvgPathEditor｣のタブを閉じても維持され、再度開く事ができます(こちら)。

ブラウザ毎なので、異なるブラウザで｢SvgPathEditor｣を実行する場合は、その作業データにアクセスできません。

ベクター画像作成ツール(1) ｢SvgPathEditor｣(1)

今回からは無料で使えるベクター画像(SVG、Scalable Vector Graphics)作成ツールを幾つか使ってみます。最終的には多機能で多くの用途に使える「Inkscape」に行きつきたいと思いますが、先ずベクター画像について理解できるベーシックな範囲のツールとし、続いて利用目的に沿って簡易な操作にしているツールと進めてからにしたいと思います。

ベクター画像(Vector graphics)は拡縮自在である点が最大の特徴です。BMPやpngなどのビットマップ画像(Raster graphics)とベクター画像の違いを示したこちらを参照。

最初はWebアプリ｢SvgPathEditor｣です。こちらからアクセスすると、こちらの様に表示します。

❶は描画の手順を示すコマンドのパス、❷は各コマンドの詳細指定がパスの順に並べられたものです。❸はプレビューとしてできた画像を示します(例えばこちら)。

❹で出力ができます(こちら)。

コマンドを選択すると、描画のどこに対応するかが分かります(こちら)。

｢SvgPathEditor｣ではベクター画像について知る事が目標なので｢×｣で描画をクリアし、改めて｢＋｣のメニューで描画をします(こちら)。

｢M Move to｣により開始点を選択します(こちら)。そこに表示する｢･･･｣のメニュー｢+ Insert After｣→｢L Line to｣により、開始点と選択した点で線が結ばれます(こちら)。

選択した点から更に線や曲線を結んでいくのですが、ここでは再び｢M Move to｣メニューを選んで、別の図形を描画します。実際｢V Vertical Line to｣→｢H Horizontal Line to｣→｢V Vertical Line to｣を使い、描画の最後は｢Z Close Path｣で長方形を閉じます(こちら)。

改めてコマンドの詳細欄(❷)を見ると、操作コマンドが反映できているのが分かりますし、コマンドの付属情報として位置情報も入っています。

次回は既に作った描画を変更してみます。

画像の背景を削除してくれるサービス｢remove.bg｣を使ってみた

画像の背景を削除してくれるサービス｢remove.bg｣を使ってみました。基本は人物や商品の背景を削除するサービスですが、少し限界を確認する為に意地悪な写真も使ってみる事にします。

｢remove.bg｣へはこちらからアクセスします。

先ず、典型的な例として人物(元画像はこちら)の抽出です(写真は｢ぱくたそ｣から借用)。操作は画像をWebサイトにドラッグ&ドロップするだけです。結果がこちら。

プレビュー画像としてダウンロードすれば無料です。元画像と同じサイズでダウンロードするにはアカウント登録と有料のクレジット又はサブスクリプションが必要です(こちらを参照)。

無料の範囲で利用しながらできるだけ大きな画像を得たい時は、必要な部分を抽出した画像(今回の場合はこちらのように抽出)を実行に掛ければいいでしょう(こちら)。

参考に今回のケースではこちらの違いがありました。

髪の部分に注目して結果をご覧ください。

さて商品対応ではこちらの元画像に対して｢remove.bg｣を使った結果がこちら。

人物では前景としての人物と背景が明確な距離感を持っていましたが、商品対応では距離的にテーブルと皿・懐石盆は変わらないのに区別できています。AIによる処理が効果を発揮している所でしょう。

次に風景画の背景を削除できるかという少し意地悪な例で限界を確認します。こちらは近く・中間・遠方といった画像、こちらは近くからかなり遠くまで連続した建物と遠景の写った写真です。削除処理した結果の画像は前者がこちらで、後者がこちらです。

何れも、近距離の木の枝の処理はシッカリ行われていますが、中間距離にある木々の間や天守閣の処理が上手くいっていません(尚、背景を削除した結果として透過処理された部分は黄色にしています)。

尚、こちらのような事例はAIが経験していなのか･･･、｢前景が識別できません｣となります(こちら)。

絵画風の画像に変換できる無料ソフト「FotoSketcher」(6) テキスチャ、切り取り、その他

これまでは一連の絵画化の中でいろいろな操作を組み合わせましたが、使いきれなかった操作の幾つかをここで使ってみて、最終回にしたいと思います。

最初は「選択部分を切り取る」で、絵画化したい部分だけ抽出できます(こちら)。リサイズと同様に、事前準備で一般の画像ソフトを使わなくて済みます。

切り取った結果がこちら。ここで描画パラメータを指定するウィンドウは右下のアイコンで左上に退避でき、結果の様子が見やすくなります。

以下では既にリサイズ済みで、既に描画スタイル「ペイント1(水彩画)」で描画が行われた状態から始めます(こちら)。

描画スタイルの｢フレーム、テクスチャと文字だけ」でフレームとテクスチャの指定を組合せる事で、違った雰囲気を出せる事があります(こちらとこちらを参照)。

例えばこちらの左右。

或いはこちら。

参考までにファイル出力した画像がこちら。

絵画風の画像に変換できる無料ソフト「FotoSketcher」(5) 水彩画風

前回と同様にリサイズした所から開始します(こちら)。

今回は水彩画風に挑戦し、最初に「ペイント5(水彩画)」を選択します(こちら)。

先ず描画パラメータを変更しないで描画したのがこちら。

変更しないでも落ち着いた感じが出てよいと思いますが、「効果の強さ」と「色の強さ」を強調し、逆に精細さを求めて「ブラシストロークの強さ」と「イメージの単純化」を弱めた所がこちら。「輪郭のソフト化」も加えています。

花よりも背景が変わったようです。フレーム、文字を加えて出力した画像がこちら。水彩画風なのでテクスチャは加えていません。

再び元写真(のリサイズされた画像)に戻って、描画スタイルを｢ペイント9(水彩画)｣とします(こちら)。

描画パラメータを変更しないで描画したのがこちら。

ここでは変化を求めて「反復回数」を増やし、｢ペイントブラシのサイズ」を太くし、「ペイントブラシの精密さ」を荒くし、更に「輪郭の強さ」を強めます。そして明るさも若干強くした所がこちら。

フレーム、文字を加えて出力した画像がこちら。

絵画風の画像に変換できる無料ソフト「FotoSketcher」(4) 油絵画風(3)

前回と同様にリサイズした所から開始します(こちら)。

今回は最初に元写真を修整(調整)してから始めます(こちら)。

元写真の修正では「コントラスト」を強くしました(こちらで左が修正したもの、右は元写真のままなので比較できます)。そして「描画スタイル」を｢ペイント10(ブラシストローク画)」にします。

「ペイント10」でパラメータを変更せずに描画したのがこちら。

少し精細にすると共に鮮やかにしたいので、「ブラシの最小サイズ」と｢反復回数」を小さくし、｢彩度｣を上げて描画したのがこちら。ここでは「輪郭のソフト化」・｢フレームの追加｣・｢テキスチャ｣も入れています。

｢文字｣を挿入して画像出力したのがこちら。

続いて同じ(リサイズした)写真を｢描画スタイル」の｢カートン1｣で描画します(こちら)。

パラメータを変更せずに描画したのがこちら。

「効果の強さ」と「輪郭の強さ」を最大にした所がこちら。

最後に｢フレーム、テクスチャと文字だけ」の処理を加え(こちら)、画像処理したのがこちら。

絵画風の画像に変換できる無料ソフト「FotoSketcher」(3) 油絵画風(2)

前回と同様にリサイズした所から開始します(こちら)。

今回は「ペイント4(ブラシストローク画)」を選択します。フレームの追加以外の描画パラメータを変更せずに描画したのがこちら。

今回は少し精細さを出す為に、ブラシの最小・最大サイズを小さくし、「ブラシストロークの精密さ」を上げ、「ブラシストロークの数｣を多くしで描画した所がこちら。

ここでは画布の感じを出す為に、｢テクスチャ｣も指定しています。この段階で出力した画像がこちら。

更に追加の描画処理を加える為に、左右の画像を入れ替えます(こちら)。

これまでの処理していた画像に対して、色鮮やかさを出す為に「描画スタイル」を「色鮮やかな写真」に切替えます(こちら)。

先ず描画パラメータは変更しませんが、フレームとテクスチャの指定を外して描画します(こちら)。

描画パラメータとして、「輪郭の強さ」と「コントラストレベル」を上げて描画しました(こちら)。

結果の画像を出力したものがこちら。

各出力した画像は、リサイズした時の大きさに対して、フレーム分だけ大きくなっている事に注意してください。

絵画風の画像に変換できる無料ソフト「FotoSketcher」(2) 油絵画風(1)

今回はこちらの画像を使いますが、元画像は2250×4000と大きくパラメータ指定の効果が表れにくいので、最初からターゲットサイズにしておいてから絵画化をする事にします(こちら)。

実際にリサイズした所がこちら。

描画方法として｢ペイント6(油絵画）｣を選択します(こちら)。

｢フレームの追加」だけして、描画パラメータを操作せずに描画した所がこちら。

ここで｢効果の強さ」を弱め、「イメージの単純化」と「色の強さ」を強めとして再描画したのがこちら。

更に「ブラシストロークの強さ」を強くした所がこちら。

これではやり過ぎたとして元に戻し出力したのがこちら。

絵画風の画像に変換できる無料ソフト「FotoSketcher」(1) 基本の流れ

写真を簡単に絵画風の画像にするソフトの改訂紹介を久し振りに見たので使ってみました。そのソフトは無料で使える「FotoSketcher」(Ver 3.60)ですが、10年前にこちらで紹介しています。メニューが日本語表示になったりしているので、全く新しいソフトとして使ってみます。

こちらからダウンロード＆インストールします。

インストールして起動した所がこちら。

早速1つの画像を開いた所がこちら。

何ら指定変更しないで「描画」した所がこちら。

色の強さを上げ、明暗を若干暗めにして再描画した所がこちら。パラメータ変更によるプレビューをパラメータウィンドウ上で確認しながら変更できるのは便利。

結果を見ながら繰り返し実行できます。

こちらの様にテキストの追加ができます(右下に付加)。

変換した画像がこちら(但し、サイズの縮小をしています)。

次回から描画スタイルを幾つか変更して変換してみます。

AI技術を使った背景を透過にしてくれるWebサービス｢remove.bg｣

AI技術を使って何も指定条件を与えなくても、写真から人物画像部分を抽出し、背景を透過にしてくれるWebサービス｢remove.bg｣が登場しました。こちらから使う事ができます。

トップページにある通り、PC上のファイルを選択するか、画像のURLを指定します。これ以外の指定をしないで実行支持して数秒待つと、結果がこちらとこちら(以下の画像は無料写真素材サイト『足成』から借用又は自写)で示されます(サーバー側のビジーで待ち行列に入る時があります)。

上掲の写真では非常に上手く抽出できていますが、黒っぽい衣服の背景にある黒い影とか、白い服の背後にある明るい光に照らされた背景などは区別が難しいようです(こちらとこちら)。

以下に不満足な点を挙げますが、これは利用する時に用意する写真の選択又は結果の期待レベルで注意すべき事項として掲載しますので、アプリや技術を否定する意味ではない事に留意してください。

上掲のスマホでも見られますが、人物が持っている(操作している)物の判別ではAI知識の限界があるようです(こちら)。

浮世絵で描かれた人物に適用しましたが、衣服は完全に認識していますが、顔や手などの様にほぼ一色になった部分は、顔や手などで人物としての複雑さがない認識になるようです(こちらとこちら)。

一方で素足のAI認識が少ない為か、混乱がある様です(こちら)。

尚、動物や銅像は「人物が見つけられない」というエラーになります(こちら)。

AndroidタブレットでもChromeで利用できました(こちら)。

こちらのFAQによると、セキュリティを守るなどとしています。

　１．結果の画像は出力(ダウンロード)できますが、最大サイズは500×500pixels。この制限を引き上げる方法を検討中
　２．アップロードした写真をAI知識向上などに利用する事はない
　３．永久的に無料で現在のサービスを提供し続けたい
　４．結果を一時的に保存してダウンロードできるようにするが、約1時間後にはファイルを削除するし、画像を共有したり、このアプリ機能以外の目的で利用しない

実際に得られた結果の1つがこちら。