前端开发需要安装的p图软件（web前端开发中使用Photoshop测量和切图注意事项）

欢迎关注web前端开发中的切图指的是前端开发工程师在拿到网页设计稿之后将其中需要用到的图标，图片等素材取出来单独保存，以便于在代码中引用通常需要切出的的内容是LOGO，重复出现的图标，还有作为网页内容存在的海报图片等，我来为大家科普一下关于前端开发需要安装的p图软件?以下内容希望对你有帮助!

前端开发需要安装的p图软件

欢迎关注！

web前端开发中的切图指的是前端开发工程师在拿到网页设计稿之后将其中需要用到的图标，图片等素材取出来单独保存，以便于在代码中引用。通常需要切出的的内容是LOGO，重复出现的图标，还有作为网页内容存在的海报图片等。

使用Photoshop切图，首先将设计稿中的所有文字图层隐藏，对于有背景的文字图层使用自由变化加填充工具将文字隐藏。然后将去掉文字的图片保存起来，内容性的图片保存为jpg格式，图标LOGO类的图片保存为png格式。然后将图标和图片分类组合到sprite中，方便后期使用。

在html中直接用img标签的src属性引入图片，在css中使用background-image结合background-position将sprite中的图标引入到css样式表中。

需要通过测量和取色得到的？

宽度，高度(width,height)

内外边距(padding,margin)

边框粗细和颜色(border)

定位(position)

文字大小和颜色(font-size、color)

行高(line-height)，其为第一行的底端到第二行的底端。

背景位置(background-position)

背景颜色（background）

开启辅助视图中的下列功能，在视图菜单下找到对齐（开启靠近吸附功能）；标尺（Command R）；参考线（Command ;）

测量时应尽可能放大画布来减少误差。量取文字时选取尺寸大的文字进行测量可以减小误差。

使用拾色器来取色，使用魔棒工具判断颜色是否为渐变。

还需要了解矩形选框工具和切片工具等。

收藏转发请先关注，谢谢支持！