欧美中文字幕在线播放_人妻无码免费的_中文日韩欧美州_无码av中文系列久久免费

當(dāng)前位置: 首頁 > 設(shè)計資訊 > 設(shè)計教程 > 正文

The Viper 3D播放器界面設(shè)計

2006-07-20 17909 0

利用Cinema4D強(qiáng)大的渲染效果和簡潔實用的操作,設(shè)計出富有個性的3D播放器界面。

素材下載 Cinema4D源文件 Photoshop源文件 時間 5-7小時

  由于數(shù)字娛樂已經(jīng)慢慢進(jìn)入每個人的生活中。人們使用電腦的同時也開始離不開各式各樣的音樂播放器,從Winamp 開始到Media Player、iTunes各式各樣的播放器開始出現(xiàn)在大家的桌面上。這時人們也開始對播放器動起了腦筋,為什么播放器不能像手機(jī)一樣換成有個性的外殼呢?于是播放器也開始逐漸有了自己的個性。尤其是播放器Skin(皮膚)的引入。也讓設(shè)計師們有了更多表現(xiàn)自我的機(jī)會。同時電影廠商和游戲廠商也當(dāng)然不會放過這樣的機(jī)會。將這些任務(wù)交付給專業(yè)界面設(shè)計師們來設(shè)計出,以電影或游戲內(nèi)容為主題或風(fēng)格的播放器界面。由此富有特色的播放器也成為了廠商們絕佳的宣傳手段。同時一套壁紙、圖標(biāo)、播放器就成為當(dāng)今電影大作官方網(wǎng)站必備的資源。

  從Winamp最早的平板Skin界面開始,到現(xiàn)在的Windows媒體播放器Media Player 支持腳本的高性能Skin界面,廠商們提供了表現(xiàn)力越來越豐富的引擎。于是設(shè)計師們也慢慢的從2D界面開始轉(zhuǎn)向互動的3D界面的設(shè)計。早期2D播放器界面設(shè)計工具主要以Photoshop為主,而從3D播放器界面開始除了可以利用Photoshop設(shè)計偽3D界面以外各種3D設(shè)計軟件也慢慢進(jìn)入界面設(shè)計工具的行列中。3D設(shè)計軟件能做到很多偽3D中達(dá)不到的效果特殊的渲染,真實的環(huán)境反射,玻璃或液體的效果,特別是動畫的表現(xiàn)更是偽3D所不能做到的。

  這次作品采用的工具是Maxon的Cinema4D,Cinema4D雖然不及3DMax、Maya這樣大型3D軟件的強(qiáng)大。但之所以采用它的原因是因為它擁有優(yōu)秀的渲染功能,并且其光線追蹤算法速度不僅快,而且效果也很不錯。早期版本Cinema4D的建模功能較弱,但是在R8 R9 的版本中也已經(jīng)得到了很大的提升。同時它支持PC與Mac平臺。因此對于3D界面設(shè)計絕對是綽綽有余的。當(dāng)然除了Cinema4D Photoshop也是必不可少的后期處理工具。因為很多界面按鈕文字還是必須通過Photoshop來進(jìn)行后處理的。當(dāng)你設(shè)計完成后,正式開始進(jìn)入制作Skin圖片的工序時就更離不開Photoshop了。本教程采用軟件版本為Cinema4D R9 和 Photoshop CS,學(xué)習(xí)前需要對這兩款軟件的操作有基本的了解。

 

Step 1

首先調(diào)整你的Render>Render Settings(Ctrl+B)?!⌒薷腉eneral> Antialiasing 為Best ,Output>Resolution 為800x600,Save>Format 為 QuickTime PNG,Antialiasing>Min/Max Level 4x4 4x4。這些設(shè)定主要是針對渲染的品質(zhì)。

 

Step 2

先放置一臺攝像機(jī)。Object>Scene>Target Camera 調(diào)整Camera 位置Position x=0 y=-53 z=741 ,后Apply應(yīng)用。同時調(diào)整Camera.Target的位置 Position x=0 y=-150 z=0 。后設(shè)置子窗口菜單中的Camera>Scene Camera>為剛才建立的Camera。

 

Step 3

接下來放置一個天空 Object>Scene>Sky 。主要是為使用HDR光源而建立。

 

Step 4

接下來我們采用多邊形進(jìn)行半邊蛇身建模。并使用Object>Modeling>Symmetry對稱工具進(jìn)行復(fù)制另外半邊的模型。而蛇的牙齒部分的制作我采用選擇一個面后使用Structure>Matrix Extrude 進(jìn)行制作。

 

Step 5

基本形狀已經(jīng)出來后我們在每個多邊形上放置 Object>NURBS>HyperNURBS使得蛇身更加得圓滑。這時再進(jìn)行細(xì)節(jié)調(diào)整以及添加上蛇眼。這樣基本上蛇的造型部分已經(jīng)完成。

 

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

現(xiàn)在模型部分就剩下周圍的播放控制按鈕了。我們采用 Object>Modeling>Array 來進(jìn)行對小球的復(fù)制與排列。首先放置一個半徑40,段數(shù)為20的小球。然后Array Object 設(shè)置為 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。當(dāng)然你可以根據(jù)需要添加上帶色彩的光源。

 

Step 9

現(xiàn)在模型和光源都已經(jīng)安排好了。最后就剩下材質(zhì)的制作。第一個制作的HDRI環(huán)境光源。建立一個材質(zhì)只選擇 Luminance亮度。我們Texture選擇上ststefan_innen2.hdr ,Blur Offset 設(shè)置為13%,Blur Scale設(shè)置為-83%,Mix Mode 設(shè)置為Multiply。并將這個材質(zhì)放置到Sky天空的模型上。

 

為什么使用HDRI
使用HDRI能結(jié)合radiosity光能傳遞技術(shù)可獲得非常自然并且真實的光照效果。而HDRI所產(chǎn)生的反射效果也是非常真實的,它們在反光物體表面所產(chǎn)生的反射效果要明顯強(qiáng)于普通紋理所生的反射效果。因為這次制作的準(zhǔn)備渲染的模型采用高反光金屬。因此簡單的說,HDRI擁有比普通RGB格式圖像(僅8bit的亮度范圍)更大的亮度范圍。標(biāo)準(zhǔn)的8bit RGB圖像最大亮度是值是255/255/255,如果用這樣的圖像結(jié)合光能傳遞照明一個場景的話,即使是最亮的白色也不足以表現(xiàn)真實光源照明來模擬真實世界中的效果,因此為了不讓渲染結(jié)果看上去會平淡無味,我們就必須采用HDRI來作為環(huán)境光源。Cinema4D R8.1 開始支持HDRI,詳細(xì)信息可以查詢http://www.maxon.net。

 

Step 10

下面我們設(shè)置金屬蛇身以及金屬球的材質(zhì),將Color顏色>Color顏色>設(shè)置為RGB全為黑色,將Color顏色>Brightness亮度設(shè)置為80%。Reflection反射>Brightness亮度設(shè)置為50%。

 

Step 11

接下來設(shè)置的是蛇的牙齒材質(zhì),由于我們要讓蛇的牙齒看起來更亮些。因此我們需要將Color顏色>Brightness亮度設(shè)置為0,Reflection反射>Brightness顏色設(shè)置為50%,Specular鏡射設(shè)置為 Mode=Plastic Width=90% Height=100% Falloff=1% Inner Width=82%。

 

Step 12

下面設(shè)置眼球的材質(zhì)。我們采用紅色作為眼球的色彩。將顏色Color設(shè)置為RGB 255 0 0 Brightness=80%,Reflection反射 6%,Specular鏡射 Mode = Plastic Width=65% Height=16% Falloff=50% Inner Width=0%,同時為了增加蛇眼睛的紅光,我們將Glow光暈設(shè)置為 Inner Strength=100%,Out Strength=300%,Radius=5,Random=0%,F(xiàn)requency=1。

 

Step 13

最后我們進(jìn)行設(shè)置的是播放器中顯示面板材質(zhì)。我們要得到的是透明且?guī)в悬c渾濁的效果。首先我們在材質(zhì)菜單中創(chuàng)建一個File>Shader>Cheen。然后按照上面圖片的設(shè)置進(jìn)行設(shè)置。

 

Step 14

我們把之前設(shè)置好的五種材質(zhì)放置在對應(yīng)的模型上就大功完成了?,F(xiàn)在你可以調(diào)整Camera.Tager來調(diào)整鏡頭角度。找到合適的位置后我們就可以開始進(jìn)行渲染了。使用Shift + R。如果需要更大尺寸的Size。我們可以通過調(diào)整Render Settings里面的Output Resolution。

 

Step 15

通過幾分鐘的渲染。我們就得到了我們需要這個效果,是不是很棒啊?將你的圖片保存成.PNG格式文件。這時Cinema4D的工作基本上結(jié)束了。準(zhǔn)備好你的Photoshop ,我們要開始對毒蛇進(jìn)行“紋身”了。

 

Step 16

首先在播放器面板上添加兩層高光區(qū)域。提高整體的質(zhì)感。

 

Step 17

第一層的制作方法是通過選擇面板的橙色區(qū)域然后收縮選擇范圍填充黑白漸變。將圖成設(shè)置為50%透明度,然后Blend Mode設(shè)置為Linear Dodge。添加Inner Glow 效果Screen 100% 。第二層范圍比第一層稍小。Blend Mode設(shè)置為Screen模式。

 

Step 18

添加上波形圖、歌曲名稱以及播放時間文字。再添加上靜音按鈕、文件夾按鈕、隨機(jī)播放按鈕、重復(fù)播放按鈕。使用50%為普通模式按鈕。

 

Step 19

首先在原來準(zhǔn)備放入音量調(diào)節(jié)以及播放進(jìn)度的位置上畫出一個橢圓形的6像數(shù)的圈。接下來將選擇區(qū)域放入一個新的通道層,然后去掉周圍的部分。并使用黑色線條將原來的線條分出幾段來。接下來將這個通道層使用Gaussian Blur 數(shù)值1.8。選擇上這個選區(qū),在圖片上新建圖層。設(shè)置為Screen模式透明度75%并填充上255 153 0的顏色。然后使用Levels色階將上個通道調(diào)整為 64 1.00 1.28,我們就得到了清晰邊緣的幾個橢圓形的段。選擇上這個選區(qū),在圖片上新建圖層。設(shè)置為Color Doge模式透明度47%填充從上到下淺黃黃到純白的過渡。添加上Vol.和Seek的文字后我們就剩下播放器的播放按鈕了。

 

Step 20

利用剛才通道的方法,繪制出我們需要的操作按鈕。分別需要最小化和關(guān)閉按鈕以及歌曲列表、后退、播放、暫停、前進(jìn)、EQ設(shè)置等。并添加上Inner Shadow以及Outer Glow等特效。在該層上再添加上另外一層比剛才圖層小一圈的高光圖層。使用Screen模式并填從上倒下白到黑的漸變。

 

Final

最后對畫面上的一些細(xì)節(jié)進(jìn)行調(diào)整。并為按鈕制作出Normal(普通)、Over(鼠標(biāo)移上)、Down(鼠標(biāo)按下)、Disable(無效)四種不同的狀態(tài)。后面的工作就是根據(jù)你說要制作成的播放器的類型的規(guī)范來進(jìn)行制作?;蛘吒鶕?jù)程序員的要求提供圖片文件給與程序調(diào)用。


199
評論區(qū)(0)
正在加載評論...
相關(guān)推薦