先把最后的效果圖拋出來。

本教程主要使用Photoshop繪制立體感的科技圖形插畫，教程主要通過分解的方式來告訴大家如何完成效果，推薦給PS家園的朋友學(xué)習(xí)，希望大家可以喜歡。

step1:那么，看見這張圖，先分解，即它是由哪幾個部分構(gòu)成的呢?

大背景

透視的背景線

立體圖

以及一些周邊的按鈕之類的。

step2：背景制作

直接選擇矩形工具，拉漸變。

接著選擇橢圓工具，畫一個填充白色的正圓，設(shè)置其羽化值。

好了，背景完成了。
 

step3：背景透視的線了，這個地方我用的方法比較笨，所以畫了好久好久好久好久~

先用矩形工具畫一個矩形，填充去掉，描邊2px

接著，根據(jù)需要的點配合鋼筆工具的加減錨點以及小白(直接選擇工具)進(jìn)行錨點的一對一修改。

然后用相同的方法拼出來一整個背景線條

畫好后，ctrl+G進(jìn)行編組，并復(fù)制一個組，命名背景-線，第一個組隱藏掉。(這個操作是備份，以防后續(xù)需要進(jìn)行修改)。

接著，在復(fù)制的組 背景-線 右鍵 – 轉(zhuǎn)為智能對象，并進(jìn)行顏色疊加。

接下來進(jìn)行透視操作，先快捷鍵ctrl+T，將圖旋轉(zhuǎn)45度，如下圖：

旋轉(zhuǎn)45°后，再次右鍵，選擇扭曲，并操作

那么，背景就完成了。

step4：立體的圖了，這個我們需要先把層分出來，就跟剛剛對整個畫面分層是一樣的道理，先來看第一個。

將元素組合起來，就是模型01的樣式了。

接下來看一下有光的效果的是拆分。

剩下的就是疊加上去，凹進(jìn)去的可以創(chuàng)建剪切蒙版，快捷鍵ctrl+alt+G

等幾個圖形都制作完畢后，就進(jìn)行一下整體的調(diào)節(jié)，添加一些周邊的東西。剩下還有一個按鈕，疊加了兩層，原本考慮直接用內(nèi)陰影，效果不理想，于是就分兩層來做了。

最后，成品啦!

附上一張應(yīng)用立體感覺設(shè)計的圖，放在網(wǎng)頁上面，網(wǎng)站看起來就比較專業(yè)啦~

好了，教程到這里就完了。

最后，給大家安利一個立體像素圖片生成工具

》開發(fā)者：@pissang

》工具地址：pissang.github.io/voxelize-image

你看，這比剛刷完的廁所地板還要亮麗的效果，居然是一個在線工具一鍵生成的，完爆那些打開都要半天的專業(yè) 3D 軟件??！

Voxelize Image 還提供超多參數(shù)配置，但個人用得比較多的是金屬材質(zhì)選項：

如果你覺得金屬感太強(qiáng)，可以試試把【roughness】參數(shù)調(diào)大，畫風(fēng)馬上就突變了：

比起 blingbling 的金屬質(zhì)感，這種畫風(fēng)在日常設(shè)計中更常用，比如，我把一張招聘海報拖拽進(jìn)來，一秒鐘就生成了一張3D立體字海報了：

放大看看細(xì)節(jié)，少了金屬反光的刺眼，多了幾分樸實的像素感：

即使放大到局部，細(xì)節(jié)也不會丟失，反而更加豐富：

如果你導(dǎo)入的是一張色彩豐富的圖片，層次感就更加鮮明了：

放大讓你們感受一下：

再換個8倍鏡，一張抽象的背景素材秒 get：

》案例參考

現(xiàn)在你還擔(dān)心自己的配圖不夠酷炫嗎？我們都能冒充3D大神了：

最后的最后，小編想說，我們站長大大還有一個3D相關(guān)的網(wǎng)站。www.cgahz.com  如果你對3D這塊感興趣就訪問一下看，說不定有意外收獲。