フロントエンドエンジニアのスキルアップのためのPhotoshopの上手な使い方シリーズ第5回 - スプライトピクチャー

前の言葉

前述したように、説明的な画像は最終的にはスプライト画像に統合されます。この記事は、Photoshop スキル シリーズの 5 番目の記事です - スプライト

定義

CSS Sprite (スプライト) は、Web 画像アプリケーションの処理方法であり、ページに含まれるすべての散在画像を 1 つに含めることができます。大局。スプライト画像処理を使用すると、

【1】httpリクエスト数の削減

【2】画像サイズの削減とWebページの読み込み速度の向上（複数の画像の読み込み速度は、結合された画像の読み込み速度よりも遅くなります）の2つの利点が得られます。 )

すべてが完璧ではありませんが、利点を認識する一方で、Webページの開発と保守のコストが増加するという欠点ももたらします。

適用シナリオ

前述したように、すべての画像をスプライト画像に使用できるわけではなく、説明的な画像のみが適しています

【1】imgタグに設定されたコンテンツ画像はマージできません スプライト画像の場合、これらをマージします画像はページの読みやすさに影響し、セマンティクスが低下し、調整可能な範囲が狭くなります。 [2] 水平方向と垂直方向の両方に並べられた画像は、スプライト画像にマージできません。水平方向に並べた場合、水平方向に並べたすべての画像は 1 つの大きな画像にのみ結合でき、垂直方向にのみ配置できます。垂直方向に並べた場合、垂直方向に並べたすべての画像は 1 つの大きな画像にのみ結合できます。水平方向にのみ配置できます。垂直方向には配置できません

結合

スプライト画像の作成は、実際には散発的な小さな画像を 1 つの大きな画像に結合することですが、小さな画像の結合は次のルールに従う必要があります:

【 1】結合前の画像 ギャップは確保しておく必要があります

1. 小さなアイコンの場合、ギャップは小さくする必要があります、通常は約20ピクセルです

2. 大きなアイコンの場合、ギャップは大きくする必要があります。大きなアイコンが調整され、影響を受けるスペースも比較的大きくなります

【2】画像の配置は縦横になります

【3】統合分類の原則

統合分類には3つの原則があります、モジュールに基づいており、サイズと色に基づいています

a. 同じモジュールに属する写真を結合します

b. 類似したサイズの写真を結合します

C. 類似した色の写真を結合します

【 4 】マージ推奨

実際のスプライト制作では、このページでのみ使用する画像をマージする方法と、ステートフルアイコンをマージする方法

実装

以前は、スプライト グラフィックスを手動で実装する必要がある場合がありましたが、これは非常に面倒でエラーが発生しやすいものでした。最近はスプライトを作成するための便利なツールがたくさんあります。私は CSS バックグラウンドマージツールと呼ばれる小さなツールをよく使用します。

使い方は下の写真の通りです

大メンテナンス

[拡大キャンバス]

画像 -& gt; alt+ctrl+c & gt; 配置位置を選択します (通常は左上隅)

【キャンバス縮小】

デフォルトでは、png8 画像を変更する場合は、そのカラー モードを RGB モードに変更する必要があります。 ; モード -> RGB カラー

... 1.アイコンが独立したレイヤーの場合は、移動ツールを使ってドラッグするだけです

	【アイコンを移動】

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

a. まず、選択ツールを使用してアイコン領域を選択し、次に移動ツールを使用してアイコンをドラッグし、レイヤーを移動できるようにします

最初に。選択ツールを使用してアイコン領域を選択し、それを切り取ります。切り取り 、貼り付け すると、元のレイヤーを2つのレイヤーに分割でき、操作がより便利になります

その他 フロントエンドエンジニアの複数スキルで Photoshop を上手に使う方法シリーズ第 5 回 - Sprite Pictures 関連記事については、PHP 中国語 Web サイトに注目してください。