1. Introduction to PxCook
PxCook (Pixel Chef) is suitable for writing front-end webpage codes according to the webpage design drawings provided by the UI
Its advantages lie in its small size, simple operation, and concise page. You can know the size, color, font size and color of each element in the design drawing, and the distance from other elements. The corresponding css style, of course, the happiest thing is that it can be used for free
Before I knew the software, I used ps to obtain the relevant element information of the design drawing, but after knowing the software, I decided to use PxCook
PS is more powerful than PxCook, but PS takes up a lot of space and needs to be paid. In the case of web design drawings, PxCook is enough for us to write front-end code~~~
2. Download and install PxCook
Download address: PxCook - Efficient and easy-to-use automatic annotation tool, generate front-end code, design and development collaboration tool (fancynode.com.cn)
Click to download now
Open the download button on the browser, and after the download is complete, click the file icon (you can omit this step if you can find the download location of your browser)
Find the icon, double click to open
If "Do you want to allow this app to make changes to your device" appears, select Yes, if not, please ignore this step
The following picture appears, click Next
After clicking I agree to this agreement , click Next
click next again
Click to install
Click Finish to complete the installation
3. Basic use of PxCook
Double-click to open the PxCook icon on the desktop to start
点击右上角的创建项目，在出现的创建项目框中输入项目名称并选择Web，然后点击创建项目
将.jpg或者.png或者.psd图拖入红色框区域
双击打开设计图
有设计和开发两个模式，.psd图多用于开发模式，选中元素后会展示该元素相关信息，包括大小、颜色和其中字体等等（右边框可见），选中元素后将鼠标移到其他元素上可以看到两元素之间的距离
.png或者.jpg图多用于设计模式。红色标注的尺子和吸管常用，吸管用于识别图片颜色，点击吸管工具后，点击想要识别图片中的部分即可；尺子工具点击该工具后，点击图片上的某一位置按住鼠标，移动位置即可确定两位置之间的距离
使用结束后点击关闭，选择是否保存即可
注：
对图片进行移动时要按住空格键再点击鼠标左键进行移动，只点击鼠标左键或者滚动鼠标都不会使图片移动
快捷键 一起按住 ”ctrl“和 ”+“放大图片 一起按住”ctrl“和”-“ 缩小图片