Mockdown 線上 AI 視覺稿轉換工具，設計師 Photoshop 可以丟一邊啦！

Mockdown 線上 AI 視覺稿轉換工具，設計師 Photoshop 可以丟一邊啦！

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

Mockups工具

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

Mockdown

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

圖片工具

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

Mockups工具

視覺稿產生器

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

馬上試試看！
https://epic.ai/mockdown/

MOCK DOWN PROTOTYPE BPTMD
MOCK DOWN PROTOTYPE BPTMD
網頁平面視覺稿的畫面如何製作？Mockdown 免費工具
9M87
9M87
2019-05-02
All Posts

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

糟糕！怎麼會沒有～會努力加油的！

參考內容推薦

使用 Chrome 內建工具製作網頁長截圖，擷取網站畫面免安裝下載外掛

要如何使用 Google Chrome 內建的功能進行網頁畫面擷取、備份呢？接下來我會以圖文簡單教學，其實只要記住快速鍵組合，就能以輸入指令方式來製作截圖，當然還包括很多工具可能都無法做的網頁「長截圖」，也就是把網頁從頭到尾完整擷取為 ...

R Markdown

Turn your analyses into high quality documents, reports, presentations and dashboards with R Markdown. Use a productive notebook interface to weave together narrative text and code to produce elegantly formatted output. Use multiple languages including R

Convert Case 英文大小寫轉換工具，一鍵轉全大寫 ...

Convert Case 是一個很方便的線上工具，能快速轉換一段英文內容的大小寫格式， ... 等等，如果發生類似狀況但又不想浪費時間重新打一次，有沒有更快的解決方法呢？ ... 將你要轉換的文字複製貼上，接著點選下方要轉換的大小寫格式按鈕就會自動變換，在 ... Mockdown 線上將軟體介面、網頁或應用程式擷圖轉為Mockup 視覺稿 ...

三個免費線上語音轉文字工具，做即時中文聽寫筆記

今天這篇文章，來整理與測試三個可以「線上中文語音轉文字」的免費工具 ... Word 2010 或 PowerPoint 2010 以上版本，那麼你其實已經擁有了一個更強大快速、品質更好的自動照片去背工具 ...

【免費資源】有動態效果的懶人電子賀卡工具Canva

先前馬路科技網頁設計曾經介紹過Canva這十分受到歡迎的線上設計工具，最近該公司宣布了一個全新的功能Canva Animation，就是將平面設計的卡片、圖片等變成動態的效果，非常適合用於製作網站的動態圖片內容、廣告、或是電子賀卡寄給客戶都很便利。

Mockdown

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.

裝機必備！這些高效軟體，讓你的Windows 好用一倍

如果只是想短暫地將圖片畫面保存起來，那麼你也可以在截屏後選擇「貼到螢幕上」 .... 幕布」是國內團隊製作的一款集文檔和思維導圖處理的筆記工具，最大特色是能 ... 目前，這款軟體提供網頁、Windows、macOS、iOS、Android 五個平台可供免費使用。 ... Cmd Markdown 除了有本身的網頁版，還提供了Windows、macOS 和Linux 的 ...

FreeGifMaker 免費線上產生器，將YouTube 影片轉GIF 動態圖免安裝軟體

操作方式也很簡單，只要將YouTube 影片鏈結貼上，設定要轉換的影片時間長度，就會 ... 最後，FreeGifMaker 給出擷取後的動態圖片GIF 檔案，稍微預覽一下看看有沒有問題，若 ... Mockdown 線上將軟體介面、網頁或應用程式擷圖轉為Mockup 視覺稿 ... 開放下載，安裝後自動啟動授權 · Outline 來自Google 全自動自架VPN 安裝工具， ...

免費橫幅廣告製作工具

使用Canva 的橫幅廣告製作工具，為所有網路上的個人檔案製作設計精美的橫幅 ... 我們的拖曳編輯工具能讓你根據自己品牌的視覺形象自訂上千種免費橫幅廣告範本， ... 藉由Canva 橫幅廣告設計工具，你可以瀏覽並自訂各種平台的網頁橫幅廣告，並 ...

我在網站製作流程中各個環節會用到的工具

一個網站的製作流程，基本劃分就會專案接洽、網站企劃、視覺設計、前端工程、後端 ... 還不趕快試試看用免費版本的Xmind來畫mind map！ ... 與內部人員溝通，由於已經有畫面與資料，所以在內部溝通上問題就減少了很多，不用依靠 .... textnut - markdown文字編輯器，目前我是拿來寫部落格文章使用，但是圖片沒有 ...