当前位置:主页 > 平面设计

最新发布

Fireworks网页设计综合实例1
Fireworks网页设计综合实例1

    在本文中我们将帮助您亲身体验Fireworks在网页创作中的强大功能,我们通过一个网站页面的设计过程,为您详细介绍Fireworks在网页设计的不同阶段是如何处理各种不同任务的。通过解决您所遇到的每一个具体的任务,您将对Fireworks的主要功能有一个统一的全局性的了解,同时为您在设计中如何利用Fireworks提供一个清晰的思路。最终完成的实际页面请看这里。下图是这个教程完成后的外观:一、设计前准备 1、网站介绍:     在教程介绍之前首先让我们来看一下我们将要完成的主要任务。这是一个服饰公司的企业网站设计,公司主要以男式服饰为主,同时也兼顾部分女士服饰。网站的主要任务是帮助浏览者了解公司的基本概况和产品信息,并作为公司的一个展示窗口,向参观者展示企业的形象及产品系列。根据业主的要求,网站包含了企业概况、企业人才、产品展示、公司荣誉以及联系方式。我们将以此得到网站的导航结构。 2、设计指导思想:     本网站设计的指导思想是在网络上营造一个优雅、高贵、宁静的氛围,为了体现这一主题,设计者将纹理、景深、光影、基调与有形的模特照片和静态的文字结合起来,更多的使用直线、坚硬的边缘、暗的色调来组成网站界面。页面中以较大面积的男性模特图片突出男式服饰这一主题,以穿插的直线段体现一种服装纹理的感觉。公司的名称则以一种柔软光滑的粗倩体来表现,以打破整个页面的坚硬感,同时以白色突出企业名称,达到非常亮眼的感觉。 3、页面结构:     整个网站采用统一的结构,分为上下两个部分,上面为网站的导航条,下面左边以不同的男式服饰图片及文字标题表示各页主题。右边为内容区,以深色带条纹的图片作为背景。     下面我们将根据上述设计分析,分不同的部分为您介绍制作过程。在新建一个文件后,我们需要对我们的工作环境进行简单的设定,以符合我们的任务要求。首先需要设定工作区的面积及背景颜色,打开Modify>Canvas Size针对常见的800x600分辨率,我们设定工作区的长为776这可以根据需要设定,但最好不要超过778,高为515根据实际内容确定,再执行Modify>Canvas Color设定背景色为黑色。再打开View>Grid>Edit Grid对话框,设定水平方向网格间距为10像素,垂直方向为5像素,并将网格颜色设为暗灰色以不影响观察页面,打开网格显示和网格捕捉。如下图所示:

6 次浏览
Twist and Fade 3.0操作界面介绍
Twist and Fade 3.0操作界面介绍

随着FWMX的推出,在FWMX的Commands菜单下我们发现了熟悉的Twist and Fade命令,而且此次随FWMX附带的是最新的3.0版本,此版本最大的变 化可以说就是提供了新的交互式操作界面,这样我们可以更加精确控制图形变化结果,另一个方便的功能就是提供了图形预览的窗口,这样你可以随时观察你的设置对图像所发生的影响。需要指出的是,此版本的操作界面使用了新的SWF包装方式,利用Flash将命令与界面包装在了一起,完全体现了FWMX的方向。    一、界面浏览   主界面: 首先我们先来看看Twist and Fade的主操作界面。      Twist and Fade界面分为四个主要部分,每部分都有特殊的操作方式。 

9 次浏览
Fireworks制作一款动画Logo的方法
Fireworks制作一款动画Logo的方法

Fireworks 应用的一大亮点就是轻松制作纷繁的动画效果,下面我们就来看看如何应用Fireworks MX2004 新增的一款滤镜效果来轻松制作如下图所示的动画效果:

6 次浏览
FW制作证券效果Logo
FW制作证券效果Logo

今天我们来用Fireworks制作证券效果的Logo,其实关键就在于如何模拟票券上的色彩和横纹。  7、复制最上层的路径,新建一层,粘贴,填充白色。  8、层2中画一黑色水平直线,F8转换为元件,克隆一个,分别放置在文字上下方。  9、选中2个元件,补间实例15。  10、选中层2中所有对象,组成蒙版,完成。  Png源文件:

15 次浏览
Flash和FW合作旋转文字动画
Flash和FW合作旋转文字动画

想在Flash中制作文字旋转环绕的效果比较麻烦,我们不仅要设定每一个字母的旋转角度,还要把字母排列成圆形,而利用Fireworks把文字附加到路径上的功能和Flash配合起来制作这样一个动画将轻而易举,大大提高工作效率,其制作方法如下。   1.打开Fireworks软件,点“File→New”,设置好文件的大小及颜色(一般用Transparent),点击“OK”,新建一个Fireworks文件。.选择工具箱中的文本工具 ,在绘图区单击,在弹出的Text Editor文本编辑器中输入文字,并设定文字的字体、字号及颜色,点击“OK”(图1)。   2.在绘图区内任意处单击,去掉文字的选中状态,在工具箱下处,去掉图形的填充色 ,设边线色为可显示的任意色(我设为红色)。   3.选择工具箱中的圆形工具 ,按住Shift键同时画一正圆作为路径。选择指针工具 ,同时按住Shift键,将文本与圆形路径全部选中。点击“Text”菜单,在下拉菜单中选择“Attach to Path”(附加到路径),文本即被附加到路径上,如图2。   4.点“File →Export”选项,这时将弹出一个Export对话框,在这个对话框里选择文件类型为Macromedia Flash Swf,给文件起个名字,然后点击保存。   5.保存好后,用Flash做最后的处理。打开Flash 5.0软件,点“File→New”,然后再选择“File→Import”选项,在Import对话框中选择文件类型为SWF。   6.找到刚才用Fireworks制作并转存为SWF格式的文件,选中这个文件,单击“Open”,选中所有字母,打开“Insert”菜单,在菜单下选择“Convert to Symbol”(转换为符号)选项,在元件属性对话框里设定元件类型为Movie Clip,起名为“文字”单击“OK”,将这些文字做成一个元件。   7.选中动画的第20帧,按F6创建一个关键帧,在第1帧到第20帧之间的任意帧上右击鼠标,在弹出的菜单中选择“Panels”选项,在它的子菜单中选择“Frame”选项,调出“Frame”对话框,在Tweening一栏中选择Motion,在Rotate一栏中选择CW(顺时针)或CCW(逆时针),在Times一栏输入旋转的次数。

5 次浏览
Fireworks制作变色banner
Fireworks制作变色banner

Fireworks不仅在网页制图、切图、与Dreamweaver结合上有其独到的优势,制作GIF动画也是它的强项,本文我们一起学习如何使用Fireworks MX制作一个平滑变色效果的Banner,相信这样的Banner一定会让您的网站增色不少!  通过本教程学习我们可以掌握符号(symbol)的定义、修改、使用等问题,调节色相/对比度(hue/saturation),补间实例动画(tween instance),层(Layers)和帧(Frames)的基本用法,还可以学习几个特效。  1.新建画布,大小为468*60(Banner标准尺寸)。选择素材图片,当然也可以手绘,调整到适当大小,如图:  2.将图片克隆(原地复制,当然用复制、粘贴也可)几个,这主要取决于你希望所变颜色的多少。例中有三种颜色变化,故克隆三个,可以理解为Flash里的关键帧,选中克隆的图片,选择菜单项滤镜(Filters)->颜色(adjust color)->调节色相对比度(hue/saturation),对关键图片进行变色处理,需要注意的是,在调节过程中,不要调节亮度,否则整个图片都发生了变化,首先调节为绿色!色相值:120,如图所示是绿色图片的参数设置。  其他的图片颜色调节和该例类似,hue值蓝色为180,紫色为-80,图片不同调节的参数也不同,这里不赘述,请读者在制作中仔细调整,还要特别注意在制作前要想好颜色的变化过程,最好是同一色系逐渐变化,如先由蓝变绿,再由绿变紫……,本例就是要实现这种变化!调整好颜色,将他们按顺序摆放,看看色彩过渡的跨度是不是太大,如果太大,再做调整,直到满意为止!如图:

5 次浏览
Fireworks制作字体遮罩动画
Fireworks制作字体遮罩动画

用Fireworks制作字体遮罩动画是一件非常轻松的事情,下面我们不妨一起动手试试。完成效果   5、拖动后,调整好位置,使最后一帧的图案与第一帧位置相同。

5 次浏览
Fireworks 简单立体文字特效
Fireworks 简单立体文字特效

1、打开Fireworks,新建一个文件,文件的大小自定。用矩形绘制工具在编辑区绘制一个矩形对象,作为背景。本例背景如下图所示。  2、在编辑区输入文字,字体采用了一种较粗的字体“Arial Black”,字号采用了“120”大小,字体颜色为黄色,具体效果如下图所示。  3、选中文本对象,按组合键“Ctrl+Shift+P”,将文字转化为路径对象。按组合键“Ctrl+J”将转化的文本对象接合为一个单独的路径对象,此刻编辑区效果如下图所示。  4、给文字添加Effect效果-阴影和光晕-投影,投影设定采用默认值即可。此刻编辑区效果如下图所示。  5、选中文本对象,按组合键“Ctrl+Shift+D”,克隆一个文本对象。选中克隆对象,选择菜单命令“修改|改变路径|扩展笔触”,在弹出的“展开笔触”的设定窗口中进行如下图所示的设定。  6、编辑区文字效果出现。

3 次浏览
在FireWorks中巧用Style制作立体感文字
在FireWorks中巧用Style制作立体感文字

大家都知道利用FireworksMX内置的bevel滤镜可以制作出文字的立体效果,但是这样调试起来很麻烦。而利用Styles的方法就简单了。  1.打开FwMX新建一文件,大小任意。将画布颜色设为:#729CFE  2.利用Text Tool在画布上拖画出一个文本框。选择菜单栏上的Text>Editor调出Text Editor对话框,输入文字“梦想瞬间”(这个方法解决了在画布上不能输入中文的BUG)颜色任意设置。

4 次浏览
Fireworks制作GIF动画广告BANNER
Fireworks制作GIF动画广告BANNER

本小节中我们看看怎样使用Fireworks MX 2004设计一张GIF动画Banner,以一个宣传天柱山的Banner为例,主要熟悉Fireworks中帧面板、动画、元件等工具的使用方法。文章末尾提供.png文件供大家下载参考。   完成效果如图:   (1) 新建一个大小为468×60的文件,设置其画布颜色为透明,并导入一幅汽车的位图图像,得到图1所示的图像。      (2) 选中这幅汽车图像,单击【修改】菜单,选择【元件】|【转换为元件】,这时候会跳出元件属性对话框,将这个图形文件命名为"汽车图 1",如图2所示。  (3) 单击【确定】,这时候位图图像就已经转换为了图形元件了,如图3所示。选中这个图形元件,单击【修改】菜单,选择【动画】|【选择动画】,跳出动画对话框,在其中设置帧数为10,移 动到380,如图4所示。

4 次浏览
共计26043条记录 上一页 1.. 661 662 663 664 665 666 667 ..2605 下一页