
有時當把網站設計完畢,或是把手稿繪製在紙本時,為了讓畫面呈現的更漂亮,這時梅干就會將設計好的畫面,放到實際的裝置中,像是桌機、筆電、平板,或是把手稿合成到手繪本中,讓客戶可以更直覺的看到,當畫面在實際的環境下會長怎樣,但往往這時候,就得先上網尋找合式的情境,再把畫面透過Photoshop影像工具,調整畫面的透視,讓整體的畫面看起來更加的真實,雖然說合成不麻煩,但每張情境的角度都不同,就得不斷的來回測試,才能知道,那一個效果最好,所以梅干先前也分享過,一些線上情境合成的模擬平台,透過線上就可快速的調整畫面的視角,並合成到影像中。
雖然說很方便,但大部所提供的裝置,都是3C類為主,而最近梅干另一個平台,裡面除了有提供各式的3C裝置外,甚至還有像是筆記本、海報、名片…等,讓你可以快速的將設計的好的稿件,直接合成到這些情境底下,不但一鍵就可快速合成,甚至合成的相當自然,同時所提供的畫素還相當大,因此就算要用於平面也沒問題,因此有需要情境模擬的朋友,這個平台千萬別錯過了。
Mockup Photos
網站名稱:Mockup Photos
網站連結:https://mockup.photos/
網站連結:https://mockup.photos/
Step1
當進入「Mockup Photos」網站後,先點右上方的「Sign up」。

Step2
除了可填表單外,也可用Facebook註冊比較快。

Step3
當註冊完畢後,就可開始使用啦!在透過搜尋找到所需的素材後,當右下出現Free表示該素材為免費。

Step4
點縮圖進入後,當看到有相機圖示,表示該區域可放置圖片。

Step5
當滑鼠滑入後,分別可看到二個選項,一個是上傳圖片,另一個是擷取網址中的畫面。

Step6
而這邊梅干是選擇擷取網站,接著輸入要擷取的網址。

Step7
這時就會開始進行畫面的擷取與上傳。

Step8
當擷取完畢後,畫面還會依照螢幕的視角進行調整,讓畫面裡的透視看起來更有整體感,而另一個畫面也是。

Step9
但從這邊可看到的是,該工具抓取畫面再合入後,都是齊左齊上,同時不會自動翻轉方向,所以上方的iPad的視角就有點反過來了,當都合成完畢後,可按下方的「Download」鈕。

Step10
當下載完畢後,再到Photoshop看一下,該平台所提供的影像尺寸真的很大方,有6千多像素,換算成300DPI,約55公分左右,因此要用於平面也沒問題。
