ベクターエディターZero Block

ベクター画像の作り方Tilda

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

Element Settingsに移動し、"Edit Vector "ボタンをクリックします。要素をダブルクリックすることでも、ベクターでの作業を開始できます。
ベクター画像エディターが開きます。4つのツールがあります: 選択ツール、描画ツール、曲げツール、 アンカーポイントの編集ツールです
ドローツール

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


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


パスを閉じるには、最後の点を最初の点の上に追加します。シェイプを開いたままにするには、最後の点をダブルクリックするか、ESCキーを使います。
ツール選択
選択ツールでは、作成した別々の図形を選択、ドラッグ、拡大縮小、回転したり、塗りつぶしやストロークの色や幅を設定したりすることができます。
4つのスケーリングモードがある:
  • フリー。要素のサイズは自由に変更でき、縦横比は維持されない。
  • プロポーショナル(Shift キーを押しながら)。要素は リサイズされ、 縦横比は維持されます。
  • 中心からサイズを変更する(Alt/Option キーを押しながら)。要素は 中心点からの相対位置を保ちます。縦横比は 維持されません。
  • 中心から比例的にサイズを変更する(Shift + Alt/Option キーを押したまま)。要素は中心点からの相対位置を保ちます。縦横比は 維持されます。
4つのスケーリングモードの例
回転には2つの方法がある。 エレメント:
  • 自由。カーソルを 要素の角に合わせると、要素を任意に回転させることができる
  • 15度ステップの回転 (シフトキーを押しながら)。

リセット 回転をリセットするには、右クリックして要素のコンテキストメニューを開き、"回転をリセット "を選択します。
ミラーリング要素を垂直または水平にミラーリングするには、コンテキストメニューのオプションを使用します:水平反転、垂直反転。
ベンドツール
ベンドツールでは、カーブのセグメントとカーブハンドルの角度を変更できます。 カーブハンドルの角度の角度を変更できます。 アンカーポイントを変更できます。
編集ツール
編集ツールでは、アンカーポイント (の編集ベジェ曲線の編集)や、2つのアンカーポイント間のセグメントを修正することができます。このツールを有効にするには、編集したい要素をダブルクリックします。
1つのベクター画像に複数の図形
1つのベクター画像内に複数のシェイプを作成できます。それらを互いの上または下に配置するには(レイヤーとして)、要素を右クリックしてコンテキストメニューを開き、「前に持ってくる」または「後ろに送る」オプションを選択します。また ]または [ショートカットを使うこともできます。

要素を削除するには、Backspaceキーを押すか、コンテキストメニューを使います。
SVGファイルのインポート

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

キーボードショートカット一覧
キーボードショートカットの完全なリストを表示するには、エディターで3つの点 → ショートカットをクリックします。
ショートカットは以下の表でも指定されている。
主な機能の概要
コンテナを使ってレスポンシブ要素を作成する
設計プロセスをスピードアップするショートカットの完全リスト
エレメント固定、パララックス、フェードイン・アニメーション
複雑なマルチステップアニメーション基本原則、設定、例

他の要素をクリックまたはホバーしたときの要素のアニメーションを設定する方法

Figmaからレイアウトを自動的にインポートする方法Zero Block

製造元
Tilda