Fireworks 8 教程第04章 绘制与编辑位图图像
- 格式:ppt
- 大小:1.27 MB
- 文档页数:21
Fireworks实例教程:教你⽤Fireworks画图标的完整⽅法(图⽂)本教程是向⼤家如何利⽤Fireworks画图标的完整⽅法,以画⼀个USB接头为例,向⼤家详解图标画法的全过程,教程⽐较实⽤,推荐过来与⼤家⼀起学习,希望对⼤家有所帮助!基本上平⾯软件做⽴体图标也是先建模再渲染的过程,然⽽这些都得⾃⼰去做,虽然再逼真度上和3D软件还是有差距,但是更多变的风格和效果使平⾯软件制作图标给了设计者更多发挥空间。
下⾯是我画⼀个USB接头的过程(个⼈认为图标不要太接近实物为好,更卡通风格,选⽤更代表性的物体才是优秀的图标...虽然我还做不到 )上⾯为制作的流程和最终效果图⾸先我要说的是:Fireworks本⾝不带直接透视功能,不过有透视辅助线(其实也不太⽅便)和3D插件。
但是直接做更好的练习⾃⼰的透视能⼒。
我这⾥画的整套图标都是同⼀个⾓度透视的,所以我采⽤⼀个正⽅形⽽不是这个USB插头本⾝,是为了适应更多图标。
1、如上,很正的正⽅形2、使⽤扭曲⼯具把他变形成从侧⾯看的效果。
这⾥可以⽤FW中的辅助线来制作或者使⽤3D插件透视⼀个正⽅形,完成变形以后千万记得把这个变形的历史记录保存到命令中tips:很多朋友都不知道扭曲⼯具是什么?为什么我的扭曲总是放⼤或者缩⼩⽽不能任意变形呢?扭曲⼯具是变形⼯具的第三个!FW绘制3D图形(ipod)3、复制⼀个然后向右边移动⼏个象素,再缩⼩到99%,⼤致的画出这⾥画的USB插头的正⾯和反⾯所在的平⾯..为了更准确的达到⽴体效果不失真,真的能不失真吗?请继续向下看.tips:后⾯的⾯要⽐前⾯的⾯稍⼩⼀点点..近⼤远⼩嘛.⽤过相机拍摄微距的朋友⼀定知道,镜头越近,前后⼤⼩差别越⼤4、把画好的两个⾯收起来(隐藏)~~以后再⽤..然后画上平⾯图⽚.USB插头的内容都在⼀个⾯上,所以画正⾯就好了.如果⽴体图形的⼏个⾯内容都很多..那就要画三视图的平⾯图了..这张平⾯图的内容最好把所有你觉得可能出现的都画上,甚⾄包括很明显的⾊彩过渡.5、同时选取你画好的正⾯图和正⽅形.然后再执⾏菜单中的 [命令] - [你再第⼆步保存的变形命令] 好了..不但正⽅形变了,USB插头的正⾯图也变成透视图了.完成以后先不要删除辅助线(被透视的正⽅形),先把第3步画的两个⾯拿出来.正⾯对正⾯反⾯对反⾯.6、对整齐以后再删除辅助线.现在USB插头的基本形状已经出来了,哎呀.有点失真了.后⾯的那个⾯太下了.好了,现在你可以开始骂我第3步不做会更好了.我的错啊..对,这就是教程和经验交流的区别.我更希望⼤家能提出对我的制作过程中的看法,看贴回帖是⼀种美得!!看看这个图⽚,上⼀部做的东西真的失真了吗?其实不然..但是真的有点怪怪的啊,原因是我们把USB插头的⾦属部分和塑料部分放在⼀个⾯上了..再仔细看看上图..侧⾯来看其实不是在⼀个⾯上的.怎么让他们各⾃到各⾃的⾯上去呢?这个只有靠感觉去微调⼀下了..蓝⾊的⾯向右移动⼀象素,红⾊的⾯向上移动两象素,左⼀象素tips:很多地⽅我们需要⽤到微调,⽐如在⽴体图形上⾯有⼀个凸出的⾯,但是⼜凸出的不多..我们当作他在原来的那个⾯上做透视,然后再微调⼀下7、把那些⾯连接成⽴体形状.这个很简单..详细请看"FW制作3D图形"既然已经成了⽴体图形,我们把侧⾯也画上去,这⾥有⼏个凹⼊的槽.先画三根线.效果后⾯做到这⾥模型已经全部完成了.⼤家画画的时候也会先画线稿再上⾊对把,这个就是线稿了.8.上⾊.如果是⽤马克笔,⼀般就直接在线稿上⾯画质感了,是的,马克笔五块钱⼀⽀,电五⽑钱⼀度....SO.我们不⽤直接画渐变,先画个基本⾊,然后再⼀个⼀个部分修改为渐变9.调整渐变来表现光感(谁能告诉我⼀个更专业的词语),不同的质感对光的反映是有讲究的,塑料⽐较圆滑,⾦属⽐较直爽,玻璃⽐较活跃.塑料的转⾓是⼀个缓慢变化的过程,⽽⾦属的转⾓不能⽤单⼀的渐变来表现,⼀般我会再转⾓多加⼏条⿊⾊和⽩⾊的线条....10.还是光感.塑料部分的正⾯进⾏⽻化:⽻化塑料的正⾯,达到从正⾯到侧⾯的⾊彩缓慢过渡的⽬的.你可以和上图⽐较下,可见上图的菱⾓是很明显的.半透明渐变:把⼿握的位置的反光画出来,具体是上⾯透明,下⾯⽩⾊的渐变,再⽻化⼀下.同上:同上制作⼿握位置的⾓的⾼光⽩⾊实⼼填充:制作⼀条细线来表现整个塑料部分的菱⾓的⾼光,上⼀部的作⽤和这⼀步是同样的,只是⼿握的位置的⾼光线条⽐较粗,所以我⽤两步来实现⾦属部分表⾯内容的内侧阴影:⾦属部分表⾯有⼀个槽和两个洞..内侧阴影是为了表⽰他们是凹进去的.⼀象素⽩⾊线条:⾦属部分的⾼光,⾦属部分的菱⾓是很直爽的.直接变到另外⼀个⾯11.细节部分.操作解释如下理解USB标志的原⾓举⾏边框:使⽤1PX内侧阴影表现它们是凹⼊的USB标志:使⽤1PX投影,表⽰它是凸出的,投影和阴影的⽬的是画出那个很薄的侧⾯.⾦属质感修改:这⾥加⼀个⿊⾊的或者你也可以再加⼀条⽩⾊的再左边.为什么??你从凸出的镜⼦看⾃⼰,⾃⼰被压扁了.,那么从⼀个到90度的菱⾓看景物..每个景物就剩下⼀根线了,所以⾦属的原⾓有⼀系列⽆规律的线条..12.来看看⾦属部分的另外⼀些细节和全部组成内容塑料再⾦属上的投影:使⽤表⾯做内侧阴影,然后选上[去底⾊],这是塑料挡住了部分照到⾦属的光.⾃⾝的边缘:⾦属的边缘,由于11步说的原理,所以⾦属的边缘加两条深线条13.过份仿真的图标在使⽤起来是没有太⼤意义的,真正的图标要使⽤起来必须颜⾊清晰,容易区分,有体量感(胖⼀点).⽽且实际制作中,⼀套图标要风格统⼀.你可以使⽤同样⾓度的透视或者同样的配⾊或者同样的表现风格.这⾥我使⽤了同样的透视,这就意味着整套图标的透视都⽤同⼀个透视的命令.如下另⼀例⼦14.这⾥使⽤了上⼀个图标制作所保存的命令,这样两个图标就是从同⼀个⾓度透视了,这个例⼦中,我也把 [光影渐变]和[渲染质感]作为两步,这样能更好的调整⾊彩!以上就是利⽤Fireworks画图标的完整过程,希望对⼤家有所帮助!。
位图制作和处理
1 打开或导入位图
2 矢量转换为位图(平面化所选):为了追求一些特殊的图像处理效果,需要把矢量的形状平面化。
如:网格字等。
3 绘制位图对象:使用铅笔和刷子工具,可以快速的制造出手绘等效果。
4 编辑位图对象,先要设置编辑区域。
可以使用的工具是选取框工具、椭圆选取框工具、套索工具、多边形套索工具,魔术棒工具;按住Shift或者Alt键,操作选区工具可以产生增加选区或者减少选区的效果;菜单‘选择’可以对设置好的选区进行调整;矢量图也可以转换为选区,这在设置规则而复杂的选区时特别有效。
5 编辑位图:擦除、模糊、锐化、减淡、加深、涂抹、替换颜色等,注意属性的调整。
比较菜单‘滤镜’和属性面板上的滤镜的异同。
fireworks教程Fireworks是一款由Adobe公司开发的图形编辑软件,主要用于创建和编辑Web图像,特别适用于设计师和开发人员在制作网站时进行图像处理和优化。
本教程将介绍Fireworks 的基本功能和使用方法,帮助读者快速上手并提升其设计能力。
简介Fireworks是一款在Adobe Creative Suite软件套件中独立存在的软件,最早被设计用于处理和优化Web图像。
它的特点是集成了矢量图形编辑器和位图编辑器的功能,能够同时处理SVG、PNG、GIF、JPEG等多种图像格式。
Fireworks的设计理念是帮助用户快速创建和编辑Web图像,提供丰富的工具和特效,支持切片和优化,以及生成HTML和CSS代码。
下载和安装Fireworks可以通过Adobe官方网站下载安装程序。
安装过程与大多数软件相似,跟随提示完成即可。
安装后,启动软件并进入主界面。
界面概览Fireworks的主界面分为几个主要区域:1.菜单栏:包含各种工具和功能的菜单。
2.工具栏:包含常用工具的按钮,用于选择和应用工具。
3.画布:用于显示和编辑图像的区域。
4.图层面板:显示和管理图像的各个图层。
5.属性面板:用于调整和修改工具和图层的属性。
基本操作创建新文档要创建新的Fireworks文档,请执行以下操作:1.单击菜单栏中的“文件”>“新建”。
2.在弹出的对话框中,设置文档的尺寸、分辨率和背景颜色等选项。
3.单击“确定”创建新文档。
绘制基本图形Fireworks提供了多种绘图工具,可以帮助用户创建各种基本图形。
以下是创建基本图形的一般步骤:1.选择合适的绘图工具,例如矩形工具或椭圆工具。
2.在画布上单击并拖动,绘制出所需大小的图形。
3.在属性面板中设置图形的颜色、边框大小和样式等属性。
编辑图像Fireworks提供了丰富的编辑工具和功能,可以对图像进行调整和修改。
以下是一些常用的图像编辑操作:1.裁剪图像:选择裁剪工具,拖动鼠标选择要保留的区域,点击“裁剪”按钮完成裁剪操作。