先把最后的效果圖拋出來(lái)。

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

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

大背景

透視的背景線(xiàn)

立體圖

以及一些周邊的按鈕之類(lèi)的。

step2：背景制作

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

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

好了，背景完成了。
 

step3：背景透視的線(xiàn)了，這個(gè)地方我用的方法比較笨，所以畫(huà)了好久好久好久好久~

先用矩形工具畫(huà)一個(gè)矩形，填充去掉，描邊2px

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

然后用相同的方法拼出來(lái)一整個(gè)背景線(xiàn)條

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

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

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

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

那么，背景就完成了。

step4：立體的圖了，這個(gè)我們需要先把層分出來(lái)，就跟剛剛對(duì)整個(gè)畫(huà)面分層是一樣的道理，先來(lái)看第一個(gè)。

將元素組合起來(lái)，就是模型01的樣式了。

接下來(lái)看一下有光的效果的是拆分。

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

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

最后，成品啦!

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

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

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

》開(kāi)發(fā)者：@pissang

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

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

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

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

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

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

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

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

放大讓你們感受一下：

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

》案例參考

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

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