網(wǎng)頁美工設(shè)計 第4章

第4章網(wǎng)頁元素設(shè)計（上）情景模擬文字和圖片是網(wǎng)頁最基本的組成元素，無論是網(wǎng)站Logo、Banner、導(dǎo)航欄還是網(wǎng)頁的其他內(nèi)容，都由文字和圖片組成，因此，在具體學(xué)習(xí)Logo、Banner、導(dǎo)航欄等網(wǎng)頁元素的設(shè)計前，需要先掌握文字和圖像設(shè)計的基礎(chǔ)知識。掌握了網(wǎng)頁配色和網(wǎng)頁布局知識后，小張和同學(xué)們迫不及待地想開始學(xué)習(xí)網(wǎng)頁元素的具體設(shè)計，以便接手校企合作企業(yè)交給他們的網(wǎng)頁設(shè)計任務(wù)。下面，他們將從設(shè)計女裝Banner文字開始，學(xué)習(xí)網(wǎng)頁元素的具體設(shè)計。掌握網(wǎng)頁背景設(shè)計，能夠根據(jù)需要合理地設(shè)計網(wǎng)頁背景了解網(wǎng)頁圖片的風(fēng)格，能夠在網(wǎng)頁中應(yīng)用符合網(wǎng)站風(fēng)格的圖片學(xué)習(xí)目標(biāo)掌握網(wǎng)頁文字的字符格式和排版設(shè)計，能夠根據(jù)版面需要設(shè)計網(wǎng)頁文字4.1網(wǎng)頁文字設(shè)計文字不僅是網(wǎng)站信息傳遞的重要載體，也是網(wǎng)頁中必不可少的視覺符號，因此，網(wǎng)頁文字的設(shè)計不僅影響網(wǎng)頁的信息傳播效果，而且直接影響頁面的視覺美感。5

4.1.1認(rèn)識字體字體是指文字的風(fēng)格特征。使用不同字體的文字，其筆畫粗細(xì)、結(jié)構(gòu)、形態(tài)等都不同。在計算機中，字體主要分為中文字體和西文字體兩種類型。其中，中文字體包括宋體、黑體、仿宋體等；西文字體包括TimesNewRoman、ArialBlack等。除書法體外，無論哪種字體，都是由襯線體和非襯線體演化而成的。襯線體在筆畫始末的地方有額外的裝飾，且粗細(xì)會因筆畫的不同而有所區(qū)別。此外，襯線體強調(diào)筆畫的走勢及前后聯(lián)系，從而使前后文有更好的連續(xù)性，適合作為正文字體。宋體與Garamond字體分別是最具代表性的中文和西文襯線體。宋體具有字形方正、橫細(xì)豎粗、撇如刀、捺如掃、點如瓜子等特點。宋體是通用的印刷體，用大號字時公正肅穆，不失變化，用小號字時清秀典雅，便于識別。Garamond兼具美觀性和易讀性，被譽為“襯線之王”，適合用于長時間閱讀的文字，西方文學(xué)著作常用Garamond字體作為正文。圖4-1所示為宋體和Garamond字體的對比。1．襯線體圖4-1宋體與Garamond字體6

7

非襯線體筆劃粗細(xì)基本一致，適合用作標(biāo)題之類需要醒目地方。通常書籍、文檔的正文內(nèi)容很少用非襯線體，而設(shè)計作品的正文內(nèi)容有時會使用非襯線體。黑體與Arial字體分別是典型的中文和西文非襯線字體。黑體也稱等線體，包括雅黑、美黑、仿黑等，具有橫豎粗細(xì)一致、方頭方尾的特點，文字渾厚有力、樸素大方。Arial字體是西文中常用的無襯線體，其字形干凈、清晰，易于辨認(rèn)。圖4-2所示為黑體與Arial字體的對比。2．非襯線體圖4-2黑體與Arial字體課堂互動無論是襯線體還是非襯線體，字體都是具有性格的，不同字體的性格存在鮮明的區(qū)別。網(wǎng)頁美工設(shè)計師應(yīng)根據(jù)網(wǎng)站風(fēng)格、產(chǎn)品特點選擇合適的字體。請在圖4-3所示的文字中選擇分別適合“男人”和“女人”的2種字體并簡述原因。圖4-3字體性格文字是傳遞信息的重要媒介，如何選擇字體樣式、筆畫粗細(xì)、字號與顏色等是網(wǎng)頁文字設(shè)計的重要部分。優(yōu)秀的網(wǎng)頁文字設(shè)計和排版不僅能夠準(zhǔn)確地傳達(dá)設(shè)計者的意圖，而且還能使瀏覽者在閱讀時更加輕松。4.1.2網(wǎng)頁文字字體設(shè)計9

圖4-4采用細(xì)筆畫文案的Banner10

1．字體選擇——筆畫粗細(xì)筆畫較粗的字體能夠傳遞力量感，更易識別，而筆畫較細(xì)的字體會更有文藝氣息，更加美觀。網(wǎng)頁美工設(shè)計者在選擇字體，設(shè)置筆畫粗細(xì)時應(yīng)考慮產(chǎn)品特點和網(wǎng)站風(fēng)格。圖4-4所示Banner的字體以筆畫較細(xì)的宋體為基礎(chǔ)，經(jīng)藝術(shù)化處理后，凸顯產(chǎn)品的文藝氣息和品質(zhì)感，呼應(yīng)“職場”“新品格”的主題。圖4-5所示Banner的主題是“運動”“力量”，設(shè)計師根據(jù)主題選用了筆畫較粗的字體，并通過藝術(shù)化處理將文字與主體進(jìn)行關(guān)聯(lián)，圖文結(jié)合，充分體現(xiàn)了主題的特點。圖4-5采用粗筆畫文案的Banner11

圖4-6網(wǎng)頁中常見的中文字號設(shè)置效果12

2．字號大小設(shè)置字號時應(yīng)考慮文字在網(wǎng)頁中的閱讀性和美觀性。大號文字能起到強調(diào)、突出的作用，一般用于標(biāo)題文字；甚至可根據(jù)需要將字號無限放大，讓文字充當(dāng)背景。小號文字則適合用于正文或輔助信息。中文字的結(jié)構(gòu)復(fù)雜且風(fēng)格多變，當(dāng)文字作為網(wǎng)頁中的正文或輔助信息時通常在10像素以下便難以識別，一般需要達(dá)到12像素才能體現(xiàn)出不錯的效果。為了兼具閱讀性和美觀性，網(wǎng)頁中正文常用的中文字號為10～14像素，如圖4-6所示。（1）中文字號13

英文字母簡潔，無復(fù)雜結(jié)構(gòu)，因此在可閱讀的前提下，無論大小，都能顯得簡潔、清晰。常用的英文正文或輔助信息字號可設(shè)置為9～13像素，如圖4-7所示。圖4-7網(wǎng)頁中常見的英文字號設(shè)置效果體（2）英文字號14

3．間距大小圖4-8字距不同的Banner間距包括字距與行距2個方面，它們能影響瀏覽者的視覺體驗和心理感受。字距與行距的比例會影響瀏覽者視線的移動。在設(shè)置正文的文字參數(shù)時，若字距大于行距，瀏覽者會在閱讀時產(chǎn)生疲勞感，容易發(fā)生串行的情況，因此，無論橫排還是豎排文字，字距都應(yīng)小于行距，否則會使文字內(nèi)容失去延續(xù)性，造成閱讀方向錯誤。當(dāng)文字用于藝術(shù)欣賞、廣告宣傳等時，文字的不同間距會產(chǎn)生截然不同的藝術(shù)效果。圖4-8（a）是加大文案字距和行距的Banner，給人清新、舒展、時尚的感覺。圖4-8（b）則是緊縮文字間距的Banner，給人壓迫、力量的感覺。（a）（b）15

4．文字顏色圖4-9網(wǎng)頁中文字顏色的不同選擇方式文字顏色能起到視覺導(dǎo)向作用，甚至通過顏色就能使瀏覽者區(qū)分信息的主次。雖然可以為網(wǎng)頁文字設(shè)置多種顏色，但黑色和白色始終是使用最廣泛的顏色，特別是在正文文字部分。而廣告中的標(biāo)題、關(guān)鍵詞則可靈活處理。常用的文字顏色選擇方法分別是從網(wǎng)站Logo中提取顏色，如圖4-9（a）所示；選擇貼近主題的顏色；從產(chǎn)品中提取顏色，如圖4-9（b）所示。（a）（b）網(wǎng)頁中的文案是由一個個文字組合而成的。從平面構(gòu)成的角度來看，單個的文字如同點，單行的文字如同線，而一行行的線組成的面就是文案。文字的對齊方式會影響文案的外形，形成不同形狀的面，產(chǎn)生不同的視覺效果，并影響閱讀體驗。4.1.3網(wǎng)頁文字編排設(shè)計16

圖4-10網(wǎng)頁中左對齊的文案17

1．左/右對齊左/右對齊的方式通常用于網(wǎng)頁中的正文部分。當(dāng)文案內(nèi)容較多時，利用左/右對齊方式編排文案，在文字行首或行尾形成一條清晰的垂直線，另一端則長短不一，可使文案產(chǎn)生虛實變化，富有節(jié)奏感。該方式適合排列具有較多文字的頁面，如圖4-10所示。18

居中排列是以頁面或版塊中心為準(zhǔn)，使文字居中排列。這種對齊方式更具視覺沖擊力，能夠突出中心內(nèi)容；不足之處是由于文案左右參差不齊，在閱讀過多文字時會出現(xiàn)串行的情況。因此，居中排列方式適合處理文案內(nèi)容較少的情況，如標(biāo)題、輔助信息等，如圖4-11所示。圖4-11網(wǎng)頁中居中排列的文案2．居中排列19

3．頂對齊模仿古文的縱向版式能使頁面更具文藝氣息和動感。在縱向版式中，如果對文案進(jìn)行頂對齊排列，可使文案更加規(guī)整。該方式適合用于宣傳“文化”“藝術(shù)”等內(nèi)容的網(wǎng)頁，如圖4-12所示。圖4-12網(wǎng)頁中頂對齊的文案根據(jù)版面需要，還可將文案編排在頁面的任意位置，使版式更加新穎。通常，自由編排的文案篇幅很短，可組成網(wǎng)頁背景或?qū)Ш巾?，如圖4-13所示。圖4-13網(wǎng)頁中自由編排的文案20

4．自由編排本例設(shè)計的女裝Banner要求清新、簡潔、時尚，具有視覺沖擊力，下面根據(jù)這些要求和提供的素材（見圖4-14）設(shè)計該Banner。4.1.4課堂案例——設(shè)計女裝Banner文字21

圖4-14女裝Banner素材和要求視頻講解22

圖4-15女裝Banner作品展示本例通過改變文案排列方式和Banner背景元素，打造清新、時尚和可愛3種風(fēng)格的Banner，效果如圖4-15所示。設(shè)計思路①確認(rèn)廣告風(fēng)格，文案層級；②選擇合適的背景、字體和輔助元素突出廣告風(fēng)格；③根據(jù)模特位置調(diào)整文案位置；④根據(jù)文案層級調(diào)整文字順序。24

啟動Photoshop，按【Ctrl+O】組合鍵，打開本書配套素材“第4章”文件夾中的“清新Banner素材.jpg”圖片，如圖4-16所示。步驟1圖4-16清新Banner素材案例步驟25

選擇工具箱中的“橫排文字工具”，利用工具屬性欄設(shè)置字體為微軟雅黑，大小為30點，顏色為白色，然后在圖像中單擊并輸入“潮品尖貨”，按【Ctrl+Enter】鍵確認(rèn)輸入；再分別單擊并輸入“煥新大賞”和“女裝夏季8折嗨促”，如圖4-17所示。步驟2圖4-17輸入文案26

提示選擇文字工具后，在圖像中單擊然后輸入的文本稱為點文本；選擇文字工具后，在圖像中拖出一個文本框，然后在文本框中輸入的文本稱為段落文本。用戶可利用文字工具屬性欄或“段落”面板設(shè)置段落文本的對齊方式、縮進(jìn)和段間距等。27

在“圖層”面板中選中“煥新大賞”圖層，然后選擇“窗口”>“字符”菜單打開“字符”面板，設(shè)置字體為宋體，字號為70，行距為80，粗細(xì)為仿粗體，如圖4-18所示；參考以上操作將“女裝夏季8折嗨促”的粗細(xì)設(shè)為仿粗體。步驟3圖4-18設(shè)置“煥新大賞”文本的字符格式28

選擇工具箱中的“移動工具”，并在工具屬性欄中勾選“自動選擇”復(fù)選框，然后利用拖動方式調(diào)整各文本的位置，效果如圖4-19所示。步驟4圖4-19文案效果29

提示模特的動作、眼神具有很強的方向性。在使用人物素材的時候，要留意模特動作、眼神的方向，最好順應(yīng)眼神的方向放置重要信息，如圖4-20所示。圖4-20合理的文案編排位置30

使用“橫排文字工具”在模特右下角單擊創(chuàng)建點文本，輸入“5.26～5.29”，參考以上操作更改字體為微軟雅黑，大小為22點，顏色為#44d1be，粗細(xì)為仿粗體；再在輸入的日期上方創(chuàng)建點文本，輸入“僅4天”，更改字體為漢儀綜藝體簡，字體大小為38點，然后利用“橫排文字工具”拖動選中“4”，單獨調(diào)整其字體大小為60點（調(diào)整完后需按【Ctrl+Enter】鍵確認(rèn)）；最后調(diào)整各文字的位置，效果如圖4-21所示。步驟5圖4-21輸入時間文案31

為了突出主題，使廣告更有活力，利用“橫排文字工具”分別選中文案關(guān)鍵字“新”“8折”“4”，分別將顏色設(shè)置為#f3e829，效果如圖4-22所示。步驟5圖4-22更改關(guān)鍵字顏色32

在“圖層”面板中選中“換新大賞”圖層，單擊面板下方的“添加圖層樣式”按鈕，從彈出的列表中選擇“投影”，打開“圖層樣式”對話框，然后參考圖4-23所示設(shè)置投影參數(shù)，為“換新大賞”文字添加投影圖層樣式。步驟7圖4-23為“換新大賞”文字添加投影圖層樣式33

選擇工具箱中的“直線工具”，在工具屬性欄中設(shè)置工具模式為“形狀”，填充為無，描邊顏色為白色，描邊寬度為2點，然后拖動鼠標(biāo)在“潮品尖貨”的左側(cè)繪制一條細(xì)線；使用“移動工具”選中細(xì)線，按住【Alt】鍵將其拖到文本右側(cè)，復(fù)制出一個副本，效果如圖4-24所示。步驟8圖4-24繪制細(xì)線34

選擇“文件”>“另存為”菜單，將圖像以PSD格式保存，文件名為“清新Banner.psd”；選擇“圖層”>“合并可見圖層”菜單，將所有圖層合并，然后將圖像以JPG格式另存，文件名為“清新Banner.jpg”。步驟9舉一反三請利用上述案例中的素材，通過更改背景、字體和構(gòu)圖方式等，分別制作可愛風(fēng)格和時尚風(fēng)格的Banner，效果如圖4-25所示。圖4-25不同風(fēng)格的Banner4.2網(wǎng)頁背景和圖像設(shè)計網(wǎng)頁背景是很重要的網(wǎng)頁元素之一，它決定了網(wǎng)站的基調(diào)。網(wǎng)頁背景主要分為兩類，一類是使用純色或漸變色作為網(wǎng)頁背景。常用的顏色有白色、灰色、黑色、淺藍(lán)色、淺綠色等，這些顏色能給人舒適、溫和的感覺，便于訪問者瀏覽網(wǎng)頁內(nèi)容，如圖4-26所示。4.2.1網(wǎng)頁背景設(shè)計圖4-26純色背景的網(wǎng)頁37

另一類是應(yīng)用圖片作為網(wǎng)頁背景，并按從上到下的瀏覽順序，將場景、主題圖像集中于頁首，以此向瀏覽者敘述故事、傳遞情感，呼應(yīng)網(wǎng)站主題或企業(yè)精神，而下方版塊部分則使用與頂部圖像相關(guān)聯(lián)的素材進(jìn)行銜接，使網(wǎng)頁渾然一體，如圖4-27所示。圖4-27圖片背景的網(wǎng)頁38

根據(jù)網(wǎng)站的主題和風(fēng)格，網(wǎng)頁中圖像的選擇應(yīng)有所區(qū)別，常見的網(wǎng)頁圖像具有以下3種風(fēng)格。4.2.2網(wǎng)頁圖像風(fēng)格39

40

1．寫實風(fēng)格圖4-28寫實風(fēng)格的網(wǎng)頁圖像采用經(jīng)藝術(shù)加工修飾后的寫實風(fēng)格圖像，能直觀、真實地反應(yīng)客觀情況，使瀏覽者身臨其境，常用于攝影、旅行、資訊、商品展示等網(wǎng)頁。4-28（a）所示為一家牙科醫(yī)院的網(wǎng)站，其通過圖像中醫(yī)生為患者診治的場景，真實地展現(xiàn)了醫(yī)者的服務(wù)、著裝、醫(yī)院環(huán)境、服務(wù)器械等，使瀏覽者無須親身抵達(dá)醫(yī)院也能感受到醫(yī)者對患者的服務(wù)態(tài)度。圖4-28（b）所示為一家音樂網(wǎng)站，頁面中人物用開心的表情表現(xiàn)聽歌時愉悅的心情，從圖中可直觀地看出模特的性別、年齡層次等，從而體現(xiàn)產(chǎn)品的適宜人群。（a）（b）41

2．手繪風(fēng)格圖4-29手繪風(fēng)格的網(wǎng)頁圖像手繪風(fēng)格的圖像