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

Source: Internet
Author: User

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


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.


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.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.