ベクター画像作成ツール(12) ｢Gravit Designer｣(9)

前回利用したパブリック・ドメインで使える｢Scalable Vector Graphics｣を公開しているサイトでは、FORMAT=SVG以外にも、HORMAT=EPSの画像も公開しています。

EPS(Encapsulated PostScript)形式はAdobe System社が開発したもので、同社のアプリなどで保存ファイルとして使われています。歴史的な経緯から良い画像が揃っています。

｢Gravit Designer｣から直接読込む事ができませんので、EPS形式の画像ファイルをSVG形式に変換します。変換するフリーソフトは幾つかありますが、ここではWebサービスのファイルコンバーター｢Convertio｣を使います。

選択したEPS形式の画像ファイル(ラクダとピラミッド風景)がこちらとこちら。

｢Convertio｣で2つのファイルを指定し、EPS形式への変換を指定します(こちら)。

変換を指示すると暫くして完了します(こちら)。

ダウンロードした圧縮ファイルを展開して、｢Gravit Designer｣に読込んだ所がこちら。

ベクター画像作成ツール(11) ｢Gravit Designer｣(8)

今回はインターネットで公開しているフリーなアイテムを活用してみます。

インターネット上でパブリック・ドメインで使える｢Scalable Vector Graphics｣を公開しているサイトは幾つかありますが、今回はこちらのサイトから画像を借用します。

描きたい画像をイメージした上で、メニュー｢VECTORS｣のプルダウンメニュー・カテゴリーを使って要素とする画像をダウンロードしておきます。その際は、特別なアプリでアクセスする必要がある画像形式で公開している画像もあるので、特に｢FORMAT｣を｢SVG｣に変更して検索「GO」します。

利用する要素画像を(暫定的にサイズや位置調整した上で)キャンパス(ページ)上に配置した所がこちら。

修正の最初に、背景となっている画像で白い線を削除し、最も手前の大木だけを家の要素画像の前に位置付けます。その為に背景の要素画像のグループ(こちら)を解除します(こちら)。

レイヤーの要素と要素画像との対応を確認しながら削除及び重ね順を変更します(こちら)。

家族の下にある影と車の影の色を一致させる為、自動車の要素画像のグループを解除し、影のアイテムの色を変更します(こちらとこちら)。

最後に家族の要素画像を自動車の背後になるように重ね順を変更した所がこちら。

SVG形式でエクスポートしたのがこちら、png画像形式でエクスポートしたのはこちら。

想定イメージに近い画像を見つけるのは大変かも知れません。それでも1から作るより楽だろうと思います。

ベクター画像作成ツール(10) ｢Gravit Designer｣(7)

今回はベクター画像作成ツール｢Gravit Designer｣の｢ペンツール｣を中心に使ってみます(こちら)。

｢ペンツール｣で三角形の角とする3ポイントをクリックすれば閉じた図形を作れます(こちら)。多角形もポイントを増やすだけで容易に作成できます。更に、ポインターツールで図形を選択した上で、右フレームの｢インスペクタ｣タブの機能で色付けやシャドウなどを付ける事ができます。

｢ペンツール｣では曲線を含んだ図形も、クリックしたポイントでドラッグすれば曲線に描けます(こちら)。

描いた曲線は図形になってからでも、その図形から離れなければ曲線の曲げ具合を変更できますが、別の図形に移ると戻って修正する事ができません･･･(図形の全体変形はできます)。

「フリーハンドツール」ではマウス・ドラッグで自由に線を描く事ができます(こちら)。

｢ペンツール｣を選択した後、｢インスペクタ｣タブの機能で色付けなどを設定しておくと、線を描きながら有効なタイミングで色付けがされます(こちら)。

「ナイフツール」では｢Alt｣キーを押下しながら曲線での切断ができます(こちらとこちらとこちら)。｢Alt｣キーを使わないと直線で切断します。

少し凝った絵を描こうとすると、かなりの丹念さと忍耐が必要です。ライブラリーから図形を取り込んでレイヤーでのグループ展開を見れば多くの要素を組み上げている事から分ります。次回はインターネットで公開しているフリーなアイテムを活用してみます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

勿論、メニュー「ファイル」→｢ローカルファイルを開く｣ or ｢Cloudから開く｣で再開できます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次回に取り込んだアイテムを操作してイメージした画像に仕上げたいと思います。

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

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

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

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

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

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

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

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

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

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

次回から描画・編集操作に入ります。

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

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

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

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

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

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