|
设计背景
先看看最终效果图
第一步建立新文件，设置如下图
下一步设置前景色为#e6e0d5，背景色为#cec5af
开始设计导航按钮，新建图层，使用矩形工具，制作如下图形
再次新建图层，制作#ac2a2a颜色矩形
再用单行选区工具制作按钮鼠标移动上后的黄色滑杆
为滑杆添加渐变样式
新建图层，使用椭圆选区工具，羽化设置20px，这样之后填充的黑色将会出现羽化的效果
为之前的椭圆选区填充黑色，然后设置图层为"正片叠底"，使用矩形选区工具删除右边区域，这样看上去红色的导航条上就出现了阴影分割效果
复制之前做的椭圆阴影
制作RSS破损纸张效果，制作2个图层，用选区勾画出纸张的轮廓，一个大的为白色，小的红色，如果觉得效果过于平滑，可以使用滤镜来让其看上去更自然
为白色的轮廓添加内阴影样式
完成后的效果图
现在进行最后的修饰，使用单行选区工具
填充颜色#e6e0d5
复制图层，并将它移动到如下箭头位置，设置不透明度为20%
最后将LOGO标志放入，一个完整的网站头部导航设计就完成了
斜面、浮雕样式是图层样式中变化最为丰富的样式。通过对它的探讨，我们能或许能找到等高线的本质——这是今天我们的主要目的。我将通过两个猜想完成我的探讨。为什么要用猜想这种方式呢？在这里，存在两种等高线样式：光泽等高线和子集等高线。在虚拟光源的配合下，产生的斜面和浮雕样式千变万化，我没办法用很严谨的数学公式来完成我的求证。要完全求证，恐怕要找Adobe的程序员们要程序源代码了——而这又基本是不可能的。我只能通过一些直观的方式来验证我的猜想。 去掉投影样式。勾选“斜面、与浮雕”。（图8）
样式选择“内斜面”；方法选择“雕刻清晰”；深度：358%；方向：上；大小50像素；软化：0像素。对于以上选项的选择，我不想在这浪费时间了，原因是这些选项都不难理解。我们要把精力集中在关键部位上。 关键部位：阴影。 角度和高度是标示虚拟光源的位置。角度和高度的不同会影响虚拟光源对其模拟的浮雕产生光量不同的照射。这里，我们调整角度为90度，默认高度30度。 光泽等高线选项下边，分高光模式和阴影模式两部分。我们先分别把不透明度调到100%（为了方便我们的求证）。 高光模式为滤色，后边的颜色可选，默认为白色。阴影模式为正片叠底，后边颜色也是可选，默认黑色。（在下边的论述中，我们把这两个可以自定义的颜色分别称为光源色和阴影色） 这是什么意思呢？我的理解是这样的。 在西方绘画中，要求得物体的立体感，空间感，是有一整套理论的。物体接受到光照后，会产生三大部分，即受光部分、侧受光部分、不受光部分。细分的话还可以分为高光、亮面、中间调子、明暗交界线、反光五部分。这就是西方写实绘画的理论基础：三大面五大调子。这些，美术专业的人是应该都知道的。而Adobe为了在二维平面中模拟浮雕效果，恐怕就借助了这些理论。如图：浮雕上侧面为直接受光部分（为了方便观看，我设置了灰色背景），浮雕顶部为侧受光部分，两侧和底部为不受光部分（不是完全的不受光，而是不直接受光，如果有疑问请参阅相关美术书籍）。 为了完成对浮雕的模拟，Adobe在受光部和不受光部采取了两种模式即在受光部采取白色（默认光源色）和原本色（在本例中为蓝色，在下面的论叙中我们不妨借用美术专业术语，以“固有色”代之）以滤色模式混合；阴影部分采取黑色（默认阴影色）和固有色以正片叠底的模式混合。恐怕大家都知道，这些默认的模式是获得浮雕效果的最佳选择。大多数情况下，配合线性光泽等高线，我们不用改变这些选项就可模拟出很好的斜面和浮雕效果。 在这里，我们需要明确一个问题，就是：以滤色模式参与混合的白色和以正片叠底模式参与混合的黑色扮演了一个什么样的角色呢？是100%的白或黑与固有色色参与混合吗？ 为了看得明白，我们更换掉白色和黑色，代之以绿色和红色。并且，混合模式全部换成“正常”（图9 — a）。高光和阴影部分以绿色和红色代替；顶部还是固有色；两侧为暗部中稍亮部分，是红色和原色蓝色的混合——紫色。 变更角度和高度，看看会发生什么样的变化。（图9 — b、c、d） 有什么变化呢？高光部分的绿色和阴影部分的红色有了不同的变化，随着光量的减少，绿色的色相亮度值也在减小，阴影部分稍亮部分如两侧颜色也在变化。大家可以多变更几次试试结果。
将混合模式改回“滤色”、“正片叠底”，角度还是改为90度，默认高度。看看又发生了什么变化？高光变成了青色，阴影部分最黑的还是黑色。（图10）
更改高度，观察变化。（图11）
这说明，Adobe参与滤色混合的光源色不是一成不变的。而是根据角度和高度的变化，“光源”色相的亮度也在变化。光线最强时是高亮的绿，光线弱时是明度值暗的绿。由此可见，Adobe模拟光线对浮雕的投射效果还是比较符合实际情况的。 现在开始猜想：光泽等高线在这里起什么作用呢？经过观察，类似曲线功能，难道这就是曲线？ 我们不妨先调调试试。（图12）
嘿，看到了吗？在等高线和曲线命令中的贝赛尔曲线形状一样，虽然都是调亮图象，但是终究不是。在曲线中，横轴代表色阶，纵轴代表色阶的亮度。那么，等高线中的横、纵轴分别以为着什么呢？ 我猜想，Adobe在这里是这样让等高线工作的，如图（图13）。和曲线相同的是，横轴代表色阶，而纵轴则不一样了，在最高点，是光源色和固有色（本例中的蓝色）的滤色的结果色；最低点，是固有色和阴影色正片叠底的结果色；中点，是固有色。从上到下，依次是透明度的变化。
下面，咱们验证一下我的猜想是否正确。 横轴代表色阶这个不需要测试了。咱们且看看纵轴的变化。（图14）
最上边是青色，是光源色绿色和固有色蓝色滤色的的结果色；最下边是黑色，是阴影色红色和固有色蓝色正片叠底的结果色；中间是固有色。 这么说，我猜想的纵轴的涵义是完全正确的！ 与曲线还有一点不同的是，等高线的下边出现了一个边角选项，这赋予了等高线更为丰富的变化。（图15）
从上边可以看出，光泽等高线是在不同的色阶上对不同透明度的高光和阴影结果色之间的映射。 光泽等高线的工作原理OK了，接着看子集等高线。 咱们将子集等高线的范围滑块拖到50%处，分别载入锥形、锯齿形样式。（图16）
哇！这不是一油画框么！哈哈。 这里，我们继续进行猜想：子集等高线是不是模拟的剖面线呢？再试。 将图顺时针旋转90度，放大。（图17）
看到了吧？在这里，Adobe的本意就是在模拟边框的剖面线！ 有了这个子集等高线，斜面、和浮雕样式可以有更华丽繁复的变化。同时，这也是最让人捉摸不透的一个地方。我无法准确的赋予这个子集等高线参与变化的样式以完整的涵义，只能对其做一个大概的描述。 子集等高线从左向右意味着边框由外到内的距离。（图18）
正对虚拟光源的斜面映射光泽等高线的中最亮面的颜色（受高度和角度的影响），背对虚拟光源的斜面映射最暗面颜色，以此形成一种强对比。侧对虚拟光源的斜面将以固有色或阴影色为基础产生一种弱对比。但当斜面的坡度变缓，也就是当斜面接近水平线时，这种对比将越来越小；当坡度为零，也就是没有斜面，对比消失，显示固有色。 顶点映射固有色。 顶点呈平滑曲线时，由顶点向两侧产生平滑渐变。看图。（图19）
我们也可以换换其它的形状来看看变化。（图20）
看来，不管图形如何变化，规律都是一样的。 有人说，在默认条件下，我们应用子集等高线是模拟剖面线，那么，我们改变外部条件，比如光泽等高线的混合模式——高光部采用正片叠底，阴影部采用滤色模式，那么，子集等高线的“剖面线”如何解释？还是剖面线吗？ 是不是呢？Adobe的本意是要在二维的平面上模拟浮雕效果，默认条件是产生浮雕的最佳条件，如果把混合模式改变了，那还是模拟的浮雕效果吗？起码不是我们视觉经验中的浮雕吧？如果你承认它还是浮雕效果，我立刻可以告诉你：子集等高线还是模拟的剖面线！当然，外部条件的可变化性，恰恰给了我们很大的创作空间，可以让我们做出很丰富的特殊效果，如此一来，大家也就大可不必去追究子集等高线到底是不是模拟真正意义上的剖面线效果了。 至此，对等高线的剖析已近尾声。我们看到，无论等高线的形状如何变化，它都不过是在不同的距离上通过一定的方式对不同颜色的映射。投影如是，光泽等高线如是，子集等高线也如是。有人问，光泽等高线的横轴的色阶也是距离吗？当然是。色阶是不同亮度的像素集合与集合之间的距离。 (完)
推荐阅读-Photoshop分类教程
|
|
|
