Be a front-end developer who understands PS

Do the front-end development needs do not need PS

Remember before the old club to do a certain system development, was doing interface development, found that the interface also need to add several icons, so the need to feedback to the project manager. After more than 10 minutes, the project manager came to me and told me: the UI designers of the product department (then our UI designers all adjusted to the product department) need to report this task to their product manager, you can simply describe your icon requirements in the email and send it to the Product manager to copy it to me and the UI designer. I listened to the eggs at that time, a few icons design less than half an hour of things, it took a day to finish! After this egg broken experience, I think for a developer to do interface, understand some PS technology is still necessary, on the one hand to improve the development efficiency, on the other hand, the interface is also more beautiful (of course, will point PS technology, sometimes can help beautiful pp chart). is achieved by using the PS "History brush Tool" and the Gaussian Blur function under "Filter", "blur".

The PS skills required for front-end development are cut graphs

Originally intended to a content to share common tools and transduction , but in order to visualize the operation, the content of this article added a lot of pictures, so has not been able to accommodate the introduction of the graph function. transduction function of the introduction or open a separate introduction it. This article mainly introduces the common configuration of PS and several tools commonly used in the toolbar. At last, it also introduces several tips in the process of using PS.

PS before the preparation work

1. Close the unnecessary window. Open Photoshop, before starting the P-chart or cut-out, we usually need to close the unnecessary window and just keep the window used in the process of the cut. The window can be opened or closed through the Window menu control. A few of the windows that are used in general web design are: information, characters, layers, history.

2. Set up the panel information. Sometimes when we move the mouse or select the area, we want to know the mouse position or the size of the selection area. Select the Info window to open Panel options ....

Set the first color information of the panel, the second color information mode is "RGB" color, set the mouse coordinates of the ruler unit is "Pixels", check "document Size", these settings will be used later. When Setup is complete, we use the selection tool to select an area in the workspace, and the information window shows the coordinates of the mouse, the length and width of the area, and the RGB color.

3. Set the unit and ruler. Choose menu Edit, preferences, units and rulers to change the ruler and text units to pixels.

4. Smart guides and rulers. Open the view, display menu, and tick Smart guides. Check the "View" menu and tick "ruler" (Ctr+r).

5. Save the workspace. After the interface menu is set, we certainly do not want the second time to be opened and reset. Open the new workspace, Workspace, Menu window, and create a new work area. You can use the newly created workspace directly the next time you design a cut diagram.

Common tools

1. Select the tool (shortcut key m). Select "Select Tool" in the toolbar, select an area on the layer, then right click on the selected area, select "Fill ...", pop up the fill window, we can fill the selection with the foreground color, background color or other color.

The selection tool contains rectangles, ellipses, single-line, single-column selection tools. When the Select Area tool is selected, there are several buttons on the top menu, representing area overlays, subtraction, and area intersections, respectively. These buttons implement different selection functions, and you can use the shortcut key Shift (overlay) and ALT key (subtract). If you are drawing ellipses and rectangles, hold down the SHIFT key to draw squares and circles. But you must first release the left mouse button, and then put the SHIFT key to draw success.

2. Lasso tool (L). Includes Lasso tool, polygon lasso tool, magnetic lasso tool. Feature usage is similar to the selection tool. When you select an area, you can press the SHIFT key to overlay the new area. Press ALT minus some areas.

3. Quick Select tool (W). Contains the quick selection tool and the template tool. Feature usage is similar to the selection tool. When you select an area, you can press the SHIFT key to overlay the new area. Press ALT minus some areas.

4. Select the content fill for the tool, Lasso tool, quick Select tool. The selection area, Lasso tool, and quick selection described earlier are all selected for an area. After the region selection, the color can be filled. Right-Select the area and select the Fill menu. Pop-up Interface Select "Content recognition". The selection area is automatically populated by the surrounding color.

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

6. Spot Repair Tool. Includes spot repair tool and patch tool, the spot Repair tool automatically blends the colors around the brush, such as a yellow line to remove, which can be removed by the spot repair tool. Click the mouse and drag it from the beginning to the end. Patch tool, select an area and fill it with content from other places.

Some little tricks.

1. The layer is automatically positioned. When using the Move tool, the menu bar has the following "auto-select" and "Layer (or group)" two menus. The functions of these two menus are similar to the linkage of selected files and solution catalog files in Visual Studio. Options on the right generally we select "layer", while the left option suggests not to check "Custom Selection", when you need to locate the control key, left-click on the image window picture can be the Layer window to automatically locate the layer.

2. Foreground color, background color fill. Some of the selection tools described earlier, sometimes we choose a region to use the foreground or background color fill, how to do? Photoshop provides us with fill shortcuts, fills the foreground color with Alt+delete, and uses the Ctrl+delete front to flush the background color.

3. Adjust the graphics size. To adjust the size of a circle, we know that you can use ctrl+t to change the size freely. But some students do not know how to center point adjustment, in fact, it is very simple, press and hold the Shift+alt key, and then drag the circle. So the shape of the adjustment is to follow the center of the adjustment. Also, if we want to draw a square or a circle, hold down shift to draw a square or circle before drawing.

Be a front-end developer who understands PS