ps点九切图步骤(点九图切图规范)
本文目录
点九图切图规范
本文以微信社交对话框为例进行说明如何切点九图,其原则如下: 1.保留对话框周边四个圆角; 2.保留对话框右边的指向“三角”; 3.指定横向(水平)、纵向(垂直)内容范围区域; 整个图片在拉伸过程中,四个圆角和指向“三角”保持不变,这样才能保证对话框不变形、不模糊。指定内容区域范围,是为了避免内容溢出在对话框圆角和指向三角区域内。 具体步骤如下所示:第一步:画好我们需要的对话框样式; 第二步:将对话横向距离减小到两圆角之间为10PX(可以更小)间距,并用铅笔工具在对话框上部中间(水平)标注1*1PX矩形黑点(#000000,100%);该黑点表示,该对话框可以横向拉伸该区域致想要尺寸大小。 上图最终切图为放大图,方便说明(黑点、黑线、间距)更清晰。 注意,黑点与对话框之间保留1PX空白间距。 第三步:同样的道理,用铅笔工具在对话框的左侧标注1*1PX矩形黑点(#000000,100%);该黑点表示,该对话框可以纵向拉伸该区域致想要尺寸大小。如下图所示。注意,黑点位置纵向高度低于右边指向“三角”下部,说明该对话框纵向向下拉伸(单方向)。 如果想要对话框纵向双向对称拉伸,指向“三角”保持在中间位置。则,需要左侧纵向标注两个黑点,且距离三角距离相同。如下图所示。 第四步:指定对话框内文本纵向占位范围。用铅笔工具在对话框的右侧标注宽为1PX矩形黑线(#000000,100%);该黑线表示对话框内文本垂直范围。如下图所示。第五步:指定对话框内文本水平占位范围。用铅笔工具在对话框的下侧标注宽为1PX矩形黑线(#000000,100%);该黑线表示对话框内文本水平范围。如下图所示。总结:通过以上五步,该对话框的点九切图完毕。 如果没有指定文本范围区域,就会出现以下情况。如下图所示。切记,黑点、黑线一定要与对话框之间保留 1PX 间距。切出来的图片命名为: “*.9.png”
利用Photoshop制作点9图
点9图(.9.png)是Android开发中一个特殊的图片格式,它能很好的解决我们的屏幕适配问题,项目中经常用到的地方就是聊天气泡,以及某些特殊形状的背景、边框等; 先来认识下.9图 这个就是我之前做的一个.9图,可以看到,这是一个带阴影,又带突出三角的气泡,在我的项目中,它是一个界面一些信息的背景 它有4条黑边 下面用两张图分别介绍一下“可拉伸区域”和“可填充区域” (绿色部分)左边上边两条黑线分别无限加宽,所占用的空间,就是.9图可拉伸的区域,四个灰色区域放大不受影响; 同样是想象两条黑线无限加宽,但这次取相交的区域,就是可填充区域 认识了.9图,具体怎么做呢? 宽高各加两像素 将画笔设置为纯黑,大小1像素,硬度100 根据需求画完黑线之后,导出-存储为web所有格式,选择 PNG-24 最后一步,非常重要,这步不做,前面都白扯 重要的事情说三遍!!! 到此 .9图就生成完毕了 一定要把它放在 res - drawable 文件夹下(根据切图大小,选择对应尺寸的drawable文件),然后将.9图作为背景设置在指定View上
使用Photoshop绘制点九的方法
一、使用Photoshop绘制点九的方法。
确定切图后直接改变图片的画布大小,手动将上下左右各增加1px
使用铅笔工具,手动绘制拉伸区域,色值必须为黑色(#000000)。
存储为web所用格式,选择png-24,储存时手动将后缀名改为.9.png
不过这种方法的缺点是不能实时预览,判断并测试拉伸区域的准确性。
使用此方法需要注意以下2点:
1.手绘的黑线拉伸区必须是#000000,透明度100%,并且图像四边不能出现半透明像素;
2.你的.9.png必须绘有拉伸区域的黑线。
二、什么是点九。
1、“点九”是andriod平台的应用软件开发里的一种特殊的图片形式,文件扩展名为:.9.png。
其实相当于把一张png图分成了9个部分(九宫格),分别为4个角,4条边,以及一个中间区域。
2、示例
这张图只有中间用黑线指定的区域做拉伸。
1号黑色条位置向下覆盖的区域表示图片横向拉伸时,只拉伸该区域
2号黑色条位置向右覆盖的区域表示图片纵向拉伸时,只拉伸该区域
3号黑色条位置向左覆盖的区域表示图片纵向显示内容的区域
4号黑色条位置向上覆盖的区域表示图片横向显示内容的区域没有黑色条的位置覆盖的区域是图片拉伸时保持不变(比如,如果图片的四角为弧形的时候,当图片被任意拉伸时,四角的弧形都不会发生改变)
九宫格的简便做法
九宫格制作方法如下:
1、电脑下载美图秀秀,下载完毕后,打开美图秀秀→点击更多功能,即可看到“九宫切图”。
2、电脑里选择打开一互排新张自己想切图的照片。
3、图片自动就被切好了,我们可以在左边可以选择切图的形状和特效,选择好之后点击“保存到本地”就可以。
4、保存到本地的时候,会出现两个选项,一个是“保存单张大图”,意思是保存的时候是一张图,但是毙宋这张图上面显示了九个切分;另一个是“保存九张切图”,意思是保存下来的是九张图,两种选项可以根据不同的需栗帽求进行选择。
可以通过ps制作九宫格:
1、首先,插入需要制作成九宫格的图片。点击【插入】-【形状】按钮,在弹出的下拉列表中选择“矩形”选项,然后在幻灯片中拖动鼠标绘制出一个正方形。
2、按【Ctrl+D】键复制多个正方形,并将正方形并排列成九宫格的形状。
3、先选择下方的图片,再按住【Shift】键框选上方的九宫格矩形,然后点击【图片工具】-【格式】-【插入形状】-【合并形状】按钮,在弹出的菜单中选择“拆分”命令,然后删除多余的图片区域,九宫格图片即制作完成。
PS进行点九切图法时,命名“.9.png”时,提示我以.开头的名称已被系统预留我该怎么处理
直接使用 PS等平面工具绘制流程2个步骤就可得到.9.png图片,具体步骤为:1. 确定切图后直接改变图片的画布大小,2. 手动将上下左右各增加1px3. 使用铅笔工具,手动绘制拉伸区域,色值必须为黑色(#000000)。4. 存储为web所用格式,选择png-24,储存时手动将后缀名改为.9.png