不少做平面的設計師想轉行走網頁設計這條路，做網頁和做平面是完全不同的思維，加上 html 寫完後要交給 F2E 套特效套程式，並不是平面可以怎麼做、網頁就能怎麼做。就算是人畜共通疾病如口蹄疫、你可以把治療豬的藥方療程直接套到人類身上嗎？
如果你想轉型成為網頁設計師，請必備下列技能：
- Photoshop
- Illustrator
- HTML
- CSS
- Responsive
加分：Bootstrap、Sass、Compass、Susy…等，會套用現成的 jquery 包、JS 包之類也就差不多了。再深入就是F2E的領域。
Photoshop
基本中的基本，只要是任何單位是「PX」、給螢幕用的圖稿我都建議用 Photoshop 製作，Illustrator 是印刷用軟體，對 PX 支援度很差。
Grid
現在新開發的網頁通常會要求製作 Responsive ，為了要方便套用 Bootstrap 或 Susy ，Grid 就是一定要懂的觀念，Grid 的運用：PS外掛 能幫助你在 PS 裡快速建立參考線。
切圖
當你會寫 Html、搞懂 Div、Css 後，你就知道怎麼切圖了（無誤），不會寫 Code 的視覺設計師切出來的圖常常被退貨也只是剛好…做個蛋糕需要糖和巧克力粉、材料供應卻老給他鹽和胡椒粉，是想逼寫 Html 的人從種甘蔗和可可樹開始嗎？
Illustrator
既然都是平面設計師想轉型，這套一定用的非常熟悉，可惜我對這套的定義就是「送印刷廠」用。在我的製圖過程中，所有能用向量繪製的部份我都會用向量。PS 的向量工具不太好操作，遇到比較複雜的圖型我會在 AI 裡畫好、貼進 PS 為形狀圖層，再來調整圖層樣式。所以 AI 只會用到畫向量的功能，其他全進 PS 處理。
HTML
推薦：HTML5
不會切圖、不會手寫 Code 的不要說自己是網頁設計師，做網頁只靠 Dreamweaver？和蒸飯箱蒸出來的便當感覺差不多，勉強能入口但很難吃。有的 RD 會接受用 Dreamweaver 之類視覺化軟體產生的 Code，這要看和設計師配合的 RD 接受度到哪裡。通常平面想轉網頁設計很大部份是薪水可以喊比較高，如果想拿更高的薪水就不要依賴 DW ，老老實實的練英打吧。（推薦：死亡打字員
）
想當個網頁設計師， 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 輸給設計師是哪門子笑話？設計師強的當然是視覺啊！
