如何运用CDR在产品设计中的表现技法详解

162 阅读 0 评论 107 点赞

我是靠谱客的博主还单身项链，最近开发中收集的这篇文章主要介绍如何运用CDR在产品设计中的表现技法详解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文说明如何运用Coreldraw于表现技法课程的教学，以培养学生具备绘制产品精描图的能力，进而能无中生有创作出新的产品。因Coreldraw定位为插画与排版用软件，并非针对产品设计而开发，若要运用于产品绘图，仍有许多诀窍与方法来加以克服。

本文以循序方式说明学习程序与应注意之特点，并佐以案例说明，若设计师本身已有向量绘图软件的一般概念，并具有图学与素描的基础，透过本文描述之观念可很快的转化为以无中生有方式绘制出产品表现图的能力，即使是初学者，经过一段时间的基础训练，亦能描绘出相当精致的产品精描图(Rendering)，兹以此教学经验提供有意学习者作为参考。

1. 前言

设计表现能力对于发展一个构想或或是开发一件产品而言，是一种设计上不可或缺的工具，同时也能提供我们一种构想的反应及评估上的视觉重现(Arends，1988)。而产品精描图则是表现设计最重要的沟通媒介，目的在于能够明确的表达出产品的外观特点。

目前计算机应用于绘图已相当普及，鉴于其方便性与良好的仿真效果，在业界及实务上，均运用计算机绘图完成的作品作为最终的设计提案，且依不同的产品类型选择以透视图、正视图或CAD尺寸图等方式呈现。

在设计实务上，塑料射出成形、组装式的产品较适合以Coreldraw绘制，若不涉及过多三度空间的曲面造形，以其来绘制皆绰绰有余。而其它的优点除了拥有向量软件档案小、可输出各种分辨率与尺寸之图文件、所绘对象可共享的特点外，其支持各种影像档案，像是 Adobe公司的 Illustrator的.AI、.EPS格式、Photoshop的.PSD、还有Macromedia的Falsh的.SWF与SVG等档案格式，对于后续图面的其它应用均有相当大的弹性。

目前以Coreldraw绘制产品表现图的教学书籍，所提案例常过于简单，或未针对产品设计绘图作考量(李俊彦，2002)，使有意学习者不易了解学习的重点所在。

故本文提出五阶段的学习程序，分别为1.外形线绘制、2.渐变填色练习、3.调和工具使用、4.案例描图练习、5.无中生有产品设计，并针对各阶段可能遭遇的问题与诀窍加以说明。

以笔者教学的经验认为，只要能学习一些诀窍，与灵活运用少数几种Coreldraw指令，加上多观察一般产品的外形与光影变化，任何人都可以很快的上手，并描绘出逼真的产品图。以笔者指导的专科三年级学生为例，约半学期的时间即可很快的掌握到案例描图阶段所需的技巧，并培养完成无中生有设计的基础。

此外，课程本身同时整合与延伸素描及图学的应用，对光影观念、立体图与三视图转换概念的培养，有相当大的助益。

2.外形线绘制

线条绘制原则，因一般产品外观均以几何线条为主，故尽量以圆、多边形等几何绘图工具绘制，搭配修剪(Trim)、焊接(weld)、交叉(Intersect)三种造形工具描绘出正确的造形，若有斜线或曲线必需以贝兹曲线绘制时。

设计者应练习以最少的节点数绘制出外形线，且注意在造形转折处的线条变化是尖锐或圆弧(在画贝兹曲线过程中以鼠标按下左键后拖曳可使节点产生曲率控制杆)，使其能够在一开始描绘时，即能以最接近正确的节点属性绘制，以避免后续有太多的修改。外形线最后务必将节点头尾相连封闭起来，这样才能成为一块体，可供填上色彩或渐变之用。

初学者通常无法一次就画出正确的外形线，此时可以利用造形工具(shape tool)点选任一节点，调整节点之曲率控制杆，或按鼠标右键之节点编辑工具，运用新增(add)、删除(delete)、到直线(to line)、到曲线(to curve)、尖角(cusp)、平滑(smooth)、相对称(symmetrical)等七种方式作微调(如图1左)，为使贝兹工具(bezier tool)画出的线条能够工整，可由画面标尺(ruler)部份以鼠标拖曳拉出引导线(guideline)以对齐，或在画线时按键盘之Ctrl键以准确画出垂直与水平的线条。

此部份需透过密集的练习以掌握线条的微妙变化，务必力求能够精确描绘外型，避免产生干涉的现象。

图1: 上图左曲线中的B点发生干涉的情况，以贝兹曲线绘制时，若形状转折变化极大时，会发生因曲率过大而使线条重叠的现象，此时可将B点的属性以节点编辑工具改为"尖角"，重新调整曲率控制杆即可修正如上图左下之结果。上图右为外形线描绘练习之案例，由几何到曲线、简单到复杂，绘图者需练习判断用何种方式能准确的建构出外框线。

外形线的绘制，最重要的是熟悉在何种形状时，应以何种节点属性与曲率控制使其平滑，并能使绘图过程有效率，以减少编修的时间，初学者可输入(import)一些图片或线稿，练习以贝兹曲线描图，以熟悉线条的控制(如图1右)。

3.渐变填色练习
渐变填色的控制是使产品产生立体感的重要因素，Coreldraw虽只提供直线 (Linear)、圆形(Radial)、圆锥(Conical)、方形(square)四种填色方式，但透过调整渐变中心点的"水平"、"垂直"位置与"旋转角度"，搭配"双色彩模式"或"自订渐变"模式，仍可搭配出各式各样的光影变化。

以图2为例，由左而右分别为圆形、直线、直线与单色、锥形之填色效果，上下两者的差异在于调整渐变的变化方式，可呈现不同的质感，方形填色因极少用到，故未举例说明。若设计者具备较佳的素描能力，一般很快就能了解其意义，并能表现出适当的立体感。此处诀窍在于调配出的渐变，可在对话框的"预设效果"中命名，并按"+"存盘，可供后续需要时共享或修改。

图2: 不同渐变填色的方法，此练习用以掌握渐变填色技巧。

4.调和工具使用

调和工具(Interactive Blend Tool)的运用是能绘制出精致而逼真产品精描图的核心关键，其变化亦最为复杂。其有三种用途，一为制作产品图外形的R角，其次可用来表现面的弧度变化，此外其亦可用于数组复制，以绘制如散热孔或网孔等复杂的小细节。

用途一: 制作R角，利用交互式调和工具，使图3左不同颜色的两区块间产生形状及颜色调和，使其产生如骰子般的R角。如图3中，调和内定为20层，之后以选取工具选取调和过程之图形，使其外框不填色(较快速的方式为在色票"S" (不填色)按鼠标右键)，即可得到最右方类似骰子边缘R角般的光影变化。

此外需注意，进行调和的两图形，其节点数与相对位置需相同(故均以复制原图后缩放、调整节点及改色彩方式进行)，否则会发生调和不平顺或产生紊乱线条的情况。

图3: 运用调和工具制作R角之范例。形成R角效果的渐变，实际上是由二十个由深到浅的色块前后排列而成，如上图中之放大部分。

另以绘制金属杯为例(如图4)，此例结合渐变填色与调和技巧而成，图4左为完成图，图4中为各部份之拆解图，图4右则为色块线框。需注意基本上所有产品的零件都必需作R角调和，而杯子本体的上、下部份，则先以渐变填色，而后再以此渐变色块与底部的黑色块作调和。渐变色与调和工具的结合，是立体感光影绘制中最重要亦最常用到的技巧，绘图时必需相当熟悉这样的搭配方式。

图4: 结合渐变填色与调和工具之范例

用途二: 表现面的弧度变化，以绘制泳镜上视图为例，表现面的弧度变化(如图5)，产生的立体光影效果是由不同线框填色后调和而来，先前提到调和的两图形，其节点数与相对位置需相同，设计者在执行完"调和工具"后，若发现光影与所要的感觉不符，可用"造形工具"选取上、下图形中的任一节点作细部调整，以逐步调整出所要外形, 以确认光影是否合理。

有关图5中蛙镜之光影有一重要观念，若有三个对象A、B、C，可依序A与B作调和，而后B与C再作调和，在此例中眼罩与前镜面部份皆为三个对象调和而来，如此可产生更丰富而逼真的光影变化。

图5: 面的弧度变化之范例，特点在于眼罩与前镜面部份是由三个对象调和而来。

用途三: 数组复制(参照图6之例)，在设计如散热孔或繁复的花纹时，首先可由大圆至小圆作调和，之后设定调和过程的数量(此例数量为5)，而后选取调和过程图形，按鼠标右键先执行 "break调和群组apart"，之后再选取一次执行"解散群组"，确定所有圆都已各自独立后，再选取全部的圆"群组"起来，之后以此群组再复制，再作调和即可得图所示7x7之调和矩阵。

需注意一原则，执行调和的两物体必需均为单一群组且属性相同(即节点数与相对位置相似)，若群组内已内含另外的群组，会发现无法执行调和，此即在先前过程中，为何需先将调和后所有圆先炸开并解散群组的原因。

图6: 用调和工具以数组方式绘制圆孔之例

5.案例描图练习

在实务教学上，若已有前述基础概念，即可进一步以1:1案例描图方式进行练习。此部份以图7之Sanyo手机为例说明，初学者可在二小时内完成。

图7左上为扫描型录而来的手机原始图档，右上则为以coreldraw描图绘制而来之精描图，图中为过程中所绘各部份的分离图，图下方则为进行调和前之原始框线图形。

在开始以coreldraw进行描图前，第一步需先分析原始图档的光影变化(如手机本体最大面积处其实是用圆形填色，其它则多为直线填色+角度变化)，并规画好要拆解为多少对象，那些对象可直接镜射(mirror)复制，而后再由大而小，由本体到零件细节等依序分开绘制，若能有效率且依正确的程序进行，可将绘图时间再缩短一半以上。

图7: 描图练习-以手机为例

以2D软件来绘制3D效果，事实上是运用视觉概化的现象与错觉来欺骗(fake)观看者的双眼，就如分模线或此例中转轴线的效果，其实是以一条黑色与一条浅灰色线并排，并设定粗细为0.2mm，当以正常比例观看或打印出来时，其效果即极似分模线。

运用显示比例工具(zoom tool)可将图纸放大到很细微的地方作绘制，当恢复以原比例观看时，眼睛并无法一时分辨出差异，故乍看下会极为逼真。此外，色彩的部份亦为学习的重点，由于产品表面的颜色多端，绘图者可用滴管工具(Eyedropper tool)吸取原始图片最深与最浅的颜色，记住其RGB值，在渐变的自订填色中输入该数值，即可调配出极相似的色彩变化。

而放大画面作图与吸管上色的方式，是传统手绘无法做到的，因此即使手绘能力不佳，亦可利用此技巧来弥补技术能力上的缺憾，即使初学者亦能画出不错的精描图(参考图8至图10之学生作品，左方为原始扫描图文件，右方则为Coreldraw描图成果)。

而若想使绘出图形与原始图之间分不出真伪，绘图者除需详细的观察与考量到每一个光影或外形的细节，以取舍以何种方式最有效率的表达外，亦考验绘图者举一反三的能力，以运用有限的指令创作出无限的效果。

图8: 学生作品: 明志技术学院设三王籍

图9: 学生作品: 明志技术学院设三张钧祺

图10: 学生作品: 明志技术学院设三邬宗甫

6.无中生有产品设计

在进一步设计产品前，首先练习一个简单的案例，图11为四种按钮的侧视剖面图，请问你是否能以想象方式，用coreldraw画出其顶视图?

图11: 四种按钮之侧视剖面图

若已精熟渐变与调和技巧，再加上一点素描与空间能力，可绘出如图12的结果, 图12仅供参考，画法可能会因个人假设光线来源位置的不同而有差异，您亦可再思考如何表现按钮被"按下"的效果。

图12: 以coreldraw绘制图11中按钮之上视表现图

前述案例说明了无中生有设计的原则，即在绘制产品外观图时，必需能在假设的光影条件下，判断要以何种渐变与调和呈现。设计者本身除了需具备足够的素描能力与图学基础，以创造出逼真的光影变化与正确的三视图外。

还需加上丰富的想象力与对造形美学的判断，如此才能建构出具设计感的产品表现图，此部份亦是成为一位成熟的设计师所需具备的关键能力。所需学习的时间因人而异，设计者仍需多观察、多练习，才能随心所欲的掌控。

以Coreldraw无中生有来绘制产品图，一般是以正投影视图方式表现，透视图则因光影过于复杂，并不建议用此软件绘制。此部份有二个小诀窍，一是绘制有R角方块的方法，首先以几何工具画出一个方块，接着点选造形工具(shape tool)后，选取方块四个角中的任一个角，拖曳后会发现自动产生R角，且依拖曳的距离会产生不同尺寸的半径，若原为正方形，则托曳到最后会变成圆形。

接着将此导圆角后的对象"转换为曲线"，之后即可依第一阶段所提的节点编辑工具修改出所需的外形。需注意在无中生有绘图时，线条的垂直、水平、弧度与导角需工整、该对齐的部份要排列整齐(尤其是左右或上下对称的部分)。

此外，有关如何上色并进行色彩计画的方式，与前述案例描图有很大的不同，在无中生有绘制过程中，需全部以灰阶(即黑色到白色间的256阶)方式处理填色、渐变与调和，当整体造形完成后，再描绘需要上色部份之外框，填上所需的颜色后，将该色块图层移至最上层，而后以滤镜(lens)工具，设定该色块的效果为"增加颜色"(Add color)或"透明度" (Transparency)，如此即可调配出所需的外形主要产品色系，并能很方便的修改颜色以进行色彩计画。

否则若一开始即已设定色彩，要更换产品颜色即需一个个重新调整上色，这点差异设计者需格外注意。

运用Coreldraw进行无中生有的设计，在业界已运用许久，一般设计案中针对产品的外观设计，常有许多限制条件，如需配合已有零件、包覆现有机心与装置、面板或外形改款等，此时以coreldraw绘制产品表现图即相当合适，可依产品大小在计算机中设定不同尺寸图纸(A0~A4)绘制，并透过标尺使其尺寸准确, 并输出1:1图面。

虽然在coreldraw中亦可标示尺寸, 但因1:1图面已表达出CAD尺寸图的特性，故可交由机构设计人员将图档衬于背景, 依此建立参数式实体模型以进行后阶段的模具开发。

一旦熟悉以Coreldraw设计后，你将发现这样的设计创作方式会变得又快又有效率。笔者认为对于绝大多数"盒型"产品而言，在概念发展时会比3D造形速度更快，也更能表现真正产品细微的特征与质感，此外，别忽略产品是由形(form)、色(color)、质感(texture) 三要素所构成(林崇宏，1998)，陈昶荣等(1997)亦汇整出产品造形判别词汇可分为形状、线条、质感、色彩四类。

笔者观察若学生一开始就直接学习3D造形软件如Rhino、3Dmax来绘制产品图时，因为塑形方便，反而极易忽略如比例、质感、图案贴图及表面细小的凹突变化，以及分模线、拔模斜度、Logo贴图与纹路等的影响，或忽略了接口规画排列之按钮等，但这些要素却常是产品设计优劣的关键。

这样的情况就如机壳设计，看来似乎都是方块体，但能使产品形成差异化的重点，却常是接口安排、质感、色彩等非常细腻的部份。这些问题在用coreldraw绘制时将变得更为单纯且更有效率。

图13至图15为明志技术学院设计服务中心，协助Hp公司设计开发小型不断电系统(UPS)机壳之设计成果，以此三图为例，乍看下均为方体，使其差异化的因素即在于前述之细节变化，以手绘线条或3D方式设计，是很难在一开始构思时就清楚表现出造形特色的。

图13: 设计案例(一)

图14: 设计案例(二)

图15: 设计案例(三)

7. 结论与建议

生手与专家的差异，最直接的反应即是对于不同事物的观察与视觉感性的能力(陈俊智，郭小菁，2001)，而此现象在比较本文中案例描图与无中生有设计两者时将格外明显，建议初学者能多观察、多练习以体会其中奥妙，而以coreldraw所绘的向量对象(如图形、按钮、屏幕、插头…等)，透过与Flash软件的搭配，可以仿真出相当逼真的互动效果，可作为接口测试用途，即使尚未制作出实体的产品，也可供客户确认与进行产品实验及测试，对设计创新性产品有相当大的帮助，亦可将表现技法课程所学之观念，延伸与应用至互动设计、虚拟设计与人机接口仿真等范畴，对于进阶研究有相当大的助益。

以上就是如何运用CDR在产品设计中的表现技法详解，希望这篇教程对大家有所帮助！