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

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

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

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

1、尺寸和分辨率

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

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

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

2、文字規(guī)范

字體選擇

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

字體大小

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

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

文字顏色

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

字間距、行間距和段間距

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

3、圖片選擇和處理

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

4、柵格

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

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

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

5、切圖

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

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

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

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

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

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