如何做出有厚度的 APP 界面圖片?

作者:
分類(lèi): 教程
2016-02-22
11238


舉個(gè)栗子:

假設(shè),你要做一個(gè)5S的尺寸的效果展現(xiàn)圖。

步驟:

1、新建一個(gè)畫(huà)布尺寸為:640x1136

Image title

然后保存為,隨便命名如:5S效果圖模板

Image title

2、再新建一個(gè)畫(huà)布,隨便命名如:效果圖展現(xiàn)Image title

尺寸隨意,可以大點(diǎn),自己看情況吧。
3、將剛才保存的那個(gè)5S效果圖模板.psd拖到這個(gè)畫(huà)布中Image title

command(ctrl)+T變換到合適的尺寸,傾斜到合適的透視效果。

Image title

4、然后雙擊"5S效果圖模板"這個(gè)圖層

Image title

這就是智能對(duì)象的好處。
跳到這個(gè)畫(huà)面后

Image title

拖入你想要做的界面:

Image title

圖片來(lái)自dribbble:Dribbble - GIF for the Timeline App by Sergey Valiukh
然后保存:command(ctrl)+s ,關(guān)閉:command(ctrl)+w
5、回到這個(gè)展示頁(yè)面

Image title

復(fù)制一個(gè)圖層:

Image title

按住option(alt)+鼠標(biāo)左鍵拖動(dòng)圖層往下拽,或者command(ctrl)+J
選下面的一個(gè)圖層,雙擊圖層進(jìn)入圖層樣式,選擇斜面和浮雕,設(shè)置一下參數(shù):

Image title

參數(shù)自行調(diào)整,其中,陰影角度45°可隨大環(huán)境光線可根據(jù)情況自行調(diào)整,陰影模式透明度隨意,自己看情況調(diào)整。
6、然后,從第二個(gè)圖層開(kāi)始連續(xù)復(fù)制多個(gè)該圖層,每復(fù)制的一個(gè)圖層都在上一個(gè)圖層的下方,每復(fù)制一個(gè)圖層都往下移一個(gè)像素,按住option(alt)+鼠標(biāo)左鍵拖動(dòng)圖層往下拽,可使用鍵盤(pán)上的下方向鍵來(lái)控制。

Image title

然后,在最后一個(gè)圖層上設(shè)置一個(gè)投影Image title

參數(shù)自行解決。Image title

最后調(diào)整下整體環(huán)境。
完工!

以上的好處便是使用了智能對(duì)象,它可以讓你想展示的界面可以隨意替換。
如需展示多個(gè)界面的效果,只要多拖進(jìn)幾次那個(gè)PSD,然后平面排好后,統(tǒng)一調(diào)整透視效果。


當(dāng)然表現(xiàn)的手法很多,以上只是一種。
比如,也可以再建好的大畫(huà)布上,畫(huà)一個(gè)矩形的尺寸為640x1136,然后轉(zhuǎn)成智能對(duì)象,再雙擊智能對(duì)象,進(jìn)入調(diào)整。


0
3
分享到:

0

喜歡他,就推薦他上首頁(yè)吧^_^

推薦閱讀

×

賽事服務(wù)聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國(guó)家大學(xué)科技園東區(qū)9號(hào)樓2層

版權(quán)信息

  移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)