1、網頁設計流程
網頁設計的兩大要點是：整體風格和色彩搭配。
確定網站整體風格
在這里，我提供給大家一些參考經驗：
1．將你的標志logo，盡可能的放在每個頁面上最突出的位置。
2．突出你的標准色彩。
3．總結一句能反映貴站精髓的宣傳標語！
4．相同類型的圖像採用相同效果，比如說標題字都採用陰影效果，那麼在網站中出現的所有標題字的陰影效果的設置應該是完全一致的！
網站的整體風格及其創意設計是最難以學習的，難就難在沒有一個固定的模式可以參照和模仿。給你一個主題，任何兩人都不可能設計出完全一樣的網站。
R、G、B就是Red、Green、Blue（紅，綠，藍）三種顏色，RGB模式就是由這三種顏色為基色進行疊加而模擬出大自然色彩的色彩組合模式。我們日常用的彩色電腦顯示器、彩色電視機等的色彩都使用這種模式。
1、 矢量圖
矢量圖又叫做向量圖，是用一系列計算機指令來描述和記錄一幅圖，一幅圖可以解為一系列由點、線、面等到組成的子圖，它所記錄的是對象的幾何形狀、線條粗細和色彩等。生成的矢量圖文件存儲量很小，特別適用於文字設計、圖案設計、版式設計、標志設計、計算機輔助設計（CAD）、工藝美術設計、插圖等。矢量圖只能表示有規律的線條組成的圖形，如工程圖、三維造型或藝術字等； 常見的矢量圖處理軟體有CoreIDRAW、AutoCAD、Illustrator和FreeHand等。
2、點陣圖
點陣圖又叫點陣圖或像素圖，計算機屏幕上的圖你是由屏幕上的發光點（即像素）構成的，每個點用二進制數據來描述其顏色與亮度等信息，這些點是離散的，類似於點陣。 點陣圖在放大到一定限度時會發現它是由一個個小方格組成的，這些小方格被稱為像素點，一個像素是圖像中最小的圖像元素。也就是我們俗稱的馬賽克。
bmp：是未經過壓縮的用點陣來表示的真彩圖片,佔用磁碟空間較大
gif：是經過壓縮的,只能表示256種顏色,佔用磁碟空間小,常用來演示色彩單一的成塊的卡通圖案,GIF還有一種可以表示連續的動畫。
png：是fireworks的圖片格式
jpg：也稱為jpeg,是有損壓縮格式但是它表示的顏色比較豐富,一般用來顯示真彩的照片或圖案。
作為設計者和客戶（這里指各站長），如果事先沒有明文協議的話設計者有權不提供源文件。
VI是Visual Identity的縮寫，中文譯為「企業視覺識別」。VI是CI計劃的靜態識別符號，是企業理念視覺化傳達的載體，因此它項目最多，效果最為直接。VI作為視覺識別，它是外在表現，固然需要具有美感，但VI必須是MI的體現，直接反映企業的理念。因此VI設計包含這樣一些原則：即充分傳達企業理念、人性原則、民族性原則、簡潔抽象及動態原則、員工參與原則、法律原則、藝術性原則和個性原則。
CI是Corporate Identity的縮寫，中文譯為「企業形象」。CI計劃，是指企業有目的、有計劃、戰略性地創造出所希望的自身形象，由此提高企業的社會知名度，最終得到自己最適合的經營環境。
而logo只是網站或企業一個標志。
網頁色彩搭配
1．用一種色彩。這里是指先選定一種色彩，然後調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感。
2．用兩種色彩。先選定一種色彩，然後選擇它的對比色。
3．用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。
在網頁配色中，還要切記一些誤區：
1．不要將所有顏色都用到，盡量控制在三至五種色彩以內。
2．背景和前文的對比盡量要大(絕對不要用花紋繁復的圖案作背景)，以便突出主要文字內容。
網頁設計工具
圖像處理設計：
adobe PhotoShop（外語簡稱：PS、其程序圖標便是它的外語簡稱）是一個由Adobe Systems開發和發行的圖像處理軟體。 Adobe Photoshop有兩個發行版本：標准版Adobe Photoshop和擴展版Adobe Photoshop Extended，擴展版除包含標准版所有功能之外，還增加了3D處理功能、動畫圖形編輯功能和高級圖像分析功能。 Adobe只支持Windows操作系統和Mac OS操作系統版本的Photoshop ， 但Linux操作系統用戶可以通過使用Wine來運行Photoshop CS6。
Fireworks，跟Photoshop一樣都是圖像處理軟體，但Fireworks偏向於對網頁的處理。
StylePix（單位：Hornil）跟PhotoShop一樣都是圖象處理軟體，可以處理光柵及矢量圖形。
動畫設計：
Adobe Flash，前稱Macromedia Flash，外語簡稱Flash，前身FutureSplash，既指Adobe Flash Professional多媒體創作程序，也指Adobe Flash Player。
網頁代碼編輯器：
Adobe Dreamweave（前稱Macromedia Dreamweaver）用於編輯HTML、ASP、JSP、PHP、CSS、XML、JS的頁面製作工具；是Adobe公司的著名網站開發工具。它使用所見即所得的介面，亦有HTML編輯的功能。有支持Mac和Windows兩個系統的版本。
Amaya（單位：萬維網聯盟）用於編輯HTML、CSS、數學標記語言、可縮放矢量圖形的工具。
2、UI設計中的切圖是怎麼切
UI切圖一般都會用到專門的軟體，比如我們用的摹客，Sketch、Adobe XD、PS的設計稿都支持，設計師只需在設計稿上進行切圖標記，然後用摹客的插件上傳到平台，就可以自由下載和使用切圖了。以PS的插件為例：
1.安裝摹客的PS插件，安裝好之後在PS的「窗口>擴展功能」找到摹客插件，選擇並打開：
2.標記切圖：在完成的設計稿上，選中需要切圖的圖層或編組，點擊「標記切圖」。當圖層或編組的名稱前增加了「-e-」，「標記切圖」變為「取消切圖標記」，就可以了。
3.標記切圖後，點擊插件的上傳按鈕，開發工程師就可以在摹客平台自主下載不同尺寸和平台的切圖了。
摹客的這些切圖和標注等功能都是免費的，可以使用。
3、前端開發需要學習設計嗎？
前端開發不需要學習設計，只需要掌握「切圖」技能就可以了。
1. 設計師與前端工程師的關系：
在一家企業中，前端工程師與設計師在崗位上是獨立的，業務上有聯系：
設計師根據產品經理提供的產品原型圖進行適當分析，再設計出一套前端開發人員能夠使用的設計圖（PSD圖）；
前端工程師根據設計師提供的PSD圖，進行切圖工作，並使用具體的HTML、CSS、JavaScript代碼實現網站的還原。
2. 前端工程師工作中的「設計」模塊
尋找出PSD圖中的圖片元素，將其切下來（簡稱切圖）之後進行適當的處理，將圖片存儲為合適的格式，有時還需要進行背景圖合並的操作。
提示:網頁設計並不是前端開發工程師的工作。
資料來源：《HTML5布局之路》
4、你好，今天我去面試ui設計工作，那個人問我:你回答一下什麼是切圖？我說:切圖？？不就是拿刀切嗎？我
腦洞挺大的，要是能把設計學深了，估計前途無量。先了解自己想要從事的設計行業的相關理論知識吧，不要什麼設計類型都看一遍，設計那麼多種，每一種涉及到的領域都很多。網頁設計好後的切圖是將設計稿切成便於製作成頁面的圖片。有利於交互，形成良好的視覺感。切圖為後端編程者帶來方便，提高效率，讓網頁稿有了交互性，實現平時看到的各種各樣的功能，畫面瀏覽速度快，有利於優化等。
5、UI設計中關於設計規范，切圖和尺寸的幾點疑
切圖嚴格來說並不是Ui設計師的工作
而是前端工程師的工作
指的是將設計師的設計轉化為網頁
是一種將設計師的「理想」轉化為「現實」的工作
將psd進行切片重組 利用div+css js等等前端開發代碼來生成網頁的一種技術
6、我現在很苦惱，自己是學習網頁設計專業的，從事網站前端工作，設計加切圖調整兼容，但是不怎麼會寫js，但
好久沒有回答問題了
UI分為三方面：游戲、網頁、手機。你如果不想去做手機UI，還是想繼續在網頁方面發展，可以選擇做網頁UI設計師，但根據你的情況，你要學手機UI了，但是沒關系，你學完了之後，根據你的經驗和掌握的，你完全可以向GUI設計師方向發展。
這樣手機UI你也可以設計，網頁方面你也可以主攻。
7、網頁製作，是不是都是先切圖，再DIV+CSS啊
如果單純的說網頁製作的話，分為以下步驟：
1、對所做的網站進行策劃
2、對策劃好的網站用專制圖軟體進行設屬計
3、吧設計好的網站文件進行切圖
4、按照設計圖對網站開始用div+css進行排版
這是大致流程，一般網站都是這么做的！
8、前端開發工程師需要學習設計嗎？
前端開發工程師是Web前端開發工程師的簡稱，2007年才真正開始受到重視的一個新興專職業。Web前端開發技術是一個先屬易後難的過程，主要包括三個要素：HTML（標准通用標記語言下的一個應用）、級聯樣式表和JavaScript。
前端開發工程師不僅要掌握基本的Web前端開發技術，網站性能優化、SEO和伺服器端的基礎知識，而且要學會運用各種工具進行輔助開發以及理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。
9、前端新手需要寫頁面。但是老師要求先用photoshop先切圖。需要一個會切圖的大神幫下忙，非常感謝
你其實可以直接用專業的前端切圖工具，比如摹客的PS插件來完成切圖。摹客支持Sketch、Adobe XD、PS的設計稿，設計師只需在設計稿上進行切圖標記，然後上傳就可以下載所有切圖了。
以PS為例，主要是這樣操作：
1.在摹客官網安裝並打開插件
插件安裝好後打開PS，在「窗口>擴展功能」找到摹客插件，選擇並打開。使用摹客平台賬號登錄。
2.標記切圖
在完成的設計稿上，選中需要切圖的圖層或編組，點擊「標記切圖」。將在名稱前增加「-e-」，「標記切圖」變為「取消切圖標記」，則標記切圖完成。
3.上傳至摹客
標記切圖後，一鍵將設計稿上傳至雲端項目中，開發工程師就可以自主下載切圖，只需在右側面板中選中切圖，點擊即可下載。
摹客切圖支持：
1.切圖壓縮：在右側面板中選中切圖
2. 切換平台和選擇倍率：iOS、Android、Web
3. 下載選中切圖，一步到位。
10、關於網頁製作的，什麼是切圖，切圖要達到什麼目的，用什麼工具來切
製作網頁，很多的時候，首先要用圖片處理軟體製作出網頁的效果圖。效果圖做好是一幅完整的圖片，不可能把這一整張的圖片都用在網頁里。把效果圖中有用的部分剪切下來作為網頁製作時的素材，這個過程就是切圖。（當然是用剪切、選擇工具也可以，但是用切片工具處理更精確。）
切圖的目的就是更加精確的進行網頁布局。
photoshop、fireworks等軟體都帶有切片工具。