第一篇：淺談廣告設(shè)計(jì)之網(wǎng)頁(yè)設(shè)計(jì)

淺談廣告設(shè)計(jì)之網(wǎng)頁(yè)設(shè)計(jì)

內(nèi)容提要：淺談廣告設(shè)計(jì)里的網(wǎng)頁(yè)設(shè)計(jì)，通過(guò)這幾個(gè)學(xué)期的學(xué)習(xí)和實(shí)踐，總結(jié)了一些關(guān)于網(wǎng)頁(yè)界面設(shè)計(jì)的個(gè)人看法和實(shí)踐中得到的一些經(jīng)驗(yàn)。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì) 理念 色彩搭配 留白 細(xì)節(jié) 注意事項(xiàng)

21世紀(jì)是一個(gè)信息化的時(shí)代。網(wǎng)絡(luò)這一信息時(shí)代的產(chǎn)物，使我們的生活更加豐富多彩，同時(shí)它也造就了一門(mén)新的藝術(shù)“網(wǎng)頁(yè)設(shè)計(jì)”。隨著時(shí)代的進(jìn)步，科技和文化的發(fā)展，信息化社會(huì)及多元化時(shí)代的到來(lái)，網(wǎng)頁(yè)設(shè)計(jì)隨著時(shí)代的變遷而不斷的革新。我們應(yīng)該掙脫慣常、理性、邏輯的縱向思維，嘗試與研習(xí)橫向、發(fā)散、逆向、悖理等思維方式，多種思維方式的相互補(bǔ)充與綜合使用會(huì)顯著提高效率。我認(rèn)為不管是做平面設(shè)計(jì)還是做網(wǎng)頁(yè)設(shè)計(jì)的人都應(yīng)該具有良好的審美能力。那么平面設(shè)計(jì)和網(wǎng)頁(yè)設(shè)計(jì)有什么不同呢？

（一）設(shè)計(jì)理念的不一樣

平面設(shè)計(jì)的核心是品牌。它主要以品牌為出發(fā)點(diǎn)去設(shè)計(jì)，要在視覺(jué)上100％體現(xiàn)品牌的魅力。而網(wǎng)頁(yè)設(shè)計(jì)的核心是用戶。網(wǎng)站的目的是與用戶100％溝通，那么網(wǎng)頁(yè)設(shè)計(jì)其實(shí)是一種UI設(shè)計(jì)，也就是所謂的界面設(shè)計(jì)，要以用戶的操作習(xí)慣為出發(fā)點(diǎn)去設(shè)計(jì)，換句話說(shuō)也就是要設(shè)計(jì)得人性化，讓用戶使用得更方面。

（二）顏色運(yùn)用的區(qū)別

平面設(shè)計(jì)可以使用成千上萬(wàn)種顏色，換句話說(shuō)可以使用所有顏色，但是網(wǎng)頁(yè)設(shè)計(jì)不行！網(wǎng)頁(yè)設(shè)計(jì)中規(guī)定了240種安全色，也就是說(shuō)只能使用這240種顏色才能使網(wǎng)頁(yè)更加漂亮，更加有兼容性。

（三）特殊的要求

網(wǎng)頁(yè)設(shè)計(jì)不僅僅是在做設(shè)計(jì)，更多的是要考慮網(wǎng)頁(yè)的打開(kāi)速度、兼容性等問(wèn)題。所以有時(shí)候不得不為了照顧這些特殊的要求而犧牲美觀。我們往往看到門(mén)戶站的網(wǎng)頁(yè)都是大量的文字，這其實(shí)是為了減少頁(yè)面的打開(kāi)時(shí)間。韓國(guó)的網(wǎng)站喜歡用大量的圖片、FLASH，那是因?yàn)轫n國(guó)的網(wǎng)絡(luò)帶寬全球第二，它有那個(gè)條件去大量的實(shí)現(xiàn)視覺(jué)沖擊！而目前的中國(guó)不行。

我們平時(shí)看到很多品牌的網(wǎng)站，很絢麗、很好玩、甚至很有創(chuàng)意，那其實(shí)是網(wǎng)絡(luò)廣告而已，雖然那表面上是個(gè)網(wǎng)站。網(wǎng)絡(luò)廣告的目的跟其他廣告一樣，為的就是宣傳品牌形象、介

紹產(chǎn)品功能等等。但是網(wǎng)站不一樣，一個(gè)網(wǎng)站是要實(shí)現(xiàn)某些具體的功能，也就是說(shuō)網(wǎng)站是要功能>美觀，而網(wǎng)絡(luò)廣告是要美觀>功能。

隨著信息時(shí)代的發(fā)展，網(wǎng)絡(luò)成為了人們生活中不可或缺的一部分。我們從事設(shè)計(jì)的人員應(yīng)不斷創(chuàng)新，掙脫慣常、理性、邏輯的縱向思維，嘗試與研習(xí)橫向、發(fā)散、逆向、悖理等思維方式，來(lái)提升自己的設(shè)計(jì)水平。

一、網(wǎng)頁(yè)設(shè)計(jì)，——細(xì)節(jié)重要

不管是平面設(shè)計(jì)還是網(wǎng)頁(yè)設(shè)計(jì)，細(xì)節(jié)是非常重要的。

我們的眼睛和感覺(jué)總是非常敏銳的，即使是完全不了解網(wǎng)頁(yè)設(shè)計(jì)技術(shù)的人也能夠從一堆拙劣的設(shè)計(jì)作品當(dāng)中挑選出那一個(gè)優(yōu)秀的設(shè)計(jì)作品。雖然他說(shuō)不出來(lái)為什么這件東西比那些都好，但是直覺(jué)會(huì)告訴他他自己喜歡哪一個(gè)。

如果別人向我們問(wèn)起為什么這件作品要優(yōu)于其它呢？我們的回答是“很大一部分原因是因?yàn)閮?yōu)秀的設(shè)計(jì)作品總是充滿了豐富的細(xì)節(jié)?！?/p>

（一）像素的襯線

當(dāng)你做網(wǎng)頁(yè)的時(shí)候，1像素在訪客的眼里可能不會(huì)太在意，但是在一個(gè)設(shè)計(jì)師眼里，那卻是很大的失誤。襯線可以體現(xiàn)物體在2D效果上的立體感。而立體感的體現(xiàn)必須要有陰影和高光。陰影我們通常使用圖層樣式來(lái)實(shí)現(xiàn)，而高光效果的實(shí)現(xiàn)，最常用的技巧之一就是使用襯線了。如果能合理的利用好1像素襯線，那網(wǎng)頁(yè)可以在瞬間提升一個(gè)檔次。

（二）細(xì)微的材質(zhì) 坑坑洼洼凹凸不平的材質(zhì)可以讓你的網(wǎng)頁(yè)更具質(zhì)感，讓訪客感覺(jué)更加的真實(shí)。但是過(guò)于醒目和復(fù)雜的背景材質(zhì)不僅不能為設(shè)計(jì)增色，反而由于分散讀者的注意力而是整個(gè)設(shè)計(jì)品質(zhì)降低。所以最好的策略就是讓你的背景材質(zhì)保持細(xì)微而柔和。

（三）柔和的漸變

柔和的漸變可以使網(wǎng)頁(yè)變得更加的生動(dòng)真實(shí)，不會(huì)顯得呆板。在漸變的使用中需要注意的是，除某些特殊情況外，不要使用太過(guò)強(qiáng)的漸變，不論是色向上還是亮度上還是飽和度上都不可跨度太過(guò)強(qiáng)。因?yàn)檫@樣強(qiáng)烈的過(guò)度根本不帶真實(shí)感，給人一種很不舒適的感覺(jué)。

（四）微妙的陰影

我們可以使用CSS3中的text-shadow屬性來(lái)完成文字的投影設(shè)計(jì)，代替了在Photoshop中完成此項(xiàng)工作。而且使用CSS3來(lái)給文字添加陰影自由度更高，在瀏覽器支持的情況下，你可以給任意文字添加你想要的陰影效果。當(dāng)然IE8以下版本的瀏覽器是不支持此項(xiàng)屬性的，這是我們?cè)谠O(shè)計(jì)中需要注意的地方。另外，和前面提到的其它設(shè)計(jì)細(xì)節(jié)一樣，陰影的效果也要足夠柔和，不可過(guò)于強(qiáng)烈，不然很容易讓整個(gè)設(shè)計(jì)看起來(lái)有一種臟臟的感覺(jué)，顯得不夠精致。

細(xì)節(jié)能體現(xiàn)一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師的水平高低，更能體現(xiàn)出設(shè)計(jì)師的工作態(tài)度。

二、網(wǎng)頁(yè)也需要“呼吸”——留白 網(wǎng)站頁(yè)面設(shè)計(jì)留白在網(wǎng)頁(yè)設(shè)計(jì)中，尋求設(shè)計(jì)在不同角度的精致表現(xiàn)，力求把設(shè)計(jì)延伸到每一個(gè)角落，無(wú)論從哪一個(gè)角度審視，都展現(xiàn)出完美的設(shè)計(jì)魅力，從而達(dá)到局部帶動(dòng)整體的設(shè)計(jì)目的。

一是網(wǎng)頁(yè)頂部（頭部）留白。保留傳遞網(wǎng)站的類(lèi)型、風(fēng)格的logo和提供簡(jiǎn)單明了導(dǎo)航鏈接。二是頁(yè)面背影留白。去除阻礙視線順暢流動(dòng)的底紋等裝飾性元素，根據(jù)實(shí)際需要設(shè)計(jì)好頁(yè)面邊空。三是簡(jiǎn)化標(biāo)題表現(xiàn)，去除題花等裝飾性元素，特別是頭條、置頂、圖版等，不作圍框、流動(dòng)、色彩變換等特效重復(fù)強(qiáng)調(diào)。

四是版塊分離用空白而不是表格或線條。

網(wǎng)頁(yè)設(shè)計(jì)是Web設(shè)計(jì)中最直接可見(jiàn)的部分，簡(jiǎn)潔、單純、可用是當(dāng)代Web標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)的主流，迅速、有效地傳達(dá)信息，少用裝飾，強(qiáng)調(diào)虛實(shí)、留白的運(yùn)用成為網(wǎng)頁(yè)設(shè)計(jì)的時(shí)尚追求。在網(wǎng)頁(yè)設(shè)計(jì)中有效運(yùn)用留白的技法和觀念，無(wú)疑是對(duì)Web標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)技術(shù)與藝術(shù)思維的極大豐富和拓展，也必將促使我們對(duì)這一思維方法展開(kāi)更高層次的研究和探索?！傲舭住笔侵袊?guó)傳統(tǒng)繪畫(huà)藝術(shù)千錘百煉的結(jié)晶，這種藝術(shù)思想源于傳統(tǒng)的中國(guó)哲學(xué)思想，基于陰陽(yáng)辯證、虛實(shí)相生的原理。虛與實(shí)作為我國(guó)古代美學(xué)的一對(duì)范疇，在古代哲學(xué)思想中有很深淵源。網(wǎng)頁(yè)設(shè)計(jì)通過(guò)網(wǎng)頁(yè)上的文字、圖形、音視頻、動(dòng)畫(huà)等元素向用戶傳達(dá)信息，把各種網(wǎng)頁(yè)元素做藝術(shù)而合理的處理，讓用戶在接受信息的同時(shí)享受到美感，獲得良好的用戶體驗(yàn)。虛實(shí)與留白是網(wǎng)頁(yè)設(shè)計(jì)要遵循形式美的法則之一。

網(wǎng)頁(yè)設(shè)計(jì)留白的內(nèi)涵包括三個(gè)方面：

（一）頁(yè)面的空白部分

“白色是一切色彩中最完美的顏色，我們幾乎找不到白色有消極意義的情境?！比鏻ogo區(qū)的空白、標(biāo)題區(qū)的空白、內(nèi)容和圖片周?chē)目瞻?、網(wǎng)頁(yè)背景空白等等。

（二）大面積的有色范圍 如在頁(yè)面設(shè)計(jì)中只放置極少的必要元素，背景則用大面積的單純色彩渲染，利用單純色彩的力量來(lái)突出和烘托網(wǎng)頁(yè)上的主要元素。

（三）頁(yè)面主要設(shè)計(jì)元素背景重復(fù)出現(xiàn) 頁(yè)面主要設(shè)計(jì)元素的背景是重復(fù)出現(xiàn)的、在視覺(jué)上呈現(xiàn)出整體性的規(guī)則圖形的組合。這種為突出主體而留下的“白”，在網(wǎng)頁(yè)設(shè)計(jì)中只要處理得當(dāng)，依然會(huì)成為網(wǎng)頁(yè)設(shè)計(jì)留白的典范。在網(wǎng)頁(yè)設(shè)計(jì)中，無(wú)論是頁(yè)面的空白，還是大面積的有色范圍，或是規(guī)則圖形的組合背景，都是頁(yè)面的“虛”，是為了強(qiáng)調(diào)主體，明晰層次，突出主要的、關(guān)鍵的元素這個(gè)“實(shí)”的。

留白是一種藝術(shù)形式，利用留白來(lái)達(dá)到頁(yè)面平衡，使整個(gè)頁(yè)面布局松緊有度，形成虛實(shí)、濃淡、動(dòng)靜、輕重的效果，給人以跌宕起伏之感。與其他藝術(shù)形式不同的是，網(wǎng)頁(yè)設(shè)計(jì)是以傳達(dá)頁(yè)面信息為主要目的的，留白更多的是服務(wù)和服從于網(wǎng)頁(yè)的可用性。無(wú)數(shù)的可用性研究證實(shí)了一個(gè)事實(shí)：在Web中，用戶對(duì)網(wǎng)頁(yè)信息是進(jìn)行瀏覽，而不是閱讀。簡(jiǎn)潔明快、富于美感的頁(yè)面更具有可瀏覽性，可使用戶獲得更加良好的瀏覽體驗(yàn)。

（一）可用性體現(xiàn)

1.突出設(shè)計(jì)主題 人們?cè)谕暾亟邮掌矫嬖匦畔r(shí)，視線會(huì)形成一個(gè)習(xí)慣性的流動(dòng)順序：視點(diǎn)先落入視覺(jué)焦點(diǎn)，后隨個(gè)元素間的強(qiáng)弱變化而作有序流動(dòng)，最后完成對(duì)全部分元素信息的吸收。如在主題文字的周?chē)舫銮‘?dāng)?shù)目瞻卓臻g，會(huì)比更改變主題文字大小和色彩更顯突出，同時(shí)也使的頁(yè)面在統(tǒng)一性上更易處理。

2.簡(jiǎn)潔頁(yè)面元素 少就是多，簡(jiǎn)潔就是豐富，單純就是飽滿。在單純中求豐富，在簡(jiǎn)練中求明快。適當(dāng)合理的留白空恰似一個(gè)心靈歇息的驛站，讓我們的神經(jīng)得到了有效的緩和，從而使用戶輕松瀏覽。當(dāng)下網(wǎng)站建設(shè)中，功利色彩非常濃厚，網(wǎng)頁(yè)上堆積的信息可以“多”、“擠”、“滿”、“亂”形容，從視覺(jué)的角度解決辦法之一就是運(yùn)用網(wǎng)頁(yè)留白，這種留白可以是空白，也可以是大面積的單純色彩，或者是規(guī)則圖形的組合，無(wú)一例個(gè)地，它使文字之間、圖形之間形成頁(yè)面節(jié)奏感、版塊層次感、內(nèi)容主次感，創(chuàng)造“透氣”的感覺(jué)，以化解大量信息聚集起來(lái)造成的壓迫感，尋求心理釋放，給瀏覽者帶來(lái)輕松、愉悅的享受和無(wú)限的想象空間，最大限度地激發(fā)他們的藝術(shù)想象力，從而更好地體會(huì)頁(yè)面信息中所潛藏的深刻含意。這正是網(wǎng)頁(yè)留白在更高層次上的藝術(shù)韻律之美。

在版面設(shè)計(jì)中，處理好大與小、主與次、疏與密、虛與實(shí)，都是美的比例基礎(chǔ)，可謂是一種既可瀏覽又可休閑的兩全其美的藝術(shù)享受。但對(duì)留白如果不加控制的任意使用，它不僅不能有效發(fā)揮作用，反而會(huì)造成版面混亂，影響整個(gè)頁(yè)面設(shè)計(jì)。Web標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)留白可從兩個(gè)方面把握。留白作為一種經(jīng)典的傳統(tǒng)平面設(shè)計(jì)語(yǔ)言，已經(jīng)延伸到當(dāng)今設(shè)計(jì)的各個(gè)領(lǐng)域。它正在從設(shè)計(jì)的思維方法上給我們更多的思維空間。網(wǎng)頁(yè)設(shè)計(jì)留白是網(wǎng)頁(yè)藝術(shù)性的需要，更是網(wǎng)頁(yè)可用性的要求。在網(wǎng)頁(yè)設(shè)計(jì)中以無(wú)襯有，以有襯無(wú)，適應(yīng)Web標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)的要求，是無(wú)的可用，無(wú)的藝術(shù)。無(wú)論作為網(wǎng)頁(yè)設(shè)計(jì)者，還是網(wǎng)頁(yè)用戶，都應(yīng)當(dāng)把看待“留白”提升到一個(gè)新的高度。在這樣一個(gè)多元、開(kāi)放的時(shí)代，它一定會(huì)擁有更大的應(yīng)用空間。

三、網(wǎng)頁(yè)設(shè)計(jì)——顏色搭配

打開(kāi)一個(gè)網(wǎng)站，給用戶留下第一印象的既不是網(wǎng)站豐富的內(nèi)容，也不是網(wǎng)站合理的版面布局，而是網(wǎng)站的色彩。色彩對(duì)人的視覺(jué)效果非常明顯，一個(gè)網(wǎng)站設(shè)計(jì)成功與否，在某種程度上取決于設(shè)計(jì)者對(duì)色彩的運(yùn)用和搭配。因?yàn)榫W(wǎng)頁(yè)設(shè)計(jì)屬于一種平面效果設(shè)計(jì)，在排除立體圖形、動(dòng)畫(huà)效果之外，在平面圖上，色彩的沖擊力是最強(qiáng)的，它很容易給用戶留下深刻的印象。因此，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，我們必須要高度重視色彩的搭配。

色彩搭配既是一項(xiàng)技術(shù)性工作，同時(shí)它也是一項(xiàng)藝術(shù)性很強(qiáng)的工作，因此，設(shè)計(jì)者在設(shè)計(jì)網(wǎng)頁(yè)時(shí)除了考慮網(wǎng)站本身的特點(diǎn)外，還要遵循一定的藝術(shù)規(guī)律，從而設(shè)計(jì)出色彩鮮明、性格獨(dú)特的網(wǎng)站。

（一）藝術(shù)規(guī)律包括以下幾個(gè)方面

1.特色鮮明

一個(gè)網(wǎng)站的用色必須要有自己獨(dú)特的風(fēng)格，這樣才能顯得個(gè)性鮮明，給瀏覽者留下深刻的印象。

2.搭配合理

網(wǎng)頁(yè)設(shè)計(jì)雖然屬于平面設(shè)計(jì)的范疇，但它又與其它平面設(shè)計(jì)不同，它在遵從藝術(shù)規(guī)律的同時(shí)，還考慮人的生理特點(diǎn)，色彩搭配一定要合理，給人一種和諧、愉快的感覺(jué)，避免采用純度很高的單一色彩，這樣容易造成視覺(jué)疲勞。

3.講究藝術(shù)性

網(wǎng)站設(shè)計(jì)也是一種藝術(shù)活動(dòng)，因此它必須遵循藝術(shù)規(guī)律，在考慮到網(wǎng)站本身特點(diǎn)的同時(shí)，按照內(nèi)容決定形式的原則，大膽進(jìn)行藝術(shù)創(chuàng)新，設(shè)計(jì)出既符合網(wǎng)站要求，又有一定藝術(shù)特色的網(wǎng)站。

（二）色彩搭配要注意的問(wèn)題

1.使用單色

盡管網(wǎng)站設(shè)計(jì)要避免采用單一色彩，以免產(chǎn)生單調(diào)的感覺(jué)，但通過(guò)調(diào)整色彩的飽和度和透明度也可以產(chǎn)生變化，使網(wǎng)站避免單調(diào)。

2.使用鄰近色

所謂鄰近色，就是在色帶上相鄰近的顏色，例如綠色和藍(lán)色，紅色和黃色就互為鄰近色。采用鄰近色設(shè)計(jì)網(wǎng)頁(yè)可以使網(wǎng)頁(yè)避免色彩雜亂，易于達(dá)到頁(yè)面的和諧統(tǒng)一。

3.使用對(duì)比色

對(duì)比色可以突出重點(diǎn)，產(chǎn)生了強(qiáng)烈的視覺(jué)效果，通過(guò)合理使用對(duì)比色能夠使網(wǎng)站特色鮮明、重點(diǎn)突出。在設(shè)計(jì)時(shí)一般以一種顏色為主色調(diào)，對(duì)比色作為點(diǎn)綴，可以起到畫(huà)龍點(diǎn)睛的作用。

4.黑色的使用

黑色是一種特殊的顏色，如果使用恰當(dāng)，設(shè)計(jì)合理，往往產(chǎn)生很強(qiáng)烈的藝術(shù)效果，黑色一般用來(lái)作背景色，與其它純度色彩搭配使用。

5.背景色的使用

背景色一般采用素淡清雅的色彩，避免采用花紋復(fù)雜的圖片和純度很高的色彩作為背景色，同時(shí)背景色要與文字的色彩對(duì)比強(qiáng)烈一些。

6.色彩的數(shù)量

一般初學(xué)者在設(shè)計(jì)網(wǎng)頁(yè)時(shí)往往使用多種顏色，使網(wǎng)頁(yè)變得很“花”，缺乏統(tǒng)一和協(xié)調(diào)，表面上看起來(lái)很花哨，但缺乏內(nèi)在的美感。事實(shí)上，網(wǎng)站用色并不是越多越好，一般控制在三種色彩以內(nèi)，通過(guò)調(diào)整色彩的各種屬性來(lái)產(chǎn)生變化。網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息（包括產(chǎn)品和服務(wù)）的一種方式，是企業(yè)開(kāi)展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺(tái)，離開(kāi)網(wǎng)站（或者只是利用第三方網(wǎng)站）去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標(biāo)”，也是企業(yè)無(wú)形資產(chǎn)的組成部分，而網(wǎng)站是INTERNET上宣傳和反映企業(yè)形象和文化的重要窗口?？梢?jiàn)網(wǎng)頁(yè)的界面美化是多么重要，我們應(yīng)該在學(xué)習(xí)中啟發(fā)想象引發(fā)訪客的注目與加深記憶。

第二篇：經(jīng)典教程：Photoshop制作網(wǎng)頁(yè)banner廣告設(shè)計(jì)

導(dǎo)言：

在這篇Photoshop教程中，我將教給你如何制作一個(gè)專業(yè)的banner廣告。教程淺顯易懂，你一定可以做得到的。

下面教程開(kāi)始

我們這篇教程的效果如下。（圖01）

圖01

好了，讓我們開(kāi)始吧，在Photoshop中，新建一個(gè)文檔，尺寸是500×300px，白色背景。（圖02）

圖02

選擇圓角矩形工具，圓角半徑設(shè)為5px，在你的畫(huà)布中畫(huà)出一個(gè)圓角矩形，填充綠色#6d9e1e。（圖03）

圖03

雙擊圖層面板中的該圖層縮略圖，彈出圖層屬性面板，設(shè)置漸變疊加。參數(shù)如下圖。（圖04）

圖04

現(xiàn)在的效果應(yīng)該是如下圖的樣子。（圖05）

圖05 好了，這一步就完成了。然后我們開(kāi)始創(chuàng)建banner的“頭部”。按住Ctrl用鼠標(biāo)左鍵單擊圖層縮略圖，載入圖層選區(qū)；點(diǎn)擊矩形選區(qū)工具，消減掉下面一部分選區(qū)（按住Alt進(jìn)行拖拽即可）。剩余的部分填充白色，如下圖。（圖06）

圖06

點(diǎn)擊Ctrl＋D去掉選區(qū)。改變這個(gè)圖層的圖層渲染模式為疊加，透明度設(shè)置為20%。（圖07）

圖07

好了，進(jìn)入下一步吧。我希望在我們的頭部中，有一個(gè)小的圖形。在網(wǎng)上我找到了一個(gè)小的鐘表的圖標(biāo)，打開(kāi)圖片，把它拷貝到我們的文件中，按住Ctrl＋T把圖形變小一些。（圖08）

圖08 用銳化工具稍微讓圖形清晰一些。（圖09）

圖09

接下來(lái)，我們用文字工具寫(xiě)下了頭部的標(biāo)題。（圖10）

圖10

在這里，我用的字體是Myraid Pro，白色。但是實(shí)際上你可以選擇你喜歡的字體。打開(kāi)圖層屬性面板，設(shè)置投影，參數(shù)如下圖。（圖11）

圖11 效果如下。（圖12）

圖12

好了，頭部的部分我們就已經(jīng)完成了。我希望給我們的banner添加更多的設(shè)計(jì)元素。選擇用戶自定義形狀，選擇一個(gè)Photoshop里面自帶的一個(gè)形狀，如下圖。（圖13）

圖13

在我們的banner上面添加兩個(gè)白色的形狀。（圖14）

圖14 合并兩個(gè)形狀到一個(gè)圖層中。好了，我們把banner外面的形狀要?jiǎng)h除。如何做到這點(diǎn)呢？按住Ctrl左鍵點(diǎn)擊形狀的那個(gè)圖層縮略圖，載入選區(qū)。然后按Ctrl＋Shif＋I(xiàn)將選區(qū)反選，按一下Delete就可以刪除我們不需要的部分了。（圖15）

圖15

點(diǎn)擊Ctrl＋D取消選區(qū)。設(shè)置形狀圖層的渲染模式為柔光，透明度為20%。（圖16）

圖16

現(xiàn)在，我們需要一個(gè)干凈的頭部，我們要把頭部這一部分的圖形形狀刪除掉。利用矩形選區(qū)工具可以進(jìn)行這個(gè)操作。如下圖。（圖17）

圖17 添加更多的文字。（圖18）

圖18

好了，剩下最后一部分了。但是之前我想要在下面放一個(gè)按鈕。利用圓角矩形工具，圓角半徑為2px，拖拽一個(gè)顏色為綠色#69990d的圓角矩形，如下圖。（圖19）

圖19

好了，在按鈕上面添加一些文字。（圖20）

圖20

Ok，我們的教程就完成了。效果看上去很不錯(cuò)。（圖21）

圖21

第三篇：網(wǎng)頁(yè)設(shè)計(jì)之個(gè)人簡(jiǎn)介表代碼

“http://1/DTD/xhtml1-transitional.dtd”>