截圖怎麼添加手機外框?『 MockUPhone 』、『 Qurb 』兩個免費網站線上幫你合成!

把手機外框加上去是不是瞬間變得很有質感啊~

平常在寫手機 App 的教學文章,常常會需要截圖螢幕操作畫面,不知道大家有沒有發現,Hanne 在製作這類型文章的封面照的時候,非常喜歡使用有手機外框的螢幕操作畫面,因為 Hanne 覺得這樣看起來又比只有截圖的照片來的立體生動一點,就好像真的在操作手機一樣,這次就要和大家分享,有手機外框的圖是怎麼做出來的呢~

截圖怎麼添加手機外框?『 MockUPhone 』、『 Qurb 』兩個免費網站線上幫你合成!

和大家分享兩個可以製作手機圖的網站, 「MockUPhone」 「Qurb」,兩個都不需要下載 App,直接在網頁上就可以操作囉!先介紹「MockUPhone」這個網站,除了可以製作手機圖之外,筆電、電視也都能在這個網站上合成

截圖怎麼添加手機外框?『 MockUPhone 』、『 Qurb 』兩個免費網站線上幫你合成!

「MockUPhone」提供的模板還滿多的,除了 iOS 以外,也有提供一些 Android 的機型可以製作,另外還有筆電、電視、平板的模型喔!

截圖怎麼添加手機外框?『 MockUPhone 』、『 Qurb 』兩個免費網站線上幫你合成!

找到自己的手機機型點進去後,會看到有不同顏色的手機可以選擇,以 iPhone 7 為例,就有五種顏色可以挑

截圖怎麼添加手機外框?『 MockUPhone 』、『 Qurb 』兩個免費網站線上幫你合成!

選好想要的顏色之後,就能上傳自己的螢幕截圖檔案,不過要注意的是,機型不一樣,螢幕截圖尺寸不同的話,會沒有辦法轉換檔案,所以如果真的很想要使用不同機型的模板,就要先把螢幕截圖的尺寸改成正確的才可以喔!

截圖怎麼添加手機外框?『 MockUPhone 』、『 Qurb 』兩個免費網站線上幫你合成!

圖片轉換完成之後,點選「Download my mockups」

截圖怎麼添加手機外框?『 MockUPhone 』、『 Qurb 』兩個免費網站線上幫你合成!

「MockUPhone」下載的方式是把檔案寄到你的信箱裡,所以需要填寫一組信箱

截圖怎麼添加手機外框?『 MockUPhone 』、『 Qurb 』兩個免費網站線上幫你合成!

「MockUPhone」會輸出成一張直式一張橫式的圖片,檔案是背景透明的 PNG 檔喔!

截圖怎麼添加手機外框?『 MockUPhone 』、『 Qurb 』兩個免費網站線上幫你合成!

另一個是網站是 「Qurb」,但是支援的機型比較少,只有部分 iOS 手機、Galaxy Note 8、iPad Mini 和 MacBook Pro 合成

截圖怎麼添加手機外框?『 MockUPhone 』、『 Qurb 』兩個免費網站線上幫你合成!

不過和「MockUPhone」不一樣的地方是,就算螢幕截圖的檔案大小不符合他還是可以轉換,所以即使機型少也一樣很好用喔!以 Hanne 的 iPhone 6s 截圖為例,選擇 iPhone 8、iPhone 5c 都可以轉換的很成功,而且一樣可以選擇不同顏色的手機喔!

截圖怎麼添加手機外框?『 MockUPhone 』、『 Qurb 』兩個免費網站線上幫你合成!

截圖怎麼添加手機外框?『 MockUPhone 』、『 Qurb 』兩個免費網站線上幫你合成!

但是 iPhone X 系列的話就沒辦法這麼完美的符合,螢幕下方會有空出來的部分

截圖怎麼添加手機外框?『 MockUPhone 』、『 Qurb 』兩個免費網站線上幫你合成!

轉換好的圖片點選「Save mockup」就能直接下載下來囉!但「Qurb」只會輸出直式手機的 PNG 圖檔,想要橫的就要自己旋轉喔!

以上就是 Hanne 在做封面圖會用到的兩個網站,和各位獺友們分享~以後要做螢幕截圖的照片,就能夠把手機框添加上去,專業度瞬間 UP UP UP!

誰還沒有追蹤 電獺少女 Instagram?每天都有新貼文、每週都開新話題等你來跟編輯聊天, 電獺少女 Instagram 新鮮事一起來玩!

原文來自 agirls