Web Front-end should master the basis of ps and web Front-end ps

Web Front-end should master the basis of ps and web Front-end ps

 

A front-end design draft is presented in psd format, so some simple basic ps is essential!

Ruler: Generally, the pixel value is used. The shortcut key is ctrl + r,

Guides/reference lines: Used to help crop images!

Clear reference line: ctrl + ;.

Information bar: Used to view information,

Record column: reply to the original information and try not to change the source image given by the designer!

Layers bar: to adjust to automatic selection, display the image, text, and icons we want in layers!

Zoom in: ctrl ++,

Zoom out: ctrl --,

Drag: Space key + mouse movement,

Rectangle selection box: select the image and Icon we use,

When copying text or wanting to know text information: Use the text tool, shortcut key T,

If you want to know the background color and text color, you can use a straw to view the text information,

To take the color: copy the hexadecimal color, also available in rgb format, such as # ffffff, white.

How can I get an image for the front end!

First, use the rectangular box to select the image we want. You can use the reference line as an aid. After selecting it, select copy, ctrl + c (the corresponding layer must be selected, if the corresponding layer is not selected, press ctrl + shift + c to select it.) create a new one, press ctrl + n (the background color can be transparent or white, usually transparent ,), paste ctrl + v. in this way, the image is cropped!

The next step is to save it. How can we save it?

Do not save it directly. Select the format used for storing the web. Press ctrl + shift + s to save it!