當(dāng)前位置:首頁>ps實例教程>ps網(wǎng)頁設(shè)計>網(wǎng)頁模板>教程內(nèi)容

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

來源: 作者: 學(xué)習(xí):115571人次


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

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

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






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

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

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

     另外,Egyptian這種特別字體具有非常筆直的衫線,又有一種方形感覺,看起來很酷(我的感覺)。

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

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



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



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

      這樣我們就實現(xiàn)下圖所示的樣子了。看起來相當(dāng)酷吧!!

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
超超2017-04-05 09:30
我想問下網(wǎng)頁和字體的比例問題,就是網(wǎng)頁的大小和字體的大小是有規(guī)定的,但是我在做的時候,用的字體很小就是17,但是到了網(wǎng)頁上就顯特別的大,客戶規(guī)定字體都是17,可是有時候標(biāo)題等,字體不嫩都控制在17上我該怎么做?
photoshop2017-01-26 01:53
CTRL+O打開圖片,用移動工具拖到另一張圖上
曉風(fēng)寒月2017-01-26 11:43
請問怎樣把圖片放在透明背景上?

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!