@Akane_Lee ：不少做平面(miàn)的設計師想轉行走網頁設計這(zhè)條路，做網頁和做平面(miàn)是完全不同的思維，加上還(hái)要熟悉或了解html和CSS代碼，所以就很考驗設計師的自學(xué)能(néng)力了。而且還(hái)有一點，我們在設計網頁的過(guò)程中，并不是你想怎麼(me)設計都(dōu)可以的，還(hái)要考慮編碼實現和用戶體驗。那麼(me)今天我們就來和您聊聊，想轉型成(chéng)爲網頁設計師，需要必備的一些技能(néng)知識點：

内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司、、、先誠官網：/ 

加分：Bootstrap、Sass、Compass、Susy…等，會套用現成(chéng)的 jquery 包、JS 包之類也就差不多了。再深入就是F2E的領域。

基本中的基本，隻要是任何單位是「PX」、給屏幕用的圖稿我都(dōu)建議用 Photoshop 制作，Illustrator 是印刷用軟件，對(duì) PX 支持度很差。

關于最基礎的摳圖，有的童鞋懂的方法還(hái)不全面(miàn)，推薦從《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》開(kāi)始學(xué)習。

Grid

現在新開(kāi)發(fā)的網頁通常會要求制作 Responsive ，爲了要方便套用 Bootstrap 或 Susy ，Grid 就是一定要懂的觀念，《Guideguide下載及使用說明》能(néng)幫助你在 PS 裡(lǐ)快速建立參考線。

切圖

當你會寫 Html、搞懂 Div、Css 後(hòu)，你就知道(dào)怎麼(me)切圖了（無誤），不會寫 Code 的視覺設計師切出來的圖常常被(bèi)退貨也隻是剛好(hǎo)…做個蛋糕需要糖和巧克力粉、材料供應卻老給他鹽和胡椒粉，是想逼寫 Html 的人從種(zhǒng)甘蔗和可可樹開(kāi)始嗎？

Illustrator

既然都(dōu)是平面(miàn)設計師想轉型，這(zhè)套一定用的非常熟悉，可惜我對(duì)這(zhè)套的定義就是「送印刷廠」用。在我的制圖過(guò)程中，所有能(néng)用向(xiàng)量繪制的部份我都(dōu)會用向(xiàng)量。PS 的向(xiàng)量工具不太好(hǎo)操作，遇到比較複雜的圖型我會在 AI 裡(lǐ)畫好(hǎo)、貼進(jìn) PS 爲形狀圖層，再來調整圖層樣(yàng)式。所以 AI 隻會用到畫向(xiàng)量的功能(néng)，其他全進(jìn) PS 處理。
HTML

不會切圖、不會手寫 Code 的不要說自己是網頁設計師，做網頁隻靠 Dreamweaver？和蒸飯箱蒸出來的便當感覺差不多，勉強能(néng)入口但很難吃。有的 RD 會接受用 Dreamweaver 之類可視化軟件産生的 Code，這(zhè)要看和設計師配合的 RD 接受度到哪裡(lǐ)。通常平面(miàn)想轉網頁設計很大部份是薪水可以喊比較高，如果想拿更高的薪水就不要依賴 DW ，老老實實的練英打吧。

想當個網頁設計師， W3C 是一定要懂的。當然非常多的元素不會每個都(dōu)記得，把這(zhè)個網址當目錄用吧，不懂或忘記就跑來查一下。All Standards and Drafts – W3C

補充：

    W3Schools Online Web Tutorials
    W3Fools – A W3Schools Intervention

margin、padding 是初學(xué)者最容易搞混的兩(liǎng)個值；Float 很常用但不小心就破版；熟悉 Background 可以玩出很多花樣(yàng)…等等。在 CSS 細節部份就可以偷懶一點用現成(chéng)的了，雖然産出的 Code 比較醜不優雅，但 RD 比較少去動到這(zhè)一塊，所以還(hái)可以接受。我自己常用的偷懶工具如下：

圓角框：CSS Border Radius Generator
陰影：Box Shadow CSS Generator
按鈕：Buttons – A button library built with Sass and Compass
可以看 browser 對(duì) html、css 等等的支持度：Can I use… Support tables for HTML5, CSS3, etc

當然很有很多其他在線生成(chéng)或是外挂包，歡迎大家補充，好(hǎo)讓我能(néng)更偷懶一點…

Responsive

先把 Html 和 Css 練熟了再來看 Responsive 這(zhè)個大難題。要做好(hǎo)一個 RWD 從 Wireframe 就要規劃好(hǎo)。在 Wireframe 階段我習慣先設計 Desktop 版本，功能(néng)最多最完善。但在寫 Code 的時候會是反過(guò)來、先從 Mobile 的尺寸開(kāi)始刻。剛接觸 RWD 的先套 Bootstrap 增加成(chéng)就感和手感，等熟悉了覺得不夠用綁手綁腳的時候，差不多該踏進(jìn) Sass、Compass、Susy 的領域。

别用現成(chéng)的軟件做 Responsive，除非是純靜态網頁不需要和 RD 合作，原始碼髒就髒沒(méi)關系反正不會有人看了。目前我看到「排排版就好(hǎo)」的軟件産出的 Code 沒(méi)有幹淨的，隻要是之後(hòu)有人還(hái)要接手的産出、拜托維持它的幹淨整齊。有沒(méi)有打開(kāi)廁所門看到一團亂産生暈眩感臉色發(fā)青的經(jīng)驗？看到惡心的 Code 就是這(zhè)種(zhǒng)感覺。
結論

以上寫的非常粗淺，隻能(néng)算是給個方向(xiàng)讓初學(xué)者知道(dào)要怎麼(me)學(xué)習。最好(hǎo)還(hái)是去找個 F2E 拜師學(xué)藝一下，靠自己自學(xué)寫出來的東西一定會被(bèi)正規 RD 嫌棄，我就被(bèi)老公罵過(guò)「這(zhè)是什麼(me)邪魔歪道(dào)」，邊哭邊學(xué)被(bèi)他嫌棄了一整年才得到勉強及格的評語。

如果能(néng)把上述 5 項都(dōu)練起(qǐ)來，就能(néng)自己接案賺外快了。隻要和程序無關的靜态網頁都(dōu)難不倒你。網絡上有些套裝的特效包可以拿來改一改套用，看起(qǐ)來也很炫。（遇到需要套程序接後(hòu)台的可以兩(liǎng)手一攤說這(zhè)超出網頁設計的領域要找 RD 配合。）

網頁設計和 F2E 職務範圍部份重叠，都(dōu)要寫 Html、Css，注重使用者體驗等等。最大的差别在于網頁設計師要畫 Flow、Wireframe、Mockup、切圖、（标示文件），會寫 JS 特效最好(hǎo)，不會寫也沒(méi)關系。但 F2E 就要對(duì) JS 很熟悉了。網頁設計師算是一腳踩在 UI/UX 圈、另一隻腳踩在 F2E 邊在線的角色。千萬小心在 Code 上不要和 F2E 起(qǐ)争執，請謙虛求教，沒(méi)事(shì)拿自己的弱項去撞别人的強項做什麼(me)？RD 寫 Code 輸給設計師是哪門子笑話？設計師強的當然是視覺啊！