photoshop剪切蒙板

更多文章详见：www.ioopa.cn

今天花了点时间讲游戏网站的设计制作，主要讲了两种风格，都是做一些3D游戏的网站设计方式，一种是相框立体质感表现；另一种是质感压底空间的表现；

下面的这个是我上课的时候给学生的现场设计制作的，用了一个小时左右作的，用的是第二种方法，这种游戏类型的flash网站就是处理质感，一个小小的按钮就要绘画很久，一个质感的表现用的方法就很多，但是效果要和画面结合，有很多初学者就是简单的点击几下鼠标就出来了，那都是不对，你能用简单的方法做出别人做不出的效果，而且很酷炫这才是高手，而初学者用简单的方法往往做出的是幼稚和与整体画面不伦不类的效果。我以前讲过很多这样的例子，所以希望想学习flash网站设计的初学者们，想做好设计，那就做好你的细节吧，一个不关注细节的设计者不会成为优秀的设计师的，如果你在细节上多留意，多总结，多思考，多练习，剩下的就是版式位置和效果了，看看吧！仅供参考！

游戏网站的设计制作

今天讲的汽车网站设计方法中的第一种方法，居中的版式相对向背的图片方法的表现方法，强化速度的质感表现和空间的表现方式。

淘宝光盘订购：

新科海名师视频课程－网页设计（Flash＋Div＋CSS）视频课程光盘 一口价 10.00 元

《中科院DIV+CSS布局网站视频教程》

    本视频为中科院新科海学校出品,马学犇老师主讲.更多信息请访问网 站:http://www.jobedu.com.cn/,咨询QQ750059,903367690,电 话:010-82622282,010-82622285.院校合作:010-82608892.

    这些是I35班同学们学习过程中的练习作品，之所以将这些作品放到网站的头条，只是一个理由：我感慨于他们学习进步之神速。5月18日开课，7月10日结课（共8周）。这些作品来自他们第5周到第6周的努力，这一个多月时间同一个人的一生相比，肯定算是短暂的，但我想这8周，已经成为他们人生转变的开始。

    I35班的同学们，加油！

导言：

这是一篇比较基础的展UV教程，作者通过实例来讲解3ds Max uvw展开修改器的使用方法。

第一步

首先，打开一个练习场景“空中预警机1.max”（这事小弟平时的练习做的不好献丑了）。（图01）

图01

第二步

这里我们拿机翼来举例子，隐藏除机翼意外的其他模型。（图02）

图02

第三步

给机翼一个空白材质。（图03）

图03

第四步

下面开始正题了，选择模型，然后给模型一个修改器，名称为“uvw展开”。（图04）

图04

第五步

然后编辑uvw展开，利用内置功能将贴图修改成如图所示。（图05）

图05

第六步

这时模型本身具有了材质属性和uvw展开修改器。然后进入“工具”面板，然后新建一个选项。（图06）

图06

第七步

将按钮数“10”改为”11”，之后将“Texporter”拖拽到空白工具条中。单击“确定”完成操作。（图07）

图07

第八步

然后选择模型，点击“工具”菜单下的“Texporter”键，就会出现如下菜单。（图08）

图08

第九步

上面的Image Size项目一看就知道了是设置贴图大小的；第二项uvw Channel，意思应该是uvw频道，那么他说的是导出贴图的形式。一共两种map贴图模式和vertex color顶点着色模式。一般我们都用默认设置就可以。经常被修改的一般就只有贴图大小哪一项。还有就是pick object选择物体。也就是选择模型。之后我们会得到这样一张贴图，然后保存它到你的硬盘。（图09、10）

图09

图10

第十步

之后，我们打开max材质编辑器。将机翼的材质打开。给“漫反射颜色”选项一个贴图。贴图为刚才导出的uvw展开贴图。（图11）

图11

第十一步

然后打开Adobe Photoshop，编辑刚才导出存放在硬盘中的“机翼.Jpg”。因个人追求效果不同，效果由个人而定。（图12）

图12

贴图的完成效果。（图13、14）

图13

图14

这样的好处，是你可以一边编辑贴图，一边在模型上看到实时的贴图变化。以上为方法一的整个操作方法！

方法二 针对已有完美贴图者

第十二步

打开练习“屋脊.max”。（图15）

图15

第十三步

这已经是一个完整的模型了，那么我们需要贴图如图。（图16）

图16

第十四步

需要的是虚线部分，而照片有透视。虽然模型是照做的难免会有出入。直接给贴图是很不理智的。所以我们开始如下操作：首先，同样给模型一个空白材质球。并赋予事先准备好的材质。但是我们发现他并不能够正确的显示材质效果。（图17）

图17

第十五步

这时我们给模型一个“uvw展开”。（图18）

图18

第十六步

点击“参数”卷标下的“编辑”按钮。选择“面”级别，之后点击“贴图→展平贴图”在点击“选项”按钮，将自定义大小勾选去掉。在到上面找到“CheckerPatten”下拉菜单，选择我们要显示出来的贴图。（图19）

图19

第十七步

这时没有意外的话就会出现我们要的贴图了。我们在“编辑uvw”里对单片的模型进行旋转 缩放 移动 等操作，对模型和贴图进行对点。完成效果如图(非渲染效果)。（图20）

图20

图21

好了就说这么多其实对于“uvw贴图”使用方法和涉及领域还有很多，这里就不逐一介绍了。

导言：

这是我应火星时代的朋友邀请，根据我的练习作品来写的一篇卡通类的理发店制作教程，整个作品软件主要使用Maya以及PhotoShop完成。

作品心得：
这个作品本身对于我来说是一个新的尝试，之前我没有做过类似的这种卡通作品。在以往的工作还是练习当中都是围绕着角色进行的。对于刚起步的的朋友来说下面的这两点应该会对你们很有帮助。
1.首先是对于“看”的理解。多看脑子里就会有东西，掌握了这些积累的数据在自己创作的时候就会有灵感，在看到别人的作品时也不会妄下结论。
2.其次是建立自己的一个资料库。这当中包含里很多东西，比如模型库、材质库等等。这对于个人想要去完成一个复杂的作品时就不会一筹莫展了。

制作流程：

这个作品没有一个复杂的制作流程，比较符合大众化，都是按部就班一步一步的去完成。（图01）

图01

关于设计：
这方面我不想谈太多，因为我本身对于设计也不是很在行，在工作中也 都是按照已经设定好的效果图去完成任务。而卡通模型在比例上相对是有一定的夸张，我们只需要注意夸张的这部分，把握住整体的感觉是最为重要。当然卡通场景 还要给人以亲和力，在体现主体的同时略显夸张。（图02）

图02

第一步 建模

在整个作品中一共有6个建筑模型，而主体建筑的细节应该是最多的，这样才能突出主体。之后还可以通过贴图进一步体现细节。

建筑模型使用Box加工而成，主要是加线在断开所需要的面。这样在UV和材质方面都会更好的进行工作。（图03）

图03

不管是做房子还是做装饰物品其实都像是在搭积木，利用提供的形状搭建或组合出一个物品。当然如果我们有一个模型库的话一定要充分利用把相似的一个或者某部分加工到我们自己需要的场景里面。（图04）

图04

还有一些物体我们是需要用Surfaces来去完成，然后不用去再转成Poly直接给予材质。其中电线以及管道等我是这样去完成的。在这里我还需要 说明一点的就是截止到maya2010的版本基本上面数超过100万，场景观察起来就会非常缓慢，我的机器配置还算可以4个CPUQ9400，4G内存， 显卡9800GTX+。同样会出现卡机的现象，但是这种现象在maya2011中已经得到解决，Viewport 2.0也称视窗2.0大家可以试试他的功能，相信会给你一个惊喜。（图05）

图05

第二步 材质

UV是用Maya拆分的，基本上都是自动映射，非常方便快捷。通常我常用的是UF3D来拆分UV，但是用插件来拆分的话也是有特定的需要的，有一些 物体用插件来拆分的话反而会浪费掉更多的时间。输出的UV基本上都是2048X2048，当然有一些不需要这么大的贴图，到时我们可以在PS中去修改贴图 的尺寸。（图06）

图06

材质的选择可以用Blinn，Filter Type过滤器关掉，这样在渲染的时候能够把贴图渲染的更清楚一些。Diffuse改为1。有的地方我还做了几张法线贴图来强化一些细节，我不得不说凹凸贴图我已经很久没有再用过。（图07、08）

图07

图08

Maya本身自带的节点可以创造出来很多的材质，比如做一个苹果的话完全可以不用手绘画贴图用maya自带的节点就能做到非常逼真的效果，但是这种 效果往往需要我们花费大量时间去研究去熟悉每一个节点还有多的数不胜数的属性，在这里如果有兴趣的朋友可以好好去研究研究，而我还是比较喜欢传统的材质方 式。（图09）

图09

金属的材质调节很简单只需要一张环境反射贴图，然后把高光颜色反射等数值拉到最大，再把材质球颜色改为黑色就OK。之后可以再把这个材质球复制一个改一下Color的颜色给予场景中的灯罩以及金属管道。这种材质也可以用到一些字体上效果也是很不错的。

如果我们辛辛苦苦调节出来一种比较满意的材质，而这种材质调节起来又比较麻烦，那真的不妨去创建一个maya材质库单独把调节好的材质球导出，还有不要忘记保存一个快照对应材质球以后方便查找，谁又能保证以后我们能把各式各样的材质调节方法记在脑子里。（图10）

图10

场景中的一些装饰品我则采用直接赋予单色材质球，只要把握住整体的颜色走势不要形成强烈的对比这样就能较好的融合到场景当中。

第三步 灯光

这个场景是用MR自带的天空模拟和太阳光模拟，所以场景中我没有在打其他的灯光。如果在打上其他灯光就会破坏掉模拟的太阳光，而在场景中如果非要去另外在打光，也只有是在建筑内部打光，微微照亮内部的环境。（图11）

图11

如果用默认渲染器外加模拟全局光插件，效果应该没有MR模拟出来的效果好。在渲染时间上也会大于MR。（图12）

图12

第四步 渲染

用Mental ray渲染出来的效果相对来说比较理想，当然这其中花掉我很多测试的时间。可能你想象不到在最初的设计中这幅画面五颜六色没有突出一个亮点，后来真的感觉 是太花了我就把周围改成了灰色调。而且我还尝试了各种阴影投射的位置，最后把环境定位在太阳落山的时间范围之间。（图13）

图13

渲染设置具体参数如下（仅供参考）。（图14）

图14

通过以上几大部分的制作在Maya中的工作就结束了。其中在材质和渲染上我花费的时间比较多，这张图我用了10分钟的时间渲染出来，在制作过程中如 果有些材质需要改动我们可以通过Render Region命令框渲出来这样就会节省了很多的时间，也不必每次改动都花费10分钟甚至更多的时间来看效果。

第五步 合成

合成在PhotoShop中完成，首先我在材质库中找到一张卡通一点的Sky背景。感觉色调比较柔和能较好的跟场景融合到一起。（图15）

图15

之后把背景叠到场景下面的一层，但是感觉还是没有融合的很好。（图16）

图16

在PhotoShop中我们针对这两层调节一下色彩平衡以及对比度，对比度不要需要太强。然后加一个照片滤镜（加温滤镜85）。（图17、18）

图17

图18

最后补充一点，本身我没有分层渲染，但是细节上感觉很模糊，所以我单独渲染了一张OCC的效果图在Ps中叠加上。这样就会显得层次更鲜明一些。（图19）

图19

作品到这里基本上就完成了，在这之后我打算做一个次时代角色的作品，感觉现在次时代已经成为了主流，希望到时能在这里和大家一起分享。（图20）

图20

导言：

在这篇教程中，作者讲解了如何用Maya渲染超大图的方法，教程很简单，但却非常有用，希望能给大家带来帮助。

教程资源：

betch的命令解释：/upimg/soft/Help_Batch.rar

渲染大图的工具：/upimg/soft/batch_Renderlarge_StepByStep.rar

betch的命令解释Maya默认可以渲的图是8K，也就是8192×8192，可是那是硬件完全满足的情况下，多数时候Maya对于大图的渲染会 直接放弃。要么是内存的不够；要么是计算量的过大。还好Maya提供了我们可以渲染大图的可能，就是切块渲染；原理是将一张图分成几块来渲，最后我们在后 期里合成一张足够大的图，接下来，让我来举例说明。

第一步

一张图的横向是x象素，竖向是y象素；Maya分块的原理是<left,right,bottom,top>；我们必须给出四个整数数值，分块才能进行下去；下图（864×480）的实例，我们来分成四块来渲染。（图01）

图01

第二步

第一块的图像是：
left == 0
right == 864/2-1
bottom == 480/2-1
top == 480-1

注意：-1的原因是象素是从0开始的，比如一个640×480的图，x象素是从0～639。y象素是从0～479。（图02）

图02

第三步

接下来我们要做的是用命令渲染来实现分块的办法。（图03）

-reg int int int int Set sub-region pixel boundary of the final image <left, right, bottom, top>
这是betch help的原文，-reg这个参数是要有4个整数来规定图像的边缘。另外我写的一个小小的工具方便大家查询betch的命令解释。

图03

第四步

一个完整的渲染命令脚本应该这样写：

render -x 864 -y 480 -reg <left,right,bottom,top> -im <输出文件名> -r <渲染器> -rd <输出目录> -proj <工程目录> <文件>

顺便也发布自己写的一个专用渲染大图的工具，默认只分为4块，一步一步的输入数值就可以了；希望大家能够喜欢！（图04、05、06、07、08）

图04

图05

图06

图07

图08