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

最新发布

使用热区和切割(Hotspots and Slices)
使用热区和切割(Hotspots and Slices)

使用热区和切割(Hotspots and Slices)(下)\接下来,我们来讲切割。前面已经说过,设计师为了加快页面加载的速度把大图片分割成小图片放在表格中,这在以前是一件费时又费力的事,现在使用了切割Fireworks会按照你的切割自动生成HTML的表格代码,你只需要将生成的代码放在页面的相应位置就可以了。可能有的朋友要问,难道图片切割之后下载速度就加快了吗?对,如果合理的切割的话,确实可以减小下载量,因为将同样颜色的大色块切割成一个单独的文件并使用较少的颜色输出就会得到尺寸较小的文件。另一个切割图片的理由是可以减少浏览者的心理等待时间。当你等待一副大图片出来时会觉得速度很慢,因为这时你什么也不能做,但是当图片切割后,小图片很快就能出来并且一张接着一张,在下载的过程中浏览者就能够先看到图片的一部分,因此他不会有等待的感觉,这就是为什么我们要使用切割的道理。其实道理和之后使用在网络多媒体播放中的流式技术是异曲同工的,虽然可能这个比较不是很恰当。 除了用来分割图片,在Fireworks中翻转图、按钮、导航条等带有交互动作的对象都是基于切割的。创建切割非常容易,只要使用切割工具如同画矩形一样就可以创建出需要的切割,使用多边形切割工具(Polygon Slice Tool)更可以创建出任意形状的切割,如图:图上绿色的区域就是切割的区域(Fireworks默认使用绿色表示切割,蓝色表示热区,当然你可以通过修改设置来改变他们的颜色,但是我不建议你们这样做),红色的线条是图片输出后生成的表格的线条,这些红色的线条组成的一个个矩形就对应了表格的每个单元格。你可能注意到了,当使用不规则形状做切割时,Fireworks会沿着这个多边形的最边缘建立一个矩形,这是因为表格和图片只接受矩形这种形状,输出后的结果将会被处理成在一张矩形的图片上有一个多边形的热区这种形式。说了这么多,我们来动手做一下,我们的目标是要创建一个圆形的切割,虽然没有圆形的切割工具,但是我们可以把一个圆形的热区转换成切割(这也是创建精确切割图形的方法)。先用圆形工具(Ellipse Tool)在画板上画一个圆,然后选择Insert->Hotspot创建一个和圆形一样形状的热区,最后选择Insert->Slice把热区转换为切割。如果中间没有经过热区这一步,而直接选择Insert->Slice,那么Fireworks将创建一个矩形的切割。选中这个切割,打开Object面版(Window->Object),可以看到和切割相关的属性:链接的URL地址,alt的文字,打开链接的方式(Target)这些都和热区一样,Auto-Name Slices是用来设置是否自动为切割的图片命名。在Type菜单里可以看到2项:Image和Text。选择Image切割就会被输出成图片保存;选择Text后,可以在Object面版中输入文本格式的文字,输出后这部分切割会留出空白的单元格用文本填写。这个功能对于需要经常更改消息的页面相当方便,这样就不用每次都创建图片。在最后输出之前,选择File->HTML Setup来到Document Specific这项可以设置Fireworks自动命名文件名的规律,一般没有特殊要求就使用默认设置吧。然后就可以输出HTML代码了,选择File->EXPort完成最后的工作。最后我要说的是,在输出时选择Include Areas without Slices的话,那么画板上没有切割的部分也将被输出成等同大小的图片,如果不选择此项,那么Fireworks只会把有切割的部分生成图片,没有切割的部分用一张1x1的透明gif图片(pacer.gif)撑开,使得表格在不同的浏览器中看起来一样。我的建议是使用spacer.gif撑开表格,至于道理嘛,我想我不说你也应该明白。  

2 次浏览
Fireworks中邮票效果的制作
Fireworks中邮票效果的制作

1.新建文件width=300,height=300,这里我们把背景色设为金黄色2.在编辑区用矩形工具拖画出一个矩形,填充色为黑色.打开storke面板,设置如图(图1).然后点击打开storke面板右上方的黑色箭头,在弹出的菜单中选择edit storke.3,在弹出的框中设置如下,把spacing(步长)设为170%(图2)4,打开一张图片,用图片拖到编辑区,调整好它们的上下位置,有齿的矩形放在图片之上,如图(图3).同时选中它们,modify---mask---group as mask.效果出来了吧. 5.给邮票上加上字,最后结果如图(图4)  我正洋洋自得时,有人发话:不对啊,我见过的邮票的齿上是白边,中间的图被一个白色的框包围着.马上跑去买来邮票一瞅,果然如这位仁兄所言.不要紧,我们重来白色齿边邮票1,新建文件width=300,height=300,背景色为金黄色,2,用矩形工具在编辑区拖画出一个矩形,填充色为白色.在storke面板中设为none没有描边.3,选中这个白色矩形,edit---clone,把克隆出来的矩形的填充色改为黑色,然后modify---transform---numeric transform在弹出的框中把原来的长和宽各减少15个象素,如图(图5),现在效果图是这样的(图6)4,选中白色矩形,打开storke面板,设置如图(图1),点storke面板上的右上角的黑色小箭头,在弹出的菜单中选中edit storke,在弹出的框中把spacing设为170%,其它为默认.5,打开图片,,用工具把图片拖到编辑区,然后调整它们的上下层关糸,把黑色矩形放在最上层,图片放在第二层,白色齿轮矩形放在最下面.同时选中黑色矩形和图片,modify---mask---group as mask.怎么样?满意了吧!别忘了给它加上字,最后效果如图(图7)  再教你一个小绝招,如果你对图片在邮票中的位置不满意,你可以在图层面板中,把遮罩的链接打开(图8)然后把图片移动到满意的位置.  好,今天就哆嗦到这里吧. 

6 次浏览
用Fireworks“铸造”古钱币
用Fireworks“铸造”古钱币

接下来就要为钱币“铸上”文字了。在这里需用到“汉仪篆书繁”这款字体,没有安装这款字体的朋友可以到相关网站进行下载安装,或改用其它字体,如“华文行楷”等。  用“汉仪篆书繁”字体打出“永通万国”后,对该文字对象使用#414941的实心填充,其它的各项设置如图12所示。  选中这一文字对象后点击右键,从弹出菜单中选择“转化为路径”。再使用“修改―取消组合”命令,将这四个文字转成各自独立的路径对象。如图13。  将这四个字按图14般进行排列对齐。  为了使钱币上的文字“铸”得更加逼真,下一步我们还要对文字进行一番处理。  按住Shift键不放将这四个字同时选中后再复制一份。此时在“层”面板中可以看到,被复制出来的四个文字对象处于所有对象层的最上端,如图15。我们把这最上面的四个对象层前的“眼睛”标志进行去除,暂时隐藏这四个文字对象。然后回到画布区,再次将原来的四个文字对象同时选中,然后使用“修改―改变路径―简化”,在“数量”中输入3。紧接着再点击“修改―改变路径―扩展笔触”,并做如下设置。

2 次浏览
布尔运算的处理
布尔运算的处理

文/donger● 几种布尔运算的处理交叉方式取出多个选定的闭路径*同相交的部分,并删除其余不相交的部分。被取出的相交部分的描边和填充式样与先前位于最底层的路径保持一致。看下图,交叉后的结果。 combine下面有四个命令,union(合并)、intersect(交叉)、punch(冲压)、crop(切割)。先做下图,从下到上的位置分别为圆、正方形、三角形。通过这个图形,来验证这四个命令各自的功能。

2 次浏览
位图边缘加框
位图边缘加框

文/donger● 位图边缘加框  在Photoshop中,能直接对导入的位图边缘加框,可是在Fireworks中却没有那么简单,因为fireworks主要是面向矢量图形的,对位图的处理并没有象photoshop那么灵活自如。但是给导入的位图加个边框,也不是那么困难的事情。 

2 次浏览
制作扇形效果
制作扇形效果

文 / donger如何制作扇形效果  如下图,想知道制作方法吗?呵呵,请听我一一道来。  一、新建文件,在工具栏中选择多边形工具,双击,在其tool option面板中进行如下设置。  二、按住shift画一个正三角形,然后通过 工具,对其进行缩放,使最后形状如下图所示。

2 次浏览
“挥”出个精彩!乒乓球拍写实技巧
“挥”出个精彩!乒乓球拍写实技巧

用绘图软件绘制写实作品时,物品的质感是非常重要的。因此在本例教材中,将告诉大家如何灵活地利用FW中的图案填充功能来体现乒乓球拍的木纹及胶皮质感。   新建一个650*450大小的画布。然后用“钢笔”工具先勾画出乒乓球拍的外形。采用“木纹3”进行图案填充,填充手柄的设置角度如图01。

2 次浏览
新手入门:FW雪花飘飘迎新春
新手入门:FW雪花飘飘迎新春

根据冻结下雪效果,我写了个教程,给新手们  1.用FW打开一张图片。设置为共享层。  执行修改--平面化所选--F8--将合并后的位图转换为图形元件。 5.选中图形元件,  执行编辑--克隆,

2 次浏览
(初级教程)手绘韩式手提袋
(初级教程)手绘韩式手提袋

在下第一次写教程,不足地方,希望大家多指教.....主要是要熟悉钢笔工具的使用...

4 次浏览
在Fireworks中实现复杂的图像交互
在Fireworks中实现复杂的图像交互

图像交互技术在网页制作当中被广泛的应用于按钮效果和图像展示当中。即当鼠标指向网页中的某一图像时,会触发另一图像的显示。下面就让我们来看一下具体的操作过程。

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