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

[A] アイコン、ロゴ

[b] 特殊効果のあるボタン、テキストなど（デザイナーがデザインしたフォントがあまり一般的でない場合は、テキストを画像として切り抜いてください）

[c] 単色以外の背景

[2] コンテンツ (一般的に img タグで使用されます)
[注意] コンテンツ画像は通常、画像を切り取る必要はなく、プレースホルダーを使用するだけです
[a] バナー、広告画像
[b] 記事内 添付の写真
[c] コンテンツの画像は色が豊富で、通常 JPG 形式で保存され、ある程度の圧縮が必要です

【画像をカットする手順】
【1】
文字を入れて背景だけを残す

(文字の上に文字がある場合は特殊効果はコードでは書けないので、文字と背景を一緒に切り抜きます)

】 独立したレイヤーの場合は、文字画像を非表示にします

【1.2】文字と背景が結合している場合は、文字を覆うように背景を並べて配置します

1.2.1】背景が伸縮可能な場合は、長方形マーキーツールを使用して背景に描画します小さな長方形のフレームを作成し、自由変形ツール (ctrl+t) を使用して背景を引き伸ばし、テキストを覆い、ダブルクリックするか Enter キーを押します

【1.2.2】背景にテクスチャがあり、引き伸ばすことができない場合は、長方形マーキーツールを使用して背景に小さな長方形の枠を描き、移動ツール[v] + altを使用して現在のレイヤーをコピーしますを押し、最終的にテキストが隠れるまで、矢印キーを使用するかマウスで移動します (マウスを移動するときは、レイヤーが直線で移動するように Shift キーを押したままにしてください)。

移動ツールで必要なレイヤーを選択（Ctrl+レイヤーの四角形部分をクリック）すると、アリのラインが表示されます 【3】レイヤーを結合（ctrl+e）（オプション） 【4】 【1】表示されている画像を結合レイヤー(shift+v) ctrl+e) by

	【2】
：自動選択にチェックを入れて、必要な複数のレイヤーを結合します	レイヤーをコピー（ctrl+c） -> 新しいファイルを作成します（ctrl; +n)を押し、OK→レイヤーを貼り付け(ctrl+v) ... 【png8をカット】png8は半透明に対応していないため、背景付きでカットする必要があります

【不規則な小さなアイコンをカット】：方法はpng8と同様です

【1】長方形のマーキーツールを使用して領域を選択します 【2】コピーして新しいファイルに貼り付けます（タイル状の内容が幅（x軸）を満たすか、ファイルの高さ(y軸))

[背景をタイル状に並べることができます]

[ a ] x軸に沿って並べると、x軸が覆われます [ b ] y軸に沿って並べると、y軸も並べられます 【1】ガイド線を引きます 【3】ガイドに基づいてスライスボタンをクリックしますline 【4】スライスツールからスライス選択ツールに切り替えます（同じボタンの下）

【万能スライスツール】：タイル状に並べることができるアクティビティページに適しています

【2】スライスツールを選択します

【5】スライスをダブルクリックして必要な名前を変更します

【6】保存（すべてのスライスを選択、ctrl+aは不可）利用可能な場合は、長方形のボックスをドラッグしてすべてのスライスを選択するだけです。選択すると色が明るくなり、保存形式を均一に設定します)