• 网页导航设计练习


    练习一、

    本例是通过图层样式、钢笔工具、矢量蒙版结合使用制作。其中图层样式用到“渐变叠加”“阴影”“斜面和浮雕”,在调节图层样式的参数时,只需微调。此处添加了两个圆矩形,一大一小,每个矩形都设置了图层样式,以使导航更有层次感和立体感。用钢笔工具绘制椭圆形,转换为选区,结合矢量蒙版(填充黑色),巧妙地制作出凹陷效果。

    具体步骤参见:http://wenku.baidu.com/view/e31a998402d276a200292e2b.html

    注意:1、在添加图层样式时,无需所有样式都要添加,少数几个也能调出理想效果,注意实践,观察细微变化。

             2、渐变工具拉出的颜色,是从前景色到背景色,注意设置好颜色即可(如此例背景),多加练习渐变工具的几种类型(“线性渐变”、“径向渐变”、“角度渐变”、“对称渐变”、“菱形渐变”)。

    举一反三:

    练习二、

    本例亮点之处在于导航上竖纹的制作。主要步骤(详细参见http://www.missyuan.com/thread-372667-1-1.html):

    1、用圆矩形画出导航的背景,设置图层样式。

    2、新建一个图层1,用缩放工具放大到1000%,用画笔在这个新建图层上画出一条适当长度的1px竖线,颜色为#ffffff;如下图:

    3、为图层1添加渐变颜色,然后复制图层1为图层2,再为图层2添加渐变颜色。结果如下图:

    4、缩放至100%,如下图,然后复制多个该图层,加文字即可完成。

    总结:放大透明图层,利用1px,可以制作许多不错的效果,应多积累。

  • 相关阅读:
    高效能人士懂得忽视,知道怎样说“不”
    CheckBoxPreference组件
    SQL基础--> 约束(CONSTRAINT)
    html5--6-7 CSS选择器4
    html5--6-6 CSS选择器3
    html5--6-5 CSS选择器2
    html5--6-4 CSS选择器
    html5--6-3 CSS语法2
    html5--6-2 CSS语法
    html5--6-1 引入外部样式表
  • 原文地址:https://www.cnblogs.com/staceydesign/p/3071641.html
Copyright © 2020-2023  润新知