26 123
发新话题
打印

[设计教程] 〖2006-5-16〗〖分享〗88X31 lOGO制作教程大全+视频教程

本主题由 阿祥 于 2008-1-28 20:08 解除置顶
力争上游  

TOP

效果:
, E  |3 L1 m8 [: S+ _2 c
% X: t' H# O3 f6 {3 U, j
$ [4 Y7 a! g7 ~6 s2 Z1 Z' P, ~
6 P5 ~# ?" P! j9 v/ p; y制作方法:; W) Z9 n, n' S( o" m6 B

( a5 Q; [1 O; `) W! `9 J5 y% C6 e% F& {- c6 {- p
+ v* `1 n; k2 e4 i4 E' r
  ' C" k( L7 }- ~" m9 o
* K, Z/ E- E( i8 @5 K  j
[center]
4 P# X1 B$ l, F7 i; R; E" c! y2 r7 o; g' D% p
  ( {1 M0 n& d  P2 k
下面是源文件:
, @- Z/ F; v5 m6 j4 E9 [& }% g

TOP

说说FW做LOGO,还是先看效果只有桢动画造成的视觉暂留,虽然是最简单的方式,却也是我制作得最繁杂的一个LOGO。( Q/ b# U, E( t0 `

2 I6 _$ r# D* H- N9 K" o2 A2 v8 Y) D4 ]; t4 V* \+ [
1.打开原图,剪接取舍得到88*31大小的图。
* G$ f% r) ~, O) m+ B
+ D* n6 b5 p2 e% L& s6 ^* y$ l( z1 p" [( g
  2.这个LOGO里还有一支笔和一个印章的图案,我借用了PS和FW工具栏里的两个小图标。( `5 O2 K4 x- L+ B+ ~+ s
3 `2 k! _% B) a8 X3 q
3.在图象输入“解语”,均匀去除锯齿,颜色为#005A00,大小21号,方正行揩字体。
  `  X, u. q# `8 P+ b2 L
. u' M/ C! w7 V, C3 [7 v4.加入笔刷图案后,将该桢复制成22桢。在每一桢上,将笔刷图案依照“解语”的笔画顺序,移动到相应位置。; c9 V6 a9 g1 J$ B
6 M- @2 x6 R# S% e- q
  5.依照笔画,将笔刷图案未移动到的笔画用于背景相同的颜色覆盖。( h: b+ B5 G- C" S4 x4 G5 u9 h

: r, G6 W$ c* d- l9 ?8 {3 ~* W5 C  6.第十三桢就该开始做印章的过程了,先将图章工具的图案进行适当的拉伸、倾斜、翻转,使其与印迹的大小、倾斜度基本适宜。印章的过程分成“印章出现”―>“按在纸上”―>“稍稍移动,显露出印迹边缘”―>“印章上移”―>“完成”五步完成,适当调整每一步的时间,使其流畅即可。
3 b6 b  B  J3 S! T- \1 o) g* Q5 D) {
7.最后还该在说说“丁丁冬”三字制作中,自己的一点具体做法。在FW里,输入的文本和矩形框组成的印章在进行倾斜变形后,会走样,变得不清晰。我的做法是建立一适当大小背景透明的画布,输入文本及矩形框后导出成图形,然后再打开,这时候选取图形,复制粘贴到LOGO中,这个时候再做倾斜处理,一般就不会太走样了。
8 Z, G" e' U/ ]  r' F3 D  这个LOGO耗时间最多,但过程不难,只要注意每一步的变化,心细些就做出效果来。边框虚线运动的Logo
6 w7 Z; H! X5 M0 ^3 b9 S7 P* h! Q# F  步骤一、建立一个88*31的空白图片,背景色为白。 4 ]/ m* \  t( p& K
  步骤二、选中线段工具,拉出一条长88的直线(水平)。
7 j0 S& D7 C; i" L# Z7 p3 O, H  步骤三、将这条直线的笔触选择铅笔,1像素,纹理为Grie5 100%,这条直线就形成了虚线的效果(也可以通过Fireworks的Command命令插件完成虚线的制作--此插件需自行加入)。如图:
& h4 P. L: m! u( Y& u, O+ f2 _* w& h$ B. B) O
步骤四、选中刚才制作的虚线,按Ctrl+C复制,再按3次Ctrl+V粘贴,这样就有了4条这样的虚线,将其中的两条旋转90度,成为竖直的虚线,将4条虚线(2横2竖)分别放到图形的4个边上。(如果旋转后无法显示虚线,请调节线段的笔触大小)如图:
5 Q) O! n9 [, ~$ |  H/ v: I, H: s: F; I0 f0 o/ _
  步骤五:点击帧面板下面的增加一个桢,复制第一桢中的所有线段图形到第二帧,再细微调节四个边上的相交处的虚线位置,叫2个帧有所区别。如图:
& D# U( Q1 `8 u/ s+ z, J
3 N2 G8 S4 d  L/ ^# @4 N' c  步骤六:选择菜单中的文件->输出向导,按默认进行,最后选择输出预览中的动画菜单,将2个帧都选中,调节没帧的速度为15,输出成为GIF动画,如图:" |6 C8 X9 ^0 a' _) c0 J

8 \7 N$ d2 c" o4 F9 d0 s2 N' y  完成实例:
8 C+ b) z# J' l- ^
* \5 c+ H: l5 a4 |

: X8 H. z, a% o, Q: ?% n  V
+ P; ]3 v' u% d

TOP

Fireworks制作Logo
: @& Y3 M$ v5 `6 ^5 Z% n( Q. _: L. x- F6 e; K6 V  j( A

9 \8 X9 K$ V5 T: I' K0 j) c9 P. O
( |. n0 s' B5 C5 _[left]光照边框运动的Logo制作
- C  D+ k; \) }! }1 V( T  ]; K7 |如何做出像下图一样的LOGO呢?, n; M/ \0 S7 A1 d' ^1 \
9 b: N6 P# T4 k1 \. z* K
不急慢慢来!以下是在Firework MX下做的,FW 4.0下可能有些命令不一样!1 L0 M, j, p( i% }" ?' l% B
新建一88X31大小的图像,选中Custom这项,背景随便选,接着按Ctrl+=四次,使其放大到400倍,然后用marguee tool工具,在背景上正击一下,接着按Ctrl+a进行全选,再执行Select/contract Marquee命令,弹出来方框里填1PX接着按Ctrl+Shift+I后如图:* F& T. ~8 b0 a. r" z
$ ^: u% ^# w6 e* Z/ D
再用油桶工具填充为深一点的颜色。如图:
/ q) o% I0 N% D3 s5 ?$ G5 Q5 [" \( q' ^9 Y& v# G( c
新建一层,然后用Line Tool工具画出一个长14px,宽1px的直线,设置为白色,透明度为75%,再画一个长6px,宽1px的白色直线,再把个图重合放在一起按Ctrl+G进行组合。$ h' G, p$ }4 g9 w5 R
( M7 c0 l: B9 Y
接着Clone一个出来,并执行Modify/Transform/Rotate 90 转90度。并且最后一样Clone一个,再把这四个直线放在他们相应的位置,如图:' e( Y& B5 o, z# u! M9 k& V5 J
% ?$ S* E5 Z! S
再把图层一设为共享层。. x# z' G$ R2 \( q
然后选中左上角准备向下运动的直线,按Modify/animation/animation selection,在Frame这项里填6帧,点确定,再按住红色的那个圆点,拖成如下图的样子:
1 [8 x8 N0 s: U2 C' I& z
) W2 g2 Q  j' t3 F! d% G在选左上角准备向右运动的直线,按Modify/animation/animation selection,在Frame这项里填14帧。 $ _, T  w2 ]: c- E2 _
再选下面同样执行上述命令,但Frames这项里填20,出来后把他的位置拖放如下图:
8 m! r; P4 p$ h1 u* G/ q/ x; a& K
+ l6 {3 o$ l2 O) p记得把第5帧的位置话这个图的开始,这样前5帧就空出来了,使其第5帧正好到图上。 ' @, m6 q( z  x  ~! N2 G8 k$ N
最后一个当然也一样执行上述命令,Frames也为20帧,当然最后一个是只留最后5帧在图像上,最终这四个Animation Symbol成如下图的样子:+ A! D: r* Q  m0 {- D6 M3 A6 D" @

4 s$ o6 C# k& M1 |7 `: p再回到第一层上添加你想要的文字!本文以04-8号字体做例,输入议定Animation,设置好大小后确定。然后再在属性面板里另上Effect里的Shadow and Glow/Glow命令,如图:; k: u* _6 g- v& U# {- [, R; K) V
: G3 v& h. ]6 X) g. z) o
OK搞定了!最后一步了,输出 执行File/Export Preview,弹出窗口如图:- G0 N$ C  l# }. R: V& K

6 i. \8 f; T" o& b1 D, D选择上面的Animation标签,把第一帧都设置成2/100S 如图设计成2就行啦!Export保存!一个新的边框运动的logo就诞生了.

- o8 f. c7 I# r! k

6 h$ N3 Y- H9 Q2 \- P! f& }
% {/ n! ]+ p' O

TOP

Firework做的一个绿色LOGO( p+ H& M& }0 a  H9 A% L+ Y
今天继续说说FW做LOGO,还是先看效果图。这个LOGO主要运用了FW中的动画元件创建动画、字体的发光效果来完成的。(该说明的一点,其实这个底图是参照了蝎子的LOGO的构图,不介意我“盗版”吧,呵呵)
, O6 C; f# r3 t: A! Y# E, K
4 V4 A; h: z) d. u  1.新建一88*31,背景色为#009A00的画布,填充色如下。7 V% [, ^8 C5 f0 l4 h( l, v1 s" x6 J

" `" N8 @; Z0 n9 t3 L  I( _$ T  2.利用矩形工具为图象加上边框,并处理成如下图案作为LOGO的基本背景。3 q) j; c* `" E9 u

) u: [0 ^! R1 K  3.输入“绿”做出描边效果,设置如下。
! ^, m. W* n2 p7 [+ m' r' s3 Z9 t' M% L9 N, J: e0 Z
  4.将第一桢复制成五桢,对每一桢的字的发光的属性进行调整,使对其从另外也可以对字做些模糊处理,形成发光的效果。& ?# s1 o% i7 a0 l2 P- ]1 D8 i. @9 Y$ a
1 Q6 o9 ~2 x/ r% b& q( o5 q
  5.下边就该是光线掠过的效果了,这是一个在LOGO中用的蛮普遍的效果,做出来的感觉不错。用选取框选取一适当的矩形,填充色为线形的两端透明,中间为白色。再对图形做适当倾斜处理。
* j1 V- ]2 ^9 u+ ]
3 @: Q$ W4 @, w" T  6.选择图象,转换成元件,选择类型为动画。  E! e, [6 ]& @( ^# w; j  t

& [" b' x9 t' M# ~5 w$ Q  7.FW中运动路径上的绿点表示起始点,而红点表示结束点,适当移动绿点红点到适当位置。
& O$ d2 a2 S$ z5 ^! E0 r$ c% i' j, u% s# R7 Y8 ?
  8.在光线掠过后的地方出现文字“雅轩”,如图。
' W- u- K" Z% f; Z. [: n6 A1 v
% M0 L8 s* F1 e' U9 q2 x  9.网站地址的效果很简单,输入文本后,复制五桢,将其中的第二、第四桢的颜色调整为比原来的稍微暗色些,这样就有了闪光的效果。
  R' J, M0 U  m& ^+ G  10.最后,调整每一桢的时间,让变化流畅即可。
) F4 x7 F/ P8 A  F: C  这个LOGO最值得吸取的就是光线掠过LOGO的效果,在很多时候都可以用上的。

TOP

LOGO制作教程实例-就是那道光
6 k1 z& R; l2 T/ T! c7 l- h: o, G" {/ `5 ^9 h% z# g. m

, \0 `4 t  s; f$ b) m- n) C# s* w- ~3 T6 f+ M; E8 L3 `: B

2 Z% R5 ]6 x) k3 d1 O$ w; k4 p' x# f7 t* b, U
% @  f8 z6 i; ]: i: A2 M4 D
就是那道光
* q# w3 q- s1 O7 ?/ ?+ V- D5 U

0 r: {+ w0 B7 k" [
" Q7 I& R- x) \0 q. J2 i; r* C' o
" H, r/ e2 d3 s) Z. h$ v: Y' _! q! h, M% v

" N1 _) W% L( S' B7 s" Z) W最后生成4 O! K+ I4 Q% Y

, h- V1 D; u& R0 E2 h: x
# m$ C, g! S2 ^8 O7 @# J

/ a5 Z4 g% z: J) ~' T) [

TOP

制作滚动边框效果LOGO
3 V% V' r2 Q0 \  k首先看这个例子,; D* d- u1 l% j4 {6 B7 T+ z

; M$ T5 r6 d, `8 n3 l4 |- v* k. Z4 o6 ?0 C
6 r: O& V: o' C, E+ b1 r' H
这个文件其实很简单,它只有8帧,为什么是8帧呢?是因为4象素的黑边和4象素的白边加起来正好是8象素,而这个GIF是每一帧移动一个象素,那么就是说要8个象素就会重复或还原!
  j+ p( c* I6 @5 V4 U5 M首先新建1*8象素的文件,再用白色填充左边4象素,黑色填充右边4象素,并定义成图案,如图所示& y; r- y; [4 G% W
% B9 R5 @+ U3 f! u5 K
0 l4 ?! I1 B/ P. Y5 v
* |+ j" s0 i- v. O) \  z( D
再新建立一个88*31的文件,然后选取一个边,再填充,用图案,就可以看到效果了~如图~, w$ _9 v& t( A( p

2 A1 v: {' \. U5 K1 ^* X; C5 o. U6 \1 f" l. l

0 L, j6 r$ ]7 c7 I- u2 ~6 i道理,竖边框就做第一步的长一象素,高8象素的再填充就行了~) V3 V. d, z. |* }, H
注意,这四个描边不能保存再一个层里,分别在4个层里面!
. ]; k5 }9 |$ `9 S" Z4 T+ {. Q

. H8 r/ R! e$ Z
6 A1 t7 L+ m- d7 E2 b' v9 R

4 C/ s0 B" _4 v0 n然后,就可以保存为第一帧了~0 }" {* ~% m  E1 z) b9 Q, ~
第二帧就是如图,上边框所在的层向右移动一个象素,右边框所在的层向下移动一个象素,下边框所在的层向左移动一个象素,左边的向上移动一个象素,保存为第二帧~~
+ m8 ?" `  V' @8 K" w& q如此类推~保存为第八帧,再连成一个GIF就搞定~
# \- R8 B0 S5 R( z3 L

7 ?& S( _3 z- l. |
* x: h* W1 w$ W! _
- a; B4 T, c* Y8 I* A
这个多少帧在于描边的大小,如果用6象素,就是3黑3白的话,那就做6帧
/ h' w/ Q6 u0 t
! r2 @- k4 [2 o9 t: g

( T; u' b3 L# y" `

TOP

LOGO制作教程实例-白光划过LOGO3 Q$ g/ y+ m7 E, p3 i. f$ L
+ H- y1 g9 _- x  {( ?8 F; i
4 T4 K0 f* \! C/ V

' w; D% A- W- t, j就这个例子
! L" j$ _/ [/ ~. ?第一步9 F: f. t3 q( O0 X" p: W& H2 b
1 z4 t  B+ ]5 I4 W. D0 U- @

' K4 J1 |- r& m: |9 Q% n" a
0 h$ B" P( B* G' r- i
第二步9 P% `& V2 U" i& n, Y

: d' F) l2 H0 x  R2 A7 h1 z" \2 s% W3 p9 b0 C0 Y2 ]; c* d- b' E

4 [' L2 k8 d! i, @- C* G$ H- Q第三步
. e" p* ~% k" y6 v8 Q0 ~8 {3 O' s
+ C1 E# s! a# x" g
  U2 t% f) I! n1 ~% L1 W
第四步% ^2 P5 b: E5 S2 M) V0 o
" b" d6 N; q: O6 q& i5 ?! G

& j) a# [3 \6 A# t* O
; b9 m/ t- v8 P2 N0 ~
完成/ H/ O& j! W" z% D/ Y
% x$ O2 ^' I- N  }

6 {' @2 @7 i6 P, h) r1 q$ ]

: I; [! f0 _1 g  U

0 y+ E) H5 ]/ Q$ W7 `
8 `# y7 x) |; }3 W3 G- \9 r9 o1 i

TOP

渐隐渐现的LOGO1 g. P# D" p; p& Z0 N( g" H

0 Q- n9 ]2 x8 S7 I4 o
. f& K( e, u6 {4 [

0 p# W' T, b3 `6 d$ Y' S* h& R1 新建画布 88*31象素 颜色选透明色。 4 Q- c' U/ h0 Q$ D* `3 I: e; a* }
8 T1 x6 ^9 p3 D( q, [5 p$ R* a
2 选者矩形工具建立一矩形层 88*31 边框用黑色。用#B3D335填充. G! X( |) ^' _2 y) f
) Z' Y2 ]5 v$ P8 M2 W. m
3 按如图数值填充。9 \7 n1 N" u% m4 F6 q
/ i9 B* Y+ F8 P; V. y: J+ Z) R
4 填加文字层。。 文字颜色为#EED20A。选不消除剧齿
$ X  r- l$ b7 }: ?* Z
+ i- R3 `& F# L7 q5 在文字层上选用PENCIL描边。数值如图9 u6 }$ d2 ]3 a/ D
" \& w: D' F8 {3 h4 k% M; ~
6 然后填加影格。。先建立18个影格。除第五侦和14侦是100/100秒。其余各侦延时为0/100秒,6 p! Z) _1 M9 I6 u" Z

! Y# }' S& T4 s复制矩形和文字到其他侦上。 % E3 H+ J2 ~' ]0 B. v
在第五祯开始把文字向前后侦每个把文字透明度降低20%设置。 6 u$ f" X8 e. q$ O* {; {

7 Z/ `! c6 g( U& r9 \+ C  @& y- I如图所示,85为透明度.
9 P( `- B1 g) H) I6 {第6.4侦透明度分别80%/7.3侦为60%/8.2侦为40%,/9.1侦为20% 7 m6 w; t$ E( S. C
然后我们做文字变动:
' V2 d  j& L: X$ W  Z9 }2 z; P变动杂第九侦和十侦之间开始!
' F) g) m+ v) F, \更改第十侦文字....透明度为20% ' k! X/ ^4 G8 J; l1 \

+ |7 o! ^" f/ `  ~! u0 s然后把文字层复制都其余各层!透明度依次以每侦20%的速度递增.

: K+ p! e; T% u) S9 F4 R7 `

. D$ I* t) D6 r4 x+ q) |# |- s
1 \1 ^  @# d0 y. [

TOP

标题Logo效果' V  s0 g) X, ~6 f
如何做出像下图一样的LOGO呢?
2 z2 j: \0 ^# T1 E
, w: f, L* H* v% r! u: a
, L0 `2 a" }, V

( @: a& P: s' O+ u% }$ k不急慢慢来!以下是在Firework MX下做的,FW 4.0下可能有些命令不一样!
; l, m7 N* _) W) g6 d/ V新建一88X31大小的图像,选中Custom这项,背景随便选,接着按Ctrl+=四次,使其放大到400倍,然后用marguee tool工具,在背景上正击一下,接着按Ctrl+a进行全选,再执行Select/contract Marquee命令,弹出来方框里填1PX接着按Ctrl+Shift+I后如图:

: n" R# M6 v6 ]8 ]
- F, P! Z% ~# O( U% K: i再用油桶工具填充为深一点的颜色。如图:
& q+ v: L7 ~* Q$ W+ p
7 |  W6 u5 h4 i2 y5 R0 ~+ s新建一层,然后用Line Tool工具画出一个长14px,宽1px的直线,设置为白色,透明度为75%,再画一个长6px,宽1px的白色直线,再把个图重合放在一起按Ctrl+G进行组合。: l: n9 }! r4 r6 s9 ]2 q
+ ~" p5 _, R" k
接着Clone一个出来,并执行Modify/Transform/Rotate 90 转90度。并且最后一样Clone一个,再把这四个直线放在他们相应的位置,如图:
1 h: s) j: ~1 j9 B3 C: Y5 N
& i" i% F6 a( F再把图层一设为共享层。8 {5 A" k% Z  Z. Q; l
然后选中左上角准备向下运动的直线,按Modify/animation/animation selection,在Frame这项里填6帧,点确定,再按住红色的那个圆点,拖成如下图的样子:
5 i: b7 i- B+ w* r! e2 f
$ ?# Z! K: c3 W) N- C. S
在选左上角准备向右运动的直线,按Modify/animation/animation selection,在Frame这项里填14帧。 4 V2 y1 F  h+ J  N& d& V& q: v
再选下面同样执行上述命令,但Frames这项里填20,出来后把他的位置拖放如下图:

( G5 n. u% \. Z! h- p  q+ E0 v3 F/ \# F0 k! d* W
记得把第5帧的位置话这个图的开始,这样前5帧就空出来了,使其第5帧正好到图上。
: t6 k4 C! M, D; q' Z最后一个当然也一样执行上述命令,Frames也为20帧,当然最后一个是只留最后5帧在图像上,最终这四个Animation Symbol成如下图的样子:
  ]/ k- o; f5 \% N, m

+ i6 [, v) w* f6 @  Z再回到第一层上添加你想要的文字!本文以04-8号字体做例,输入议定Animation,设置好大小后确定。然后再在属性面板里另上Effect里的Shadow and Glow/Glow命令,如图:
+ v6 t7 e  b  C" z, x& S) R% N8 ]0 _$ v7 f. S- e- Q0 o8 z! ]0 H
OK搞定了!最后一步了,输出 执行File/Export Preview,弹出窗口如图:, l- \+ U: l2 U0 _+ F$ Z
1 N1 C' [: j) w4 [
选择上面的Animation标签,把第一帧都设置成2/100S 如图设计成2就行啦!Export保存!一个新的边框运动的logo就诞生了。
8 C# g: p, E( X

3 V2 f/ J4 z2 Q( W- s: m
/ q( c: \" Y" N* J! H

TOP

 26 123
发新话题