如何切圖生成鏈接網(wǎng)頁？

時間：2024-02-16 04:15:01 | 來源：網(wǎng)站運營

時間：2024-02-16 04:15:01 來源：網(wǎng)站運營

如何切圖生成鏈接網(wǎng)頁？：說到切圖，在UI設(shè)計師還叫美工的那個時代，是要把設(shè)計稿做成靜態(tài)html的，也就是你所說的“一個設(shè)計好的頁面切圖生成有鏈接的那種”。這就要求設(shè)計師必須具備html+css技能。那時候的互聯(lián)網(wǎng)公司分工不細致，沒有很明顯的UI、產(chǎn)品、交互等職位區(qū)分，美工一個人都可以全包，從那時候過來的UI設(shè)計師能力比較全，能負擔和解決很多問題。

不過現(xiàn)在，在互聯(lián)網(wǎng)公司工作細分、越來越多非設(shè)計行業(yè)人員加入UI設(shè)計的背景下，很多UI設(shè)計師理解的切圖僅僅是把圖片資源導出來，比如jpg、png等資源，整理好文件夾發(fā)給技術(shù)而已，主要時間和工作內(nèi)容都在視覺設(shè)計這一塊。

所以導致設(shè)計師和前端之間溝通、協(xié)作有問題。還有很多剛?cè)腴T的UI設(shè)計師會把UI和平面混為一談，覺得UI畫的東西很簡單、覺得UI工作不多、覺得UI工資高才轉(zhuǎn)的行。原因有人們的趨利心理、從眾心理、UI培訓行業(yè)的廣告影響等等。

這就造成了相當多比例的UI設(shè)計師沒有特點、優(yōu)勢，你會的市場上一抓一大把的設(shè)計師也會，沒有自己的核心競爭力，手繪畫不好、動效做不了、產(chǎn)品交互靠嘴炮……與市場要求的T字型人才相差甚遠。

目前在很多設(shè)計平臺上涌現(xiàn)一些UI大牛，有自己的個人網(wǎng)站、前端技能吊炸天、全棧能力強，吸引了眾多新手膜拜，所以現(xiàn)在有很多UI設(shè)計師開始接觸前端技能這塊，開始找回美工時代失去的技能。

所以說，基礎(chǔ)的前端在目前的大環(huán)境下是一個UI設(shè)計師應(yīng)該有的能力，比如可以解決你的這個痛點需求。

---

用PS導出切圖之后成web格式png，接下來你就要去編寫html+css了，入門教程很多，給你推薦兩個

一個是w3school的html教程，學完后看css教程，如果還想學，就接觸css3和動畫，有興趣還想繼續(xù)深入，就接觸jquery，還想進行突破，就看javascript?；驹O(shè)計師需要學的都差不多了，html、css、js就是基礎(chǔ)前端三大內(nèi)容，當然js沒必要學很透徹，了解即可，多看看html+css。這個教程比較權(quán)威。

可能你會覺得w3school的教程很沒意思、枯燥、甚至覺得孤單，推薦你看慕課網(wǎng)的html+css前端教程。里面的講解很豐富，很多人和你一起討論，你的問題也有人解答，還有對應(yīng)練習，推薦這個。學歷路徑和上面一樣。

當你學的差不多了，可以把自己的個人網(wǎng)站做出來、建站生成鏈接的時候，相信我，你的薪資絕對比現(xiàn)在高。如果你還想提升下UI工作中的效率，可以關(guān)注我的網(wǎng)站——專門分享UI相關(guān)經(jīng)驗、工具、效率的UI黑客，相信你會從中學到很多不一樣的UI技巧。