当前位置: 首页 > 设计资讯 > 设计教程 > 正文

The Viper 3D播放器界面设计

2006-07-20 17757 0

利用Cinema4D强大的渲染效果和简洁实用的操作,设计出富有个性的3D播放器界面。

素材下载 Cinema4D源文件 Photoshop源文件 时间 5-7小时

  由于数字娱乐已经慢慢进入每个人的生活中。人们使用电脑的同时也开始离不开各式各样的音乐播放器,从Winamp 开始到Media Player、iTunes各式各样的播放器开始出现在大家的桌面上。这时人们也开始对播放器动起了脑筋,为什么播放器不能像手机一样换成有个性的外壳呢?于是播放器也开始逐渐有了自己的个性。尤其是播放器Skin(皮肤)的引入。也让设计师们有了更多表现自我的机会。同时电影厂商和游戏厂商也当然不会放过这样的机会。将这些任务交付给专业界面设计师们来设计出,以电影或游戏内容为主题或风格的播放器界面。由此富有特色的播放器也成为了厂商们绝佳的宣传手段。同时一套壁纸、图标、播放器就成为当今电影大作官方网站必备的资源。

  从Winamp最早的平板Skin界面开始,到现在的Windows媒体播放器Media Player 支持脚本的高性能Skin界面,厂商们提供了表现力越来越丰富的引擎。于是设计师们也慢慢的从2D界面开始转向互动的3D界面的设计。早期2D播放器界面设计工具主要以Photoshop为主,而从3D播放器界面开始除了可以利用Photoshop设计伪3D界面以外各种3D设计软件也慢慢进入界面设计工具的行列中。3D设计软件能做到很多伪3D中达不到的效果特殊的渲染,真实的环境反射,玻璃或液体的效果,特别是动画的表现更是伪3D所不能做到的。

  这次作品采用的工具是Maxon的Cinema4D,Cinema4D虽然不及3DMax、Maya这样大型3D软件的强大。但之所以采用它的原因是因为它拥有优秀的渲染功能,并且其光线追踪算法速度不仅快,而且效果也很不错。早期版本Cinema4D的建模功能较弱,但是在R8 R9 的版本中也已经得到了很大的提升。同时它支持PC与Mac平台。因此对于3D界面设计绝对是绰绰有余的。当然除了Cinema4D Photoshop也是必不可少的后期处理工具。因为很多界面按钮文字还是必须通过Photoshop来进行后处理的。当你设计完成后,正式开始进入制作Skin图片的工序时就更离不开Photoshop了。本教程采用软件版本为Cinema4D R9 和 Photoshop CS,学习前需要对这两款软件的操作有基本的了解。

 

Step 1

首先调整你的Render>Render Settings(Ctrl+B)。 修改General> Antialiasing 为Best ,Output>Resolution 为800x600,Save>Format 为 QuickTime PNG,Antialiasing>Min/Max Level 4x4 4x4。这些设定主要是针对渲染的品质。

 

Step 2

先放置一台摄像机。Object>Scene>Target Camera 调整Camera 位置Position x=0 y=-53 z=741 ,后Apply应用。同时调整Camera.Target的位置 Position x=0 y=-150 z=0 。后设置子窗口菜单中的Camera>Scene Camera>为刚才建立的Camera。

 

Step 3

接下来放置一个天空 Object>Scene>Sky 。主要是为使用HDR光源而建立。

 

Step 4

接下来我们采用多边形进行半边蛇身建模。并使用Object>Modeling>Symmetry对称工具进行复制另外半边的模型。而蛇的牙齿部分的制作我采用选择一个面后使用Structure>Matrix Extrude 进行制作。

 

Step 5

基本形状已经出来后我们在每个多边形上放置 Object>NURBS>HyperNURBS使得蛇身更加得圆滑。这时再进行细节调整以及添加上蛇眼。这样基本上蛇的造型部分已经完成。

 

Step 6

这时我们开始制作播放器显示面板的部分。通过Objects>Primitive>Sphere放入两个球,分别为 x=0 y=-346 z=423 Z=0.4 Radius=230 Segments=64 ,x=0 y=-347 z=424 Z=0.4 Radius=233 Segments=64

 

Step 7

现在模型部分就剩下周围的播放控制按钮了。我们采用 Object>Modeling>Array 来进行对小球的复制与排列。首先放置一个半径40,段数为20的小球。然后Array Object 设置为 x=0 y=-273 z=330 Radius=400 Copies=7 其他都为0。这时我们就得到了围绕在周围的一圈小球。

 

Step 8

下一步就是光源的添加,光源1 位置x=30 y=1135 z=4322,光源2 位置x=-15 y=-1690 z=-500,光源3位置 x=-15 y=555 z=-3825。当然你可以根据需要添加上带色彩的光源。

 

Step 9

现在模型和光源都已经安排好了。最后就剩下材质的制作。第一个制作的HDRI环境光源。建立一个材质只选择 Luminance亮度。我们Texture选择上ststefan_innen2.hdr ,Blur Offset 设置为13%,Blur Scale设置为-83%,Mix Mode 设置为Multiply。并将这个材质放置到Sky天空的模型上。

 

为什么使用HDRI
使用HDRI能结合radiosity光能传递技术可获得非常自然并且真实的光照效果。而HDRI所产生的反射效果也是非常真实的,它们在反光物体表面所产生的反射效果要明显强于普通纹理所生的反射效果。因为这次制作的准备渲染的模型采用高反光金属。因此简单的说,HDRI拥有比普通RGB格式图像(仅8bit的亮度范围)更大的亮度范围。标准的8bit RGB图像最大亮度是值是255/255/255,如果用这样的图像结合光能传递照明一个场景的话,即使是最亮的白色也不足以表现真实光源照明来模拟真实世界中的效果,因此为了不让渲染结果看上去会平淡无味,我们就必须采用HDRI来作为环境光源。Cinema4D R8.1 开始支持HDRI,详细信息可以查询http://www.maxon.net

 

Step 10

下面我们设置金属蛇身以及金属球的材质,将Color颜色>Color颜色>设置为RGB全为黑色,将Color颜色>Brightness亮度设置为80%。Reflection反射>Brightness亮度设置为50%。

 

Step 11

接下来设置的是蛇的牙齿材质,由于我们要让蛇的牙齿看起来更亮些。因此我们需要将Color颜色>Brightness亮度设置为0,Reflection反射>Brightness颜色设置为50%,Specular镜射设置为 Mode=Plastic Width=90% Height=100% Falloff=1% Inner Width=82%。

 

Step 12

下面设置眼球的材质。我们采用红色作为眼球的色彩。将颜色Color设置为RGB 255 0 0 Brightness=80%,Reflection反射 6%,Specular镜射 Mode = Plastic Width=65% Height=16% Falloff=50% Inner Width=0%,同时为了增加蛇眼睛的红光,我们将Glow光晕设置为 Inner Strength=100%,Out Strength=300%,Radius=5,Random=0%,Frequency=1。

 

Step 13

最后我们进行设置的是播放器中显示面板材质。我们要得到的是透明且带有点浑浊的效果。首先我们在材质菜单中创建一个File>Shader>Cheen。然后按照上面图片的设置进行设置。

 

Step 14

我们把之前设置好的五种材质放置在对应的模型上就大功完成了。现在你可以调整Camera.Tager来调整镜头角度。找到合适的位置后我们就可以开始进行渲染了。使用Shift + R。如果需要更大尺寸的Size。我们可以通过调整Render Settings里面的Output Resolution。

 

Step 15

通过几分钟的渲染。我们就得到了我们需要这个效果,是不是很棒啊?将你的图片保存成.PNG格式文件。这时Cinema4D的工作基本上结束了。准备好你的Photoshop ,我们要开始对毒蛇进行“纹身”了。

 

Step 16

首先在播放器面板上添加两层高光区域。提高整体的质感。

 

Step 17

第一层的制作方法是通过选择面板的橙色区域然后收缩选择范围填充黑白渐变。将图成设置为50%透明度,然后Blend Mode设置为Linear Dodge。添加Inner Glow 效果Screen 100% 。第二层范围比第一层稍小。Blend Mode设置为Screen模式。

 

Step 18

添加上波形图、歌曲名称以及播放时间文字。再添加上静音按钮、文件夹按钮、随机播放按钮、重复播放按钮。使用50%为普通模式按钮。

 

Step 19

首先在原来准备放入音量调节以及播放进度的位置上画出一个椭圆形的6像数的圈。接下来将选择区域放入一个新的通道层,然后去掉周围的部分。并使用黑色线条将原来的线条分出几段来。接下来将这个通道层使用Gaussian Blur 数值1.8。选择上这个选区,在图片上新建图层。设置为Screen模式透明度75%并填充上255 153 0的颜色。然后使用Levels色阶将上个通道调整为 64 1.00 1.28,我们就得到了清晰边缘的几个椭圆形的段。选择上这个选区,在图片上新建图层。设置为Color Doge模式透明度47%填充从上到下浅黄黄到纯白的过渡。添加上Vol.和Seek的文字后我们就剩下播放器的播放按钮了。

 

Step 20

利用刚才通道的方法,绘制出我们需要的操作按钮。分别需要最小化和关闭按钮以及歌曲列表、后退、播放、暂停、前进、EQ设置等。并添加上Inner Shadow以及Outer Glow等特效。在该层上再添加上另外一层比刚才图层小一圈的高光图层。使用Screen模式并填从上倒下白到黑的渐变。

 

Final

最后对画面上的一些细节进行调整。并为按钮制作出Normal(普通)、Over(鼠标移上)、Down(鼠标按下)、Disable(无效)四种不同的状态。后面的工作就是根据你说要制作成的播放器的类型的规范来进行制作。或者根据程序员的要求提供图片文件给与程序调用。


199
评论区(0)
正在加载评论...
相关推荐