Device Mockup Generator
Place a screenshot inside phone, browser, or laptop frames
Device Mockup Generator — what it does
Place a screenshot inside a drawn phone, browser-window or laptop frame, set a background colour and padding, and download the composed image. A framed screenshot reads instantly as "an app" or "a website" in a way a bare rectangle of pixels never does, which is why every product page and portfolio uses them.
When this tool helps
- Dressing app store or landing-page screenshots so they present as a product rather than a raw capture.
- Preparing slides where a framed browser window makes clear you are showing a live site.
- Building portfolio images for client work without opening a design application.
How to use it
- Choose the screenshot to frame.
- Pick the frame type: phone, browser window or laptop.
- Set the background colour and outer padding.
- Process and download the framed image.
Accuracy, limits, and good practice
- Match the screenshot's aspect to the frame — a tall phone capture in a laptop frame gets letterboxed and looks wrong.
- A background colour picked from your brand palette turns a plain mockup into a ready-made marketing asset.
- Capture at the device's native resolution first; the frame cannot sharpen a blurry source.
Frequently asked questions
Which frame should I use for a responsive site?
Show the same page twice — a browser frame for desktop and a phone frame for mobile — side by side; it communicates responsiveness faster than words.
Can I use a transparent background?
Pick a background colour that matches the destination page. For true transparency, compose the frame over the artwork in an editor.
What resolution is the output?
It follows the source and padding you set. Start from a high-resolution capture if the mockup is going into print or a large hero image.
Related tools on this site
- Local Blur & Mosaic — Blur or pixelate a selected rectangular image area
- Screenshot Stitcher — Join multiple screenshots vertically or horizontally
- Color Blindness Simulator — Preview an image under common color-vision deficiency simulations
Everything above runs inside this page. Device Mockup Generator needs no account, no upload, and no server round trip — close the tab and nothing is left behind.
裝置模型生成器能做什麼
把截圖放進手機、瀏覽器視窗或筆電外框中，設定背景色與外距，然後下載合成圖。加了外框的截圖能讓人一眼認出「這是 App」或「這是網站」，效果是一塊裸露的像素矩形永遠比不上的，這也是每個產品頁與作品集都在用的原因。
什麼時候用得上
- 包裝上架商店或到達頁的截圖，讓它看起來是產品而不是隨手擷取。
- 做簡報時用瀏覽器外框，清楚表達你展示的是線上網站。
- 不開設計軟體，也能為客戶案子做出作品集圖片。
使用步驟
- 選擇要加框的截圖。
- 挑選外框類型：手機、瀏覽器視窗或筆電。
- 設定背景色與外距。
- 執行合成並下載結果。
精確度、限制與實務建議
- 截圖比例要和外框相配——直式手機截圖放進筆電框會被上下留黑，觀感很差。
- 背景色取自品牌色盤，一張普通模型圖就能直接當行銷素材。
- 請先以裝置原生解析度截圖，外框救不回模糊的來源。
常見問題
響應式網站該用哪種外框？
同一頁面放兩次——桌面用瀏覽器框、行動用手機框——並排呈現，比任何文字都更快說明「響應式」。
可以用透明背景嗎？
請把背景色設成目的頁面的底色。若需要真正的透明，請在編輯器中把外框合成到版面上。
輸出解析度是多少？
由來源圖與你設定的留白決定。若要用於印刷或大型主視覺，請從高解析度截圖開始。
本站相關工具
以上步驟全部在這個頁面內完成，裝置模型生成器 不需要註冊、不上傳檔案、也不經過伺服器，關閉分頁後不會留下任何資料。