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

第十一步      現(xiàn)在復(fù)制方框所在圖層，按CTRL+T調(diào)整方框大小，保持寬度不變，高度變短（如下圖所示）。這就是我們的瀏覽框。

      將透明度設(shè)置為40%，填充設(shè)置為50%。這樣這個(gè)方框看起來(lái)更淡，給兩個(gè)方框添加了一些深度感，讓人覺(jué)得主次分明，有所側(cè)重。

     這種兩個(gè)方框的對(duì)比方式可以很好用來(lái)表現(xiàn)元素之間的視覺(jué)差異。用戶瀏覽該頁(yè)面，我們首先想讓他們看到大塊信息，然后才是瀏覽欄。將其淡化處理意在告訴用戶這部分并不是要想突出的地方，可以稍后再看。






第十二步     來(lái)，我們現(xiàn)在加上一些文字。這里我仍給大標(biāo)題使用Egyptian Light字體（在最終的HTML代碼中這里是一幅圖片），菜單欄使用Arial字體（這里將是HTML文字鏈接）。

     這里給出關(guān)于字型的一些建議。這樣的設(shè)計(jì)很大程度上取決于我們使用一種簡(jiǎn)潔字型。漂亮大方的文字顯得非常大氣，同時(shí)它是一種細(xì)瘦字型，因此看起來(lái)十分優(yōu)雅。

     如果你在尋找一個(gè)高端設(shè)計(jì)外觀，細(xì)瘦經(jīng)典的字型必不可少。當(dāng)我第一次看到Helvetica超幼體的時(shí)候，我記得瘋狂地將它應(yīng)用到所有設(shè)計(jì)中，設(shè)計(jì)看起來(lái)的確既簡(jiǎn)潔又高檔。

     另外，Egyptian這種特別字體具有非常筆直的衫線，又有一種方形感覺(jué)，看起來(lái)很酷（我的感覺(jué)）。

      還有其他很多很棒的字體可以使用。但是一般來(lái)說(shuō)要用一些更為經(jīng)典的字體。換句話說(shuō)，除非你確定知道你的需求，否則最好還是不要使用那些樣子奇怪的字體—— 比方說(shuō)一些看起來(lái)具有未來(lái)派的字體。實(shí)際上一個(gè)有效總體原則就是除非你自信滿滿，否則還是選擇一些更為普通的字體。

     另外一種用在這里效果非常不錯(cuò)的字型是那種位技術(shù)——看起來(lái)像是Chris Garrett Media用的字體。我也不知道這是什么字體，或者這種類型的字體叫什么，不過(guò)非常簡(jiǎn)潔。也許一個(gè)熱心的印刷達(dá)人在評(píng)論里告訴我們的。



第十三步      不管怎樣，看完Chris Garrett Media的站點(diǎn)之后，我決定給字體上再加一個(gè)梯度覆蓋，增加一些亮光，這樣看起來(lái)更酷。你在下面可以看到，這里我們正在添加一個(gè)從黑到白的梯度覆蓋，在覆蓋模式下淡化一點(diǎn)。



第十四步      現(xiàn)在我們?cè)佼?huà)一個(gè)大黑框作為內(nèi)容區(qū)。實(shí)際上你可以復(fù)制先前的涂層，然后做一些調(diào)整。

      這樣我們就實(shí)現(xiàn)下圖所示的樣子了�？雌饋�(lái)相當(dāng)酷吧!!