ps

PS切手机图标、.9.png图片制作

使用PhotoShop切图标、android常用的.9.png图片的制作

Posted by catface on January 5, 2015

.9.png

1、先上图,可以看出同样的图片做背景,.9.png就能自动适应内容区域,拉伸很自然.
2、.9.png图片能够极大的减少空间的占用,网络上传输也相对较快.
3、谷歌系统中用了很多.9.png图片,自行解压源码即可查看.

  • .9.png图片优点:

    • 可自定义扩展区域,当需要延伸图片以填充比图片本身更大区域时不失真.

    • 可自定义内容显示区,用于显示文字或其他内容.

  • .9.png图片结构如下:

    • 左、上方的像素线交叉的部分即可扩展区域.

    • 右、下方的像素线交叉的部分即内容显示区域.

  • .9.png图片制作工具:

    sdk>tools>draw9patch.bat

    1、左、上像素点(线)即适应内容区拉伸的区域.
    2、右、下像素点(线)即内容填充区域.
    3、软件右侧为横竖拉伸预览效果.

PS切手机图标

  • 首先使用PS打开原型图集合

  • 选中目标图标,Ctrl + C复制

  • Ctrl + Shift + N新建图层,将图标复制进来,关闭背景图层

  • PS魔棒工具,删除多余的背景

  • 仅仅选中图标区域,选时按住空格会有红线对齐线参考(截图冲突未显示)

  • Ctrl + T,并按住Shift参考最后贴出的切图设计尺寸放缩,Ctrl + Shift + C复制图片

  • Ctrl + N新建图层,Ctrl + V复制图片,关闭背景图层

  • Ctrl + Shift + Alt + S保存为PNG-24位

  • 切图设计尺寸

    • 10801920:原像素1.2倍

    • 1080*720:原像素/1.25