這壹次,我們要做的是壹個5 s大小的APP效果展示圖。
步驟:
1.新建壹個大小為640*1136的畫布,保存後命名為:5S渲染模板。
2.創建壹個新的畫布,並將其命名為:渲染。
2.創建壹個新的畫布,並將其命名為:渲染。
大小是任意的,妳可以把它變大,自己看。
3.拖動5S效果圖模板。妳剛才保存到這個畫布的psd。
Ctrl+T變換到合適的大小並傾斜到合適的透視效果。
4.然後雙擊圖層“5S效果圖模板”。
跳到這張圖片的後面。
拖動到妳想做的界面。
5.返回此演示頁面。註意:這裏省略了壹個步驟。拖動剛剛保存的圖層。
復制壹個圖層。
按住Option(Alt)+鼠標左鍵向下拖動圖層,或Command(Ctrl)+J,選擇下面的圖層,雙擊圖層進入圖層樣式,選擇斜面和浮雕,並設置參數。
參數可以自行調整,其中,45°的陰影角度可以根據環境光的情況進行調整,陰影模式的透明度是任意的,視情況而定。
6.然後,從第二層連續復制多個層。每個復制的圖層都在前壹個圖層的下方,並且每個復制的圖層都向下移動壹個像素。按住option(Alt)+鼠標左鍵向下拖動層,可以使用鍵盤上的向下箭頭鍵進行控制。
然後,在最後壹層設置壹個投影。
然後在最後壹層設置壹個投影,參數自行求解。
最後,調整整體環境。
本教程的優點是使用智能對象,它可以使您想要顯示的界面被隨意替換。
如果您想顯示多個界面的效果,只需在該PSD中拖動幾次,然後在平面排列後統壹調整透視效果。
當然,表現的方式有很多種,上面只是其中壹種。
例如,您還可以在大畫布上繪制壹個大小為640×1136的矩形,然後將其變成智能對象,然後雙擊智能對象以進入調整。
附著@鄭的方法在原理上是相同的,並且在細節上更豐富。
實現壹種效果的方法有成千上萬種,這裏只提供壹種簡單的想法,那就是用PS pure制作。
第壹,失真&;輻狀的
導入界面圖,然後編輯-扭曲,然後旋轉,以達到以下效果:
二、生產厚度
這壹步是最關鍵的。選擇界面層,【Ctrl+Alt+T】,然後單擊箭頭鍵【↑】,並按ENTER鍵。這會復制壹個圖層,新圖層會在原來的基礎上向上移動壹個像素。
來,狂按【Ctrl+Alt+Shift+T】,就是重復前面的變換操作,這樣會復制很多層,每壹層都會在前壹層的基礎上上移壹個像素。以便實現厚度效果。
第三,改變亮度
保留頂層,並將所有其他界面層合並為壹層,命名為【thickness】。
然後選擇【厚度】圖層,使用矩形選框工具+【圖像-調整-亮度對比度】將厚度左側和右側的亮度分別降低20和50。
第四,陰影
復制【app】圖層,將圖層順序更改為低於【厚度】,然後使用【高斯模糊】+顏色疊加為黑色+將不透明度更改為30%。搞定了。
好了,關於如何使用PS將圖片轉換為APP效果圖的介紹就足夠了。妳學會了嗎?
如何制作UI設計的展示圖UI設計中制作界面圖標的過程;
1,圖標創意階段;
2.寫生階段;
3.草圖渲染階段。
補充:
1.在PS中創建壹個具有所需大小的新畫布並保存它,並將其命名為UI設計渲染模板。
2.創建壹個新畫布,並將其命名為界面UI設計渲染顯示。大小是任意的。
3.拖動保存的UI設計效果圖模板。psd到畫布上。Ctrl變換到適當的大小並傾斜到適當的透視效果。
4.然後雙擊UI設計效果圖模板層。
補充:UI是用戶界面的簡稱。壹般指用戶的操作界面,包括手機APP、網頁、智能可穿戴設備等等。UI設計主要是指界面的風格和美感。在使用中,軟件的人機交互、操作邏輯和美觀界面的整體設計是另壹個同樣重要的門道。壹個好的UI不僅使軟件個性化和有品位,而且使軟件的操作舒適,簡單和自由,這充分體現了軟件的定位和特點。
App首頁怎麽設計?我們來看看這五種常用的方法。第壹印象非常重要!許多用戶會根據App/網站的初始形象來判斷是否可以信任這家公司或產品。
那麽如何解決快速感知的問題呢?首先,關註App帶給我們的第壹印象。壹個合理的啟動頁面可以激發用戶的潛意識,有助於吸引和留住合適的用戶。
在深入研究設計策略之前,我們先來了解壹下啟動屏幕的基礎知識。
啟動屏幕是指壹系列連續的體驗-從用戶單擊應用程序圖標到內容加載的時間。通常包括以下五種形式:
1,應用程序圖標(參與啟動體驗的第壹個鏈接)
2.啟動屏幕(打開屏幕頁面)
3.打開屏幕頁面並跳轉到內容頁面
4.主屏幕的啟動形式(待加載)
5.動畫屏幕打開(加載更多內容)
開屏頁面是產品體驗的入口,可以通過模擬更快的加載時間和創建無縫的啟動體驗來改善用戶體驗。
設計不僅關註外觀,還關註針對特定用戶問題的解決方案。啟動頁面可以解決哪些問題?
-下意識地與用戶交流,並設定對未來的期望;
-通過隱藏加載過程來減少感知的等待時間;
-向用戶介紹App的用途和品牌;
-為用戶提供愉快的體驗。
通過對問題的梳理,本文總結了五種打開頁面設計的方法,可以有效地吸引用戶的註意力。
從iOS10開始,開發人員可以個性化預定義的圖標。Bear允許用戶根據主題顏色調整圖標的顏色。
MLB允許用戶選擇他們最喜歡的球隊作為啟動圖標。
啟動頁面就像壹個持續的營銷活動,因為用戶每次打開應用程序都會加深對品牌的印象。
通過在啟動頁面添加壹個標誌性的口號或圖像,不僅可以強調應用程序的使用,還可以為用戶設定壹定的期望。
例如,上圖中的三個應用程序將品牌標誌放在了首頁,這直接刺激了用戶的感官。
上面的三款應用程序“歷史”、“DocuSign(壹項電子簽名服務)”和“Ted”通過在開屏添加標語來強化價值主張。
從點擊圖標到加載內容,有壹個可感知的加載時間。如果在此期間加入適當的動畫,用戶可以提前了解產品狀態。
上圖中的三款app都使用動畫在開屏頁面和內容頁面之間搭建了壹座無縫橋梁。
谷歌、TinyFax和Cinamatic等應用程序使用動畫巧妙地將圖標轉換為內容。
同樣,雖然上述三款app使用的動畫並不是很精致,但也可以完成從初始頁面到內容的過渡。
壹些應用程序的動態效果保持簡單,徽標僅作為高亮顯示,如上圖所示。
福樂雞快餐店在首頁添加了提示動畫,成功地將用戶引導到內容頁面。
對於大多數應用程序來說,使用開屏加骨架屏的形式更有意義,因為輕量級應用程序通常加載速度非常快,骨架屏可以獲得更流暢的體驗。
這些應用程序在啟動頁面上預加載主頁的內容,並且Breathe使用與主頁內容相似的顏色骨架。Transit(右)使用地圖的骨架作為啟動頁面,方便用戶加載後直接點擊。
上圖的應用通過預加載和動畫來把握時間,給人壹種“馬上就來”的印象。
與之前的應用程序相比,Snow、Dribbble和LaunchPro使用的骨架狀態很少。
壹些應用程序在啟動時需要加載大量數據,例如視頻和音頻,因此需要大量加載時間。
對於這種應用程序,稍微長壹點的動畫更有意義。隨著數據緩存和加載時間的縮短,動畫可以變得越來越短。
上圖中的App使用動畫加載數據,這給了用戶反饋的時間。
Clashem、Tumbleweed和Chefsfeed使用有趣的動畫來加載數據,同時增強品牌體驗。
看了這麽多案例,開機畫面會顯示多久?這應該考慮應用程序的配置和加載數據所需的時間。
自定義啟動體驗以適應不同的使用時間和用戶:
各個階段的用戶應該有不同的啟動體驗;
在選擇合理的啟動頁面之前,請考慮應用程序的大小;
用圖像傳達信息,以動畫為指導;
盡可能使用獨特的圖標進行品牌宣傳。
希望文章能讓妳有所收獲~
精彩推薦:
1,淺談卡片設計的應用
2.案例分析:網格系統的布局設計。
3.如何設計黑暗模式?這三個因素需要考慮。
4.深度分析:服務藍圖的應用邏輯設計。