zoukankan      html  css  js  c++  java
  • 手把手教你使用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

  • 相关阅读:
    关于Oracle 数据库使用dba_tables或者all_tables或者user_tables统计数据时,与直接查询表统计时数据不一致的记录
    js格式化时间
    slf4j介绍以及与Log4j、Log4j2、LogBack整合方法
    LogBack日志小记
    log4j2 日志框架小记
    Log4j日志框架小记
    29.求数字组最大子序列之和
    28.找出最的几位数
    27.数组元素重复度过数组长度一半
    26.字符串全排列
  • 原文地址:https://www.cnblogs.com/roccheung/p/5797311.html
Copyright © 2011-2022 走看看