ps怎么制作網(wǎng)頁頁面

ps怎么制作網(wǎng)頁頁面?

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

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

1、尺寸和分辨率

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

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

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

2、文字規(guī)范

字體選擇

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

字體大小

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

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

文字顏色

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

字間距、行間距和段間距

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

3、圖片選擇和處理

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

4、柵格

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

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

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

5、切圖

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

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

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

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

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

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