Photoshopを使いこなすフロントエンドエンジニアスキルアップ（レンダリングからスプライト画像まで） 2--Measurement_html/css_WEB-ITnose

[測定する必要がある情報] bad b]パディングを測定する必要がある情報、in（d）ポジショニングツール） 1 in 1.1 [1.1]

通常の画像の幅と高さを測定します
: まず、長方形のマーキーツールを使用して広い領域を選択し、次に Alt キーを押しながら余分な部分を減算します













[1.2]

1 画面を超える大きな領域の幅を測定します 高さ

: まず、長方形マーキー ツールを使用して左端に小さな長方形を描き、Shift キーを押したまま小さな長方形を描きます情報パネルの幅情報は、測定する領域の幅情報です

【2】文字サイズ、行を計測します。高さと文字の色

[2.1] テキストが別レイヤーの場合: オプションパネルで複数のパネルを使用できます 文字のサイズ、行の高さ、文字の色の情報をそれぞれ取得します

[注意]

テキストカラーパネルで選択した色が表示されている色と一致しない場合は、テキストの色が原因である可能性があります。この場合、吸収するにはスポイトツールが必要です。 [2.2] テキストがレイヤーに結合されている場合、状況はさらに複雑になります

[注]

基準線を引くときの精度があまり高くないので、まずマウスを放さずに基準線を引き出し、ctrl キーを押したまま基準線を 0.1px ずつ移動します

[2.2.1 ]フォントサイズ: 異なるフォントのテキストの場合、フォントサイズが異なる場合があります。一般に、行内の最大のテキストが測定対象として選択され、結果は比較的正確です[注意][2.2.2] 行の高さ

テキストの右または下に1ピクセルの隙間がある場合があります

: 1行目から計測 1行目の下から2行目の下まで

[2.2.3] 文字色の取得

: スポイトツールで吸い出す場合は、テキストが拡大された後、多くのギザギザのエッジがあるので、しっかりした色で部分を吸う必要があります

数字と記号: 比較する文字を入力します。次に、行の高さとフォント サイズを一貫して設定し、文字と上下の間のスペースの数を確認してから、行の高さを設定します

[4 ]太字に設定

	: 文字には 1 ピクセル多くなりますが、計算は依然として元のフォント サイズに基づいて行われます。太字にすることで元の1ピクセルの縦線が2ピクセルになります

【5】色を決める

【5.1】ベタカラーを決める：肉眼では判断できない場合エリア ソリッドカラーの場合は、カラーピッカーツールを開き、マウスを押して移動すると、ソリッドカラーではありません。 [5.2] 線形グラデーションを決定します

: まず移動ツールを使用してレイヤーを選択し、次に魔法の杖ツールですべての水平ストリップが表示されたら、それは垂直色の線形グラデーションです。変更点

【画像を計測する際の注意事項】 【a】画像を計測する際、パディングがある場合は、コンテンツ領域の幅を計測することを忘れないでください で引き継ぎ、漢字の句読点は1文字の大きさ、英語の句読点は半文字の大きさになります [e] 2 文字すぎる場合近くても重なっても、文字間隔は負になります

。 [b] 宋代で測る場合、スペースは本文の半分のサイズです

| [ d ] 1 ピクセルのコロン ポイントは宋代英語状態、4 ピクセルのコロン ポイントは宋代中国語、Microsoft Yahei 中国語、英語の可能性があります