教您怎樣用Photoshop制作一個(gè)漂亮的網(wǎng)頁(yè)

第十五步      現(xiàn)在我們?cè)趦?nèi)容框里加一些假內(nèi)容。這里我還是給大多數(shù)文字用Arial字體，但是標(biāo)題沒(méi)用Egyptian，我用了Georgia字體。Georgia沒(méi)有那么優(yōu)雅，但是也是個(gè)標(biāo)準(zhǔn)字體，可以放在之前的HTML代碼里用作標(biāo)題，可以不用圖像或者Flash。

     實(shí)際上，隨著Windows Vista的發(fā)布又有一種叫做Cambria的半標(biāo)準(zhǔn)字體產(chǎn)生。但是在蘋(píng)果上火狐瀏覽器特定尺寸下Cambria存在一些奇怪的渲染問(wèn)題，因此我們現(xiàn)在還是用表現(xiàn)穩(wěn)定的Georgia字體。



  第十六步      最后我在底部新建一個(gè)新圖層，用深紫色填充，在頂部加1px的邊界，瞧，我們有個(gè)頁(yè)腳了。



準(zhǔn)備建站     把以上這些放在一起，準(zhǔn)備建站了。



可選背景1      這個(gè)設(shè)計(jì)很酷地方之一就是更換背景圖片很容易，換了以后依然很炫。這里我換了一張從iStockPhoto站點(diǎn)叫做“Passion”的圖片做背景，其顏色策略相似。這是一張很酷的3D光線渲染圖，像我們現(xiàn)在用的背景一樣，也是抽象派，看起來(lái)很炫目。



可選背景/顏色2      這里我又換了一張iStockPhoto站點(diǎn)的叫做“Blue Energy”的抽象圖片做背景。因?yàn)轭伾兞?，所以通覽一遍，將一些地方的顏色做了修改——特別是文字地方——再在主圖層上添加一個(gè)亮光。






為什么奏效

現(xiàn)在你可能也不會(huì)想這個(gè)詳細(xì)設(shè)計(jì)了——既然我已經(jīng)寫(xiě)了完整教程?，F(xiàn)在談一談為什么有這個(gè)效果，這樣可以幫助你用這些原則來(lái)創(chuàng)建你的專(zhuān)屬頁(yè)面。

     這里是本次設(shè)計(jì)的幾條原則：

首先，我挑選了幾張很炫的背景圖片。用幾張iStock的圖片和一張GoMedia圖片可以做出來(lái)很好看圖片。雖然很好看，但是不會(huì)喧賓奪主。他們也很容易淡出。一般容易淡化的圖片更容易處理。

好圖片一定要搭配簡(jiǎn)潔的字體排版。因?yàn)閳D片已經(jīng)很可愛(ài)了，就沒(méi)有必要過(guò)分強(qiáng)調(diào)字體。一定要是清爽明了，井井有條。

作品另一個(gè)因素就是有足夠空間。在復(fù)雜背景下，很容易看東西就一團(tuán)糟，所以元素之間，方框以?xún)?nèi)等地方要保持足夠的空間。空間寬裕也是讓設(shè)計(jì)看起來(lái)更為高檔的好方法。沒(méi)人喜歡亂七八糟的下等設(shè)計(jì)。      誠(chéng)然還有很多其他方面的東西可以談，像顏色、優(yōu)先級(jí)等，但是我認(rèn)為這里需要關(guān)注的主要設(shè)計(jì)元素還是字體和背景的搭配。最后總結(jié)一下，這里一幅小圖就說(shuō)明一切了:-)



現(xiàn)在看HTML/CSS      Photoshop的東西已經(jīng)足夠了，現(xiàn)在讓我們來(lái)看看HTML/CSS！接下來(lái)來(lái)到NETTUTS，看本教程的第二部分——網(wǎng)絡(luò)開(kāi)發(fā)教程，我們把設(shè)計(jì)應(yīng)用到正在使用的網(wǎng)站上。