点九图简单介绍及制作教程
2017-02-13 22:22
225 查看
点九图,是Android开发中用到的一种特殊格式的图片,文件名以”.9.png“结尾。这种图片能告诉程序,图像哪一部分可以被拉升,哪一部分不能被拉升需要保持原有比列。运用点九图可以保证图片在不模糊变形的前提下做到自适应。点九图常用于对话框背景图片中。
![](http://img.ui.cn/data/file/1/1/0/228011.png?imageView2/2/q/90)
这是我截屏自手机QQ一组聊天对话框,可以看出,不同两条消息字数不同,长度也不同,但它们采用了相同的背景样式,这个背景样式其实是同一张图片,用到的就是点九图的方式。
![](http://img.ui.cn/data/file/4/1/0/228014.png?imageView2/2/q/90)
相较于普通截图方式,点九图最为明显的区别就是图片不保留内容显示区域且自带一圈不成规律的黑边。正是这圈黑边提供了点九图的各个属性以适应各种情况。
![](http://img.ui.cn/data/file/5/1/0/228015.png?imageView2/2/q/90)
简单点来说,1、2部分规定了图像的可拉伸部分,而3、4部分规定了图像的内容区域。当实际程序中设定了对话框的宽高时,1、2部分就会被拉伸成所需要的高和宽,呈现出于设计稿一样的视觉效果。
那么内容区域是干嘛的呢?
内容区域规定了可编辑区域。例如,对话框是圆角,文字需要被包裹在其内,如果4像3一样顶到两遍,显示的效果会是如下图。
![](http://img.ui.cn/data/file/6/1/0/228016.png?imageView2/2/w/900/q/90)
这里文字是垂直居中显示,水平靠左显示。为了让文字被输入框完整包裹,缩短4的黑线到圆角以内,以达到显示效果的正常。
首先用PS打开一张切好的普通截图。用选区工具选取尽可能多的拉升部分加以删除(但要注意必须要留出至少1PX拉伸区域,以便能加以拉伸。)
![](http://img.ui.cn/data/file/3/2/0/228023.png?imageView2/2/w/900/q/90)
然后将这些内容拼接成一个完整的整体。
![](http://img.ui.cn/data/file/4/2/0/228024.png?imageView2/2/q/90)
打开 图像>画布大小,宽度和高度分别添加2px,定位选定中心定位。
![](http://img.ui.cn/data/file/5/2/0/228025.png?imageView2/2/q/90)
![](http://img.ui.cn/data/file/9/2/0/228029.png?imageView2/2/q/90)
用铅笔(黑色,1px),在图像最外边框描点。
![](http://img.ui.cn/data/file/0/3/0/228030.png?imageView2/2/w/900/q/90)
最后保存时注意”.9.png“
![](http://img.ui.cn/data/file/1/3/0/228031.png?imageView2/2/q/90)
点九图就是Android上的一种可被拉升的图片。(IOS不需要)格式以.9.png结尾。
图像用边上纯黑色1PX像素(透明底上的纯黑,其他都不行。)的边来规定拉伸区域和内容区域。上边和左边为拉升区域,右边和下边为内容区域。(这1PX像素在程序最终输出的效果中不会被显示。)
你也可以用其他一些插件来实现点九图的做法,但原理同我上面的PS做法是一样的。
转载 http://www.ui.cn/detail/48906.html
![](http://img.ui.cn/data/file/1/1/0/228011.png?imageView2/2/q/90)
这是我截屏自手机QQ一组聊天对话框,可以看出,不同两条消息字数不同,长度也不同,但它们采用了相同的背景样式,这个背景样式其实是同一张图片,用到的就是点九图的方式。
![](http://img.ui.cn/data/file/4/1/0/228014.png?imageView2/2/q/90)
相较于普通截图方式,点九图最为明显的区别就是图片不保留内容显示区域且自带一圈不成规律的黑边。正是这圈黑边提供了点九图的各个属性以适应各种情况。
![](http://img.ui.cn/data/file/5/1/0/228015.png?imageView2/2/q/90)
简单点来说,1、2部分规定了图像的可拉伸部分,而3、4部分规定了图像的内容区域。当实际程序中设定了对话框的宽高时,1、2部分就会被拉伸成所需要的高和宽,呈现出于设计稿一样的视觉效果。
那么内容区域是干嘛的呢?
内容区域规定了可编辑区域。例如,对话框是圆角,文字需要被包裹在其内,如果4像3一样顶到两遍,显示的效果会是如下图。
![](http://img.ui.cn/data/file/6/1/0/228016.png?imageView2/2/w/900/q/90)
这里文字是垂直居中显示,水平靠左显示。为了让文字被输入框完整包裹,缩短4的黑线到圆角以内,以达到显示效果的正常。
那么,点九图如何制作呢?
首先用PS打开一张切好的普通截图。用选区工具选取尽可能多的拉升部分加以删除(但要注意必须要留出至少1PX拉伸区域,以便能加以拉伸。)![](http://img.ui.cn/data/file/3/2/0/228023.png?imageView2/2/w/900/q/90)
然后将这些内容拼接成一个完整的整体。
![](http://img.ui.cn/data/file/4/2/0/228024.png?imageView2/2/q/90)
打开 图像>画布大小,宽度和高度分别添加2px,定位选定中心定位。
![](http://img.ui.cn/data/file/5/2/0/228025.png?imageView2/2/q/90)
![](http://img.ui.cn/data/file/9/2/0/228029.png?imageView2/2/q/90)
用铅笔(黑色,1px),在图像最外边框描点。
![](http://img.ui.cn/data/file/0/3/0/228030.png?imageView2/2/w/900/q/90)
最后保存时注意”.9.png“
![](http://img.ui.cn/data/file/1/3/0/228031.png?imageView2/2/q/90)
讲的有点乱,总结下:
点九图就是Android上的一种可被拉升的图片。(IOS不需要)格式以.9.png结尾。图像用边上纯黑色1PX像素(透明底上的纯黑,其他都不行。)的边来规定拉伸区域和内容区域。上边和左边为拉升区域,右边和下边为内容区域。(这1PX像素在程序最终输出的效果中不会被显示。)
你也可以用其他一些插件来实现点九图的做法,但原理同我上面的PS做法是一样的。
转载 http://www.ui.cn/detail/48906.html
相关文章推荐
- 点九图简单介绍及制作教程
- TexturePacker图片打包工具——简单介绍+简单制作图片集教程——cocos2d-x游戏开发引擎图片制作必备
- Android 点九图-简单介绍及制作教程
- PhotoShop制作水滴音符的简单入门教程
- Gravatar是什么?全球通用头像简单介绍与使用教程
- 简单介绍如何用Reporting Service制作报表
- Flash+PHP+Mysql简单留言本制作实例教程
- [转]简单介绍如何用Reporting Service制作报表
- 一个简单php扩展介绍与开发教程
- 一个简单php扩展介绍与开发教程
- 软件安装工具制作之-Advanced Installer简单教程
- Gravatar 全球通用头像简单介绍与使用教程
- WML教程2:简单介绍关于WML文件的概念WML Decks
- Flash教程:简单制作图形变换效果
- 傻瓜式简单制作Windows7旗舰版免激活光盘镜像教程 (安装后自动激活)
- 简单的wm6.5主题制作方法教程
- 简单的RPG游戏制作教程
- 简明批处理教程----对批处理命令做了简单的介绍
- 简单介绍一下asp.net中DataGrid的使用(视频教程)
- 简单制作个性GHOST光盘系统还原盘(图文教程)