ps切图必知必会

panda.gif

前言

对于前端切图,相信很多小伙伴都不会陌生,但是对于新手,有时却很棘手,想着我本是来写代码的,你给我一张图干嘛的, 有时,或许你总奢望着UI设计师,把所有的图都给你切好,你只管撸码的,然而事实并非如此,有时候呢,设计师给我们的图,也并非是一成不变,往往也需要作一些调整,更改,完美的将UI设计图,进行还原实现产品经理的意图,是前端小伙伴职责所在,那么熟练简单的ps操作,就很重要了,虽然我们不是设计者,但是我们是具体的实现者,实现从0到1的过程,至于前端ps操作,绝大多数工作是简单的切图(抠图),测量,图片简单的处理,将图片利用web技术进行填充布局实现静态页面展现就可以了,至于,ps软件,我也只是停留在简单的使用,有时候,在一些群里,看到一些小伙伴,对于切图,有些畏惧,打开ps软件,无从下手,有时候呢,即使自己曾今,ps技术玩的很溜,但是只要一段时间没有去接触,就会很陌生,一些习以为常的技巧,忘得一干二净,非常苦恼,您将在本篇学会一些常用的奇淫绝技,完全可以胜任ps切图工作,今天,就我的学习和使用,跟大家分享一下自己的学习心得,如果你已经是老司机了,可以直接忽略,欢迎路过的老师,多提意见和指正

前提条件

工具软件:ps(Adobe Photoshop CS5)或者cs6,百度Google都可以下载,也可以后台回复ps软件即可获得下载链接
windows(我没有使用过mac,使用起来应该差不多,不过快捷键使用可能存在差异)

为什么要进行切图,PS与前端的关系

ps与前端的关系.png

将原型设计图进行还原,承接UI,最终实现产品经理意图,实现静态页面效果展现
从UI设计师那拿到psd文档,进行切图,抠图,测量,简单的图片处理操作(更改字体,吸字体颜色等操作),利用web技术(html+css+javascript)实现静态页面的布局(无论是pc端网站,还是手机网站还是web app都是这么一个流程)

如何使用PS工具软件对文件操作

清除参考线(视图-->清除参考线)
添加参考线(快捷键ctrl+R调出标尺)
图层(F7),信息(F8)注意要把尺寸换成像素为单位
移动工具(对图片进行移动,拖动,移动它会脱离图层,改变元素的位置)
矩形选框工具(可以量图片,图标的具体尺寸,注意进行图片选中复制时,图层的上下关系与后面的数字没有系,与他的排列顺序有关,图层越靠上,层级就越高,可以手动的拖拽,调整层级关系,通过它来切图,去除矩形选框ctrl+D,或者鼠标点击一下矩形选框,在点图片区域的任意一部分，都可以取消上一次的矩形选框)
裁切工具(切片工具),可实现切图
吸管工具(取色器,吸字体,吸背景色)
橡皮擦(可对你进行过ps的操作,进行擦除)
横排文字(更改文字)
手抓(整体移动图片),空格键(按住不放,拖动鼠标,可以实现图片的移动)
自由变换(ctrl+T):想要抹掉图片的文字或者图片等
缩放(ctrl+放大,ctrl-缩小,Alt+滚轮实现放大和缩小的操作)

简单操作过程如gif下所示,整个过程,清除辅助线,调出标尺(ctrl+R),信息(F8),即可,放大缩小(ctrl+,ctrl-)或者按住Alt键不放,滚动滚轮向上滚(放大),向下滚,缩小,显示,隐藏图层

ps菜单栏与工具栏.gif

如何从一张图片中切图,保存正确格式

缩放(ctrl+放大),ctrl-缩小,或者按住Alt键不放,上下滚动鼠标滚轮,可进行放大缩小
手抓(左侧工具栏可调出),快捷键:按住空格键不放,上下拖动鼠标,可实现图片位置移动
标尺(ctrl+R):辅助线进行精准定位
矩形选框工具(从右下角往上拉,按住ctrl键,选中的区域),有时候,选框区(蚂蚁线)有多,有少,结合左上角菜单栏中的,新选区,添加到选区,从选区中删去,与选区交叉结合进行使用
ctrl+v复制,ctrl+N(新建),选中所要去除的背景色+delete(删除背景色,为透明的)
文件->存储为web和设备所用的格式(ctrl+alt+shift+s)

清除辅助线-->放大(Alt+鼠标滚轮)-->调出参考线-->矩形框选中元素-->复制(ctrl+c)--->粘贴(ctrl+v)-->矩形框-->删除图标的空白区(delete)->结合菜单栏工具左上方的新选区,添加到新选区,从选区中删除综合使用-->存储图片为web格式

辅助线矩形工具选中切图区域.gif

切图.gif

存储图片的格式.gif

注意切出来图保存的格式,用电脑默认的图片查看器打不开,虽然可以直接保存,然后在底下选择图片的存储格式,那样比较麻烦,直接保存为web格式,进行图片存储格式选择

图片格式(psd | jPG/Gif/png)特点

psd(源文件),是直接没办法使用的
jPG/GIF/PNG(导出图)：存储的时候选择存储为web和设备所用格式,而不选择直接存储,下保存文件下进行选择文件后缀图片格式
jPG:不支持透明半透明,所有空白区域填充白色
Gif:支持透明,不支持半透明
PNG8:支持透明,不支持半透明
png24:支持透明,也支持半透明

JPG/GIF/PNG的应用

jPG:网页中大图,高清图(体积大),banner图,广告等
GIF:网页中的小图标(动画图片)
PNG8:网页中的小图标(与上面的gif没有多大的差异，体积大小)
PNG24:图像中存在的半透明效果的图片(支持半透明效果)
体积大小:jpg>png>Gif

如何抹掉psd原文件或者图片的文字

方法一:使用矩形框工具,在空白区选一个区域,复制,然后粘贴,拖动该复制的区块盖住文字或者图片即可即可
方法二:使用自由变换(推荐使用):在空白区选一个空白矩形框--->ctrl+T-->选择性的覆盖即可

抹掉文字.gif

添加前景色和删除背景色

使用场景:有时候,需要添加什么线之类,更改背景色之类的,使用起来就很方便了的
更改为前景色:使用快捷键:矩形选框-->Alt+Del
更改为后背景色:使用快捷键:矩形选框-->ctrl+Del

前景色与后背景色.gif

如何在网页中抠图

印屏幕,键盘上的prtSc SysRq键(把你屏幕上你看到的给截取出来)
浏览器(chrome)插件,控制台工具,审查元素,探测到图片,打开图片url,打开图片保存即可
网页上的图片都可以拿到IE浏览器按住Alt键+鼠标点击一下图片
控制台调试工具的Source下的image,可以进行抠图

合成雪壁图(css sprite)

意义:把页面上的很多小图合并成一张图,利用背景定位的技术实现,减少http请求,当然有的小图标,如果用字体图标也是可以的,这样比背景图还要好
方法一:新建一个画布,然后依次的将所扣出的图标复制粘贴到新的图层即可(复制粘贴的图标,要把背景色去掉为透明背景)
方法二:新建一个画布,右侧的图层,选中图标,复制所对应的图层到新建的那个画布当中去,然后依次的将图标进行有序的排放(注意的是将所有的图标图层一次性的复制过去)--ctrl+Alt+T(更改图标在图层的x,y轴的坐标)

合成雪碧图.gif

使用雪碧图结合定位嵌入到网页中去

html示例代码如下

<div>
    <i class="uncheck"></i>
    <i class="check"></i>
</div>

css层叠样式代码如下

div i{
    display:inline-block;
    width:120px;
    height:120px;
    margin-right:10px;
    background:url("../img/10css-sprite.png") no-repeat;

}
.uncheck{
    border:1px solid red;
    background-position:-33px -40px;
}
.check{
    border:1px solid blue;
    background-position:-194px -39px;
}
当我们发现,有重复的代码时,可以合并抽取代码,比如说这里的背景图,减少冗余的代码

gif操作图如下所示:

背景定位技术实现雪碧图.gif

总结

本篇主要是围绕着ps切图,抠图,从ps切图与前端的关系开始,如何使用PS工具软件对文件操作,无论设计稿是psd文档还是png图片,利用ps软件的工具栏和快捷键,都可以实现快速的切图,对于切出来的图,保存格式也有所认识,以及如何抹掉图片中文字,添加前景色，和后景色,等简单的处理,以及从网页中抠图的很多办法,以及最后把多张图片合成一张雪碧图,也就是css sprite,以及使用利用背景定位,嵌入到网页中去

以下是本篇提点概要

前提条件(ps软件)
为什么要进行切图,PS与前端的关系,将UI设计师给出的材料(psd)文档,利用web技术将产品实现从0到1的过程,增强用户体验,可视化
如何使用PS工具软件对文件操作,工具栏结合快捷键的使用
如何从一张图片中切图,保存正确格式
图片格式(psd | jPG/Gif/png)特点
JPG/GIF/PNG的应用
如何抹掉psd原文件或者图片的文字
添加前景色和删除背景色
如何在网页中抠图
合成雪壁图(css sprite)
使用雪碧图结合定位嵌入到网页中去

更多内容尽在微信itclanCoder公众号.jpg

更多内容,尽在微信itclanCoder公众号