ベクターエディターZero Block

ベクター画像の作り方Tilda

Zero Block エディターでは、内蔵のベクターエディターで独自のベクター画像を作成できます。これを行うには、新しい要素を追加するためのプラスボタンをクリック → ベクターを追加します。

In Zero Block: the "Add Vector" option in the elements menu under the plus button in the upper-left corner.

Element Settingsに移動し、"Edit Vector "ボタンをクリックします。要素をダブルクリックすることでも、ベクターでの作業を開始できます。

Zero Block: the "EDIT VECTOR" button in the "ELEMENT SETTINGS" panel on the right.

ベクター画像エディターが開きます。4つのツールがあります：選択ツール、描画ツール、曲げツール、アンカーポイントの編集ツールです。

ドローツール

ドローツールでは、ベジェ曲線にアンカーポイントを追加して新しいベクトルを作成できます。アンカーポイントを追加し、カーブのハンドルを調整することで新しいベクトルを作成できます。このツールを使うと、直線や曲線を作成できます。

Shiftキーを押しながら、次のアンカー・ポイントを水平、垂直、または斜めに配置する。 45度の角度でに配置される。

パスを閉じるには、最後の点を最初の点の上に追加します。シェイプを開いたままにするには、最後の点をダブルクリックするか、ESCキーを使います。

ツール選択

選択ツールでは、作成した別々の図形を選択、ドラッグ、拡大縮小、回転したり、塗りつぶしやストロークの色や幅を設定したりすることができます。

Vector editor in Zero Block: a duplicated curved vector shape being moved and positioned on the canvas.

4つのスケーリングモードがある：

フリー。要素のサイズは自由に変更でき、縦横比は維持されない。
プロポーショナル（Shift キーを押しながら）。要素はリサイズされ、縦横比は維持されます。
中心からサイズを変更する（Alt/Option キーを押しながら）。要素は中心点からの相対位置を保ちます。縦横比は維持されません。
中心から比例的にサイズを変更する（Shift + Alt/Option キーを押したまま）。要素は中心点からの相対位置を保ちます。縦横比は維持されます。

4つのスケーリングモードの例

回転には2つの方法がある。エレメント:

自由。カーソルを要素の角に合わせると、要素を任意に回転させることができる。
15度ステップの回転 (シフトキーを押しながら)。

へリセット回転をリセットするには、右クリックして要素のコンテキストメニューを開き、"回転をリセット "を選択します。

にミラーリング要素を垂直または水平にミラーリングするには、コンテキストメニューのオプションを使用します：水平反転、垂直反転。

Zero Block Vector Editor: context menu for a selected vector shape with options to copy, paste, delete, arrange, and flip.

ベンドツール

ベンドツールでは、カーブのセグメントとカーブハンドルの角度を変更できます。カーブハンドルの角度の角度を変更できます。アンカーポイントを変更できます。

Vector editor in Zero Block: the top toolbar with drawing tools, "FILL", "STROKE", and "SAVE & CLOSE" button over an edited shape.

編集ツール

編集ツールでは、アンカーポイント (の編集ベジェ曲線の編集)や、2つのアンカーポイント間のセグメントを修正することができます。このツールを有効にするには、編集したい要素をダブルクリックします。

Zero Block: vector editor toolbar at the top and an editable curved path with anchor points on the canvas.

1つのベクター画像に複数の図形

1つのベクター画像内に複数のシェイプを作成できます。それらを互いの上または下に配置するには（レイヤーとして）、要素を右クリックしてコンテキストメニューを開き、「前に持ってくる」または「後ろに送る」オプションを選択します。また ]または [ショートカットを使うこともできます。

要素を削除するには、Backspaceキーを押すか、コンテキストメニューを使います。

Vector editor in Zero Block: the context menu for a selected shape with options like "Bring to front", "Send to back", and flip settings.

SVGファイルのインポート

コンテキストメニュー、ツールバーメニュー、または Cmd/Ctrl+lキーボードショートカットを使用します。インポートできるのはインポート20KBまでのSVG画像をインポートできます。

Zero Block vector editor: the three-dots menu on the top toolbar with the "Shortcuts" and "Import SVG" options.

The vector editor in Zero Block with a context menu showing the "Paste here", "Import SVG here", and "Save and close" options.

ベクトル要素を画像に変換して戻す

ベクター要素をSVG形式の画像に変換するには、アートボード上で要素を選択し、右の設定パネルにある「画像に変換」ボタンをクリックします。

In Zero Block: the "Convert to Image" option in the "VECTOR EDITOR" section of the "ELEMENT SETTINGS" panel.

変換後、ベクター要素はレイヤーリストに「イメージ」として表示され、ファイルタイトルと拡張子は要素設定に表示されます。

受信したSVGファイルを編集するには、「編集」をクリックします。ベクターエディターが開きます。エディタを終了すると、要素は保存され、再びSVGファイルに変換されます。

SVGファイルをベクター要素に戻すには、要素を選択し、ベクターにをクリックします。