0°

ps切图必知必会

ps切图必知必会

panda.gif

收听音频戳链接ps切图必知必会

前言

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

前提条件

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

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

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切图必知必会

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格式

ps切图必知必会

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

ps切图必知必会

切图.gif

ps切图必知必会

存储图片的格式.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–>选择性的覆盖即可
ps切图必知必会

抹掉文字.gif

添加前景色和删除背景色

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

前景色与后背景色.gif

如何在网页中抠图

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

合成雪壁图(css sprite)

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

合成雪碧图.gif

ps切图必知必会

合成雪碧图.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操作图如下所示:

ps切图必知必会

背景定位技术实现雪碧图.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)
  • 使用雪碧图结合定位嵌入到网页中去
ps切图必知必会

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

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

始发于简书:随笔川迹

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论