Front-end Photoshop slicing

What is slicing? (Slice in Photoshop)

Slice: Cut the picture into several parts and upload them one by one, so the upload speed is faster. Each slice is transferred as an independent file, which contains the slice's own settings, color palette, links, flip effects, and animation effects.

Slicing tool: It is mainly used to decompose a large picture into several small pictures. This function is mostly used in web pages, because the current web pages contain pictures and text, and because of this, it takes a long time. , in order to prevent people browsing the webpage from waiting too long, they cut the picture into several smaller ones.

Slicing is a very important step in the web page production process. Whether the slicing is correct or not will often affect the post-production of the web page. Generally, PS or FW is used to cut the renderings of web pages or large-scale pictures. Important correct slicing will bring a very positive impact to the website. For example: reducing web page loading time, creating dynamic effects, optimizing images, links, etc.

1. Production of web page slicing

1. Reduce web page loading time

Sometimes a large banner image may be needed on the web page, so it will cost the browser to download the image. For a long time, this is very detrimental to the user experience. The emergence of web slicing solves this problem very well. The use of slicing divides the entire large picture into many different small pictures, and the browser will also download these small pictures. In this way, the time for the browser to download the picture is greatly shortened, saving a lot of time.

2. Optimize images

Generally speaking, a complete image can only be in one format, jpg, gif, png, psd, dpf or other. If there is one format, then we can only use A way to optimize. Web slicing can divide this picture into many small pictures, and can save them in other formats, which can be optimized separately. This will ensure that the image quality is high while also reducing the image memory and improving the loading speed of the web page.

Preparation before slicing: save the web page PSD file and integrate the PS pictures

Specific preparation for slicing: splitting the slices and the type of slice (user slice, non-user slice)

Basic points of slicing:

            1. Cut according to the color range;

            2. Slice size: cut the web page slices as small as possible;

                3 , The slice area is complete: ensure that a complete part is within a slice, such as the title text of a certain area, which is convenient for later modification; There are many color transitions. Those with rich colors should be exported to JPG, and the parts with animation should be exported to GIF animation; , I don’t know if I need to change a certain part someday, such as text, etc. I can just modify the slices used separately.

Display and hide sliced ​​layers: slices of background images; slices of irregular images. Editing of slices: size, adjustment, deletion, clearing slices (you can select one by one, right-click to delete, or view all to delete), save slices (stored in a format used by the web)

Delete slices

Edit Slot options: Slip type, name: automatically generated, generally naming English, web code is more friendly, URL: link address, target, ALT mark: you can search and optimize pictures through the search optimization picture ,                                                                     Size W H

Save sliced ​​(stored as a web used format) Ctrl+Shift+Alt+S: The commonly used format is JIF and PNG -24 to support background transparency (transparent check support background transparency), JPEG (picture quality is generally 80 or more). Then click Save, save the format, the format has limit images, set to default settings, slices (all slices: whether user slices or non-user slices will be exported, all user slices: only the slices cut, selected slices: only The selected slices will be exported), and a folder (images) will be automatically generated.​ ​ 1. Introduction to the three slicing formats: use the jpg format for brighter color ranges , png supports web page transparency, and jif supports a relatively narrow color range.

2, comparison (applicable range) of three slices: JPG web pages support this format; PNG supports transparency and background; JIF animation can be posted.

3, the scope and advantages and disadvantages of the three slices: PNG: IE6 does not support picture transparency; the color exported by GIF animation is single, and sawtoles appear when the color is bright.

cutting and renaming:

1, the export of slices

2. The name of the slice is best in English. Symbols starting with

              Slicing techniques (gradient, shadow, irregular):                                                                                                                                                                                                                                                     to be sliced ​​​​​ ​ ​Shadow: How to implement it in web pages, css3 can also be implemented Shadows are not supported by IE6 and IE8. You can make a separate slice for the shadow, turn off the background and save it in png-24 format

Irregular: Hide the background and save it in png format

Web page slice Practical exercises

Some colors can be expressed by oneself, pendant production (whole cut), video play button

Steps: organize the layers, save them (to back up the pictures), do as much as possible To be precise, if there are many canvases, you can create a new one and copy it to the new canvas

How to quickly insert a slice: hyperlink or add it as a background link

Summary Knowledge points and key points of slicing: the concept of slicing , function, format selection

For more front-end Photoshop slicing related articles, please pay attention to the PHP Chinese website!