1. 切削工具およびラベル貼付工具
ツールの使い方を学ぶと、半分の労力で 2 倍の結果が得られます。ここでは、私がよく使う切断ツールやラベル貼りツールを皆さんにお勧めします。
1. 切削工具:
（1）カッターマン
これは Photoshop で動作するプラグインで、必要なレイヤーを単独で出力できるため、PS でスライス ツールを使用して画像を 1 つずつ切り取る必要がなくなります。Cutterman は多くの文法やルールを覚える必要がなく、使い始めるとすぐに使い方がわかります。ボタンをクリックするだけで、必要なあらゆる種類の画像を自動的に出力し、さまざまな画像サイズ、形式、出力形式をサポートしているため、PS、IOS、Android などの端末での使用に便利です。
ダウンロードアドレス： http: //www.cutterman.cn/zh/cutterman（公式サイト）
(2) PxCook (ピクセルシェフ)
PxCook は注釈ツールであるだけでなく、非常に便利な切削ツールでもあります。画像カット機能は ps にリモート接続する必要があり、Cutterman と同様にボタンをクリックするだけで必要なさまざまな画像を自動的に出力し、スライスの非破壊スケーリングを実行できます。レイヤースタイルの拡大縮小もサポートしています。
ダウンロードアドレス： http: //www.fancynode.com.cn/pxcook （公式サイト）
(3)スケッチ（Macをお使いの方）
Macをお使いの場合は、Sketchを使って画像をカットすることもでき、さまざまなサイズのカット画像を直接書き出すこともできます。
リマインダー: Cuttermen または PxCook をインストールした後、多くの友人がそれが使用できなくなったと感じています。その理由は何ですか? ここで注意する必要があるのは、Adobe Air のサポートが必要なため、ダウンロードしてインストールする前に、まず Adobe Air をインストールしてください。
2. 注釈ツール:
(1) PxCook (ピクセルシェフ)
もちろん、PxCook のままです! 前述したように、これは非常に便利な注釈および切断ツールです。ラベル貼りとカットの2つのデザインが完成後に1つのソフトウェアに統合され、WindowsとMacの両方のプラットフォームをサポートするのが利点です。ドラッグ＆クリックするだけで自動ラベル付け機能を実現でき、WindowsとmacOSに対応しています。デザインに Photoshop を使用するか、Sketch を使用するかは関係ありません。
PxCook はフロントエンド コードを生成できるので、デザイナーにとって非常に役立ちます。
（2）パーカー
Cutterman と同じ会社の製品で、サイズ、距離、文字サイズ、影、ストローク フィレット、線の高さなどの情報を自動的に計算し、必要に応じてマークすることができ、マーキング時間を大幅に節約し、マーキング パフォーマンスを大幅に向上させます。デザインと効率性の向上
ただし、Parkerは無料ではなく、60RMBが必要な有料ソフトウェアです。
ダウンロードアドレス： http: //www.cutterman.cn/zh/parker （公式サイト）
（3）マークマン
Mark Man もデザイン案作成のための効率的なマーキングツールです. Win / Mac に対応しており、基本的な機能は無料で使用できます. 無料版の使用感は上記で推奨されているものほど良くありません. 高度な機能が必要な場合は、年間60人民元を支払う必要があります。
ダウンロードアドレス：http://www.getmarkman.com （公式サイト）
どの注釈ツールや画像切り取りツールを使用しても、長所と短所があり、選択は主に個人の習慣に依存します。
2. ページの注釈
マーキングは非常に重要です。開発側がデザインドラフトを完全に復元できるかどうかは、デザイナーがマーキングをどのように行うかに大きく依存します。もちろん、マーキングする場合は開発チームとコミュニケーションを取るのが最善です。開発者にはそれぞれ独自の習慣があるためです。 。万が一マークした場合、開発が理解できないと困る！
コミュニケーション、コミュニケーション、コミュニケーション！大事なことは3回言いましょう！
ラベル付けに関しては、すべてのレンダリングにラベルを付ける必要はありません。まず、同じページまたは類似のページについては、後で再度ラベルを付ける必要はありません。開発がスムーズに進むようにするだけです。
例えば：
上記のアノテーション図からわかるように、アノテーションが必要な内容は次のとおりです。
テキスト：フォントサイズ、色
(リマインダー: a. Android のフォント サイズにラベルを付けるときは単位に注意してください。通常は sp ですが、IOS のフォント サイズの単位は px です。Android のフォント サイズが px でマークされている場合、開発側はそれを変換する必要があります。
b. ラベルのカラー形式は 16 進数 (例: #FF0000) または RGB (255,0,0) を使用していますか? 開発者とのコミュニケーションが必要ですが、開発者の習慣に従って、通常は 16 進数を使用します。)
レイアウト コントロールのプロパティ: コントロールの幅と高さ、背景色、透明度、ストロークとフィレット サイズ (フィレットがある場合) など。
リスト: リストの高さ、色、コンテンツの上下の間隔など。
間隔: コントロール間の距離、左右のマージン
段落：行間
グローバル属性: ナビゲーション バーのテキスト サイズ、色、左右の余白、デフォルトの間隔など。以前に開発に協力したことがあり、開発のこの側面を理解していれば省略できます。
3. インターフェースカットアウト
1.どのような写真をカットする必要がありますか?
コードを通じてそれを実現する方法がない限り、全体像を切り取る必要があります。コードでできないことは何ですか? アイコンのようなもの。不明な点がある場合は、開発部門に問い合わせてください。一般的な開発部門が何が必要かを知っています。
2. 何セットカットする必要がありますか?
(1) IOS の例:
icon_notice.png→iPhone 1～3世代の携帯電話（これは@1x、つまり写真の1倍です、無視して構いません）
[email protected]→iPhone4/4S/5/5S/6/6S/7対応サイズ（@2x、つまり写真の2倍）
[email protected]→iPhone6P/6SP/7Pで使用されているサイズ（@3x、つまり写真の3倍）
単純に多重関係として捉えると、例えば750x1334px(iPhone 6/6S/7)のサイズでデザイン案を作成した場合、スライスの出力は@2xとなるので分かりやすいです。
理論的には、より適切に適応させるには、IOS 用に 3 セットの画像、つまり @1x、@2x、@3x を切り取る必要がありますが、実際の作業では、iOS はそれぞれ @ 2x と @3x の 2 セットの画像を切り取るだけで済みます。
(2) Android にはさまざまなサイズがあり、スライスする必要があるスライス (通常は MDPI、HDPI、XHDPI、XXHDPI、XXXHDPI) が多数あります。
(注意: Android のカットアウトの場合、伸縮可能な要素などの特殊なケースでは、.9 カットアウト メソッドを使用する必要があります。ここでは、.9 カットアウト ツールのdraw9patch をお勧めします)
3. その他注意事項
(1) 出力形式：カット画像の出力形式は、png24bit、png8bit、jpg とし、PNG を推奨します。
(2) サイズが偶数である: カット画像の出力サイズは偶数のままである必要があります。奇妙なカット画像がある場合、携帯電話システムは自動的にカット画像を引き伸ばします。これにより、カット画像要素のエッジがぼやけ、開発されたAPPインターフェース効果が元のデザイン効果から遠く離れてしまいます。
(3) パッケージサイズを小さくするため、全てのカット画像は可能な限り圧縮してから現像してください。写真が多すぎるとサイズが大きすぎて、ユーザーがアプリを使用中にページを読み込むのに役立ちません。そのため、写真を切り取る際には、画像ファイルのサイズを可能な限り圧縮する必要があります。
（ここでは、PNG、JPG画像圧縮サイトを推奨します：TinyPNG、アドレス：https://tinypng.com）
著者に転載：あまり考えすぎないでください
リンク：https://www.jianshu.com/p/094cfa3dc7bf
出典：Jianshu