網頁平面視覺稿的畫面如何製作？Mockdown 免費工具

2019-05-02 08:45:22 9M87

Mockups工具

對於平面設計師、網頁設計或提案者來說，常常需要提供成品草圖給業主、廠商看，常常需要花很多時間用 Photoshop 等繪圖軟體來繪製，今天跟大家分享這款線上工具 Mockdown，可以將網頁、軟體畫面利用 AI 自動轉換為草圖，包含色塊、排版、配色、圖形全部自動轉換，完全不需要在手動處理，就可以輕鬆產生模擬圖片！你也可以參考：Mockuper 把圖片偽裝在各種移動裝置，這麼專業叫美編怎麼活

Mockups工具
其實 Mockdown 的顯示常常出現大家的生活周遭，譬如說 Facebook、YouTube、DCard 等等，當網頁資訊還沒被讀取出來的時候，所呈現的狀態就是 Mockdown 的樣貌，也可以稱為 Mockup 視覺稿，讓大家可以預先知道這裡是有內容有文字的，只是還沒有被載入的狀態，若你想呈現的東西還沒有完整內容，想以概念圖的方式呈現，這款工具或許就是非常適合你的！

Mockdown

△ 進入 Mockdown 首頁後，可以看到中間的上傳區域，直接將要處理的畫面上傳就可以啦，因為目前 Mockdown 還處於 Beta 階段，希望收到更多的使用者回饋，因此目前還是免費的，未來正式啟用後，付費才能解鎖免費版沒有的功能。

圖片工具

△ 將圖片上傳後，等待一段時間就 OK 啦！下面提供兩張圖片讓大家參考輸入、輸出後的差異。

Mockups工具

視覺稿產生器

△ 拿本站的首頁截圖當作示範，可以看到不管是色塊、內文、標題等，都有相當精準的辨識度，令我相當驚訝的是沒想到歪國人做的服務，繁體中文轉換上也是沒有問題的！轉換成功後直接按右鍵就可另存圖片囉！趕快把這個佛心服務儲存起來吧～

馬上試試看！
https://epic.ai/mockdown/
更多資訊請參考：
虛擬主機推薦|台灣 VPS 推薦

網頁平面視覺稿的畫面如何製作？Mockdown 免費工具 相關文章

訪客留言

參考資料
網頁和行動裝置內容適用的免費桌面排版軟體。
全套的設計與原型製作工具，讓您快速打造引人入勝的用戶體驗。建立頁面、調整視覺 元素並建立互動式原型。 選擇計劃 立即試用 從工作畫板開始 選擇任何預製範本或自行設計工作畫板。挑選顏色配置、置入圖文框、匯入文字和影像等元素 ...
Mockdown · PyPI
What is Mockdown Mockdown is a simple tool to make it easier to create HTML mockups. Mockdown uses Jinja2 templating engine and Faker module for generating fake data.
終極行銷美工圖庫3.0 - 創億學堂｜網路創業顧問
讓我再問你一個問題，假如你能獲得這套圖庫並運用在你的網站上，你覺得有沒有 ... 自己額外購買，我並不是軟體代理商或經銷商，所以是無法提供你軟體的。但我會告訴你免費取得初階正版軟體 ...
Convertio 免費線上轉檔服務，支援超過45 種常用格式 - 免費資源網路社群
Convertio 是一個完全免費的線上文件轉檔服務，支援多種常見檔案類型，除了從電腦 ... 如果你想要進行格式轉換，但又礙於手邊沒有軟體或工具，Convertio 或許是個不錯的選擇。 ... 選擇好檔案後，從右邊選取要轉換的格式，第一個欄位在你上傳檔案後會自動偵 ... Mockdown 線上將軟體介面、網頁或應用程式擷圖轉為Mockup 視覺稿.
Mockdown - Convert hi fidelity screens to low fidelity ones
Pick a UI image and let mockdown do the rest. No Sketch or Photoshop necessary! Upload your screenshot and within a few seconds a your image will be transformed into a Mockdown. Right-click, save as and use any way you like.
Mockdown - Turn high fidelity UI images into mockups | Product Hunt
Mockdown - Turn high fidelity UI images into mockups Create low fidelity mockdowns, redact user information, use for explainer videos or concept walkthroughs. ... Lo-fi Transformer This article is an introduction of our toolkit mockdown which automaticall
視覺,網頁設計師培訓課程|平面設計,UI設計,電腦繪圖課程-巨匠電腦
視覺,網頁設計師培訓課程,視覺設計職缺破萬筆,掌握跨界設計能力取得高薪資格,名師指導!掌握photoshop,illustrator等平面設計技能,網頁前端,UI等網頁設計能力
英文文法檢查工具 - DevPeen
免費英文文法檢查-免費英文文法檢查線上資訊以及英文文法整理公式認知英語文法檢查 ... 2007/5/4 · 請問各位大大 有沒有軟體可以自動 幫我檢查英文文法的錯誤？ Word Office有一些基本功能 但大部份的錯誤它還是無法偵測出來 有沒有人可以幫我解決此 ...
UI設計要學的4款軟體！PS AI？ - 每日頭條 - 每日新鮮頭條一網打盡
PS可以用來從事，平面設計，網頁設計，UI 設計等多種設計工作。在UI設計中PS的使用率在90%以上，所以作為一個合格的UI設計師。PS是肯定得掌握的 ...
4 Alternatives to Mockdown | Product Hunt
Discover alternatives, similar and related products to mockdown that everyone is talking about.