北京WEB前端培训
在线咨询 电话咨询 校区地址

课程

环境

就业

试听

企业培训

扫码
关注

首页 / 

行业资讯

北京ui设计培训 关于“点九”的意义

时间: 来源:火星人

所谓的“点九”就是在android手机或平板等平台里的软件开发的一种特殊图片形式:.9.png。现在的andriod手机都有自动横屏功能,随着方向的改变画面也随着改变,所以在界面拉伸时会使图像图形失真变形。

如果在android平台下使用“点九”PNG技术,就可以将图片横向和纵向同时进行拉伸,而不会让图片失真。

北京UI培训
从上图对比可以看到,左图的图标明显要比右边的模糊。

这个就是android平台下“点九png”技术产生的效果。把一张图片分为九宫格,分为4个角,4条边,以及中间部分,4个角不做拉伸,所以图片才能保持清晰,而两条水平边和垂直边分别只做水平和垂直拉伸,所以不会出现边被拉粗的情况,只有中间黑线指定区域被拉伸。

要做出“点九png”首先要安装个工具“draw9patch”,流程如下

北京UI培训

首先需要在你的电脑上安装JAVA于系统的默认目录下。如果没有安装可以从网上下载下来进行安装,jdk-6u20-windows-i586,然后使用android-sdk-windows,打开SDK/tools目录下的”draw9patch.bat" 文件,出现如图所示的载入框:

北京UI培训

j将图片拖入该窗口中,会自动进入编辑界面。

北京UI培训

在右侧预览区域可以看得出来,图片的边缘处于普通拉伸状态。我们在图片的边缘点击左键,绘制出黑线,就是图片要拉伸的部分。

北京UI培训

如果失误多绘的部分,可以按着shift键并点击鼠标左键擦除。假设这是一个有显示文字的窗体,那么文字显示的区域,程序也会控制在黑线对应范围。

北京UI培训

以下这些图片,包括异性(非规则图形)图片,也可以通过点九PNG实现横纵向的自然拉伸。

北京UI培训 北京UI培训

点击左上file- save,保存文件,自动生成一张后缀名为“*.9.png”格式的图片,图片上下左右各增加了1px的黑线。

要做出此效果还有另一种方法,用PS也可以做到的。

用PS打开那张图,改变画布尺寸,手动将上下左右各增加1px,让后使用画笔工具,手动绘制拉伸区域,颜色必须是黑色,最后将图片存储为web所用格式,选择png-24储存时手动将后缀改为.9.png。

如果使用这种方法必须注意以下两个方面:1,手绘黑线拉伸区域必须是黑色,透明度为100%,图像的四边不能出现半透明像素;2,你的.9.png必须绘有拉伸区域的黑线;否则,图片不会通过android系统编译,导致程序报错。

关键词:北京UI设计培训,北京UI培训,UI设计,ui设计培训

热门课程推荐  点击查看全部课程

北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
北京UI培训
  • 14年教育品牌
  • 课程不断更新
  • 签订就业协议
  • 项目案例讲解
  • O2O教学模式

北京火星人科技文化发展中心版权所有 Copyright & copy 2002-2016 2ds.cn, All Rights Reserved 京ICP备 10216795号