恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
点九图简单介绍及制作教程
0.0°
2015-04-26 原创文章 教程 原作者: 原作者 举报 40147 309 276 44

最近遇到一个尺寸上的问题,但我发现我根本无法一次性把这么复杂的一件事讲清楚......(。・・)ノ 那就先来讲讲点九图吧~~~~O(∩_∩)O哈哈~

为什么要讲点九图?当然是应为跟我之后要讲的事有关系啦~~~现在不都流行这种伏笔吗?......(* ̄rǒ ̄)

不过我也真是为自己的文笔而感到拙计......


=================================华丽的分割线==================================



点九图,是Android开发中用到的一种特殊格式的图片,文件名以”.9.png“结尾。这种图片能告诉程序,图像哪一部分可以被拉升,哪一部分不能被拉升需要保持原有比列。运用点九图可以保证图片在不模糊变形的前提下做到自适应。点九图常用于对话框背景图片中。


这是我截屏自手机QQ一组聊天对话框,可以看出,不同两条消息字数不同,长度也不同,但它们采用了相同的背景样式,这个背景样式其实是同一张图片,用到的就是点九图的方式。


相较于普通截图方式,点九图最为明显的区别就是图片不保留内容显示区域且自带一圈不成规律的黑边。正是这圈黑边提供了点九图的各个属性以适应各种情况。


简单点来说,1、2部分规定了图像的可拉伸部分,而3、4部分规定了图像的内容区域。当实际程序中设定了对话框的宽高时,1、2部分就会被拉伸成所需要的高和宽,呈现出于设计稿一样的视觉效果。


那么内容区域是干嘛的呢?

内容区域规定了可编辑区域。例如,对话框是圆角,文字需要被包裹在其内,如果4像3一样顶到两遍,显示的效果会是如下图。

这里文字是垂直居中显示,水平靠左显示。为了让文字被输入框完整包裹,缩短4的黑线到圆角以内,以达到显示效果的正常。


那么,点九图如何制作呢?

首先用PS打开一张切好的普通截图。用选区工具选取尽可能多的拉升部分加以删除(但要注意必须要留出至少1PX拉伸区域,以便能加以拉伸。)


然后将这些内容拼接成一个完整的整体。

打开 图像>画布大小,宽度和高度分别添加2px,定位选定中心定位。


用铅笔(黑色,1px),在图像最外边框描点。


最后保存时注意”.9.png“


讲的有点乱,总结下:

点九图就是Android上的一种可被拉升的图片。(IOS不需要)格式以.9.png结尾。

图像用边上纯黑色1PX像素(透明底上的纯黑,其他都不行。)的边来规定拉伸区域和内容区域。上边和左边为拉升区域,右边和下边为内容区域。(这1PX像素在程序最终输出的效果中不会被显示。)

你也可以用其他一些插件来实现点九图的做法,但原理同我上面的PS做法是一样的。


===========================================================================

点九图就讲到这啦,不知道你看懂没呢?

至于我要讲的那件事,等我把脑子和舌头捋顺了再来讲给各位看官哈~~~~~~~~O(∩_∩)O哈哈~

更新:2015-04-26

收藏

309人已收藏

阿喵_Shiloh_Miao

界面/交互/平面 设计师 个人网站-maouys.com

  • 19

    作品

  • 537

    粉丝

  • 22

    关注

  • 作为UI/UE的你,知道这些关于iPhone X的知识点吗?
  • 每个人都该有个一个自己专属的头像~
  • 网页设计中基础布局
  • PhotoShop 自CC以后新添加的那些好用的功能们
相关标签
界面设计点九图

    猜你喜欢

      2015-04-26 原创文章 教程 原作者: 原作者 举报 40147 309 276 44

      点九图简单介绍及制作教程

      0.0°

      你确定要举报点九图简单介绍及制作教程

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2015年04月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      276
      309
      44

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录