操作ガイド

1.スタイル

(1) Pixsoのスタイル

スタイルについて

Pixsoには以下のスタイルがあります。

カラースタイル: 塗りの色と線の色。
テキストスタイル:フォント、フォントサイズ、行の高さ、間隔。
エフェクトスタイル: インナーシャドウ、アウトサイドシャドウ、ガウスぼかし、背景ぼかし。
レイアウトグリッドのスタイル: 行、列、グリッド。

例えば、文字色を赤から青に変更するなど、スタイルのプロパティを変更するたびに、Pixsoはこのスタイルを使用しているすべてのオブジェクトにこの変更を適用します。

(2) . スタイルの作成

下記のスタイルを作成することができます。

カラースタイル: 塗りの色と線の色。
テキストスタイル:フォント、フォントサイズ、行の高さ、間隔。
エフェクトスタイル: インナーシャドウ、アウトサイドシャドウ、ガウスぼかし、背景ぼかし。
レイアウトグリッドのスタイル: 行、列、グリッド。

注：スタイルに名前を付け、その説明を追加することができます。色だけで説明するのではなく、これらのスタイルをどのようにデザインに使うかを紹介することをお勧めします。

カラー

カラースタイルは、塗り、線、テキストに使用することができます。また、画像やグラデーションのカラースタイルを作成することもできます。

カラースタイル作成の手順:

スタイルを作成するオブジェクトを選択します。
右側のパネルで、保存したいプロパティの横にあるスタイルアイコンをクリックします。
カラースタイルパネルの「＋」アイコンをクリックします。
スタイルに名前を付けて、「作成」をクリックします。

注：グラデーションのスタイルを作成すると、色、グラデーションの方向、角度はすべて作成したスタイルに保存されます。

テキスト

デザインでは、さまざまなテキストプロパティを頻繁に設定する必要があるため、テキストスタイルを使用すると効率が上がります。テキストスタイルは、テキストレイヤー全体、またはレイヤー内のテキストの一部に適用することができます。

テキストスタイルを作成する手順は、カラースタイルを作成する手順と同じです。

ご希望のスタイルのテキストを選択します。
テキストパネル上のスタイルアイコンをクリックします。
テキストスタイルパネルの「＋」アイコンをクリックします。
スタイルに名前を付けて、「作成」をクリックします。

注：テキストスタイルでテキストのアライメントを設定することはできません。つまり、各テキストブロックに対して個別にアライメントを設定する必要があります。

エフェクト

また、シャドウやぼかしなどの効果スタイルも設定できます。これらの設定を保存して、将来すぐに使えるようにします。

これらの効果を適用したいオブジェクトを選択します。
選択したオブジェクトに効果スタイルがない場合は、追加する必要があります。
エフェクトパネルで、スタイルアイコンをクリックします。
エフェクトスタイルパネルの「＋」アイコンをクリックします。
スタイルに名前を付けて、「作成」をクリックします。

シャドウのスタイル別にアイコンを設定し、スタイルの種類が一目でわかるようにしました。

レイアウトグリッド

また、レイアウトグリッドのスタイルも作成することができます。手順は以下の通りです。

キャンバス上にフレームを作成または選択します。
右側パネルのフレームにレイアウトグリッドを追加します。
レイアウトグリッドのプロパティを任意に設定します。
レイアウトグリッドセクションのスタイルアイコンをクリックします。
新しいスタイルを作成するには、「+」アイコンをクリックします。
スタイルに名前を付けて、「作成」をクリックします。

(3) . スタイルの適用

オブジェクトにスタイルを適用

ローカルスタイルや、チームライブラリに公開されている共有スタイルを使用することができます。

スタイルを適用するオブジェクトを選択します。
右側のパネルで、更新したいプロパティの横にあるスタイルアイコンをクリックします。
スタイルメニューに、ローカルスタイルとチームライブラリからの共有スタイルがすべて表示されます。

スタイルパネルの並べ替え

チーム名のアルファベット順
ファイル名のアルファベット順
作成時間順

4. オブジェクトに適用したいスタイルを検索し、選択します。

スタイルの切り替え

右サイドパネルでスタイルを切り替えられます。

スタイルを更新したいオブジェクトを選択します。
右側のパネルで他のスタイルを選択します。
対象のスタイルを検索し、適用する。

スタイルの削除

オブジェクトからスタイルを削除しても、オブジェクトは現在のプロパティを保持します。

スタイルを削除するオブジェクトを選択します。
右側のパネルにあるスタイルにマウスを合わせます。
スタイルの削除アイコンをクリックします。
その後、ターゲット・オブジェクトのスタイルを変更することができます。この変更は、削除したスタイルには適用されません。

(4) . スタイルの管理および共有

スタイルを見る

ローカルスタイルは、現在のファイルに保存されているものです。キャンバス上で何も選択していないとき、右側ペインまたはスタイルセレクタからローカルスタイルにアクセスすることができます。他の公開されているスタイルを表示したい場合は、対応するスタイルセレクタを開くことができます。

1. 右側パネルより

ファイル内でスタイルを作成すると、右側のパネルでスタイルを見ることができます。そして

キャンバス上の空白部分をクリックします。
Escキーを押して、選択を解除します。

Pixsoは、すべてのローカルスタイルを、テキスト、カラー、エフェクト、レイアウトグリッドのタイプ別にグループ化します。

2. スタイルセレクターより

対象プロパティの横にあるスタイルアイコンをクリックすると、スタイルセレクターが表示されます。すると、そのプロパティで使用可能なすべてのスタイルを表示することができます。スタイルのデフォルトの並び順は以下の通りです。

チーム名のアルファベット順
ファイル名のアルファベット順
右側パネルに表示される順番と同じ順番で

スタイルの管理

スタイルを変更したい場合は、元ファイルのスタイルを編集する必要があります。

1. スタイルの編集

右側のパネルとスタイルセレクタを開きます。
対象のスタイルにマウスを合わせ、選択してから右クリックすると、編集パネルが表示されます。

2. スタイルの削除

パネル上でスタイルを選択し、右クリックで削除します。このスタイルを持つすべてのオブジェクトは、現在のプロパティを保持したまま、スタイルが削除されます。

3.スタイルの共有

作成したスタイルを他のファイルで使用したい場合は、チームリソースライブラリに公開する必要があります。これは、個別に行うこともできますし、コンポーネントと一緒に公開することもできます。

4.スタイルの公開

(1)左側のコンポーネントパネルを開き、チームリソースライブラリのアイコンをクリックします。ショートカットキーも使用できます。

Mac：⌥ Option+3
Windows：Alt+3

(2)現在のファイルのセクションで、「公開」ボタンをクリックします。

(3)すべてのコンポーネントとスタイルのリストが表示されます。また、更新の進行状況を確認することができます。必要であれば、変更点の説明を追加することもできます。

(4) これらのスタイルを共有するには、もう一度[公開]ボタンをクリックします。

チームライブラリーのスタイルの利用

チームリソースライブラリを有効にすると、ファイルの編集権限を持つ人は誰でもこれらのスタイルやコンポーネントにアクセスできるようになります。

スタイルセレクタでライブラリ内のすべてのスタイルを表示します。
共有された任意のスタイルを使用します。
エディタ権限のあるファイルでスタイルを編集します。