下載吧 - 綠色安全的游戲和軟件下載中心

          軟件下載吧

          當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > ps cc教程:做一個立體的UI圖標

          ps cc教程:做一個立體的UI圖標

          時間:2024-03-07 08:38作者:下載吧人氣:27

          最終效果:

          ps cc教程:做一個立體的UI圖標

          提示:本教程所用PS版本為2014年6月下旬發布的最新 Photoshop CC 2014 ,老版本可能部分步驟無法實現,學習本教程前,務必下載最新版本

          本教程平臺為 Mac 系統,Windows下也可以看,步驟是一樣的

          1,新建畫布,參數如下

          ps cc教程:做一個立體的UI圖標

          2,新建兩圖層,填充顏色 #dcdcdc,分別命名為墻,地板

          ps cc教程:做一個立體的UI圖標

          3, 選擇圓角矩形工具,設置為形狀,半徑為52,然后畫一個300x300的圓角矩形,設置矩形顏色為純白,并放在畫布中央,將該圖層命名為 白板背景

          ps cc教程:做一個立體的UI圖標

          ps cc教程:做一個立體的UI圖標

          ps cc教程:做一個立體的UI圖標

          4,選擇鋼筆工具,選擇形狀,畫出紅布,顏色為: #ff0000 ,將該圖層命名為 紅布

          ps cc教程:做一個立體的UI圖標

          ps cc教程:做一個立體的UI圖標

          5,繼續用鋼筆工具畫出頭條和灰色橫線,頭條設置為純白,灰色橫線為 #dcdcdc,圖層分別命名為頭條,文字紋理

          ps cc教程:做一個立體的UI圖標

          ps cc教程:做一個立體的UI圖標

          6,最終的圖層應該是這樣的

          ps cc教程:做一個立體的UI圖標

          7,為了節省大家的時間,這一步我將源文件上傳了:http://pan.baidu.com/s/1qWPnfdi

          8,點擊窗口,選3D和屬性,讓這兩個面板顯示出來

          ps cc教程:做一個立體的UI圖標

          9,選擇頭條圖層,菜單欄選擇 3D-從所選路徑新建3D模型,如果提示是否切到3D視圖,選否

          ps cc教程:做一個立體的UI圖標

          ps cc教程:做一個立體的UI圖標

          10,對紅布,文字紋理,白板背景同樣做相同操作,操作完后如下

          ps cc教程:做一個立體的UI圖標

          11,選擇墻圖層,選擇3D-從圖層新建網格-明信片

          ps cc教程:做一個立體的UI圖標

          12,對地板也做相同操作

          ps cc教程:做一個立體的UI圖標

          13,選中這些剛才進行3D操作的圖層,選擇 3D - 合并3D圖層

          ps cc教程:做一個立體的UI圖標

          14,選擇3D窗口,選擇當前視圖,可以轉換視圖

          ps cc教程:做一個立體的UI圖標

          15,3D窗口里,選擇白板背景,雙擊白板背景前的星星圖標,進入屬性頁面

          ps cc教程:做一個立體的UI圖標

          16,凸出設為200

          ps cc教程:做一個立體的UI圖標

          17,選擇蓋子圖標,寬度設為6,等高線選擇半圓

          ps cc教程:做一個立體的UI圖標

          18,對紅布做相同操作,凸出為400,寬度3,等高線半圓

          19,頭條:凸出為50,寬度3,等高線保持默認

          20,文字紋理:和頭條一致

          21,雙擊墻前面的圖標,在坐標下,將x的旋轉設為90

          ps cc教程:做一個立體的UI圖標

          ps cc教程:做一個立體的UI圖標

          22,選中哪個圖層,哪個圖層就會有三軸桿,可以移動,旋轉和縮放

          ps cc教程:做一個立體的UI圖標

          23,通過三軸控件,調整各個圖層的位置,并且縮放調整大小,必要時通過調整當前視圖來判斷位置,最后調整成你想要的視圖,如下

          ps cc教程:做一個立體的UI圖標

          24,雙擊當前視圖前的圖標,在視圖下,選擇儲存,命名為 預渲染視圖

          ps cc教程:做一個立體的UI圖標

          ps cc教程:做一個立體的UI圖標

          25,此時,你可以在3D窗口看到預渲染視圖了,不管你怎么調整視圖,點擊預渲染視圖即可回到預設好的角度,方便臨時切換視圖

          ps cc教程:做一個立體的UI圖標

          26,雙擊白板背景前膨脹材質前面的圖標

          ps cc教程:做一個立體的UI圖標

          27,然后刪除漫射紋理,并使用下面的值。

          漫射顏色#DFDFDF,鏡像為#727272,發光#080808,環境#000000。

          閃亮等數值參考下圖

          ps cc教程:做一個立體的UI圖標

          28,如圖,新建材質并保存

          ps cc教程:做一個立體的UI圖標

          29,回到3D面板,選擇其余材質,雙擊前面的小圖標

          ps cc教程:做一個立體的UI圖標

          30,如圖,在最下方會看到你剛才儲存的材質,點擊即可應用上

          ps cc教程:做一個立體的UI圖標

          31,對頭條應用剛才的材質

          32,對文字紋理也應用剛才的材質,然后調整數值如下

          ps cc教程:做一個立體的UI圖標

          33,對紅布移去漫射紋理,“漫射”顏色#ff0000,鏡像#545454,發光#080808,環境#000000。其余具體數值設置如下。

          ps cc教程:做一個立體的UI圖標

          34,點擊凹凸文件夾圖標,并選擇“新建紋理”

          ps cc教程:做一個立體的UI圖標

          35,600的寬度和高度

          ps cc教程:做一個立體的UI圖標

          36,點擊凹凸紋理圖標,并選擇“編輯紋理”。

          ps cc教程:做一個立體的UI圖標

          37,這將打開紋理文件,添加雜色,數值如下,關閉之后保存一下,返回到原始文檔。

          ps cc教程:做一個立體的UI圖標

          ps cc教程:做一個立體的UI圖標

          38,再次單擊凹凸紋理圖標,然后選擇“編輯UV屬性”。

          ps cc教程:做一個立體的UI圖標

          39,設置如下

          ps cc教程:做一個立體的UI圖標

          40,儲存紋理,并應用相同紋理到紅布其它材質

          ps cc教程:做一個立體的UI圖標

          41,雙擊地板前的圖標,然后取消選中“投影”框,你需要對墻做同樣的事情。

          ps cc教程:做一個立體的UI圖標

          ps cc教程:做一個立體的UI圖標

          42,點擊地板,然后單擊“漫射紋理”圖標,并選擇“編輯紋理”。

          ps cc教程:做一個立體的UI圖標

          ps cc教程:做一個立體的UI圖標

          43,選張木紋圖放進去,最好把木紋圖縮小,再拼到一塊,我這就是縮小后,拼成一整塊的,然后儲存關閉,回到原來的文檔

          ps cc教程:做一個立體的UI圖標

          44,不透明度那里,移去紋理,然后其余的材料設置,如下圖所示。鏡像顏色#BBBBBB,發光#000000,環境#000000,并保存材質

          ps cc教程:做一個立體的UI圖標

          45,對墻應用相同的材質,然后改變閃亮值50和反射值10。

          ps cc教程:做一個立體的UI圖標

          46,點擊“無限光1 ”選項,改變角度,如下所示

          ps cc教程:做一個立體的UI圖標

          47,雙擊 無限光1 前面的圖標,然后改變其顏色#fefbef,強度60%,50%的柔和度。

          ps cc教程:做一個立體的UI圖標

          48,新建點光

          ps cc教程:做一個立體的UI圖標

          49,改變點光的顏色#fffef8,強度15%,取消勾選“陰影”框。

          為了使光線逐漸褪色,讓它的進一步擴散,看起來更加自然和逼真,檢查點光的光照衰減,并改變內徑值至79,外徑值868。

          位置放在頭條前面,使用三軸桿調整位置

          ps cc教程:做一個立體的UI圖標

          50,雙擊環境,數值如下

          ps cc教程:做一個立體的UI圖標

          ps cc教程:做一個立體的UI圖標

          51,渲染

          ps cc教程:做一個立體的UI圖標

          52,可能需要等待數十分鐘,根據電腦配置時間不等,最終效果如下

          ps cc教程:做一個立體的UI圖標

          希望我的教程你能夠喜歡~~~

          標簽3D,原創,自譯教程,Samice,設計教程

          相關下載

          查看所有評論+

          網友評論

          網友
          您的評論需要經過審核才能顯示

          公眾號

          主站蜘蛛池模板: 99久久精品午夜一区二区| 激情内射亚洲一区二区三区爱妻| 综合激情区视频一区视频二区| 亚洲一区二区三区久久| 精品一区精品二区制服 | 老熟妇高潮一区二区三区| 亚洲天堂一区二区三区四区| 极品人妻少妇一区二区三区| 无码人妻精品一区二区三区不卡| 日本一区二区三区免费高清在线| 色婷婷AV一区二区三区浪潮| 中文字幕精品一区二区日本| 韩国女主播一区二区| 国产精品被窝福利一区| 日韩内射美女人妻一区二区三区| 伊人久久一区二区三区无码| 一区二区三区电影网| 免费无码一区二区三区| 国产aⅴ一区二区| 亚洲一区二区三区夜色| 在线精品日韩一区二区三区| 国产一区二区内射最近更新| 中文字幕无线码一区二区| 国产成人一区在线不卡| 伊人色综合网一区二区三区 | 久久精品国产一区二区三区| 无码国产精成人午夜视频一区二区 | 中文字幕一区一区三区| 国产麻豆剧果冻传媒一区| 日本不卡一区二区视频a| 国产一区二区三区视频在线观看| 亚洲无线码一区二区三区| 日本精品3d动漫一区二区| 性色AV一区二区三区| 无码日韩精品一区二区人妻 | 性色AV一区二区三区无码| 东京热人妻无码一区二区av| 无码视频免费一区二三区| 久久久精品人妻一区二区三区四 | 无码精品人妻一区二区三区免费看| 成人免费视频一区二区三区|