关闭

九宫格的认识以及如何运用九宫格原理

标签: 任务测试
12177人阅读 评论(2) 收藏 举报
分类:

 

转自:http://www.dzlover.net/share/tutorial-2/

 

写在前面的话:从刺刺来到极限之后,发现在互助区和童鞋们PM我的内容很多都是没有弄明白九宫格原理,所以刺刺今日有空闲来写一篇关于九宫格的教程~(其实是刺刺偷懒,不想一遍遍解释了~哇哈哈~听到咯?以后刺刺都不解释了~休怪我无情m(_ _)m)

————————————————什么是九宫格————————————————

9宫格是一种我们给它的称呼而已。在主题制作中,它代表一种图片处理的方式。将图片画分9个区域,每个区域都有其参数,根据制作者对参数不同的设置可以使图片排列出不同的效果。通俗的说,9宫格嘛,就是给图片设置参数用的呗~

在ss中,9宫格会有不同颜色表示,如图↓↓↓:

红色部分代表顶部/top
蓝色部分代表底部/bottom
绿色部分代表左侧/left
黄色部分代表右侧/right

现在让我们去掉分割线和数字看一看九宫格在实际运用中的效果:

是不是开始很像我们平时处理图片时候的样子了?对比一下~

现在刺刺要告诉你,在9宫格中,标有数字“5”的区域最最关键。他是9宫格的中心,也可以看成是目标位。区域2,4,6,8是用来调整图片的,区域1,3,7,9在处理圆角图片时会用到。下面我们就仔细来看一下,不同的九宫格设置对图片的影响。

——————–九宫格与“拉伸”,“平铺”的关系——————–

在实际运用中,我们的图片大小是固定不变的,但是我们每个人使用习惯不尽相同。有时候,用户习惯使用大一些尺寸的界面,但
是原图尺寸不够该怎么办呢?这时候就可以通过拉伸或者平铺的方式,告诉主题或界面制作软件要用什么形式填补原图不够尺寸的部分。这样即使我们使用很小尺寸
的图片,在给用户使用中却可以拉到很大,同时又不改变图片原貌。这就是九宫格最大的作用啦~

1.拉伸

1.1 无渐变的拉伸

无渐变,单色的位图在主题制作过程中是最简单的一种位图。如果没有白边,甚至可以不用设置9宫格。因为这种位图不论平铺还是拉伸都是一样的。加上没有圆角,没有图案,也没有阴影,所以对于这种位图我们可以设置9宫格也可以不设置。

原图,无参数:

原图,1像素参数,纵向拉伸:

原图,1像素参数,横向拉伸:

我们发现,对于这类位图,不管怎么拉伸,它的区域5除了形状之外,其余都不会改变。不会因为拉伸而改变形状,也不会因为拉伸而改变颜色。不会因为拉伸或平铺而改变位图的原貌,这就是我们的最终目的。

补充知识:

我上面说到“1像素参数”,其实这个称呼是我自己取的。1像素代表参数值。它和像素有
关?是的,在左侧参数设置中,每增加1像素参数,代表区域5就减少了1像素。举个例子:一个位图本来是10×10像素的正方形,当我设置了参
数:top1,bottom1,left1,right1之后,图片的最上,最下,最左,最右1像素的内容将会保持不变,剩余9×9像素根据实际情况拉伸
或平铺,对,也就是区域5根据实际情况拉伸或平铺,这也就是为什么我把区域5叫做“目标位”的原因。(如果这里还不是很明白,在接下来的教程中会陆续说
明)

PS.参数可以是正的也可以是负的,别忘了哟^^


1.2 有渐变的拉伸
 
原图,1像素参数,无拉伸:

1像素参数,纵向拉伸:

1像素参数,横向拉伸:

以上都是1像素参数,下面来看一下不同参数的效果:

粉色拉伸:

橘色拉伸:

发现区别了吗?同一张位图,参数设置不同,拉伸以后的效果也会不同。上面的一张图由于设置了bottom参数40像素,以至于从底部开始往上40个像素都排除在拉伸范围(也就是区域5)之外,所以拉伸的区域(也就是区域5)只包含了粉色部分。

下面的一张图由于设置了top参数40像素,以至于从顶部开始向下40个像素都排除在拉伸范围,所以拉伸的区域只包含了橘色部分。

注意:如果图片在界面实际应用中没有被拉伸到这个程度,出来的效果还是跟原图差不多的哦。我拉伸这么多是为了让大家看明白区别。

1.3 有图案的拉伸

当位图上有图案的时候,如何保证图案不随图片的拉伸而变形呢?请看如下几种处理方法:

原图,无参数,无拉伸:

无参数,纵向拉伸。此时位图中图片已经发生变形。

无参数,横向拉伸。情况与上图类似。

在制作主题的过程中,如果面对有图案的图片,没有设置好九宫格,就会面临如上图或者别的问题,最后给用户带来糟糕的体验,这是每个制作主题的童鞋都应该避免的。

下面介绍几种用于处理这种图片的9宫格参数设置方法:

方法一,将有图案的部分放置在3区域:

方法二,将有图案的部分放置在9区域:

方法三,将有图案的部分放置在6区域,但是排列方式选择“平铺”注意左侧,我在right选项后面打了钩,表示该区域使用平铺。没有打钩的表示拉伸

但是使用方法三所带来的一个问题是,会这样:


如果你在编辑某一个位置的位图,希望选择方法3来设置参数的话,你必须保证位图拉伸的最大高度小于第二个蝴蝶出来的高度。这样即便这个设置是有局限,但是只要它的弊端出不来,那此方法也无碍。


以上三种方法的比较:

以上三种方法都是可以达到目的。方法一和方法二其实是一种处理办法。在面对不同的条件时可以灵活运用。方法三有局限性,这点请牢记。但是这个局限性有时也是优势。如果你要做一个连续花纹的位图时,方法三就是最佳的办法。

如果没有选择平铺,图片则会:

而选择了平铺之后,图片就可以正常显示:

 

1.4 有渐变,有图案的位图

碰到这类位图,在保证图案显示正确的情况下尽量把区域5的范围扩大到最大。这里就不做例举了。具体情况要具体分析。记住啦~只有把区域5范围尽可能扩大才能保证渐变流畅~~

1.5 有阴影的位图

原图,无参数,无拉伸:

无参数,拉伸(没有设置参数,对于阴影图来说拉伸效果会很恐怖)

设置了参数后,拉伸效果:

诶?发现了什么?尽管图片拉伸了,但是只拉伸了区域5,其余区域都没有拉伸喔~区域2,4,6,8在这时候默认了平铺方式(虽然我们并没有在后面的平铺选项中打钩),这就是SS神奇的地方~而区域1,3,7,9没有在参数范围内,没有变化。


1.6 有圆角的位图

在这里,原图我就不上了(偷个小懒~),直接上无参数,拉伸图:

设置了参数之后,拉伸图:

这里掌握一点就行,把圆角放置在1,3,7,9区域即可。

1.7 有圆角,有阴影的位图

有圆角,有阴影的位图原理都在上述内容中阐述过了。处理这类位图原则是把阴影和圆角都放置在除区域5以外的区域内,如果有渐变,那么区域5尽量把范围尽可能扩大。

2. 平铺

这里所指的“平铺”指的是:

中的“tile middle section“之前我们一直都是用”stretch middle section“。这里的平铺是针对区域5来说的。其他区域平铺选项是在上方的复选框。(如果这里选择“stretch middle section”也是针对区域5来说的)

平铺方式,一般用在有花纹的位图中(主题或界面需要在拉伸过程中不断延续花纹图案的时候)。在制作位图的时候就要注意花纹形状是否适合相互拼接,在设置参数时也要反覆测试,不然十分容易错位。

关于平铺的例子,我在1楼的“图案拉伸”那一部分已经有举例,这里就不再重复了。只说明几点需要注意的事项。

第一,有渐变的位图大都不适合采用平铺方式。
第二,如果是用SS制作主题,开始菜单背景和任务栏背景不推荐使用平铺方式。
第三,平铺方式一定要注意边缘的衔接。
第四,不是任何图案都可以去平铺的。

3. 关于“-”参数(负参数)和其他“怪异”的参数

3.1 “怪异”参数(即,大于图片尺寸的参数)

假设一个位图高度是10px,我们如果把top设置成7,bottom也设置成7,会出现什么效果呢?(由于这个帖子不能再传附件了所以我用文字表达一下吧…)

情况一:应用界面后,该位置实际高度小于或等于10px,那么图片就会有4像素或者更多像素的重影,在中间横向位置。


情况二:应用界面后,该位置实际高度大于10px且小于14px,那么图片就会有(14px-位图应用后实际高度)个像素的重影,在中间横向位置。


情况三:应用界面后,该位置实际高度大于14px,那么图片就正常拉伸。

(宽度的情况和高度雷同,不做例举了。另外在梦梦的R4中,就有类似这样的情况发生,在开始菜单右侧,有心的童鞋可以注意一下。PS.无意冒犯,只是举例说明。)


3.2 负参数

根据我个人浅薄的经验,我只碰到过几个地方常需用到负参数。

一种,是开始菜单,左右分2种悬停按钮样式的时候。由于此位置SS默认的是2个位图表示2种状态,如果要实现左右2种按钮样式,那就是要4个位图了。于是我们就只有通过调整参数来实现这个效果。(举例案例请看我的主题pure中的开始菜单,请使用SS6.0以上打开,不然是打不开的哟~)

另一种,就是各种字体位置的设置。字体也可以设置九宫格(不单单图片可以喔~)。我们常会通过设置负的参数来让字体显示到我们想要的位置。如果你想问:“
那一个图片设置了负参数会怎样?”答曰:“参数区域的图片会消失掉…”,除非你的图片能够压缩到没有再压缩成负的大小…(那是不可能的…)

好了,就写到这。我现在能想到的暂时就这么多了。说得繁琐了一点。其实熟悉了SS以后,这些都是很简单的。我怕自己讲不清楚,所以用了很多图…如果有问题,欢迎提问。不要PM我,请回帖提问。这样便于我整理,也方便别人参考,谢谢。

 

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:119859次
    • 积分:1610
    • 等级:
    • 排名:千里之外
    • 原创:37篇
    • 转载:23篇
    • 译文:2篇
    • 评论:10条
    最新评论