2021年02月26日

ベクター画像作成ツール(9) 「Gravit Designer」(6)


前回はこちらの状態で終えました。




未だエレメント「shell」は手付かずになっています・・・「shell」はエレメント「drink」と同様にグループ化されているコンテンツです。そこでグループを解除した所がこちら。レイヤー表記で要素が分離されているのが分かります。



グループ解除したアイテム夫々を分離配置した所がこちら




今回はエレメント「shell」の周辺の白色と影を削除する為に、必要なアイテムだけを移動組み立て再度グループ化します(こちら)。



白色と影の部分も移動組み立て再度グループ化したのがこちら(影の方向が前と違う様に移動している事に注意)。これで白色と影が取り除かれているのが分かります。

posted by 鎌倉太郎 at 19:00| 神奈川 ☁| Comment(0) | 体験利用-画像編集ソフト | 更新情報をチェックする

2021年02月25日

ベクター画像作成ツール(8) 「Gravit Designer」(5)


今回は「Gravit Designer」のレイヤーとエレメント(アイテム)の結合・グループ化などです。新規キャンパスでページを始めます(こちら)。



そこに図形やライブラリーからのエレメントを取り込みます(こちらこちら)。





更にPC上の画像を取り込んだ状態で左フレームのレイヤータブを見ると、夫々のエレメントが一覧になっているのが分かります(こちら)。




さて、ワイングラスを持つエレメント「drink」を星型図形に被せるように移動し、サイズ調整をした上で、レイヤーの対応アイテムを星型図形の上にドラッグ&ドロップしてみます(こちら)。



「drink」は星型図形内に収まるようカットされ、レイヤーにある多角形のアイテムの「▶」をクリクすると階層化されています(こちら)。



階層化した多角形を移送すると、「drink」も一緒に移動します(こちら)。




次に、新幹線の画像エレメントを長方形に重ね、マウスのドラッグで長方形と新幹線画像を選択して「アイテムのグループ化」できます(こちら)。



この場合もグループとして移動できますし、左フレームのレイヤーでは新たなグループアイテムの下位層に長方形と画像が位置付けられています(こちら)。



このグループの中で特に長方形を選択し、長方形だけの変形もできます(こちら)。

posted by 鎌倉太郎 at 19:00| 神奈川 ☀| Comment(0) | 体験利用-画像編集ソフト | 更新情報をチェックする

2021年02月24日

ベクター画像作成ツール(7) 「Gravit Designer」(4)


前回までで「ライブラリー」からアイテムをキャンパスに取り込み、画像編集してpng画像への出力(エクスポート)する所まで終えました。今回は出力周りの追加コメントです。



さて、png画像への出力(エクスポート)に当たってキャンパスは白色でしたが、インスペクタでキャンパスを不透明度 0% とする事ができます(こちら)。



キャンパスの色設定をしても、不透明度の設定もできます(こちら)。



png画像出力した後、(Gravit Designerでも可能ですが・・・)他の画像編集ソフトで他の画像と重ね合せた画像がこちら



尚、右上に表示している出力ファイル名を変更できます(こちら)。




作業途中のファイルをメニュー「ファイル」→「ファイルをダウンロード」でPCに保存できます(こちら)。



メニュー「ファイル」→「名前を付けてCloudに保存」でGravit Designer管理のクラウドに保存できす(こちら)。



勿論、メニュー「ファイル」→「ローカルファイルを開く」 or 「Cloudから開く」で再開できます。
posted by 鎌倉太郎 at 19:00| 神奈川 ☀| Comment(0) | 体験利用-画像編集ソフト | 更新情報をチェックする

2021年02月23日

ベクター画像作成ツール(6) 「Gravit Designer」(3)


前回は左フレームの「ライブラリー」からアイテムをキャンパスに取り込みました(こちら)。




「fox」と「book」をメニュー「変更」→「重ね順」→「最前面へ」で表示順位を上げた上で、「fox」と「book」を包み込むように「house」の拡大操作をします(こちら)。




「monster4」回りでは絵文字を縮小して配置し、円と三角も発言を入れる枠に変形します(こちら)。




「fox」の夢見の内容を示すような円を順に拡大するオブジェクトを作る為に、円を取り込んでメニュー「編集」→「複製」で複数の円を作って、円を縮小編集します(こちら)。



「pizza」を「最前面へ」で表示順位を上げた上で、夢見の円に入るように縮小・移動します(こちら)。




あとは「monster4」の言葉として「When you're sleeping?」を、「テキストツール」で入れます(こちら)。



右フレームの「インスペクタ」の「外観」にあるフォントとサイズを変更します(こちら)。




ここまででイメージした画像が描けたので、メニュー「ファイル」→「エクスポート」→「PING画像」で画像として出力します(こちら)。



出力したファイルがこちら




posted by 鎌倉太郎 at 19:00| 神奈川 | Comment(0) | 体験利用-画像編集ソフト | 更新情報をチェックする

2021年02月21日

ベクター画像作成ツール(5) 「Gravit Designer」(2)


今回はベクター画像(SVG)作成ツール「Gravit Designer」のライブラリから、作成したい画像に適した図形・イラストなどを取り込む操作です(編集操作は別途)。



キャンパスは前回と同じ候補を選択して開始します(こちら)。




先ず、左フレームのライブラリー・タブから「ステッカー」を選択します。スクロールダウンでライブラリーが多数の図形・イラストなどを予め備えているのが分かります。ここからは「fox」・「monster4」・「pizza」をドラッグ&ドロップでキャンパスに取り込みます(こちら)。




次にライブラリーの検索機能で「book」を探します(こちら)。



イメージに合ったアイテムをキャンパスに取り込みます(こちら)。



更に「house」でも検索・アイテム選択して取り込みます(こちら)。



尚、検索は全て英語で行う必要があります。日本語では意味不明の写真を検索表示します。



「図形」から円「2 circle」と三角「3 triangle」を取り込みます(こちら)。



サムネイルレベルでは判り辛いですが、三角でも角が円弧になっているものがあります(それだけ多数のアイテムがある事を意味していますが・・・)。



最後に「絵文字」から「monster4」の気持ちを示すアイコンを取り込みます(こちら)。




次回に取り込んだアイテムを操作してイメージした画像に仕上げたいと思います。
posted by 鎌倉太郎 at 19:00| 神奈川 | Comment(0) | 体験利用-画像編集ソフト | 更新情報をチェックする

2021年02月19日

ベクター画像作成ツール(4) 「Gravit Designer」(1)


今回からベクター画像(SVG)作成ツール「Gravit Designer」を使ってみます。「Gravit Designer」は高度な描画・編集機能やレイヤ扱いなどを備えていますが、特別な特徴として多数の図形・イラストなどを予め備えたライブラリを持っている事です。



早速こちらから「Gravit Designer」公式サイトにアクセスし(こちら)、右上の「Start Now」で無料アカウントの登録から開始します(こちら最初の時だけ日本語表示・・・?))。





開始画面がこちら。ここからは日本語表示になります。



但し、「Gravit Designer」はChrome乃至Firefoxに最適化しています。Chromiumベースの「Microsoft Edge」でも利用可能ですが、立ち上げ時にこちらのメッセージを表示します。




さて、最初にキャンパスのサイズを指定しますが、こちらでは候補から選択して開始します。



こちらの操作画面で右フレーム(インスペクタ・タブ)は、中央のフレームで選択したオブジェクト(この表示画面ではページキャンパス)のプロパティを表示し、必要によりここから変更操作などもできます。



上の操作画面の左フレームでは、レイヤー・タブでページとレイヤーを表示し、ライブラリ・タブで分類のアイコン選択により多数の図形・イラストなどを利用できるようになっています(こちら)。



実際、こちらではドラッグ&ドロップでキャンパスに選択したラインをコンテンツとして利用しようとするケースです。



ここで右フレームでラインのプロパティーを表示している事を確認してください。



次回から描画・編集操作に入ります。
posted by 鎌倉太郎 at 19:00| 神奈川 ☀| Comment(0) | 体験利用-画像編集ソフト | 更新情報をチェックする

2021年02月17日

ベクター画像作成ツール(3) 「SvgPathEditor」(3)


これまでは大雑把な図形で実行していましたが(こちら)、少しは実用的な描画をしたいと思うとグリッドを細かくしたくなります。「Snap to Grid」を無効にする事ができますが、左右対称な描画をしたい場合など位置の確認が大変です。




「SvgPathEditor」ではマウスのスクロールボタンでグリッド幅の調整ができますので、その上でこちらはローソク燭台を描画する為の一部を既に描いたものです。



これでももっと細くしたい所ですが・・・デモ用なのでこの範囲で止めました。



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




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

posted by 鎌倉太郎 at 18:00| 神奈川 ☀| Comment(0) | 体験利用-画像編集ソフト | 更新情報をチェックする

2021年02月16日

ベクター画像作成ツール(2) 「SvgPathEditor」(2)


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




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






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



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



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



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




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




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




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



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



ブラウザ毎なので、異なるブラウザで「SvgPathEditor」を実行する場合は、その作業データにアクセスできません。
posted by 鎌倉太郎 at 18:00| 神奈川 ☀| Comment(0) | 体験利用-画像編集ソフト | 更新情報をチェックする

2021年02月15日

ベクター画像作成ツール(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」で長方形を閉じます(こちら)。



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



次回は既に作った描画を変更してみます。
posted by 鎌倉太郎 at 20:32| 神奈川 ☀| Comment(0) | 体験利用-画像編集ソフト | 更新情報をチェックする

2021年01月29日

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


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



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




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



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



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



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



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



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



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



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





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



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




ラベル:remove.bg
posted by 鎌倉太郎 at 18:00| 神奈川 ☀| Comment(0) | 体験利用-画像編集ソフト | 更新情報をチェックする