Tangent tangent diagram of the front end
by.
As a front end, in addition to dealing with different styles of code, it is also very common to connect with the designers, from the PSD they provide to button the need for small ICONS and so on. Here’s a look at chetto’s various poses
photoshop
Fast derivation method
Let’s start with a silly and common method that works for a small number of ICONS: 1. 2. Create a new layer (Command +n). Usually the default size is the size of the image you copied from your clipboard 3. 4. Save it as a webpage (Command + Option +shift+ S) or export it directly (command+option+shift+w).
One step further: Directly select the layer you want to export, right click export as, and select save format, location… When using this method, be aware that if your designer gives a layer with a mask or a large transparent background, you may find that what you want and what you exported may not match.
One step further: With time, Photoshop CC will provide a quick export, which defaults to PNG. This way, you don’t have to choose the format size every time, but use one configuration everywhere.
Change to the new Gleason configuration: preference > Export
You can change the default export format, or if you are lazy, you can set it to export files directly to the current PSD document locationassetsFolder, so you don’t have to choose where to save it every time.

Once this is done, you can export the icon by going to File -> Quick Export to XXX or right clicking on the layer -> Export to XXX

Rapid sectioning
Again, slicing, which is probably a familiar method, is useful when you need to export multiple ICONS.
Select the Slice tool, hide the background, select the content you want in the start box, and save.

In this way, one or two is ok, because the size of each manual pulling is not necessarily close to the edge, and for multiple ICONS that need the same size, each time just pull the same size, I can’t do it. So we need a quick slicing method:
- Slice through the guide line
After selecting the Slice tool, you can see that there is a “Slice with Guides” button at the top of the toolbar, so you can consider surrounding the shape you want to slice with guides and export it with one click

So how to quickly create a reference line, command+r to open the ruler and manually pull one by one is too time-consuming. Here’s a little bit of knowledge that few people use: View -> New Guide From Shape.
First, as a layabout, you can set a keyboard shortcuts: Edit -> Keyboard Shortcuts. Go to new Guides by Shapes and set any keyboard shortcuts that are convenient and non-conflict, like Shift + Command + 1 in my case

Then you can select the layer, press the shortcut key, and the guide will be generated (even better with the automatic selection). Take a GIF to enjoy it:

Finally, click the Use Guide Slice button on the slicing tool and select the slice you want to export.
- Create slices using standardized templates
Creating guides using shapes is cool, but for situations where you don’t need to cut edges, such as cutting multiple ICONS of the same size, you need to explore further. The method is simple: first, you need to create a new template of standard size. For example, I draw a square here to indicate the size of the slices.

Press CTRL + J to duplicate this layer and lay it under the image you want to cut

Then select these layers and go to Layer -> New Layer Basic Slice

Here we go, here we go, here we go.

Finally, I will say something about the use of the slicing tool. Pay attention to hide the useless information, especially the small font next to the background when cutting the icon. For example, the above demonstration is theoretically unqualified pull ~
Recording actions
As a programmer, having to do the same thing every time, like writing code that repeats itself, can be annoying. At this point we can write a function to encapsulate our actions. Photoshop also provides the ability to record actions. Window -> Actions or option+F9 brings up the recording Actions panel


After entering the name of the action and the shortcut keys, you can do whatever you want to record, such as clicking export to PNG: Copy the current layer, create a new file, paste, and save to PNG. Then click the stop button on the far left and your action will be recorded.
Tips: Shortcut keys will also be recorded, so you can safely use them when you are bold. But it’s best to do what you want all at once, otherwise the extra movement will be recorded and the speed may be a little slower.

Then select your new action, or enter the shortcut key, and the action will run. For the action I just created, select the layer and press Shift +F6 to save the image in the folder you set. (There is no prompt after the action is completed, go to the folder directly.)
Automatic graph cutting (including WebP, SVG format)
Up to this point, the above is still to manually drag and drag various Settings, and still very troublesome, here is to introduce the new PS black technology, automatically generate image resources.
Version requirement: PS CC
First, open Preferences with Command + K, click On Plug-ins, make sure Generate -> Image Assets is enabled and go to file -> Generate -> Image Assets. Confirm that the menu item is checked;

Next, simply name the layer (e.g. icon.png), and the file lies in the “filenname-assets” ** directory for ** PSD (∩´ · ω · ‘⊂).
2. @2x Retina image output, add 200% in front of the layer, e.g. 200% [email protected]; Refer to the official documentation for more information
To generate SVG or WebP format, you need to create a folder under the user’s root directory ~, named generator. Json, and the content is
{
"generator-assets": {
"svg-enabled": true,
"webp-enabled": true
}
}
Copy the code
Other tips
Copy the CSS
For images with rounded corners and shadows, it’s hard to assess the exact size with your eyes, where copying CSS styles can be useful. Right click copy CSS on the layer and paste it in the editor to see what you copied.
 
Tips: 1. Smart Objects do not support the “copy CSS” function, you can rasterize the layer to use again. 2. For batch capture of multiple layers, select multiple layers and press Ctrl+G to convert the selected layer into a layer group. Then right-click on the group and select “Copy CSS” to get the CSS code in bulk.
Turn on and off all other groups
As most of you know, clicking on the eye in front of a layer/group shows you how to turn that layer/group off. There is also a way to turn on/off all other layers: hold Down Option and click

Intelligent guide
When it comes to measuring spacing, the smart guide is the best. View -> show -> Smart Guides
View the distance between layers: After selecting a layer, hold down the Cmd key (Mac) or Ctrl key (Windows) and hover the cursor over the other layer to see the distance between them.
 
When your cursor hovers over the shape, Photoshop shows the distance from the canvas.
 
See grids and Guides for more usage
sketch
Here’s the official tutorial:
Write in the last
Since this article is written on MAC and Photoshop is in English, most of the shortcuts in this article are based on MAC. If you use Windows system, you need to do the corresponding conversion. As well, some operational commands are mainly translated for individual according to impression, please forgive me if there are inaccuracies.
Other resources recommended:
Photoshop shortcuts: http://www.uisdc.com/45-handy-photoshop-shortcuts
Finally, there’s CheatSheet, which reads the shortcut configuration of the software you’re currently using and displays it to you quickly (without having to search through layers).
Usage: Long press command