先把最后的效果圖拋出來(lái)。
本教程主要使用Photoshop繪制立體感的科技圖形插畫,教程主要通過分解的方式來(lái)告訴大家如何完成效果,推薦給PS家園的朋友學(xué)習(xí),希望大家可以喜歡。
step1:那么,看見這張圖,先分解,即它是由哪幾個(gè)部分構(gòu)成的呢?
大背景
透視的背景線
立體圖
以及一些周邊的按鈕之類的。
step2:背景制作
直接選擇矩形工具,拉漸變。
接著選擇橢圓工具,畫一個(gè)填充白色的正圓,設(shè)置其羽化值。
好了,背景完成了。
step3:背景透視的線了,這個(gè)地方我用的方法比較笨,所以畫了好久好久好久好久~
先用矩形工具畫一個(gè)矩形,填充去掉,描邊2px
接著,根據(jù)需要的點(diǎn)配合鋼筆工具的加減錨點(diǎn)以及小白(直接選擇工具)進(jìn)行錨點(diǎn)的一對(duì)一修改。
然后用相同的方法拼出來(lái)一整個(gè)背景線條
畫好后,ctrl+G進(jìn)行編組,并復(fù)制一個(gè)組,命名背景-線,第一個(gè)組隱藏掉。(這個(gè)操作是備份,以防后續(xù)需要進(jìn)行修改)。
接著,在復(fù)制的組 背景-線 右鍵 – 轉(zhuǎn)為智能對(duì)象,并進(jìn)行顏色疊加。
接下來(lái)進(jìn)行透視操作,先快捷鍵ctrl+T,將圖旋轉(zhuǎn)45度,如下圖:
旋轉(zhuǎn)45°后,再次右鍵,選擇扭曲,并操作
那么,背景就完成了。
step4:立體的圖了,這個(gè)我們需要先把層分出來(lái),就跟剛剛對(duì)整個(gè)畫面分層是一樣的道理,先來(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)用立體感覺設(shè)計(jì)的圖,放在網(wǎng)頁(yè)上面,網(wǎng)站看起來(lái)就比較專業(yè)啦~
好了,教程到這里就完了。
最后,給大家安利一個(gè)立體像素圖片生成工具
》開發(fā)者:@pissang
》工具地址:pissang.github.io/voxelize-image
你看,這比剛刷完的廁所地板還要亮麗的效果,居然是一個(gè)在線工具一鍵生成的,完爆那些打開都要半天的專業(yè) 3D 軟件??!

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

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

比起 blingbling 的金屬質(zhì)感,這種畫風(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大神了:



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