PS操作01 - PS切手机图标 + Android.9.png图片制作

来源:互联网 发布:获取客服端网络ip地址 编辑:程序博客网 时间:2024/05/01 11:53

PART_A:.9.png

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

这里写图片描述


  • .9.png图片优点:

    • 可自定义扩展区域,当需要延伸图片以填充比图片本身更大区域时不失真.
    • 可自定义内容显示区,用于显示文字或其他内容.
  • .9.png图片结构如下:

    这里写图片描述

    • 左、上方的像素线交叉的部分即可扩展区域.
    • 右、下方的像素线交叉的部分即内容显示区域.
  • .9.png图片制作工具:

    sdk>tools>draw9patch.bat这里写图片描述

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


PART_B:PS切手机图标

  • 首先使用PS打开原型图集合
    这里写图片描述

  • 选中目标图标,Ctrl + C复制
    这里写图片描述

  • Ctrl + Shift + N新建图层,将图标复制进来,关闭背景图层
    这里写图片描述

  • PS魔棒工具,删除多余的背景
    这里写图片描述

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

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

  • Ctrl + N新建图层,Ctrl + V复制图片,关闭背景图层
    这里写图片描述

  • Ctrl + Shift + Alt + S保存为PNG-24位
    这里写图片描述

  • 切图设计尺寸

    • 1080*1920:原像素*1.2倍
    • 1080*720:原像素/1.25
      这里写图片描述

以上。如有错误和疑问,欢迎指正提出。 catface.wyh@gmail.com >

0 0
原创粉丝点击