,有时候呢,设计师给我们的图,也并非是一成不变,往往也需要作一些调整,更改,完美的将UI设计图,进行还原实现产品经理的意图,是前端小伙伴职责所在,那么熟练简单的ps操作,就很重要了,虽然我们不是设计者,...将原型设计图进行还原,承接UI,最终实现产品经理意图,实现静态页面效果展现
从UI设计师那拿到psd文档,进行切图,抠图,测量,简单的图片处理操作(更改字体,吸字体颜色等操作),利用web技术(html...快捷键ctrl+R调出标尺)
图层(F7),信息(F8)注意要把尺寸换成像素为单位
移动工具(对图片进行移动,拖动,移动它会脱离图层,改变元素的位置)
矩形选框工具(可以量图片,图标的具体尺寸,注意进行图片选中复制时...都可以取消上一次的矩形选框)
裁切工具(切片工具),可实现切图
吸管工具(取色器,吸字体,吸背景色)
橡皮擦(可对你进行过ps的操作,进行擦除)
横排文字(更改文字)
手抓(整体移动图片),空格键(按住不放...可以合并抽取代码,比如说这里的背景图,减少冗余的代码
gif操作图如下所示:
因微信图片大小上传问题,可点击下方阅读原文进行查看
总结
本篇主要是围绕着ps切图,抠图,从ps切图与前端的关系开始,如何使用