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

【新規】必要なコンテンツを新しいファイルにドラッグするか、コピーして新しいファイルに貼り付けます。背景コンテンツは透明である必要があります

【補足】画像のさまざまな形式と特性
jpg: 透明と半透明はサポートされておらず、空白部分はすべて白で塗りつぶされます (高精細画像)
Gif: 透明はサポートされており、半透明はサポートされていますサポートされていません (小さいアイコン、アニメーションはサポートされています)
png8: 透明をサポート、半透明をサポートしません (小さいアイコン、アニメーションはサポートしません)
png24: 透明をサポート、半透明もサポートします (半透明の画像)

【保存】:画像の品質を変更したり、PSD のコピーを保存したり、PSD ファイルを変更したりできます。他の種類の写真を保存する場合、psd ではなく他の種類の写真を編集して保存すると、写真はある程度圧縮されます。画像のピクセルが失われる可能性があります。したがって、保存する必要があるすべての画像は、PSD ソース ファイルとして保存する必要があります
[1] 画像の色が豊富で、透明度の要件がない場合は、通常、jpg 形式で保存し、適切な品質を選択することをお勧めします。 60-80
[2] 画像があまりカラフルでない場合は、透明度が必要かどうかに関係なく、PNG8 形式で保存します (色数が 256 色しかなく、ファイル自体が比較的小さいのが特徴です)。 、ディザリングなし、エッジなしを選択します。 [3] 画像が半透明の場合 必要に応じて、PNG24 形式で保存します (画像を圧縮します。すべて比較的大きいです)

【修正とメンテナンス】

【1】キャンバスを拡大：画像→キャンバスサイズ【alt +ctrl+c】→配置位置を選択（通常は左上）

【2】キャンバスを縮小します [注意] PNG8 のカラー モードはデフォルトでインデックス カラー モードになっており、png8 画像を変更する場合は、そのカラー モードを RGB モードに変更する必要があります。 RGB カラー

【2】まず、残す範囲を選択してから画像を選択→ツールバーの切り抜きまたは選択 切り抜きツールボタンを使って切り抜きます

【3】画像を移動icon

[1] アイコンが独立レイヤーの場合は移動ツールでドラッグするだけ

[a] まずは選択範囲を使用ツールでアイコン領域を選択し、移動ツールでアイコンをドラッグするとレイヤーを移動できます [b]まず選択ツールでアイコン領域を選択し、切り取り[ctrl+x]、貼り付け[ctrl+v]で、元のレイヤーを2つのレイヤーに分けることができ、操作がより便利になります

[2] アイコンが独立していないレイヤーの場合

【結合】

[1 ] 画像は結合する前に隙間を空ける必要があります

影響を受ける空間は比較的大きくなります

[2] 画像の配置は水平と垂直です

[3] 結合と分類の原理
[a] 同じモジュールに属する画像を結合します 結合

[b]同じようなサイズの写真を結合します

スルー写真を組み合わせてスルー このページで使用している画像結合

[b] ステータスアイコンの結合

🎜🎜