仕事の質を向上させる方法

多くの場合、さまざまなデザイナーのレイアウトで作業する必要がありますが、多くの場合、その品質には多くの要望があります。




私はつまらない人ですが、これは常に私を助けませんでした。 たとえば、単に経験不足のために、きちんと、きめ細かく、しかし間違って何かをすることができます。 今、私はデザイナーの同じ問題を常に観察しており、役立つように、いくつかの実用的なヒントを集めました。 それらのいくつかを次に示します。

アートボードを使用する


Photoshopのアートボード

これにより、小規模および大規模で複雑なプロジェクトでの作業が大幅に促進されます。 複数のpsdファイルを作成したり、内部でグループを使用して異なるインターフェイス状態を表示したりする必要はもうありません。

2:1スケールで作業する


スケール2:1

画面の品質は、グラフィックスの要件とともに増加しています。 より大きな規模で作業する場合、常に少量の供給しか得られません。 16x16pxのサイズでアウトラインアイコンを変更したり、11-12フォントでメモを書いてこの涙を見るのはあまり便利ではありません。

正しいレイヤー順に従う


Photoshopでのレイヤーの順序

デフォルトでは、新しいレイヤーが残りの上に作成されます。 怠zyにならず、オブジェクトの場所に応じて移動するか、最後から開始します。 私たちは左から右へ、上から下へ読みます。 一番下のアイコンや、さらに悪いことにレイヤーの中央でトップアイコンを検索する必要がない場合に便利です。

カラーハイライトレイヤーを使用する


Photoshopでレイヤーを色付けする

2つの極端があります。 すべてのグループが装飾されているか、すべてが灰色です。 ただし、適切な場所で使用すると、便利なツールになります。 たとえば、同様のレイヤー(アイコン+テキスト)またはグラフ、チャート、テーブルなどが多数ある場合...

別のレイヤーでグリッドを取り出します


別のレイヤー上のメッシュ

通常、グリッドはガイドによって形成されます。 その過程で、彼らは迷い、追加、削除することができますが、なぜこのオブジェクトまたはそのオブジェクトがこのように配置されているのか、どのガイドが基本であり、どのガイドが基本でないのかは明確ではありません。 別のレイヤーでグリッドを取り出すと、確認が容易になります。

レイヤーとグループのプロパティを折りたたむ


レイヤーおよびグループスタイル

多くの場合、レイアウトには何百ものレイヤーを含めることができ、適切なレイヤーを見つけることは必ずしも容易ではありません。 レイヤースタイルが公開されるとさらに困難になります。 通常、彼らは多くの情報を伝えません。

空のレイヤーまたはグループを残さないでください。


空のレイヤーとグループ

これは最後の点にも当てはまりますが、ゴミではなく有用なものを見たいと思って、それらをオン/オフにするという事実によってさらに複雑になる可能性があります。 これらの神経はなぜですか。

レイヤーに名前を話す


レイヤー名とグループ名

もちろん、ここではすべてが個別ですが、基本的なルールは次のとおりです。その内容に従ってレイヤーに署名します。 同時に、成長して国際的なプロジェクトで作業する場合に備えて、英語を使用することに慣れてください。

svgを使用する


photoshopのSvgアイコン

ビットマップグラフィック、アイコン、特にアイコンフォントはできるだけ使用しないようにします。 長い間、SVG形式を使用しても問題はありません。 簡単に拡張でき、柔軟な設定と優れたサポートがあります。

関連オブジェクトを配置する


Photoshopでインポートする

アイコンを挿入する場合でも、写真を挿入する場合でも、何かを挿入する場合でも、「Put Related」ボタンを使用してこれを実行します。 実際には、多くの場所で変更を行うよりも、1つのファイルを変更する方が便利であることが示されています。 たとえば、地下室やヘッダーなどのパーツは多くの場合静的であり、個別のファイルに入れてインポ​​ートする方が便利です。

クリッピングマスクを適用する


Photoshopでのマスクのクリッピング

どのくらいの頻度で、最も実用的な方法で作られていない円、五角形、星の形の写真を観察しますか。 多くの場合、目的の部分は、写真から目的の形状に切り取られて挿入されます。 しかし、編集に関しては悲しくなります。 このようなタスクには、マスクを使用することをお勧めします。 目的の部分が表示され、画像はそのまま残ります。 不要なアクションなしで、スケーリング、トリミング、または置換できます。

スマートオブジェクトを使用する


Photoshopのスマートオブジェクト

グループに似ていますが、スタイルを保持できます。 たとえば、ページに複数の同一のボタンがある場合、スマートオブジェクトを使用する方が便利です。 1つを編集すると、ファイル制限内のすべてに拡張されます。 レイヤーの数を無数に減らしたい場合にも使用すると便利です。

ガードフィールドを追加する


ボタンセキュリティフィールド

背景や境界線がデザインで使用されていない場合、コーダーはどのボタンサイズが提供されているかを理解できないことがあります。 ガードフィールドをその下に空のブロックとして追加するか、名前にプレフィックスを追加します。

テキストブロックを使用する


Photoshopのテキストブロック

テキストがブロックとして挿入されておらず、ハイフネーションが手動で行われている場合、レイアウトからテキストをコピーすることは非常に不便です。 それらを削除する必要があります。 さらに、このメソッドは、レイアウトレイアウト時にどのように見えるかを確認するのに役立ちます。

関連資料を忘れないでください


完了したら、フォント、元の画像、インフォグラフィック、説明を添付することを忘れないでください...通常、検索/クエリには多くの時間がかかります。 たとえば、私はしばしばこの構造を持っています:
svg-すべてのアイコン。
材料-写真、インフォグラフィック、フォント;
クライアントから-元々クライアントから来たもの。
含む-テンプレートの関連部分

これらのトリックはどれも優れていますが、これらを組み合わせることで、あなたと他の人がレイアウトをより効果的に使用し、時間を節約できます。

Source: https://habr.com/ru/post/J354466/


All Articles