操作ガイド

2.シェイプとツール

①フレーム

Pixsoでは、レイヤーをキャンバスに直接追加できます。ただし、特定のデバイスや画面サイズに合わせて設計する必要がある場合は、フレームを作成できます。

以前に設計ツールを使用したことがある場合は、フレームワークをよく知っています。通常、キャンバス上の領域でのデザインに使用されます。

従来のフレームワークとは異なり、フレームワーク内に新しいフレームワークをネストして、より複雑なものを設計できます。フレームでは、レイアウトグリッド、自動レイアウト、制約、プロトタイピングなどの機能を使用できます。

・フレームの作成

フレームはいくつかの方法で作成できます。

・ショートカットキーAまたはFを使用する

・ツールバーのフレームツールを選択する

注:下記の方法で、異なるサイズのフレームを作成できます。

・キャンバスをクリックして、デフォルトで 100 x 100 の寸法のフレームを作成できます。

・クリックしてドラッグし、カスタムサイズのフレームを作成できます。

・右側のパネルのドロップダウンメニューでプリセットサイズを選択できます。

現在のオブジェクトの周囲にフレームを作成します。これを行うには、1つ以上のオブジェクトを選択して右クリックし、[フレーム選択]を選択します。ショートカットキー Ctrl + Alt + G/Option + Command + Gを使用することもできます。

・フレームの属性

すべてのフレームの属性は次の通りです。

フィレット半径: アートボードの角を丸くして、エッジを柔らかくします。
フレームを超えてパーツをカット：範囲外のフレーム内のオブジェクトを非表示にします。
レイアウトグリッド: レイアウトグリッドを作成して、視覚的な構造をデザインできるようにします。
制約：フレームのサイズが変更されたときにサブオブジェクトがどのように応答するかを定義し、それに応じてオブジェクトを制約します。
自動レイアウト: 自動植字のためにその内容に応答する動的フレームを作成します。
塗り: フレームを単色、グラデーションの色、および画像(PNG、JPEG、SVG)で塗りつぶします。
ストローク: フレームに線を追加して、境界線またはアウトラインを作成します。
エフェクト: 影またはぼかし効果をフレームに追加します。
プロトタイピング: キャンバス上のフレーム間を移動するインタラクティブなプロトタイプを作成します。

・フレーム内のショートカットキー

サブオブジェクトを選択: Enter or Return

次のタブを選択: Tab

前のタブを選択: Shift+Tab

親オブジェクトを選択: Shift+Enter

・ネストフレーム

現在のフレーム内に新しいフレームを作成すると、新しい階層または関係が作成されます。

・トップフレーム: キャンバスに直接配置されているフレーム。フレームを最上位のフレームにするには、別のフレーム、グループ、またはオブジェクト内にネストすることはできません。

ご注意: レイヤーパネルでは一番上のフレームが太字で表示され、その名前がキャンバスに表示されます。

・ネストされたフレーム: 別のフレーム内に配置されたフレーム。フレームは、上部フレームまたは他のネストされたフレームに配置できます。ネストされたフレームは、親フレームと子フレームの両方です。

・子オブジェクト:フレーム内の任意のオブジェクト。

・フレームのサイズ変更

フレームは、キャンバス上の他のオブジェクトと同じように操作でき、サイズやスケールの調整もできます。

フレームのサイズを変更するには、いくつかの方法があります。

フレームをドラッグする：キャンバス上または左側のサイドバーでフレームを選択し、フレームの角または縁をドラッグしてサイズを変更します。サブオブジェクトに対する制約を無視するには、Ctrl/Command キーを押しながらドラッグします。
パネルの属性の値を調整する：右側のサイドバーのフレームセクションの下にある「幅」と「高さ」を調整します。+、-、*、/ などの数学演算 (これらの記号を入力することによって) がサポートされており、値をすばやく調整できます。
コンテンツを受け入れる：フレームのサイズをサブレイヤーのサイズに変更するには、ショートカットキー(Ctrl+Alt+Shift+R/Option+Commadn+Shift+R)を使用するか、対応するボタンをクリックします。

②フレームとグループ

フレームとグループを使用すると、レイヤーを結合して、単一のレイヤーとして表示できます。

・フレーム

レイヤーをグループに追加するには、レイヤーをドラッグするだけです。
グループからレイヤーを削除するには、レイヤーをドラッグして外します。
グループを解除するには、フレームを選択して右クリックして「グループ解除」を選択するか、ショートカットキーを使用します。MacOS: Command + Shift + G； Windows: Ctrl + Shift + G

・グループ

グループを作成するには、いくつかのレイヤーを選択するか、右クリックして「グループ」を選択するか、ショートカットキーを使用します。 MacOS: Command - G；Windows: Ctrl + G
グループを解除するには、グループを選択し、右クリックして「グループ解除」を選択するか、ショートカットキーを使用します。MacOS: Command + Shift + G；Windows: Ctrl + Shift + G

ご注意：

グループ内のレイヤーを初めてクリックすると、グループ全体が選択されます。
グループ内の単一のレイヤーを選択するには、そのレイヤーをダブルクリックするか、レイヤーパネルから選択します。
グループ内のレイヤーが移動すると、グループ内のレイヤーに合わせてグループの境界が調整されます。
コンテンツをグループ内外に移動するには、レイヤーパネルでレイヤーをドラッグします。
グループを他のグループにネストすることができます。

③ベクトル

・ベクトルレイヤーの作成

ペンツールを使用してベクトルレイヤーを作成します。
シェイプツールを使用してベクトルレイヤーを作成します。Shift キーを押しながら図形を作成すると、縦横比が 1:1 にロックされます。

・ベクターレイヤーの編集

ベクトル編集モードでは、個々の点、線、またはシェイプ全体の属性を選択、調整、または変更できます。

オブジェクトを編集するときは、既存のポイントとそれらの間の線を操作したり、ペンを使用して追加のポイントを描画したり操作したりできます。

ベクター編集モードに入るには:

パスを選択し、 Return/Enterキーを押します。
パスを選択し、ツールバーにある相応しいアイコンをクリックします。

ベクトル編集モードを終了するには、もう一度 Return キーと Enter キーを押すか、ツールバーの「完了」をクリックします。

・塗り

ベクトルレイヤーを選択し、ベクトル編集モードに入ります。次に、ツールバーのペイントバケットをクリックするか、ショートカットキー Bを押します。その後、閉じたベクトルネットワークの領域をクリックして塗りを追加します。

ベクトルネットワークの別々の領域に異なる塗りを追加することができますが、それらは別々の閉じた領域である限りです。

囲まれた領域の色を変更する場合は、カーソルツールを使用して領域をクリックし、塗りつぶしパネルで色を選択します。

・ベジェ曲線

ベクトルレイヤーを選択し、編集モードに入ります。曲線の場合はノードが表示されます。節点のないコーナーの場合は、フレクターを選択するか、ショートカットキー Ctrl/Command キーを使用してポイントをクリックしてノードを表示し、ベジェ曲線を作成します。

スライダをクリックしてドラッグし、パスの曲線を調整します。

・角丸

図形上の任意の頂点は、右側のサイドバーのフィレット半径属性を使用して丸めることができます。パス全体を選択すると、すべてのコーナーが丸められ、編集モードに入ると、単一のポイントを選択して個別に設定できます。

・エンドポイントスタイル

開いているパスの末尾にスタイルを追加します。

2 つのエンドポイントを持つベクトルパスの場合:

エンドポイントが 2 つだけのベクトルパスが選択されている場合、エンドポイントスタイル属性が右側のパネルに表示され、各エンドポイントのスタイルを個別に設定できます。

3 つ以上のエンドポイントを持つベクトルパスの場合:

3 つ以上のエンドポイントを持つベクトルパスが選択されている場合、エンドポイントスタイル属性は、右側のパネルの [詳細] プロパティに表示されます。ベクトルパス全体を選択すると、終了スタイルを個別に設定することはできません。これを行うには、ベクトルポイント設定を個別に選択する必要があります。

④ペンツールの使い方

・デフォルトでは、ペンを初めて使用するとき、ペンの幅は1pxに設定されます。

・ペンを使用するには、ツールバーのアイコンをクリックするか、ショートカットキー P を使用します。

・線パネルから色、幅、端点のスタイルを調整します。

・別のツールを選択するか、ESCを押すまで、ペンはアクティブなままです。

・Shift キーを押して直線を描きます。

⑤シェイプツールの使い方

Pixsoには、矩形、直線、矢印、楕円、多辺形、スターの6つのプリセットシェイプがあり、これらはすべてシェイプツールを使用してアクセスできます。

矩形: 矩形を選択するか、ショートカットキー R を使用します。
直線: 直線を選択するか、ショートカットキー L を使用します。線を描画した後、線パネルで線の属性を調整できます。
矢印: 矢印を選択するか、ショートカットキー Shift + Lを使用します。直線と同様に、線パネルで直線の属性を調整できます。
楕円: 楕円形を選択するか、ショートカットキーOを使用します。また、円グラフ、リングなどの他の図形を作成するためにも使用できます。

以下はそれを行う手順です。

ツールを使用して楕円形を描画します。
マウスが楕円形の上にマウスを置くと、セクタ比率ポイントが表示されます。
ポイントをドラッグして上または下に移動すると、ノッチが表示されます。
これで、楕円形に3つのポイントがあります。それらをドラッグして、セクタサイズ、ノッチ位置を調整し、内部リングを設定できます。
多辺形: オプションの中からポリゴンを選択します。作成した多角形には 2 つのポイントがあります。1つは丸みを帯びた程度を調整するために使用され、もう1つは角度の数を調整するために使用されます。

⑥ズームツールの使い方

移動ツールを有効にしてファイルを開くときに、ドロップダウンアイコンをクリックする(またはショートカットキーKを使用する)と、ズームツールが表示されます。

ズームツールは、レイヤー上のすべてをズームイン/ズームアウトします。フレーム、グループ、コンポーネント、コンポーネントインスタンス、テキスト、ぼかし効果、ベクトルに適用できます。

⑦ブール演算の使い方

ブール演算では、シェイプレイヤーのセットを、ユニオンセット、上端の減算、交差、減算の 4 つの式のいずれかで結合します。

ブールグループは単一のシェイプレイヤーとして扱われ、塗りと線のプロパティを共有します。これは、ブール演算によって他のブール値グループと組み合わせることができます。

部分的に重なり合う2つの長方形を例にとります。

・ユニオンセット: この数式は、選択したすべての図形をブール値のグループに結合します。オブジェクトが重なる場合、新しいシェイプの外部パスは、そのサブレイヤーパスの合成から重なり合う線分を引いたもので構成されます。ベクトルパスは外部パスに適用され、重複するパスセグメントは無視されます。

・トップを差し引く: ユニオンセットとは異なり、この数式は基本図形から図形または図形のグループの領域を削除します。一番下のシェイプレイヤーだけが実線で、残りは減算されます。

・交差：この数式は、その形状がそのサブレイヤーの重なりのみで構成されるブール値グループを作成します。

・減算：この式を使用すると、そのサブレイヤーの重なり合っていない領域のみが表示されます。

⑧ マスクの使い方

・マスクの作成

マスクとして使用するオブジェクトを選択し、その背後に配置します。
マスクの一部となるすべてのレイヤーを選択します。
右クリックして「マスクとして使用」を選択するか、トップバーの「マスクとして使用」をクリックするか、ショートカットキー Ctrl+Alt+M/Command+Option+M を使用します。
マスクはレイヤーの順序に基づいて生成されます。表示効果は以下の通りです。ユーザーは左パネルでレイヤーの順序を調整して、さまざまなレイヤーでのマスクの効果を調整できます。
効果とマスクオブジェクトを正しく表示するには、マスクの不透明度を 0% より大きくする必要があります。

・マスクのキャンセル

マスクを取り消すには、最初にマスクを選択する必要があります。左側のパネルでマスクを選択するかどうかを判断できます。

マスクとして使用ボタンをもう一度クリックし、現在のマスクを削除します。
マスクレイヤーを右クリックし、「マスクをキャンセル」を選択します。