Be a front-end developer who can use PS

Do I need PS for front-end development? became a project manager. After more than ten minutes, the project manager came over and told me: The UI designers of the product department (our UI designers were all transferred to the product department at that time) need to report this task to their product managers. Please briefly describe your work in the email. The icon requirements are then sent to the product manager and CCed to me and the UI designer. I heard that eggs were all over the floor, and a few icons were designed in less than half an hour, but it took a whole day to complete! After this experience, I think it is necessary for a developer who makes interfaces to know some PS technology. On the one hand, it can improve development efficiency, and on the other hand, the interface made will be better-looking (of course, some PS technology , sometimes you can also help beautiful women with PP pictures). The picture below was achieved using PS's "History Brush Tool" and the Gaussian blur function under "Filter"->"Blur".

The PS skill required for front-end development is cutting pictures

I originally planned to share common tools and cutting pictures together in one article, but in order to intuitively display the operation, This article has added a lot of pictures, so it can no longer accommodate the introduction of the picture cutting function. Let’s introduce the image cutting function in a separate article. This article mainly introduces the common configuration of PS and several commonly used tools in the toolbar. Finally, it also introduces several tips in using PS.

Preparations before PS

1. Close unnecessary windows. Open PhotoShop. Before starting to P or cut pictures, we usually need to close unnecessary windows and only keep the windows used in the picture cutting process. The opening or closing of the window can be controlled through the "Window" menu. The several windows needed for general web design are: information, characters, layers, and history.

2. Set panel information. Sometimes when we move the mouse or select an area, we want to know the mouse position or the size of the selected area. Select the "Information" window and open "Panel Options...".

Set the mode of the first color information and the second color information of the panel to "RGB" color, set the ruler unit of the mouse coordinates to "pixels", and check "Document" Size", these settings will be used later. After the setting is completed, we use the "Selection Tool" to select an area in the workspace, and the information window displays the coordinates of the mouse, the length and width of the area, and the RGB color.

3. Set the unit and ruler. Select the menu "Edit"->"Preferences"->"Units and Rulers" and change the ruler and text units to pixels.

4. Smart guides and rulers. Open the "View"->"Display" menu and check "Smart Guides". Select the "View" menu and check "Ruler" (ctr+R).

5. Save the workspace. After setting up the interface menu, we definitely don’t want to have to reset it the second time we open it. Open the menu "Window"->"Workspace"->"New Workspace" to create a new workspace. You can use the newly created workspace directly the next time you design a cutout.

Commonly used tools

1. Select the tool (shortcut key M). Select the "Selection Tool" in the toolbar, select an area on the layer, then right-click the selected area and select "Fill..." to pop up the fill window. We can fill the selected area with the foreground color, background color or other colors.

## The selection tools include rectangle, ellipse, single row, and single column selection tools. After selecting the "Select Area" tool, there are several more buttons in the menu above, representing area overlay, subtraction, and area intersection respectively. These buttons implement different selection functions, and you can use the shortcut keys Shift (overlay) and Alt key (subtract). If you are drawing ovals and rectangles, you can draw squares and circles while holding down the shift key. But you must first release the left mouse button and then release the shift key to draw successfully.

2. Lasso Tool (L). Contains lasso tool, polygonal lasso tool, and magnetic lasso tool. Function usage is similar to the "Selection Tool". After selecting an area, press the Shift key to overlay a new area. Press Alt to subtract certain areas.

3. Quick Selection Tool (W). Contains "Quick Selection Tool" and "Template Tool". Function usage is similar to the "Selection Tool". After selecting an area, press the Shift key to overlay a new area. Press Alt to subtract certain areas.

4. Content filling of the selection tool, lasso tool, and quick selection tool. The selection area, lasso tool, and quick selection introduced earlier all select a certain area. Once the area is selected, it can be filled with color. Right-click the selected area and select the "Fill" menu. In the pop-up interface, select "Content Identification". The selection area is automatically filled with the surrounding color.

5. Cropping tool. The crop tool is used to cut out only what we need. After using other area selection tools, switch the menu to the crop tool to directly crop the previously selected area.

6. Spot repair tool. It includes a spot repair tool and a repair tool. The spot repair tool automatically blends the colors around the brush. For example, in the picture below, there is a yellow horizontal line that you want to remove. You can use the spot repair tool to remove it. Click and hold the mouse and drag from beginning to end. Patch tool, selects an area and fills it with content from elsewhere.

Some tips

1. Automatic layer positioning. When using the "Move Tool", the menu bar has two additional menus: "Auto Selection" and "Layer (or Group)". The functions of these two menus are similar to the linkage between selected files and solution directory files in Visual Studio. For the options on the right, we usually choose "Layer", while for the option on the left, it is recommended not to check "Custom Selection". When you need to position, hold down the Ctrl key and left-click the picture in the image window to open the "Layer" window. The layers are automatically positioned.

2. Fill the foreground color and background color. With the selection tools introduced earlier, sometimes we select an area and want to fill it with the foreground color or background color. What should we do? Photoshop provides us with fill shortcut keys. Use Alt+Delete to fill the foreground color, and use Ctrl+Delete to advance the background color.

3. Adjust the graphic size. If you want to adjust the size of a circle, we know that you can use Ctrl+T to freely change the size. But some students don’t know how to adjust with the center of the circle as the center point. It’s actually very simple. Just hold down the Shift+Alt keys and drag the circle. In this way, the adjustment of the graphic is based on the center of the circle. In addition, if we want to draw a square or circle, hold down Shift before drawing to draw the square or circle.

For more articles related to making a front-end development using PS, please pay attention to the PHP Chinese website!