How to cut the psd? How to cut the psd?

1。 Traditional paper-cutting (1) Open a psd file, select the cutting tool and the slicing tool in the menu bar on the left side of ps. First of all, we analyze this psd file, divide it into several selected areas consciously, and then use the slicing tool to cut out the patterns we need by dragging the mouse.

Slices marked in blue are manually selected, and slices marked in gray are automatically generated. Then, we export these newspaper clippings and select File->; : export-> : Save the format used by the website in the folder you want to use.

Question: Observing the above operation, you will find that it is too troublesome and time-consuming to cut such patterns one by one. What if an e-commerce website asks you to cut hundreds of pictures? So there is a more convenient way:

(2) General designers usually use reference lines when designing, so we can also use reference lines to simplify the cutting operation. First select the layer of a pattern you want to cut, and then drag the ruler on the left or above to the boundary of the pattern with the mouse, which will automatically absorb the reference line, so it is more accurate, so the reference line of this pattern is set, and similarly, the reference lines of other patterns are set.

Because of the dense reference lines, there will be many unnecessary slices, and we can click the right mouse button to delete them. We found that it was too tiring to cut the graph at one time like this, and many unused slices needed to be deleted, so we suggested cutting psd files one by one, and then closing the reference line to check the cut graph. Finally, export the slices to a folder.

The above is the traditional way to cut the map, which is troublesome, time-consuming and inaccurate, so we use the computer to cut the map accurately.

Cut the picture accurately

Let's use photoshop script to realize a faster and more accurate image cutting method. It has the advantages of saving time and effort in automatic drawing, automatic calculation by computer and more accurate size.

First, open a psd file and select the file->; : export-> : Export the layer to a file-Set its properties, select the storage location and type, check the transparent area, stagger, crop the layer, and finally run the export. This process will take several minutes. It is recommended to cut it piece by piece.

3.3.photoshopCC version precise cutting-automatic cutting

(1) First, we select the pattern to be cut and its layers. Then set the parameters and select Edit-> : Preferences-> : additional tools-> : Check the generator and click OK. Select file-> Generate->; Image resources. We found an empty one. The asset folder will be generated in the directory where psd files belong. Finally, we changed the name suffix of this floor to. Png, and we will find that we cut more patterns in the assets folder, so we cut one pattern.

(2) Based on (1), it is easy to export svg format, just change the name suffix of the layer where the pattern is located to. SVG .

What are the contents of the front-end work of the website?

The front end should be familiar with the realization of html, css and js pages: you cut the picture and convert PSD into code business logic. Business logic is mainly used to transfer data, process information and encapsulate a function to realize js. Data storage refers to the temporary files generated during the processing of data streams, or the information that needs to be found during the processing. Isn't this the job of the front end? Their company is looking for full-time engineers, right?