Front-end PS cut chart

For front-end beginners like me, it is also necessary to cut the graph. The following is the learning record of my reference materials:

I. Classification of cropping methods

Traditional Photoshop CS version
Traditional cut chart (manual cut and reference line cut chart)
Photoshop CC version
Precise graph cutting and automatic graph cutting using scripts
Ii. Prepare the cut chart

1. before you start to cut the image, you must first set the Photoshop software and change the basic unit to "pixel ", on the menu bar "edit" ----- "Preferences" ----- "unit and ruler" ---- set the unit to "pixel", as shown below:

2. four main parts required for cropping a graph: layers, history records, information, and characters (select in "window ). "Information" is used to display the size and coordinates of the selected image, and "character" is used to display the size and color of the selected word. You can call it up in the "window" on the menu bar.

3. when you cut a layer, press Ctrl and click the layer you want to select the current layer. You can see that the ant line selects the current layer, the corresponding information is displayed in "information" or "character.

Iii. Graph Cutting Tool

In the toolbox, "crop tool", "Perspective crop tool", "slice tool", and "slice selection tool" are provided ". The "slice tool" and "slice selection tool" are the most used ".

What is the difference between "slicing tool" and "slicing tool "?:
Similar to the two, you can use the "slicing tool" to cut a normal graph. After you finish a part of the cut graph, you want to adjust the previous cut graph,

You need to use the "slice selection tool". After selecting the tool, click the selected image to adjust the size.

 

 

 

 

Iv. Graph Storage

After all the images to be switched are cut, they must be stored.

In cc2014, click "file" ------ "storage for Web format" in the menu bar, and the "storage for Web format" window appears,

In cc2015, "file" ----- "Export" ----- "storage as Web format" ----- the "storage as Web format" window is displayed, alternatively, use the shortcut key Alt + Shift + Ctrl + S.

In the "storage as Web format" window, set options:

Select PNG-24 in the drop-down list on the right, check the staggered and transparency options, click storage, select the storage path to complete.

 

 

 

 

5. Manual graph cutting

Manual graph cutting is to use the "slicing tool" to cut the image one by one, but there will be more slices actually generated during the cutting than the image we cut ourselves, this is because when we cut the image, Photoshop automatically adds some slices to us. These slices cannot be deleted. They can only be selected by the "slice selection tool, click "Hide auto-slicing" in the property bar to hide the excess slices and you will be able to see the image we were going to cut. Note that this is only hidden, not deleted. The Slice will be automatically generated when it is actually sliced.

As shown in: the left part of the image is the slice we need, but the right part is actually the right part. The gray part of the red box also generates the slice image.

Slice on the left of the image. Right of the slice.

Disadvantage: There are unnecessary slices.

Vi. Reference Line Cut chart

First, call the ruler (shortcut: Ctrl + r) and use the reference line drawn from the horizontal ruler and vertical ruler to cut the chart. Select the slicing tool and click "based on reference line slicing" in the property bar to complete the slicing.
Benefits: it is more accurate. It is more accurate to manually cut the image one by one. The reference line will have a certain amount of adsorption on the layer, and the image will be cut strictly according to the reference line. In addition, you can right-click the slice automatically added by PS to delete the slice by using the reference line cut chart. Only the slice you need is retained.

Disadvantage: it takes time and effort to delete excess slices one by one.
VII. Precise cut Graph

The new function of the CC version is introduced when the precise cut graph is used. The PS automatically performs the cut graph on each layer through the script. In addition, the precise cut graph is based on the "layer object" Cut graph by the computer, the accuracy of all cut-out images is higher than that of manual cut-out images.
Process: "file" ------ "script" ------ "Export layers to files"

Parameters:

Objective: To store slices
File name prefix: prefix of the name of the cut-out Graph
"Visible only layer": only visible layers are exported.
File type: the format of the image file to be exported, such as JPG or PNG.
Finally, click the "run" button to execute the job, and Photoshop executes the auto-cut graph. It takes some time to automatically cut the graph.
8. Scaling-Automatic graph cutting
The automatic graph cutting process is invisible. After the layers are designed, the graph cutting is completed.
Procedure:

1. Click "edit"> "Preferences"> "efficiency enhancement tools" and select "enable generator" in the displayed window"

2. Select "file"> "generate"> "image resource"
Process: After completing the above two steps, you can see a folder generated under the directory where the PSD file is stored... (PSD file name)-assets folder.

Name the layer Group of the image to be saved. For example, you can change the name of the graphic layer group to a.png, And then you can see a corresponding slice in the assets folder. The background of the image is transparent, as shown in:

 

In addition, you can use this function to generate files in SVG format and change the layer suffix. you can use a text tool to view the code of the corresponding SVG file. You can also modify the image color, fill: # fff --------> Fill: # ff3300

Https://www.imooc.com/learn/506 video resources

 

Front-end PS cut chart