app-exhibition-effect-mockup-1

編者按:讓甲方過稿,一半在口才,一半在包裝。想學會高大上地展示你的APP作品?來看今天這篇教程!教程不難,@ETESY?提供的方法中,操作步驟更為詳細,@正越升?同學的細節處理更為豐富,各有長處,新手可以都練一遍,來收!

@ETESY :假設,你要做一個5S的尺寸的效果展現圖。

步驟:

1、新建一個畫布尺寸為:640*1136,然后保存,命名如:5S效果圖模板

2、再新建一個畫布,命名如:效果圖展現

2、再新建一個畫布,命名如:效果圖展現

尺寸隨意,可以大點,自己看情況吧。

3、將剛才保存的那個5S效果圖模板.psd拖到這個畫布中。

Ctrl+T變換到合適的尺寸,傾斜到合適的透視效果。

4、然后雙擊”5S效果圖模板”這個圖層。

這就是智能對象的好處。

跳到這個畫面后

拖入你想要做的界面:

圖片來自Dribbble:Dribbble – GIF for the Timeline App by Sergey Valiukh

然后保存:Command(Ctrl)+ S,關閉:Command(Ctrl)+ W

5、回到這個展示頁面

注:這兒忽略了一步,把剛才保存的圖層拖過來。同學們應該都懂吧 – –

復制一個圖層:

按住Option(Alt)+ 鼠標左鍵拖動圖層往下拽,或者Command(Ctrl)+J,選下面的一個圖層,雙擊圖層進入圖層樣式,選擇斜面和浮雕,設置一下參數:

參數自行調整,其中,陰影角度45°可隨大環境光線可根據情況自行調整,陰影模式透明度隨意,自己看情況調整。

6、然后,從第二個圖層開始連續復制多個該圖層,每復制的一個圖層都在上一個圖層的下方,每復制一個圖層都往下移一個像素,按住option(Alt)+鼠標左鍵拖動圖層往下拽,可使用鍵盤上的下方向鍵來控制。

然后,在最后一個圖層上設置一個投影

然后,在最后一個圖層上設置一個投影,參數自行解決。

最后調整下整體環境。

完工!

以上的好處便是使用了智能對象,它可以讓你想展示的界面可以隨意替換。

如需展示多個界面的效果,只要多拖進幾次那個PSD,然后平面排好后,統一調整透視效果。

當然表現的手法很多,以上只是一種。

比如,也可以再建好的大畫布上,畫一個矩形的尺寸為640×1136,然后轉成智能對象,再雙擊智能對象,進入調整。

附上@正越升?同學的方法,原理相同,細節上處理更加豐富。

一個效果有千萬種實現的辦法,在這里只提供一個最簡單的思路,用PS純做。

一、扭曲&旋轉

導入界面圖,然后編輯-扭曲,再旋轉,做到如下效果:

二、制作厚度

這一步最關鍵,選中界面圖層,[Ctrl+Alt+T],然后按一下方向鍵[↑],再按回車。這樣就復制了一個圖層,并且新的圖層在原來基礎上往上移動一個像素。

來了,狂按[Ctrl+Alt+Shift+T],這是重復之前的變換操作,這樣就會復制出很多個圖層,每一個都在之前基礎上往上移動一個像素。從而做出厚度效果。

三、改變亮度

保留最上面那個圖層,將其他所有界面的圖層,合并成一個圖層,命名為[厚度]。

然后選中[厚度]圖層,使用矩形選框工具+[圖像-調整-亮度對比度],對厚度的左邊面和右邊面分別進行降低亮度20和50處理。


四、陰影

復制[app]圖層,改變圖層順序到[厚度]下面,然后使用[高斯模糊]+顏色疊加為黑色+改變不透明度為30%。完工!

【本周你可能會錯過的那些好文】

教科書級別的蘋果官方人機指南!
《騰訊力作!超實用的IOS 9人機界面指南(1):UI設計基礎》

如何自學成為騰訊高級交互設計師?
《優設訪談!騰訊高級交互設計師C7210的十年設計路》

紋理素材兩大殺器!
《酷站兩連發!專注無縫紋理素材站+多邊形背景生成器》

原文地址:zhihu(已授權)

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量104萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏 4

發表評論 已發布 1

還可以輸入 800 個字
 
 
載入中....
相關推薦
1 收藏