如何在屏幕上测量像素距离的工作流程改进

时间:2015-06-23 08:15:40

标签: html css photoshop

由于文本元素的行高和实现像素完美布局的意愿,我开发了一个工作流程,我想分享以测量屏幕距离,以便找到改进它的方法。

一开始我使用浏览器的一些插件,如this,但它引入了一些错误,因为它非常不精确。我通过使用辅助功能mac功能附带的放大镜改进了这一功能,这使得这个工作流程变得更好但仍然不够精确。

我现在使用的工作流程是这样的:

  • 使用cmd + shift + 4
  • 拍摄我想要测量的区域的屏幕截图
  • 在Photoshop上打开屏幕截图并放大(cmd +)直到可见像素网格
  • 设置两个网格规则,按住shift以捕捉整个像素(不是半像素)
  • 使用选取框(M)工具测量距离并检查信息选项卡上的距离

当知道最终距离时,很容易进入css,经过一些数学运算后记下我必须加上或减去原始数字的像素数量。但无论如何,虽然这是一个非常可靠的测量系统,但它涉及使用Photoshop,我不喜欢,因为它会减慢我的工作节奏。

最后,我很高兴,因为我的质量而不是速度,但我确信有办法改善这一点。我很高兴听到你的方式或你认为我可以改进我的方式。

提前致谢。

0 个答案:

没有答案