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

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

 

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

大背景

透視的背景線

立體圖

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

step2：背景制作

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

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

好了，背景完成了。
 

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

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

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

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

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

接著，在復制的組 背景-線 右鍵 - 轉為智能對象，并進行顏色疊加。

接下來進行透視操作，先快捷鍵ctrl+T，將圖旋轉45度，如下圖：

旋轉45°后，再次右鍵，選擇扭曲，并操作

那么，背景就完成了。

 

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

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

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

剩下的就是疊加上去，凹進去的可以創建剪切蒙版，快捷鍵ctrl+alt+G

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

最后，成品啦!

附上一張應用立體感覺設計的圖，放在網頁上面，網站看起來就比較專業啦~

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



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


 

》開發者：@pissang

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

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

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

如果你覺得金屬感太強，可以試試把【roughness】參數調大，畫風馬上就突變了：

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

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

即使放大到局部，細節也不會丟失，反而更加豐富：

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

放大讓你們感受一下：

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

》案例參考

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

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

 

(責任編輯：極限)