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

最新发布

Fireworks优化网页图像详解
Fireworks优化网页图像详解

网页图像的要求是在尽可能短的传输时间里,发布尽可能高质量的图像。因此在设计和处理网页图像时就要求图像有尽可能高的清晰度与尽可能小的尺寸,从而使图像的下载速度达到最快。为此,必须对图像进行优化。   在Fireworks 中,所有的优化操作都可以利用“Optimize”面板在工作环境中直接进行,优化设置仅用于输出图像。因此,用户可以自由地对图像进行优化并调整其优化设置,而不必担心会损坏原图。并且可以通过预览不同的优化结果,随时根据需要对图像进行修改。另一种简便快捷的优化方法是使用Fireworks的“Export Preview”对话框在图像的导出时进行优化。   设置好优化输出参数后,即可按照所做设置输出相关文件了。此外为了能够借助其他软件(如Photoshop等)继续处理文档,用户也可将文档以选定其他格式(如PSD等)输出。  了解了Fireworks优化图片的方法,在其他的图像处理软件中,大家也能轻松掌握图像优化的类似应用。  一、图像优化步骤和方案选择  (一)利用优化面板设置图像优化的步骤  1. 打开一幅文件,并在图像编辑窗口中打开Preview、2-up或4-up选项卡。  2. 在“Optimize”面板中选择文件格式,如图1所示,此时应根据文件类型选择不同的文件格式。例如,如果图中重复颜色区域较多的话,则适于使用GIF格式,对于这种格式,可相应地使用“Dither”(抖动)来补偿因颜色减少而造成的图像质量下降。对于JPEG格式,可使用“Smooth”(平滑)来使图像稍微模糊,从而减小图像大小,一般照片使用 JPEG格式可能更好一些。图1 选择文件格式  图2 颜色设置   (二)优化方案的选择、设置以及增删  1. 选择内置优化方案   在Optimize 顶部设置的Setting下拉列表中,用户可选择系统内置的一些优化类型。Fireworks中提供了6种优化方案,各优化类型的意义如下:  ・ GIF Web216:将所有颜色都转换为216种Web安全色。  ・ GIF WebSnap 256:将非Web安全色转换为最接近的Web安全色,调色板最多包含256种颜色。  ・ GIF WebSnap 128:将非Web安全色转换为最接近的Web安全色,调色板最多包含128种颜色。  ・ GIF Adaptive 256:此时调色板只包含图形中使用的实际颜色,并且调色板最多包含256种颜色。  ・ JPEG-Better Quality :设置质量为80、平滑度为0,此时图像质量较高,但文件尺寸也较大。  ・ JPEG-Smaller File :设置质量为60、平滑度为2,此时文档尺寸比JPEG- Better Quality减少一半,但同时质量也将大幅度下降。  * 如果使用GIF或PNG格式,还应设置图像的透明颜色,Fireworks MX 2004共提供了三种透明模式供选择:No Transparency (不透明模式),Index Transparency (索引色透明模式)和Alpha Transparency (Alpha透明模式),其中Alpha透明为通道透明色。透明效果在Firewoks MX 2004中以白色和灰色小方格相间的形式表示。如图3所示.图3 设置透明色   在不透明模式中,图像中未定义的地区以底色填充。   索引色模式指的是将调色板的某些颜色设置为透明色,图像中所有这些颜色的像素点都被作为透明点导出。   注意:当图像中本来有这种透明颜色的时候,有用的像素也被透明显示。   要改变透明色的设置,最简单的方法是使用优化面板左下方三支吸管工具,其功能如下:  ・ 在预览区单击 即可添加透明颜色。  ・ 在预览区单击 即可移除透明颜色。  ・ 在预览区单击即可选择透明颜色。

5 次浏览
Fireworks动画优化与导出详解
Fireworks动画优化与导出详解

制作GIF文件的软件很多,常见的有Animagic GIF、GIF Construction Set、GIF Movie Gear、Ulead GIF Animator等。Fireworks MX 2004在制作GIF动画上有着强大的功能。动画制作完成之后,就需要我们对其进行优化以达到最佳的显示效果,并且经过导出设置以及预览等步骤,最终将其导出为GIF动画格式。下面我们就来看看GIF动画的优化和导出过程。   一、优化动画   GIF动画的优化与我们在第五章提到的对其他图像的优化方法一样,可以利用优化面板和导出预览两种方法来对进行。下面分别对这两种方法加以介绍。  1. 利用优化面板   点击“Windows”菜单,打开如图1所示的Optimize面板。 图1 Optimize面板   在导出文件类型中选择GIF动画选项,用户可以通过设置Matte(色版)、Colors(颜色)、Dither(抖动)、透明度等选项来达到对显示效果的优化。  2. 利用导出预览对话框   在“File”菜单中选择“Export Preview”(导出预览)选项,打开如图2所示的导出预览对话框,同样可以对动画进行相应的优化设置。图2 导出预览对话框  二、导出设置

2 次浏览
一起来视频聊天!Fireworks绘制逼真摄像头
一起来视频聊天!Fireworks绘制逼真摄像头

想视频聊天但却没有摄像头,这可怎么办?别急,这就为大伙送上一个!最终效果图  启动Fireworks,新建一个450*400大小的画布。在“工具”面板中点选“椭圆形”工具,然后在画布上先画一个179*179的正圆。接着在“属性”面板里将该圆的笔触颜色设置为无色。在“填充类别”里选择渐变选项中的“椭圆形”,然后在填充色的预选框中设立三个颜色滑块,其色彩数值从左至右依次为:#FFFFFF、#EAEAE8、#ADADAD。回到画布区后,再用“指针”工具调整该“椭圆形”渐变的填充手柄,如图01。图01  将该圆形对象进行复制,然后改变复制对象的填充手柄,使填充色的中心向右侧偏移,效果如图02所示。然后在“属性”面板的填充色预选框中为其设置两个渐变滑块,色值分别为:# 8E8D8A、# EDEDEF,而色彩滑块上的三个不透明度滑块的百分比从左至右则依次为:100%、93%、0%。图02

2 次浏览
logo系列玻璃效果
logo系列玻璃效果

Fireworks制作Logo

2 次浏览
logo系列光照效果
logo系列光照效果

光照边框运动的Logo制作如何做出像下图一样的LOGO呢?

2 次浏览
Fireworks制作隐藏影像
Fireworks制作隐藏影像

准备工作新建画布2x2px,背景白色。放大至1600%.用铅笔工具取消抗锯齿功能(Anti-Aliased)在画面对角点两黑点。输出成dots.gif,如果单纯存为dots.png也行。记得图片的路径,稍候待用。这张图太小了,大家拿放大镜来看。:P挑一张特别花哨的图片,可以完美地隐藏我们需要隐藏的图。在FWMX内打开该图。画一白色矩形于其上。在材质填充上,选Others...来调用我们刚准备的微型图,设置Amount of texture 100,并勾选透明选项。调入我们打算隐藏的图案,嘿嘿,准备吓一跳吧!

2 次浏览
Fireworks制作钟摆式公告牌摇摆动画
Fireworks制作钟摆式公告牌摇摆动画

今天我们用Fireworks制作一个钟摆式的公告牌。  先参阅一下效果图。  1、新建一个文件,画布背景颜色选取白色。同时将画布大小设置稍大些。  2、使用Fwmx2004的矢量工具,绘制圆角矩形,自选一种纹理效果填充,如图。  3、输入文字。  4、在圆角矩形右、左上角绘制小圆形,如图所示。  5、添加辅助形,找到该圆角矩形的中心点位置,如图。  6、在中心点上方垂直辅助线上绘制渐变效果的小圆形,以及两根斜直线段,复选该圆形及斜直线对角,组合并移至最后,使用钢笔工具,分别在两个白色小圆形上绘制曲线。如图。  7、群组(Ctrl+A、Ctrl+G)所有对象,一个简单的公告牌效果就简单制作完成了。现在进行动画效果的制作。   8、克隆群组后的公告牌,使用工具栏中的缩放工具,分别对画布中显示的公告牌进行旋转处理,如图。  9、复选这两个对象,并按垂直居中与水平居中进行排列,如图。

4 次浏览
创建动画(Animation)(上)
创建动画(Animation)(上)

创建动画(Animation)(上)gif动画是web创作中不可缺少的部分,从前web设计师们需要一帧一帧绘制出静止的图象,然后将他们摆放到专门的gif动画软件中再加工,其步骤之烦琐让人望而生畏。但是Fireworks的出现彻底改变了这一切,不但所有的步骤可以在Fireworks中完成,而且简洁方便,Fireworks4的动画创作工具更是比以前的版本有了新的提高。现在我们就来创建一幅动画,同时体会Fireworks强大的功能。首先在画板上绘制一个矩形,如图:将它转化为动画(Animation),使用菜单Insert->Convert to Symbol或者使用快捷键F8,在弹出的窗口中选择Animation,接下来的窗口会要求你设置动画的运动方式,你可以在后面的object面版中随时修改这些参数,所以暂时不管先ok,这样一个Animation就创建好了。Animation是符号的一种,符号类型的对象在左下角都会有一个箭头的标志,在这里先要说明一下3种不同的符号(Symbol)类型:

4 次浏览
创建动画(Animation)
创建动画(Animation)

创建动画(Animation)(下)刚才我们已经创建了一个动画,如果以传统的方法来实现这个效果所需要花费的工夫简直难以想象,现在Fireworks都为你做好了。现在我们来看一下Frames面版,选择Window->Frames打开它。在Frames面版中可以看到有Frame1-Frame15一共15帧,这就是刚才在object面版中设定帧数时自动生成的,每一帧右面的数字7代表帧的延迟时间,它是以百分之一秒为单位的,即100为一秒,你可以点击右上角的箭头,在菜单中选择Properties来设置每一帧延迟的时间。点击左下角的Onion SKINning按钮会出现“洋葱皮”菜单。“洋葱皮”功能可以帮助你不用在帧之间前后切换就可以对动画进行平滑处理。“洋葱皮”一词来自于传统的动画技巧,当时是使用非常薄的,半透明的描摹纸来查看动画序列的。当“洋葱皮”功能开启后,当前帧前后帧的对象就会显示出来,不过颜色非常暗淡,这样你就能够同当前帧的对象区分开来了。“洋葱皮”菜单*有以下这些选项:

2 次浏览
创建按钮(Buttons)和导航条(Navigation Bars)(上)
创建按钮(Buttons)和导航条(Navigation Bars)(上)

创建按钮(Buttons)和导航条(Navigation Bars)(上)按钮是网页中应用极多的元素,众多的按钮就形成了导航条,导航条的作用就是要让浏览者清楚知道当前所处的位置,并且通过导航条可以方便的将浏览者带到其他的地方而不会迷失。因此按钮表现有以下几中状态: 一切都完成后,我们关闭按钮编辑器,回到通常的编辑界面,这时可以看到画板上出现了一个带有切割和热区的按钮,选择这个按钮,在左下角会出现一个小箭头,这是符号(symbol)的标记,因为按钮正是符号的一种。你可以移动这个按钮到你希望的位置。切换到preview状态,你可以马上看到这个按钮的效果。选择Window->Library打开Library面版,你可以看到刚才所创建的这个按钮,在Library面版中双击这个按钮可以再次打开按钮编辑器对按钮进行编辑。

3 次浏览
共计26043条记录 上一页 1.. 378 379 380 381 382 383 384 ..2605 下一页