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

來源: 作者: 學習:115571人次




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

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



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



準備建站     把以上這些放在一起,準備建站了。



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



可選背景/顏色2      這里我又換了一張iStockPhoto站點的叫做“Blue Energy”的抽象圖片做背景。因為顏色變了,所以通覽一遍,將一些地方的顏色做了修改——特別是文字地方——再在主圖層上添加一個亮光。






為什么奏效

現(xiàn)在你可能也不會想這個詳細設計了——既然我已經(jīng)寫了完整教程,F(xiàn)在談一談為什么有這個效果,這樣可以幫助你用這些原則來創(chuàng)建你的專屬頁面。

     這里是本次設計的幾條原則:

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

好圖片一定要搭配簡潔的字體排版。因為圖片已經(jīng)很可愛了,就沒有必要過分強調(diào)字體。一定要是清爽明了,井井有條。

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



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

學習 · 提示

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

關注大神微博加入>>

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