Fireworks网页设计综合实例3

2016-02-19 18:50 10 1 收藏

下面是个Fireworks网页设计综合实例3教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

【 tulaoshi.com - Fireworks网页设计综合实例3[组 】

    三、 创造矢量对象 

    位图是用像素来描述物体的,它适合于表现色彩变化丰富的照片,而矢量图是使用路径和填充来定义对象的外观,它非常容易编辑,并且它的质量不会因大小的改变而丢失或减弱。Fireworks同时提供了编辑这两种格式图像的方法,默认情况下Fireworks是以矢量的方式创建和编辑对象。Fireworks提供了常用的创建矢量对象的工具,我们下面利用这些工具创建基本的矢量图形。
    1、 选择工具面板上的矩形工具,在文档顶端绘制一776x30的矩形。
    2、 设定填充为线性渐变填充,点击填充面板的Edit按钮编辑填充,如下图所示:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

    3、 在人像的右半边绘制一个130x400的矩形实色填充对象。
    4、 接下来我们将在文档顶端创建按钮对象,首先在层面板中新建一个“导航层”,利用矩形工具创建“公司首页”按钮对象,大小为140x15,填充为红色与黑色之间的线性渐变填充,打开Effect面板,设定Inner Bevel特效,如下图所示:

    5、 我们还可以在背景层绘制一些线段,以打破背景的单调感觉。

    四、 创建文字

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

    Fireworks还提供了强大的文字处理功能,利用文字编辑窗口可以灵活的对文字进行设定,并且与其它对象一样我们也可以对文字施加各种特效。

    1、 选择工具面板的文字工具,打开文字编辑窗口,输入“卡尔松服饰有限公司”,如图所示:

    我们看到,在文字编辑窗口我们可以分别对不同的文字设定各自的属性。
    2、 在文档左半部分输入相应的英文文字内容,并旋转文字90度,如下图所示:

  3、 打开层面板,选定“Karsong”设定它的合成方式为“Luminosity”


    4、 打开Effect面板,为“DRESS&ADORNMENT CO..LTD”文字增加Drop Shadow特效。

来源:http://www.tulaoshi.com/n/20160219/1619162.html

延伸阅读
标签: Web开发
第一步 下面是我们将要动手制作的设计图。在这篇教程里我们只制作首页,不过你可以以此为基础用相同的布局制作内页。 第二步 首先要做的是确定页面结构。随着你对CSS布局的逐步学习,这个过程会变得越来越简单。通过运用大量绝对定位和大幅背景图片,我们可以非常简单地完成这个设计。 什么是绝对定位? 一个HTML元素(比如di...
网页设计中我们会用到很多种样式的分隔线,下面我们就来看看在Fireworks中设计网页虚线有哪些妙招。 方法一、用Fireworks中自带的虚线样式 Fireworks中自带的虚线样式有:三条破折线、加粗破折线、双破折线、基本破折线、实边破折线、点状线。 在网页设计中,我通常的用的是实边破折线。因为它和网页CSS中border的dotted、...
案例说明 此案例为 使用Fireworks 8 制作网页效果图 位图工具 的姊妹篇,前面的案例地址可以点击这里。前面已经给大家介绍了网页效果图的制作,这里要介绍的内容是如何把效果图生成网页。这也是网站制作中最重要的一部分。主要介绍的Fireworks如何和Dreamweaver进行协同工作。本例主要分为4个部分,希望大家能够通过这个例子得到一...
如何 设计 完美勾引用户点击的按钮好的按钮设计一定会是醒目且能勾引用户眼球的。以下是好的按钮设计必不可少的5个特征: 1、颜色 颜色一定要能与平静的页面相比更加与众不同,因此它要更亮而且有高对比度的颜色。 图1 2、位置 它们应当座落于用户期望更容易找到它们的地方。产品旁边、页头、导航的顶部右侧这些都...

经验教程

940

收藏

51
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部