|
| 几款透明质感按钮 |
|
|
|
几乎没有哪种按纽的受欢迎程度能与透明质感按纽相比。自这种风格的按纽一问世，立刻风靡全球，从庞大的商务网站到简单的个人小站，处处都能看到剔透的风采。这种漂亮按纽最大的作用就是修饰网页，仅仅使用几个这样的按纽，就会给你的网页像水晶糖果一样诱人。透明质感的按钮种类之多，制作方法之广，无法尽数。在这里，我总结了几种较为好看的却又比较简单的，供大家作为参考。
第一款：Aqua按纽
这是最常见的一种透明按纽了，如果运用的好的话，效果是非常理想的。这种按纽的做法有很多种，有些真的是相当相当的麻烦。当然，效果也是相当相当的漂亮，漂亮到你会不舍得把它用于网页按钮。实际上，如果用那种耗费大量时间做成的按钮装饰网页的话，需要小心喧宾夺主：游客会不自觉的把注意力集中到漂亮夺目的按纽上，网页最重要的内容却会被忽略掉。说了这么多，好像偷懒是理所当然的了。那么这一次，我们应用图层样式来打造这个按钮，这样我们就可以一劳永逸，以后都可以坐享其成了。更重要的是，我们制作的是可以装饰你的网页的按纽，它仅仅起到了点缀的作用，就像是做菜时使用的鸡精，一点足以勾出鲜味，过多反而不好了。
1. 新建文档，RGB模式，白色背景。建立图层1，设置前景色为RGB（51，143，206）。然后选择圆角矩形工具，在工具选项中，设置绘图方式为填充像素，将矩形的圆角半径设为50像素，选择消除锯齿。点击几何选项，将矩形的大小设为91×27像素，在画布正中点击一下，即会出现一个蓝色的圆角矩形。（图01）
图01
2. 现在我们开始添加图层样式了。首先选择投影：将投影的不透明度降低为33％，取消全局光，角度为134度，距离和大小均为1像素，扩展为0，品质不变；
然后是内阴影样式：将内阴影的颜色设为RGB（0，56，113），不透明度为100％，取消全局光，角度为90度，距离为6像素，阻塞为15％，大小为16像素，品质保持不变，这样，按纽就具有了立体感。（图02）
图02
3. 接下来我们要制作光线从按纽中透出的感觉。选择内发光样式，将混合模式设为颜色减淡，不透明度为30％，颜色为白色，方法为较柔软，居中，阻塞为31％，大小为21像素，要特别注意等高线的形状，打开默认的等高线编辑器，将曲线设为图03的形状，选择消除锯齿，范围为31％；（图03，04）
 
图03 图04 4. 下面是最关键的一步——添加强烈的反光效果。选择斜面和浮雕样式，将样式设为内斜面，方法为平滑，深度为81％，方向为上，大小为9像素，软化为1像素，阴影的角度为90度，高度为73度，高光和暗调的不透明度均为100％，暗调的模式为正常，颜色为RGB（4，126，188），这样高光效果就出来了。
但这样是不够的，我们希望高光效果更为贴切。选择等高线，注意是斜面等高线，而不是光泽等高线，将等高线类型选择为预设类型中的半圆，消除锯齿，范围为69％，这样就能得到逼真的反光效果。（图05）
图05
5. 为了使按钮看起来更好，我们添加一些简单的阴影效果。但我们的样式中已经采用了投影样式，所以要另外想办法。按住Ctrl键，载入按纽的不透明度区域，从编辑菜单中选择合并拷贝命令，在图层1之下新建一层，按Ctrl+V，将图像粘贴到新层中，取消选择。
合并拷贝命令可以复制选区内所有图层的图像，包括图层样式在内，这里，我们所用这个命令就是为了拼合图层样式的效果。此外，在粘贴前，如果没有取消选择，那么图像会粘贴入选区中，否则的话，图像会被自动粘贴到图层的正中。
对图层2使用高斯模糊，半径大概为5.5像素左右。再用移动工具将图层移动到按纽的右下方，作为透明阴影。（图06）
图06
6. 最后，在按纽上写上文字即可。如果你更喜欢淡灰色的透明按钮，这里有个简单的法子：打开通道面板，点击蓝色通道，仅显示这一个通道的图像，由于我们的按纽是蓝色调的，所以这个通道内的图像最能体现按纽的情况。如果你的按纽是红色调或是绿色调的，那么同样，分别选择红色通道和绿色通道，就能得到灰色的透明按钮了。（图07）
图07第二款：LCD风格的按纽
一般来说，液晶显示屏风格很适合各种面板的制作，也可以作为各种按钮的载体，大多数类型的按纽与之配合都会很好看。但这一次，我们要来制作一个液晶显示屏风格的按纽。
1. 打开Photoshop，新建RGB模式的白色背景文档。新建图层1，这一层我们作为按纽的基础轮廓。用椭圆选框工具，按住Shift+Alt键，从中心向旁边拖出一个圆形的选区。将前景色设为RGB（176，192，224），用前景色填充选区，不要取消选择。（图08）
图08
2. 新建图层2，在这一层中制作按纽的内阴影。复位色板，选择描边命令，将描边宽度设为4像素，位置居中。取消选择，用高斯模糊处理图层，半径为4像素。载入图层1的选区，反选，在图层2中删除，取消选择。将图层的不透明度降低到28％。（图09）
图09
3. 新建图层3，我们要在这一层中做描边处理。再次载入图层1的选区，打开描边命令对话框，将描边宽度设为1像素，位置居中，取消选区。将图层的不透明度降低到32％，有必要的话，可以用半径为0.2的高斯模糊消除边缘细微的锯齿。（图10）
图10
4. 下面我们来制作按纽内部透出的光线效果。新建图层4，选择画笔工具中的喷枪选项，将画笔大小设为200像素的柔化笔刷，将图层的混合模式设为颜色减淡，填充不透明度为21％（不是图层的总体不透明度），再次载入图层1的选区，反转色板，用白色画笔在选区的下方点击一下，画笔范围可达到选区的中上部；再将画笔大小设为100像素，再点击一下，加强效果。由于颜色减淡模式的作用，图像会出现透光的效果。（图11）
图11 5. 接下来，我们来进行最关键的一步——给按纽增加高光效果。首先，我们来选取高光的区域。选择钢笔工具，勾出一条封闭路径，要包括按纽的上半部分，如图12所示。（图12）
图12
按Ctrl+Enter，将路径转换为选区，再选取和图层1相交的选区，方法是按住Shift+Ctrl+Alt键，点击图层1，载入图层1和现有选区相交的选区，如图13。选择渐变工具，复位并反转色板，选择线性渐变工具，将渐变设为从前景色到透明，从选区的顶端到底部做出渐变，然后取消选择。选择高斯模糊滤镜，将半径设为2.0像素，模糊渐变图层，用选择工具将图层向下移动几个像素，这样会使效果更逼真。（图14）
 
图13 图14
6. 这时，按纽基本上就已经完成了。不过我们可以为它增加一些装饰，使它看起来更漂亮。在图层1上新建一层，为图层6，这一层里，我们为它增加一些扫描线效果。基本上来说，1×2像素大小、上黑下透明的图案应该是你的Photoshop里差不多都会有的一种基本图案。如果没有，那么花半分钟时间做上一个也来得及。载入图层1的选区，打开填充对话框，在填充类型中选择图案，找到扫描线图案，用它来填充选区。取消选择，将图层的不透明度降低到8％，用模糊滤镜稍加模糊（图15）。
图15
如果你的图案是上黑下白的，那么在填充以后，需要将图层混合模式设为正片叠底，效果是一样的。
7. 下面我们来添加文字部分。我们采用的像素字体为04b_03，大小为8点，如果不希望字体太过纤细，就将消除文字锯齿的方式设为明晰。添加了字体之后，来看看效果，似乎不如想象中的好（图16）。我们可以再来装饰一下文字部分。在最顶层的文字层之下新建图层7，将前景色设为白色，用矩形工具在按纽的上中部选择一细长矩形。将文字层和这一层链接起来，居中对齐。载入图层1的选区，反选，删除图层7的多余部分，取消选择。将填充不透明度降低为10％，图层混合模式为颜色减淡。（图17）
 
图16 图178. 我们来看看这个按纽的应用。我选择把它放置在一个金属面板上。首先，新建一个图层组，将按纽相关图层都放到图层组中。在序列1下面新建图层8，用椭圆选框工具选择一个圆形，填充黑色后取消选择。将图层8和序列1链接，选择序列1，使用对齐选项，将按纽和黑色圆形居中对齐，取消链接。
现在，我们关闭序列1的显示，按ShiftCtrl+Delete，用白色填充图层8的不透明区域。打开图层样式，依次添加下列样式：
渐变叠加：混合模式为正常，不透明性为82％，渐变为从灰色RGB（174，174，174）到白色，线性，与图层对齐，角度为-48度，缩放为70％；
内发光：混合模式为正常，不透明度为23％，颜色为黑色，发光源在边缘，方法为较柔软，大小为10像素，范围为55％；
斜面和浮雕：内斜面、平滑，深度为51％，大小为8像素，阴影角度为130度，取消全局光，高度为15度，暗调的不透明度为0％，将等高线类型设为预设的半圆，范围为53％，消除锯齿；
外发光：混合模式为正常，不透明度为15％，大小为5像素，范围为33％；
描边：大小为1像素，描边位置在外部，混合模式为正常，不透明度为31％，描边颜色为黑色；
内阴影：混合模式为正常，颜色为RGB（115，115，115），不透明度为8％，角度为135度，取消全局光，距离为4像素，大小为2像素，等高线类型为预设的锥形；
最后是投影：不透明度为11％，角度为135度，距离为4像素，大小为1像素（图18）。
图18
显示序列1，这时，我们的图像应该像图19一样了。
图19
9. 我们希望做出按纽内陷的效果。在图层8上新建图层9，选择一个比按纽稍大的圆形选区，填充白色，同样使圆形和按纽居中对齐。对它添加图层样式：先是渐变叠加，混合模式为正常，不透明度为55％，反向默认渐变，角度为90度，缩放为90％；其次是描边，大小为1像素，位置在外部，不透明度为40％，描边颜色为RGB（210，210，210）。这样，这个按纽就被很合适的镶嵌在面板上了。（图20）
图20第三款：渐变透明按钮
我知道，这个题目实在有些不合格。哪种透明效果中没有用到渐变呢？渐变几乎已经成为制作透明按纽的必备过程，拿它做标题实在有些应付差事的感觉。但是，我实在懒得再费心思在我们的按纽起一个响亮又贴切的名字了。（这些天来一直和按纽打交道，请大家原谅我的倦怠心理吧！）不过，这个按纽倒真的漂亮的没话说，就拿它来作为小小的补偿吧！这次的这个按纽，完全是由图层样式来决定的。完成之后，大家的样式面板中又可以多一种漂亮的风格了。
1. 这一次，我们来新建一个透明背景的文档，大小根据按纽的大小来定。新建图层2，用椭圆工具选择一个正圆形，复位色板，用背景色填充选区。不要取消选择，按Ctrl+X将选区图像复制到剪贴板上，删除图层2。
在图层1中，用Ctrl+V将白色圆形粘贴到图层1中。这样，白色圆形就会处于画布的正中。（图21）
图21
2. 下面，我们就开始为按纽添加了图层样式了。
首先，我们为按纽添加基础的颜色。选择渐变叠加样式，将混合模式设为正常，不透明性为100％，点击编辑渐变色，将渐变的左端设为RGB（166，202，240），右端设为RGB（24，48，153），渐变样式为线性，角度为123度，缩放为100％；（图22）
图22
其次，我们用斜面和浮雕样式为按纽添加光泽：样式为内斜面，方法为平滑，深度100％，方向为上，大小为18像素，软化为3像素，阴影的角度为120度，取消全局光，高度为73度，暗调模式为颜色减淡，高光和暗调的其他各项设定保持不变；（图23）
图23下面，我们用内阴影模式加强按纽的暗调部分：将阴影颜色设为暗褐色RGB（71，41，2），混合模式为正常，不透明度为38％，角度为90度，距离为7像素，大小为5像素，品质不变；（图24）
图24
接下来的投影和外发光，都是进一步修饰按纽边缘的：先来选择投影样式，将投影颜色设为RGB（9，66，130），不透明度为35％，角度为90度，距离和扩展为0，大小为1像素；然后是外发光样式，混合模式为正常，不透明度为38％，颜色为RGB（0，70，114），发光方法为较柔软，大小为2像素；（图25）
图25
最后，如果你觉得按纽的颜色单薄，可以选择内发光样式，混合模式为正片叠底，不透明度为39％，设置渐变发光，依图26来设置渐变，渐变色从左到右依次为黑色、棕红色RGB（187，83，7）、黄色RGB（255，249，157），两个颜色中点的位置均为50％，发光方法为较柔软，光源居中，大小为250像素，范围为50％。你也可以自己设定内发光的颜色，这样，按纽的颜色就丰富起来。（图27）
图26
图273. 接下来，我们为按纽加一个简单的边框。在图层1下面新建图层2，载入图层1的不透明选区，用扩展命令将选区扩大8像素，填充白色。（图28）
图28
我们依然用图层样式添加立体效果。先选择斜面和浮雕样式，结构为内斜面，方法为雕刻清晰，深度为290％，方向为上，大小为4像素，软化为9像素，阴影角度为90度，高度为45度，高光和暗调保持默认；再来添加描边样式，大小为1像素，位置在外部，混合模式正常，不透明度100％，描边颜色为RGB（170，170，170）。（图29）
图29
这样，这个按纽就完成了。想要改变颜色的话，可以重新设定各图层样式中有关颜色的设置。添加文字层后，也可以添加图层样式效果。如果想把这种样式应用到其他大小的按纽上时，应注意缩放效果，使样式符合图像。
|
|
| 几款透明质感按钮设计摘要：吉祥物,形象设计,为您提供画册设计,样本设计,产品目录设计,广告设计,海报设计和等设计资源欣赏,下载,图库,为设计师打造一个自我学习和提升的平台,学习设计最好的方法是多看,多做,多做,只有不断学习借鉴优秀画册设计理论设计师的作品才能不断的提高自我,才能不断地迈向成功。 |
|
几款透明质感按钮设计摘要：画册设计理论,空间概念涵概了自然空间感受与矛盾空间感受。随设计师的爱好、版面要求、视觉冲击需求、自由选择，而且毫不张扬，温文而雅，为抄袭者提供了大量改头换面的空间。对平面设计的理解很多来自这堆旧杂志。“平面不平”是我对平面设计,吉祥物,形象设计中画面效果的一种理解，很多人把它叫做版式、构图、结构、形式感…都可以，拜读了很多好的设计后，我感到设计师们都在有意无意地追求着“不平”的效果。即利用各种平面元素，在平面材质上（比如纸张等），我们头脑中的色彩冷暖关系就是固定的。红色偏暖，蓝色偏冷。其实这是一个错误的概念。如同音符一样，颜色随周围环境的变化转换着调性（冷暖关系).吉祥物,形象设计这一理论，符合商业时代或叫数码时代的要求，是个机械式的要求。对色彩调性化理解是对平面设计师灵性的训练.
|
|
|
·