首页 > 代码库 > 手把手教你使用PS切图

手把手教你使用PS切图

在IT公司中一般都是一个UI设计师对应多个程序员,所以有时候UI设计师有点忙不过来,但是我们也不能干等着,所以这时候就需要自己动手,丰衣足食了,下面就来介绍一下如何使用PS进行切图,不过Android中还有.9图片的概念,所以这里还需要介绍一下如何制作.9图片,关于.9图片的知识转战:http://blog.csdn.net/jiangwei0910410003/article/details/16986079

这里就以一张demo.psd图片作为案例:


这里通过三个例子来进行演示


第一、把中间的那个手机切出来

我们用PS打开这个psd图片:


我们看到最重要的两个菜单:图层和历史记录

图层在PS中的概念很简单,打个比方:画布就相当于是画板,图层就是一张画纸,画纸可以相互叠加的。所以这里看到会有很多张图层。

下面我们就来看一下如何将中间的手机切出来

首先需要勾选上自动选择图层,选中Layer


不然,后面点击一个图层之后是没有效果的


点击手机,这时候在图层菜单中就可以看到有一个图层被选中了,这时候,右键那个选中的图层的左边小眼睛,然后选择显示/隐藏所有其他图层:


这时候手机就被单独选出来了,然后按住Ctrl键,单击选中的图层,记住是我上面标注的红色区域,不要点击其他地方去了。

这时候手机就被选中了,选中的状态就是手机周边有很多虚线在闪烁,这里不方便就不截图了。

然后按住组合键:Alt+I+P


就把图层变成和手机一样的大小了,这时候,在使用组合键Ctrl+D,取消选中。

然后保存:


下一步:


选择PNG-24

这样,手机的png图片就切好了,简单吧。

我们在这个操作过程中,可能会有误操作,这时候需要用到历史记录菜单,点击一下红色区域就可以了。



第二、切出.9图片

Android中有.9图片的概念,所以这里需要说一下,如何制作.9图片,这里我们将按钮切成.9图片:


我们可以使用Ctrl+(键盘上的+/-进行图片的缩放)

我们将上面的放弃按钮背景图切成.9的:

首先还是选中那个按钮图层:


然后还是右键那个小眼睛,隐藏其他图层:


然后我们需要新建一个图层(这部和上面的不一样了):


点击图层菜单栏下方的那个红色标记的按钮,新建了一个图层14

然后按住Ctrl,再次选中那个按钮图层,右键选择合并图层


然后操作就和上面的一样了,按住Ctrl,单击红色区域,选中那个按钮


然后按住Alt+I+P,将按钮图层变成和按钮一样大小:


这时候可以使用Ctrl+(+/-)放大和缩小图层,在制作.9图片的时候,需要将中间的一部分删除,选择左侧栏中的选择工具,然后选择图片的中间部分(关于这个选取的范围大小没有限制的,只有一点需要注意,那就是不要超过图片的四个角就可以了),选中之后,点击键盘的delete键,就删除中间的内容了


然后选择左边的部分,同时选择左侧栏中的鼠标箭头的菜单,这时候我们就可以移动左边的部分让他和右边部分内容完美的接缝,千万不能重合了


移动好了之后,按住Ctrl键,单击图层,选中图片:


然后按住Alt+I+P,选出图片,我们需要将图层的上下左右增加一个像素值的边距,Ctrl+Alt+C调出设置画布大小菜单,记得单位一定要是像素,我们需要将宽度加2像素,高度也要加2像素。


然后我们放大图层,使用套锁工具,在图层的上边拉出一块(高度必须是1像素)的区域,宽度随意,但是不能超过四个角即可。然后按住Alt+Delete进行上色

在左侧工具栏的下方有一个选色区域,一个是前景色,一个是背景色

Alt+Delete设置前景色

Ctrl+Delete设置背景色

这里需要上黑色,所以是Alt+Delete

(.9图片一般是操作图片的上边和左边,而且必须是黑色的)


同样的在左边进行一次操作


这样,一张.9图片就完成了,保存为PNG-24格式的,当我们在使用的时候,只需要将其后缀名改成.9格式的即可。


第三、取文字的大小和颜色

取出下面文字的大小和颜色,同样我们先选中他们,这里很简单,只要双击字体图层,文本就变成可编辑状态了


我们在顶部的菜单栏中看到文本的字体大小和颜色了


点击那个色值区域就可以看到颜色的值了:


到这里,切图部分的内容就介绍完了,我们在开发的过程中其实就是这三种情况,所以掌握这三种技术就可以了。其他的没必要深入研究了,因为担心这里的图文方式说的有点不清楚,这里我录制了一个视频,下载地址:http://pan.baidu.com/s/1kTGDyZH

手把手教你使用PS切图