Front-end engineer skill-photoshop-series extension-automatic cutting, front-end photoshop

Front-end engineer skill-photoshop-series extension-automatic cutting, front-end photoshop
* If the directory [1] is set to [2] before the image is automatically cut

With the continuous upgrade of the photoshop version, the software itself has added a lot of new features and added a lot of convenience for graph cutting. The latest version of photoshop adds the automatic cut function. This article will introduce this new function of photoshop in detail.

 

Initial settings

Of course, you need to set some preferences first.

[1] In edit-> preferences-> Efficiency Enhancement Tool, select enable Generator

[2] restart photoshop, go to File> Generate, Click image resource in File> Generate, and click image resource

[Note] You can click this option only when a file is opened in photoshop.

 

Automatic graph cutting

Png

For example, we need to cut out the small icon in front of the favorites, first find the corresponding layer or group of the icon, and then rename it. The key is to add a suffix to it. If you want to save a png8format image, the suffix is .png 8. In other regions, if you want to save the png24format, the suffix is .png 24.

Then, the image storage directory contains an assets folder, and the saved image SC .png is saved.

Jpg

Similarly, jpg images are cut in this way. For example, we want to cut out the picture of the ankle.

In fact, jpg-Format Image Storage has quality options, from 0 to 100. If we write the suffix .jpg 6, the quality is 60. If the suffix is .jpg, it indicates the quality is 100.

We first open the original cut image, with the size of 13.6 k. After the suffix is changed to .jpg 5, the size becomes 4.52 kb.

2x Graph

If we need to adapt to the Retina screen, we can also use the auto-cut function when cropping a 2-fold image. You only need to rename it as 200% image name @ 2x.jpg.

First, check that the size of the ankle image is 200*200. When we set it to 200% jy @2x.jpg 5, then check that the size of the ankle image is 400*400, that is, a 2x graph is generated.

Similarly, a 3x graph is similar.