これらの13の機能により、Gravit Designerの生産性が向上します

Gravit Designerでの作業と設計のすべての時間を経て、私は多くの経験を獲得しました。今では、より速い設計プロセスを持つことができるすべての人と共有したいと思います。

数学は本当にあなたを助けることができます

ボタンを現在のサイズの1/3にしたいですか?幅/高さフィールドで数式を使用するだけです。 Gravitからのすべての入力は、この種の操作をサポートします。

数学演算。

例:540/4と入力してEnterキーを押します。
結果は135になります。

次のオペランドを使用できます。

/ 分割する
*乗算する
+追加する
-減算する

グループ化する代わりにレイヤーを使用する

Gravit Designerの素晴らしい機能はレイヤーシステムです。グループのように機能しますが、内部オブジェクトを選択するためにダブルクリックする必要はありません。各レイヤーにカスタム色を付けることもできます。これにより、レイヤーを整理しやすくなります。

Gravit Designerのレイヤー

レイヤー選択ツールを使用するか、レイヤーパネルで選択することにより、コンテンツ全体でレイヤー全体を移動するために、各レイヤーのアウトラインモードを有効にすることができます。

コンテンツをコピーする代わりにマスターページを使用する

画面のポップアップをシミュレートする場合、または常に表示されるヘッダー/ナビゲーションメニューがある場合、すべてのコンテンツを複製する代わりにマスターページを使用するのが最善の解決策です。それには多くの利点があります。すべてが同期されたままです。 1つのマスターページを相互にリンクすることができ、オブジェクトが少ないため、デザイン自体は高速に動作し続けます。

マスターページにより、設計プロセスがより高速かつシームレスになります。

スタイルを使用する

Gravitの最後のバージョンではスタイルを導入しましたが、まだ知らないものがいくつかあります。 =)
外観、塗りつぶし、境界線、効果、テキストのスタイルを作成できます。

この例では、エフェクトのバンドルを含むスタイルを使用して、エフェクトリストを多数の異なるオブジェクトにすばやく複製します。

スタイルを作成すると、目的のオブジェクトにのみ適用されます。それでもスタイルを変更でき、[同期]ボタンを押すと、他のすべてのオブジェクトが更新されます。

スタイルをすばやく整理して編集します。

スタイルは、スタイルエディタで名前を変更したり、並べ替えたり、プロパティを変更したりできます。スタイルの整理をクリックし、この後に設定ボタンをクリックして、そこに移動します。

複数の塗りつぶしと境界線でボタンの状態をシミュレート

画面設計で最も難しいのは、すべてのボタンの状態をシミュレートすることです。
複数の塗りつぶしと境界線を使用するGravitでは、新しい状態をシミュレートする塗りつぶし/境界線を表示/非表示するだけで、内部とその後のすべての状態でスタイルを作成できます。

複数の塗りつぶしを持つスタイルは、状態をシミュレートできます。

アンカーポイントをマスターする

スタイルの更新でアンカーポイントが導入されました。レスポンシブに機能する画面設計コンポーネントを作成し、再描画することなく複数の画面幅で設計をテストすることが非常に重要です。

人々が知らないのは、アンカーポイントがページを操作する代わりにコンテナを持つことができるということです。

学習用のサンプルファイル:https://tinyurl.com/lzz3nft。

したがって、アンカーポイントを単一のオブジェクトに設定すると、コンテナはドキュメントページのように機能します。

ただし、クリッピングのある他のオブジェクト内のオブジェクトは、アンカーポイントコンテナとして、より高いレベルのオブジェクトの領域を尊重します。

テキスト編集

一部のテキスト機能はUIで非表示になっていますが、まだそこにあります。

取り消し線:Cmd / Ctrl + S
下線:Cmd / Ctrl + U
斜体:Cmd / Ctrl + I
太字:Cmd / Ctrl + B

クリックせずにテキストスタイルをすばやく変更します。

画像の切り抜きとパターンの作成

画面デザインで最も一般的なアクションの1つは、画像の切り抜きです。重力では、ダブルクリックすることですばやく実行できます。

Gravitでの簡単な画像トリミング。

常にデザインに適合するオブジェクトで画像の背景を塗りつぶしたい場合は、パターン塗りつぶしを使用して、図形に合わせて引き伸ばすことができます。

また、エディターで目的のパターンオブジェクトをコピーし、パターンカラーピッカー内の貼り付けボタンを押すと、カスタムパターンをすばやく作成できます。

カスタムパターン塗りつぶしオーバーレイを作成しました。

塗りつぶしをドラッグアンドドロップしてすばやく複製することができます。

塗りつぶしのドラッグアンドドロップの例。

パス上のテキスト

ユーザーが常に求めていることの1つは、Gravitでパスにテキストを作成する方法です。そのため、ここでは簡単な説明を示します。 :)

パスでテキストツールを使用するだけで、パスにテキストを追加できます。

目的のオブジェクトとwhoolaaaの境界にあるテキストツールでテキストを作成するだけです!それが動作します。

スマート複製

Gravitでは、オブジェクトの複製は非常に簡単ですが、多くの人が知らない素晴らしい機能は、cmd / ctrl + dを押してオブジェクトを再度複製すると、同じ操作と動きが再現されることです。

スマート複製の例。

また、cmd / ctrl + shift + dを使用すると、オブジェクトは同じ場所に複製されます。

画像を編集してプロフェッショナルに見えるようにする

これはとても重要です。画像の上にテキストを配置したり、画像の色がレイアウトに完全に合わない場合があります。これを解決するために、Gravit Designerには、外部の画像編集ツールを使用せずにこの作業を支援できる多くの効果があります。

元の画像:
これは、私たちが遊んでいる元の画像です。

元の画像。

画面オーバーレイ:
これを使用して、画像をアルファにブレンドしたり、グラデーションカラーをブレンドしたりできます。

グラデーションの外観を与えるために使用されるスクリーンオーバーレイ。

色変更:
色変更は、単一の色調で画像を作成するために使用されます。

画像の色を赤に変えました。

クリップオンでぼかし:
クリップオプションは、画像をぼかすことなく、コンテナ内にのみぼかしを適用します。

クリップをオンにしてぼやけた画像を使用すると、シャープな境界線を見つけることができます。

調整:
色相/彩度/明るさ/コントラストのような多くの標準画像調整があります。

調整ツールを使用して、白黒の写真スタイルを作成しました。

変換ツールを使用する

変換ツールはオブジェクトの複製だけではありません。スクリーンデザイナーにとって興味深いものがいくつかあります。すべてのコンポーネントの幅が同じであることを確認するタイミングを知っていますか?簡単です。それらを選択してから、変換ツールに移動し、同じ幅でクリックします。

変換ツールを使用してオブジェクトの幅を確認します。

ホットキーを使用してズームする

Cmd / Ctrl +数字を使用して、ズームレベルをすばやく切り替えることができます。

Cmd / Ctrl + 1 = 100%ズーム
Cmd / Ctrl + 2 = 200%ズーム
Cmd / Ctrl + 3 = 300%ズーム
Cmd / Ctrl + 4 = 400%ズーム
Cmd / Ctrl + 8 = 800%ズーム
Cmd / Ctrl + 5 = 50%ズーム
Cmd / Ctrl + Alt + 0 =すべてに合わせる

これがお役に立てば幸いです。皆さんが今日、設計プロセスをスピードアップするのに役立つ新しいことを学んだことを願っています。

Gravit Designerに関するその他のチュートリアルと記事については、以下のブログとソーシャルメディアでお楽しみに。

Facebook / Twitter /フォーラム