ps怎么制作網頁頁面?

ps也就是photoshop，我們一般用于制作網頁頁面的效果圖，用于展示制作好的網站頁面是什么樣的效果。這種形式是定制網站的必須步驟，能讓客戶直觀的看到網站頁面的樣式，便于修改。一個優雅的設計可能符合設計者的文件夾類型站點的需求，但是可能要根據各種各樣的原因而改變。這一切取決于要有良好的排版，結構化的布局以及具有視覺吸引力的背景。

在進行Web 網頁設計時，需要遵循一定的設計規范。了解Web 設計的規范可以幫助設計新人更好地把握工作的要點，減少失誤。

1、尺寸和分辨率

在Photoshop 的“新建文檔”對話框中有常見的幾種網頁尺寸預設供選擇，如：網頁-常見尺寸（1366×768 像素）、網頁-大尺寸（1920×1080 像素）、網頁-最小尺寸（1024×768 像素）、MacBook Pro13 （2560×1600 像素）、MacBook Pro15（2880×1800像素）、iMac 27（2560×1440 像素）等。

尺寸設置涉及各種屏幕適配的問題，在實際工作中需要與前端開發人員溝通具體細節。因為網頁是由電子屏幕來顯示的，所以將網頁設計文檔的分辨率設置為72ppi，顏色模式選擇為RGB 顏色。

需要注意的是，網頁設計的區域并不會占滿整個畫布。以1920像素×1080像素的網頁為例，在設計網頁首屏時，網站的寬度為1920像素，高度約為900像素， 因為需要從1080像素的高度中減去瀏覽器頭部和底部的高度。為了避免內容顯示不全，1920像素的寬度也不建議占滿。所以建議在寬度為1400/1200/1000 像素，高度約為900像素的內容安全區域進行設計。

2、文字規范

字體選擇

出于易讀性的考慮，網頁的字體一般使用非襯線字體。中文網頁推薦使用蘋方或微軟雅黑字體，英文網頁則推薦使用Arial字體。

字體大小

在字體大小方面，常用的字體大小為12像素、14像素、16像素和18像素，如圖下方例圖所示。12像素是適用于網頁的最小字號，適用于注釋性內容；14像素則適用于普通正文內容；16像素或18像素適用于突出性的標題內容。網站的字體大小并沒有硬性規定，具體的字號可以根據實際情況酌情考慮，但是要使用偶數字號。

在一個網頁中，字體的種類不需要太多，最多使用3 種字體進行混搭。如果需要字體來表現更多信息層級，可以通過改變字體顏色或選擇加粗字體來體現。

文字顏色

主文字的顏色，建議使用品牌的VI 顏色，這樣做可提高網站與品牌之間的關聯，增加可辨識性和記憶性。正文字體顏色，選用易讀性的深灰色，如#333333、#666666等；輔助性的注釋類文字，則可以選用#999999等比較淺的顏色。

字間距、行間距和段間距

字間距使用默認數值即可。行間距一般為字號大小的1.5至2倍。以14像素的正文字號為例，行間距一般設置為21~28像素。段間距一般為字號的2至2.5倍。以14像素的正文字號為例，段間距一般設置為28~35像素。

3、圖片選擇和處理

網站設計中常用的寬高比是4:3、16:9、1:1等比例圖片。具體圖片大小沒有固定要求，但以整數和偶數為佳。選擇圖片素材時，盡可能選擇尺寸比目標尺寸大的圖片，圖片處理的空間會更大。圖片的格式有很多，如支持透明的PNG 格式、節省空間的JPG 格式、支持動畫的GIF 格式等。輸出網絡使用的圖片時，在保證圖像清晰度的情況下，文件占用空間越小越好。

4、柵格

柵格也被稱為網格。在網頁設計中常用12柵格，如下方的例圖所示，它便于對網頁進行2等分、3等分、4等分，從而適應大多數網頁布局。每個柵格包含列和水槽，列承載內容，水槽不能填充內容。網格中列越多，靈活性越大，相應的，復雜度越高，所以并不是列越多越好。

柵格系統能大大提高網頁的規范性，使網頁看起來更有秩序感。在柵格系統下，頁面中所有組件的尺寸都是有規律的。另外，基于柵格進行設計，可以讓整個網站各個頁面的布局保持一致。這能增加頁面的相似度，提升用戶體驗。

設計中很多時候需要將多個柵格合并，從而形成一個組合區域來使用，組合區域內的水槽可以承載信息。下方例圖所示為一種柵格合并使用的方式，左邊6個柵格形成一個組合，右邊的6個柵格，每兩個形成一個組合。

5、切圖

切圖工作有時候由設計師負責，有時候由前端工程師負責，因此需要根據不同公司的具體情況來進行溝通協調。

設計師需要了解一些切圖的基本知識。在網頁設計中，能夠直接導出圖片的元素，不需要切圖，如帶透明的元素可以直接導出PNG 圖片。而前端工程師可以簡單制作的圖片或圖形，也不需要切圖，如純色的底圖，在提交設計規范時標注顏色數值即可。還有像一些簡單的按鈕，前端工程師也能直接用代碼實現。因為切圖工作與前端開發工作密切相關，所以設計師需要與前端人員多多溝通，互相協作。

Photoshop中的“切片工具”可以輔助切圖工作。切片工具位于工具箱中。切片工具的使用方法是，選中切片工具后，直接在工作區框選切片的區域，系統將自動劃分出切片的范圍。使用切片工具時，除了直接框選切片區域外，還可以基于參考線來切片。如微博九宮格宣傳圖，可以基于圖片原有的九宮格參考線來切片。在顯示參考線的情況下，單擊切片工具屬性欄的“基于參考線的切片”按鈕，即可基于參考線進行切圖。

除了微博九宮格圖片需要切圖外，電商詳情頁有的時候也需要切圖。以淘寶詳情頁為例，平臺對圖片高度有統一的要求，因此超出規定高度的詳情頁需要切割后再上傳。切割詳情頁也可以使用切片工具。

如何導出這些切片呢？執行“文件-導出-存儲為Web所用格式”命令，在彈出的對話框中使用切片選擇工具，選擇自己需要導出的切片，設置好圖片格式、圖像大小后導出即可。

免費空間網站-中國免費空間服務商-最后的一款免費空間等你來領取。
虛擬主機95%均有贈送數據庫，一般不需要單獨購買。支持子站的主機，若要開設多個網站時，默認只贈送一個數據庫。
國內主機備案時間較長贈送1個月備案時長。7X24小時專業運維保護。域名頻道主機提供7天試用，滿意后再付款。為用戶解決后顧之憂。
訪問域名頻道官網www.tom51.com，開始你的網站空間租用和建站之旅。