Front-end engineer Skills Photoshop skillfully used (from renderings to sprite charts) to prepare a piece

"Project Flow"
Demand Analysis (Market) > Project Prototypes (Products) > out-of-design (UI) > page-related (front-end) > Data-related (back-end) > Test-on-line

"Photoshop's role": providing a picture material to a Web page
[HTML] tags
[CSS] Background property icon{background:url (.. /img/xx.jpg);}

"Initialization settings for Photoshop"
[1] Preferences settings "ctrl+k" Edit > Preferences > Units and Rulers > change the ruler and text units to pixels

[2] Panel settings (under the Window menu):
[2.1] Tool (switchable two or single column layouts)
[2.2] option (corresponds to the currently selected tool one by one)
[2.3] Information "F8" (color, position, size information, generally with the use of rectangular marquee tool)
[2.4] Layer "F10" (Layer action)
[2.5] History (record history operation, often used for fallback)

[3] Auxiliary view (under View menu)
[3.1] Align "ctrl+shift+;" when snapping is on, the layer moves to another layer or to the edge of a guide or document with the Auto-snap feature
[3.2] Ruler "Ctrl+r"
[3.3] Reference line CTRL +; View > Display > Guides
[note] To see the guides and grids in the canvas, you need to check the display of additional content.

"Transduction Common Tools Introduction"
[1] Move Tool "V" (commonly used in selection of layers and moving pictures)
[Note 1] automatic selection on the options panel for the Mobile tool must be checked on
[Note 2] The options panel in the selection tool has layers and groups of two options, and groups generally refer to a folder
[2] Rectangle marquee Tool "M" (commonly used to select an area and view information with the information Panel)
[A] Add to selection: Shift
[b] Subtract from selection: Alt
[C] Cross the selection: Shift + Alt
[3] Magic wand Tool "W" (keyed irregular figure)
[note] Tolerance is used to set the range of color sampling when the tolerance is 0 for selecting only the current color value
[4] Crop tool + Slicing tool "C" (crop picture)
[5] Zoom Tool "Z" (zoom canvas)
[tips] often used to zoom shortcut keys
[1] Enlarge:
[A]ctrl+ Plus
[B]alt+ Rollers Roll Up
[2] Shrinking:
[A]ctrl+ minus
[B]alt+ Roller roll down
[3] shown as 100%:ctrl+1
[6] Color Picker + eyedropper tool (color extraction)
[7] Type tool "T" (Input and edit text)
[8] Gripper Tool "space" (mobile viewable area)

"Other common shortcut keys"
[1] Single step undo or forward: Ctrl + Z
[2] Continuous revocation: ctrl+alt+z
[3] Fallback to a step: click on the corresponding steps in the history panel
[4] Deselect: ctrl+d
[5] Variant: ctrl+t
[6] Save: Ctrl+shift+alt+s
[7] Merging layers: ctrl+e
[8] seal See layer: Ctrl+shift+e

The front-end engineer skills of Photoshop skillfully used (from the sprite) to prepare the article