|
网页设计中我们会用到很多种样式的分隔线,下面我们就来看看在Fireworks中设计网页虚线有哪些妙招。( }) R; p0 q; G5 u0 x
方法一、用Fireworks中自带的虚线样式% v- o- C/ X, V, d; R3 Q3 e" L3 O) N
Fireworks中自带的虚线样式有:三条破折线、加粗破折线、双破折线、基本破折线、实边破折线、点状线。- |: h) j. u' C( }
在网页设计中,我通常的用的是实边破折线。因为它和网页CSS中border的dotted、dashed两个参数效果相似。在制作网页时,不需要导出切割图片,而是用CSS定义。
: {. s1 D& q7 Q 但有时候总觉得自带的那些虚线不适用,或者想设计更有特色的网页设计图时。我们还需要用到其他的虚线。5 \9 n& [3 g+ f5 T
方法二、用Fireworks的自带纹理4 h( b0 ?( q- f, ~( t" G; N
画一个1像素高的矩形(边宽为0,填充所需色),然后给它添加Fireworks的自带纹理,纹理总量设为100%。
' k7 T1 a" M, a 以下是一般可用的1像素高的纹理虚线效果图:
0 q) ? ~6 f' @( p7 `% h7 Q9 ?
) g3 [! I7 f. n+ q; p& o: q* v6 o [6 ~& g! z
$ o: _" e8 N. S1 g5 j
注意:高于1像素的要多一个步骤,就是需要按Ctrl+Alt+Shift+Z把矩形转换成位图后,再把上面多余的黑色线删除。9 `7 |$ X3 l. g4 _0 q
其实还有许多纹理,你不妨都去试一下“饼干”、“点”这些都是有效果的。
1 D5 b. k. a1 \+ V 画竖线的方法:
0 ^ `5 G2 P) i, L5 w" O" j& D- d 1、选择“水平线”等可以直接出现虚线的纹理;3 o6 i7 V$ H& U9 ^9 ?, d& | I
2、转成位图,然后旋转90度;% m0 O6 }3 R Q3 n1 w( @; [
3、把矩形宽度用1个像素以上,直至出现虚线后,再转位图,去多余线。, y D6 I; I& B' D* C* i
方法三、用Fireworks的填充图案功能
* |/ ?3 }2 k0 v 画一个矩形,然后在Fireworks的菜单“填充-图案-其他”中选择自己画好的线段。 s# K, t% U. @- q
通常也是1像素高的gif文件,按你需要的虚线形式,用画笔或是线段工具画一个几个像素宽的虚线。6 W% B. j$ J+ T! Q( o3 N
效果的修改:
, {. e* f9 Q9 `0 I8 I# p 1、在FW中图案真充是有一个填充拉伸杆的,拉伸这个杆,调整出你想要的效果;
( Y, z* Y2 x9 ?" s- |$ ] 2、如果填充杆依然要不到你想要的效果就改外部gif文件。但要另存为一个文件名,再在FW中把矩形的填充重新选一下。因为,你直接把填充外部文件的样式改了后,FW文件中的填充矩形是不会跟着外部文件改的。
! B! ?+ W2 ?5 n/ D+ O
9 u& L; T7 u$ y h( F
0 c) ]0 h# u; K S5 w5 ?5 U' x8 x) n( h2 ], Q+ p/ N) {
外部gif文件,注意,右边要留出2像素的白色空间, z5 {" F) v# H- h [4 j3 R% j
填充拉杆的两种不同效果:
3 {) F9 T9 L" n! P
2 J ~8 M+ I5 a) m, M: C& h+ K" P9 b/ p9 B7 G% d! r
' g% x$ r, @3 {7 S, W7 k
前面的黑圆点是填充的起点,后面的黑方框是填充拉伸距离。 |
|