Front-end Engineer Skills Photoshop series fifth--Sprite chart

Show Table of ContentsDirectory[1] definition [2] application scenario [3] merging [4] implementation [5] MaintenancePrevious words

As already mentioned, descriptive images are eventually merged into Sprite charts. This is the fifth article of Photoshop Series--Sprite chart

Defined

CSS Sprite (sprite) is a Web image application process that allows all the scattered images involved in a page to be included in a larger image. Two benefits can be achieved with the processing of sprite graphs:

"1" reduces the number of HTTP requests

"2" reduces the size of the image and increases the load speed of the page (multiple pictures loading speed is less than the loading speed of the collage picture)

Everything is not perfect, the realization of the advantages of the same time also brought shortcomings, that is, improve the development of web pages and maintenance costs.

Application Scenarios

As mentioned earlier, not all of the pictures can be used to make sprite maps, only descriptive pictures are suitable

"1" for the IMG tag settings of the content of the picture, is not merged into the sprite chart, if the merging of these images will affect the readability of the page, the semantic reduction and adjustable range of small

"2" is also not merged into Sprite charts for pictures that are tiled horizontally and vertically. In the case of horizontal tiling, only all horizontally tiled graphs can be combined into a larger image, arranged vertically, not horizontally, or vertically tiled, and only vertically tiled graphs can be combined into a larger image, horizontally and vertically.

Merge

The production of Sprite chart is actually a small plot merged into a large map, but the small map merging needs to follow the following rules:

"1" picture must keep the gap before merging

1, if it is a small icon, leave the gap can be appropriate smaller, generally 20 pixels or so

2, if it is a large icon, to leave the gap will be larger, because the large icon in the adjustment, the impact of the space will be larger

The "2" picture is arranged in horizontal and vertical way.

Principle of "3" merger classification

There are three principles for merging classifications, which are based on module, size-based, and color-based

A, the same as a module of the picture to merge

B. Merging images of similar size

C. Merging pictures with similar colors

"4" Merger recommendation

In the actual sprite production, two methods are generally used: one is only the image of the page to merge; the other is a stateful icon merge

Realize

In the past, we might need to implement the sprite diagram manually, which is a very troublesome and error-prone thing. Now there are a lot of handy tools to make sprite charts. I often use a gadget called a CSS background merge tool.

Use the method as shown:

Maintenance

"Enlarge Canvas"

Image, Canvas size <alt+ctrl+c> Select positioning position (usually upper left corner)

"Reduce canvas"

Note PNG8 color mode defaults to indexed color mode, you need to change the color mode to RGB mode when you modify the Png8 picture, step to image-----RGB color

1, select the image---cutting selection based on the upper left pixel color, you can achieve the effect of automatic cutting

2. Select the area you want to keep and then crop by selecting image---cropping or selecting the Crop Tool button in the toolbar

"Move Icon"

1. If the icon is a standalone layer, drag with the Move tool

2, if the icon is a non-independent layer

A, select the icon area with the selection tool, and then drag the icon with the Move tool to move the layer

b, first use the selection tool to select the icon area, and then cut <ctrl+x>, paste <ctrl+v>, you can divide the original layer into two layers, more conducive to the operation

Front-end Engineer Skills Photoshop series fifth--Sprite chart