經常可以看到一些網站上,會出現一些介紹該網站利用手機來瀏覽時的手機螢幕示意圖,看了都覺得好厲害,好像實品拍照的感覺。但卻不知大家是怎麼做到的,讓小的好生羨慕。不過這次讓小的找到了一個可以直接在線上製作這些質感很好的螢幕示意圖的網站—MockUPhone。在這裡除了手機、筆電、一般螢幕都有提供喔,雖然目前提供的款式中,以手機的款式較多,其中又以iPhone的機種較為齊全。不過其他Android或是筆電的部份,也都有提供了一些不同款式可選擇喔。
在MockUPhone製作螢幕示意圖很簡單,而且做出來的質感又好,就像是實品一般,很專業的感覺。只要先選好想要的樣式,再按照上面要求的尺寸將符合尺寸的圖片帶入,就可以製作出美美的示意圖囉。製作好的示意圖,只需要按右鍵就可另存圖片到電腦裡囉。相信對於需要製作這種示意圖的朋友應該會是很好的一個輔助工具喔。接著就讓小的來跟大家說明一下製作的方法吧。
MockUPhone
網站名稱:MockUPhone
網站連結:https://mockuphone.com/#ios
網站連結:https://mockuphone.com/#ios
Step1
開啟網頁後首先看到的三張示意圖即為利用MockUPhone所提供的螢幕外框所製作出來的喔。
Step2
將網頁往下移後,就可以看到有提供手機、電腦、電視等螢幕外框可供選擇。小的今天先選用iPhone8的螢幕外框。
Step3
選好之後,還可以選擇手機顏色,點選想要的顏色後,按下「Pick It」。
Step4
接著就進入上傳圖片的介面了,建議圖片的尺寸要按照上面所寫的尺寸來上傳,這樣圖片製作出來才會比較美觀喔。將圖片放到「Drop files here」。
Step5
等待圖片上傳完畢後,點選「Generate product mockups」,就可以開始製作囉。
Step6
製作完成的圖片,點選滑鼠右鍵,選擇另存圖檔就可以將圖片存到電腦囉,不需選擇下方的「Download my mockups」喔。
Step7
下圖即為小的所製作的手機展示圖,是不是很棒呢。有需要的朋友也快來試試吧。