IDC知識(shí)庫(kù)
IDC領(lǐng)域?qū)I(yè)知識(shí)百科平臺(tái)

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

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

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

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

1、尺寸和分辨率

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

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

需要注意的是,網(wǎng)頁(yè)設(shè)計(jì)的區(qū)域并不會(huì)占滿整個(gè)畫(huà)布。以1920像素×1080像素的網(wǎng)頁(yè)為例,在設(shè)計(jì)網(wǎng)頁(yè)首屏?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)頁(yè)的字體一般使用非襯線字體。中文網(wǎng)頁(yè)推薦使用蘋(píng)方或微軟雅黑字體,英文網(wǎng)頁(yè)則推薦使用Arial字體。

字體大小

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

在一個(gè)網(wǎng)頁(yè)中,字體的種類不需要太多,最多使用3 種字體進(jìn)行混搭。如果需要字體來(lái)表現(xiàn)更多信息層級(jí),可以通過(guò)改變字體顏色或選擇加粗字體來(lái)體現(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等比例圖片。具體圖片大小沒(méi)有固定要求,但以整數(shù)和偶數(shù)為佳。選擇圖片素材時(shí),盡可能選擇尺寸比目標(biāo)尺寸大的圖片,圖片處理的空間會(huì)更大。圖片的格式有很多,如支持透明的PNG 格式、節(jié)省空間的JPG 格式、支持動(dòng)畫(huà)的GIF 格式等。輸出網(wǎng)絡(luò)使用的圖片時(shí),在保證圖像清晰度的情況下,文件占用空間越小越好。

4、柵格

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

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

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

5、切圖

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

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

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

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

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

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

贊(5)
分享到: 更多 (0)

中國(guó)專業(yè)的網(wǎng)站域名及網(wǎng)站空間提供商

買(mǎi)域名買(mǎi)空間