::NoName Magazine 无名杂志 » 设计无名 » 简易像素坠子的制作


2006-7-23 15:28 Mulder
简易像素坠子的制作

[b]毫无疑问是转载的 XD,原作者forfor[/b]

,我们先来说说坠子的组成:

  第一, 坠子要有一个骨架,可以是一些小的零件(纯手工制作,下面有一些),也可以是一些图像的轮廓(loli呀,蝴蝶呀,可以通过处理图片而来).将这些小东西有机结合堆砌,就形成坠子的骨架了.

  第二, 阴影或发光效果.只有骨架还是很单调的,通过阴影效果的加入,会使坠子马上变得漂亮起来.

  第三, 坠子一定要动起来才够华丽哟.动画效果一般就两类,色彩的变化,以及零件的移动变形.
嗯,好了.那我们就依照这三步,来做一个最最简单的坠子~[img]http://www.vscn.net/forfor/pic/zhuizi_x001.gif[/img]~(好像根本算不上坠子啊~失败失败..)

[b][color=Red]使用工具: Fireworks MX 2004[/color][/b]

[b]预备工作[/b]

  首先,我们需要一些小零件.这些小零件需要我们自己手工画,将画布放大到800%,然后用铅笔工具开始一个像素一个像素的点,一定要不时地切换到100%来查看效果(^_^会点到眼花的哦~).下面给出一些我点出来的(-_-|||我承认,有不少是比着现成的坠子画的).

[img]http://yydzh.com/attachment/Day_060408/59_40860_b5c5bb971bf9f17.gif[/img]

  另外还有一类比较形象的图案比如小兔兔,小loli等等,我们可以利用现成的图片进行处理,提取出轮廓.

  下面就我们要做的这个例子进行步骤地说明.

[b]第一步, 做骨架.[/b]
  打开fw,新建一个文档,17*50像素即可,背景白色,放大到800%.


[img]http://yydzh.com/attachment/Day_060408/59_40860_13cfa1c82ee03ea.gif[/img]

  我们既可以手工点出骨架,也可以复制粘贴我们已经画好的零件.

  在这里我们需要一段链子,一个边框和一颗心.组合之后如图.颜色都是黑色的.

[img]http://yydzh.com/attachment/Day_060408/59_40860_749abe88773a8a0.gif[/img]

[b]第二步, 打阴影[/b]

  如果直接添加阴影的话,骨架和阴影便会混为一谈,变得很难看.所以要事先给骨架加一个白边.我们可以通过给图层加发光效果来实现,但是在这里这个方法的效果并不好.所以我们要用一个稍麻烦的办法来做.

  一,首先用魔棒选取一块儿黑色区域.然后使用菜单中的 "选择-选择相似" 命令.以选取所有黑色像素点.如图
[img]http://yydzh.com/attachment/Day_060408/59_40860_4927e6e6eebb5c9.gif[/img]

 二,使用菜单中的 "选择-扩展选取框" 命令,出现如下对话框,扩展范围1像素,确定.

[img]http://yydzh.com/attachment/Day_060408/59_40860_2bcea9276b53cf9.gif[/img]


  三,然后在层面板的右下角单击新建按钮,新建一个图层.然后用使用油漆桶工具将选区填充成白色.

[img]http://yydzh.com/attachment/Day_060408/59_40860_0f588a4959f25cd.gif[/img]

  四,将两个图层调换位置,选中上面的图层后按Ctrl+E合并两个图层.
这样,我们就已经给骨架加上了白边.虽然可能看不出效果,但确实已经出来了哦.

  下面我们做阴影处理.

  首先,使用"指针"工具(就是工具箱中的第一个工具,可用快捷键V来切换)点击我们的半成品坠子,在下面的属性栏会有"效果"这一项,依次点击"+号 - 阴影和光晕 - 投影".

[img]http://yydzh.com/attachment/Day_060408/59_40860_405b4b2a21c1afd.gif[/img]

  在对话框中设置如下
[img]http://yydzh.com/attachment/Day_060408/59_40860_fca6615f103f031.gif[/img]

  设置完成后效果初现.缩到100%看看.= =难看是吧,单调了.我只有这个水平呢,想要做的更好看那就要充分发挥你的聪明才智咯~~


[b]第三步, 动画效果[/b]

  在这里我们着重说一下如何变形,及fw中动画的制作.

  首先,切换到"帧"面板,如图.按住Alt键拖动第一帧,这样可以将第一帧进行复制.

[img]http://yydzh.com/attachment/Day_060408/59_40860_53a7fd1a550bf4d.gif[/img]


  用指针工具选中第二帧中的坠子,执行菜单中 "修改 - 变形 - 任意变形" 命令.

  我们在按住Alt键的同时,拖动一边的手柄向里拖动一像素.如上图.完成后效果如下图.
[img]http://yydzh.com/attachment/Day_060408/59_40860_bbaf3132a5c99d9.gif[/img]

[img]http://yydzh.com/attachment/Day_060408/59_40860_525ff5c00fc1514.gif[/img]

  由于我们做的是像素图,像这样的变形效果是不能容忍的.怎么办?呵呵,我没办法,手动修改(注意多余的部分一定要用橡皮擦干净!或者干脆新建一图层描-_-)~好在这样的活只出现在这种变形动画中,像在颜色改变或移动动画,修改工作要轻松一些.
  ok,修改完成!

[img]http://yydzh.com/attachment/Day_060408/59_40860_1506b44a0ef3d07.gif[/img]

 我们同样还要给它加上白边,阴影...麻烦么?先别喊累,我们还要再做三帧呢~做完就轻松一些了,剩余部分只要复制帧即可.

  你完成了么?按一下工作区下方的播放按钮(在属性栏的上面一栏).呵呵,会动了~~! 怎么?速度太快?看到在帧面板里,每一帧旁边的数字7了么?那里就是每一帧的播放时间(单位1/100秒),双击修改就是了,我设的是10.

  当然,这样只有旋转动作还是有些单调的,我们可以再加上一些别的动作,比如闪光.我想大家可以自己动手做了~~~

附:png源文件

[img]http://yydzh.com/attachment/Day_060408/59_40860_508499a5f1bf204.png[/img]

页: [1]
查看完整版本: 简易像素坠子的制作


Powered by Discuz! Archiver 5.5.0  © 2001-2006 Comsenz Inc.