不少做平面的設計師想轉行走網頁設計這條路，做網頁和做平面是完全不同的思維，加上還要熟悉或瞭解html和CSS代碼，所以就很考驗設計師的自學能力了。而且還有一點，我們在設計網頁的過程中，並不是你想怎麼設計都可以的，還要考慮編碼實現和用戶體驗。以下是小編爲大家搜索整理的網頁設計師必備技能，希望能給大家帶來幫助!更多精彩內容請及時關注我們應屆畢業生考試網!
想轉型成爲網頁設計師，需要必備的一些技能知識點：
Photoshop
Illustrator
HTML
CSS
Responsive
加分：Bootstrap、Sass、Compass、Susy…等，會套用現成的 jquery 包、JS 包之類也就差不多了。再深入就是F2E的領域。
Photoshop
基本中的基本，只要是任何單位是「PX」、給屏幕用的圖稿我都建議用 Photoshop 製作，Illustrator 是印刷用軟件，對 PX 支持度很差。
Grid
現在新開發的網頁通常會要求製作 Responsive ，爲了要方便套用 Bootstrap 或 Susy ，Grid 就是一定要懂的觀念。
切圖
當你會寫 Html、搞懂 Div、Css 後，你就知道怎麼切圖了(無誤)，不會寫 Code 的視覺設計師切出來的圖常常被退貨也只是剛好…做個蛋糕需要糖和巧克力粉、材料供應卻老給他鹽和胡椒粉，是想逼寫 Html 的人從種甘蔗和可可樹開始嗎?
Illustrator
既然都是平面設計師想轉型，這套一定用的非常熟悉，可惜我對這套的定義就是「送印刷廠」用。在我的`製圖過程中，所有能用向量繪製的部份我都會用向量。PS 的向量工具不太好操作，遇到比較複雜的圖型我會在 AI 裏畫好、貼進 PS 爲形狀圖層，再來調整圖層樣式。所以 AI 只會用到畫向量的功能，其他全進 PS 處理。
HTML
推薦：HTML5
不會切圖、不會手寫 Code 的不要說自己是網頁設計師，做網頁只靠 Dreamweaver?和蒸飯箱蒸出來的便當感覺差不多，勉強能入口但很難吃。有的 RD 會接受用 Dreamweaver 之類可視化軟件產生的 Code，這要看和設計師配合的 RD 接受度到哪裏。通常平面想轉網頁設計很大部份是薪水可以喊比較高，如果想拿更高的薪水就不要依賴 DW ，老老實實的練英打吧。(推薦：死亡打字員)—— YouTube視頻，自備梯子。
想當個網頁設計師， W3C 是一定要懂的。當然非常多的元素不會每個都記得，把這個網址當目錄用吧，不懂或忘記就跑來查一下。All Standards and Drafts – W3C
補充：
W3Schools Online Web Tutorials
W3Fools – A W3Schools Intervention
CSS
推薦：CSS current work & how to participate
margin、padding 是初學者最容易搞混的兩個值;Float 很常用但不小心就破版;熟悉 Background 可以玩出很多花樣…等等。在 CSS 細節部份就可以偷懶一點用現成的了，雖然產出的 Code 比較醜不優雅，但 RD 比較少去動到這一塊，所以還可以接受。我自己常用的偷懶工具如下：
圓角框：CSS Border Radius Generator
陰影：Box Shadow CSS Generator
按鈕：Buttons – A button library built with Sass and Compass
可以看 browser 對 html、css 等等的支持度：Can I use… Support tables for HTML5, CSS3, etc
當然很有很多其他在線生成或是外掛包，歡迎大家補充，好讓我能更偷懶一點…
Responsive
先把 Html 和 Css 練熟了再來看 Responsive 這個大難題。要做好一個 RWD 從 Wireframe 就要規劃好。在 Wireframe 階段我習慣先設計 Desktop 版本，功能最多最完善。但在寫 Code 的時候會是反過來、先從 Mobile 的尺寸開始刻。剛接觸 RWD 的先套 Bootstrap 增加成就感和手感，等熟悉了覺得不夠用綁手綁腳的時候，差不多該踏進 Sass、Compass、Susy 的領域。
別用現成的軟件做 Responsive，除非是純靜態網頁不需要和 RD 合作，原始碼髒就髒沒關係反正不會有人看了。目前我看到「排排版就好」的軟件產出的 Code 沒有乾淨的，只要是之後有人還要接手的產出、拜託維持它的乾淨整齊。有沒有打開廁所門看到一團亂產生暈眩感臉色發青的經驗?看到噁心的 Code 就是這種感覺。
結論
以上寫的非常粗淺，只能算是給個方向讓初學者知道要怎麼學習。最好還是去找個 F2E 拜師學藝一下，靠自己自學寫出來的東西一定會被正規 RD 嫌棄，我就被老公罵過「這是什麼邪魔歪道」，邊哭邊學被他嫌棄了一整年纔得到勉強及格的評語。
如果能把上述 5 項都練起來，就能自己接案賺外快了。只要和程序無關的靜態網頁都難不倒你。網絡上有些套裝的特效包可以拿來改一改套用，看起來也很炫。(遇到需要套程序接後臺的可以兩手一攤說這超出網頁設計的領域要找 RD 配合。)
網頁設計和 F2E 職務範圍部份重迭，都要寫 Html、Css，注重使用者體驗等等。最大的差別在於網頁設計師要畫 Flow、Wireframe、Mockup、切圖、(標示文件)，會寫 JS 特效最好，不會寫也沒關係。但 F2E 就要對 JS 很熟悉了。網頁設計師算是一腳踩在 UI/UX 圈、另一隻腳踩在 F2E 邊在線的角色。千萬小心在 Code 上不要和 F2E 起爭執，請謙虛求教，沒事拿自己的弱項去撞別人的強項做什麼?RD 寫 Code 輸給設計師是哪門子笑話?設計師強的當然是視覺啊!
