Photoshop設(shè)計(jì)簡潔風(fēng)格的網(wǎng)頁模板
本教程主要使用Photoshop設(shè)計(jì)簡潔風(fēng)格的網(wǎng)頁模板,詳細(xì)介紹如何使用960柵格系統(tǒng)設(shè)計(jì)網(wǎng)站界面。該柵格系統(tǒng)會(huì)優(yōu)化網(wǎng)站設(shè)計(jì)流程。下面讓我們一起來學(xué)習(xí)吧
最終效果預(yù)覽
1.新建文檔
參數(shù):寬1680px、高1100px,背景亮灰色(#F9F9F9)
2.添加網(wǎng)格
網(wǎng)上有很多柵格系統(tǒng)可供下載,是我們建立屬于自己的柵格系統(tǒng)最好的參考。如果你以前沒有使用過柵格系統(tǒng),本文就是簡單的入門。它讓你的工作變得輕松而有章可循,是原型布局最得力的助手。
下載960柵格系統(tǒng),地址http://960.gs/
下載完成后,來到“templates”文件夾,使用photoshop打開960pix寬、12列柵格。
下面我們要把柵格導(dǎo)入到我們的工作文檔。選擇“12列柵格”圖層組,拼合圖層組并復(fù)制粘貼進(jìn)工作文檔。
現(xiàn)在我們需要基準(zhǔn)柵格;鶞(zhǔn)柵格是元素留白、行高等取值的重要參考。首先,新建文件,寬搞均為24px,刪除背景,新建一條1px高度的單線,置于畫布最底部。定義圖案:編輯-定義圖案,給圖案起一個(gè)容易記憶的名字。
返回工作文檔,新建圖層,填充圖案:編輯-填充,使用剛才定義圖案進(jìn)行填充。
最后,我們要使用參考線標(biāo)記我們的工作區(qū)域。新建參考線:視圖-新建參考線,選擇“垂直”,在360px、840px、1320px新建參考線。
3.開始設(shè)計(jì)
現(xiàn)在柵格系統(tǒng)建立完成,可以開始設(shè)計(jì)了。我們把整個(gè)網(wǎng)站分成5個(gè)大部分:
1.頁眉
2.插圖
3.內(nèi)容區(qū)-左
4.內(nèi)容區(qū)-右
5.頁腳
4.添加頁眉
我們習(xí)慣于自上而下的設(shè)計(jì)。選擇矩形選擇工具,繪制一個(gè)橫貫整個(gè)畫布寬度的矩形選區(qū),高度120px。打開標(biāo)尺工具能保證繪制的準(zhǔn)確度,120px高剛好占到5個(gè)垂直方向的柵格,然后填充深灰色(#2C2C2C)。這個(gè)頁眉主要用于放置logo和導(dǎo)航欄。
5.插入你的logo
在頁眉的左上方插入logo,對齊到第二列柵格,這樣就給了網(wǎng)站40px的內(nèi)邊距。本項(xiàng)目Logo字體我采用50pt Century Gothic,填充亮藍(lán)色(#ADC7D9),通過對文字“grid”加粗、填充白色來跟前面的文字“blue”區(qū)分。接下來給Logo添加內(nèi)陰影效果,降低內(nèi)陰影不透明度到25%,距離:2px、大。5px。
6.添加導(dǎo)航
導(dǎo)航欄我們采用以文字為主的列表形式,這樣可以營造干凈整潔的視覺效果。選擇18pt Arial寫入導(dǎo)航欄文字,“Home”使用白色,其他文字都使用亮灰色(#BBBBBB)。調(diào)整頁眉所有的元素垂直居中對齊。
7.添加插圖區(qū)
我把這一部分稱作插圖區(qū)是根據(jù)他的用途來命名的-他展示了頁眉的主要信息。重復(fù)頁眉的做法繪制矩形選區(qū),高度240px,然后填充跟logo一致的亮藍(lán)色(#ADC7D9)。我們來添加漸變填充,混合模式“疊加”,不透明度30%。
8.創(chuàng)建插圖區(qū)背景
公司名為“Bluegrid”,為了突出主題,我們創(chuàng)建一個(gè)柵格背景。使用跟前面創(chuàng)建基準(zhǔn)柵格相同的辦法。新建文件寬高均為25px,刪除北京,繪制1px的單線置于畫布的底部和右邊緣,然后定義圖案。
9.添加插圖區(qū)背景
在所有圖層上方新建圖層,編輯-填充,使用新定義的圖案填充。
旋轉(zhuǎn)15°,應(yīng)用白色疊加。新建空白圖層,跟白色柵格圖層拼合并命名為“grid”。
混合模式選擇“柔光”,按住Ctrl鍵單擊插圖區(qū)背景層取得選區(qū),ctrl+Shift+I反選后刪除多余的柵格。
下面顯示參考線,接下來的工作就是確保插圖區(qū)“grid”圖層的網(wǎng)格線在960px寬度以內(nèi)。
選擇漸變工具,顏色設(shè)置黑色到透明。我們將使用該漸變來隱藏掉960px寬度以外的部分。
確保漸變類型為“線性漸變”,沿著960px參考線最左邊一條拖拽鼠標(biāo),直到中間一條參考線停止,右側(cè)相同。
10.添加插圖區(qū)文本
插圖區(qū)放置一整頁的插圖,這里我們將采用純文本的展示方式。文字大小45pt、Arial,寫入準(zhǔn)備好的宣傳口號。緊接著在下方使用17pt寫入一些介紹文字。最后把文字跟Logo一樣左對齊。
11.添加滑動(dòng)展示
顯示參考線,使用矩形工具在右側(cè)兩條參考線間創(chuàng)建選區(qū),高度占8個(gè)柵格(即140px),然后減去上下各一個(gè)像素來制作投影。
為滑動(dòng)展示區(qū)添加投影,顏色#2C2C2C,距離1px,大小10px。
接下來我們需要在滑動(dòng)展示區(qū)放置一些臨時(shí)的替代內(nèi)容,這里我把自己blog的截屏拿了過來。設(shè)置圖片尺寸跟滑動(dòng)展示區(qū)背景圖一致,選擇-編輯-收縮,10px,反選后刪除多余區(qū)域。
12.內(nèi)容部分
使用矩形選擇工具,選取插圖區(qū)下方的部分,然后選擇漸變工具,顏色設(shè)置為#F0F0F0到透明,向下拖拽完成漸變。注意不要拖拽太遠(yuǎn),要保證頁面最底部的顏色信息在#F9F9F9左右。
13.左側(cè)內(nèi)容區(qū)
普通文字樣式:Arial 18pt #9C9C9C
帶下劃線鏈接樣式:#A3BBCC
添加說明文字
14.添加服務(wù)列表
首先為列表添加標(biāo)題,文字樣式:Arial 25pt 加粗 #262626.
列表內(nèi)容的文字樣式:Arial 18pt #9C9C9C。
列表前的圓點(diǎn),你可以使用橢圓工具繪制也可以使用快捷鍵Alt+7添加后改變顏色(#A4BCCD)來完成。
最后把所有的內(nèi)容對齊到柵格。
重復(fù)這個(gè)過程,添加其他內(nèi)容。
15.右側(cè)內(nèi)容區(qū)
右側(cè)內(nèi)容區(qū)用來展示最近新聞的精選集。
首先為列表添加標(biāo)題,文字樣式:Arial 25pt 加粗 #262626,然后水平對齊到左側(cè)內(nèi)容區(qū)的標(biāo)題。
接下來為新聞添加標(biāo)題,文字樣式 Arial 18pt #A4BDCD,然后跟左側(cè)內(nèi)容區(qū)文本對齊。
新聞列表的文字樣式:Arial 16pt #9C9C9C。
使用相同的樣式制作另外2份新聞。
16.頁腳
我們最后的一個(gè)部分就是頁腳,用來放置一個(gè)登陸框、聯(lián)系信息和少量鏈接。
使用矩形選擇工具創(chuàng)建選區(qū),并且填充深灰色(#262626)。
我們來增加表單。首先創(chuàng)建標(biāo)題,文字樣式:Arial 20pt Bold (#FFFFFF),置于頁腳的左側(cè)。然后使用矩形選擇工具創(chuàng)建2個(gè)選區(qū)作為輸入框,填充白色,輸入框默認(rèn)文字樣式:Arial 16pt #9C9C9C。
使用圓角矩形繪制提交按鈕,然后添加內(nèi)陰影,不透明度改為305,大小和擴(kuò)展均為0,距離10px。添加“忘記密碼”鏈接,樣式:Arial 13pt 下劃線 #A4BDCD.
17.頁腳的右半部分
最后我們來完成聯(lián)系信息。添加標(biāo)題,文字樣式:Arial 20pt B加粗 (#FFFFFF) ,并且水平對齊到左側(cè)表單標(biāo)題。然后添加聯(lián)系信息,文字樣式:Arial 16pt #FFFFFF.
18.檢查布局和平衡
使用柵格和參考線來檢查元素是不是對齊、并保持一致性。
如果沒有,請及時(shí)調(diào)整。
19.歡呼,你已經(jīng)完成了
值得慶賀,你已經(jīng)小小領(lǐng)會(huì)了如何使用柵格系統(tǒng)布局網(wǎng)站,可以自定義屬于自己的基本系統(tǒng)。
強(qiáng)烈建議你多應(yīng)用該系統(tǒng)以達(dá)到純熟的程度,讓它變成你的第二感官。使用該系統(tǒng)會(huì)使作為設(shè)計(jì)師的你工作倍兒輕松。
點(diǎn)擊下載本文PSD源文件
學(xué)習(xí) · 提示
相關(guān)教程
- 網(wǎng)頁模板,設(shè)計(jì)酒吧主題網(wǎng)頁模板實(shí)例
- ps設(shè)計(jì)藍(lán)色主題風(fēng)格的網(wǎng)站首頁模板教程
- ps網(wǎng)頁布局設(shè)計(jì)實(shí)例教程
- ps黑色風(fēng)格網(wǎng)頁模板
- ps一個(gè)木紋風(fēng)格網(wǎng)頁模板
- PS設(shè)計(jì)一個(gè)葡萄酒博客網(wǎng)頁模板
- PS創(chuàng)建一款簡潔大方的歐美商務(wù)網(wǎng)站首頁
- PS簡潔網(wǎng)頁美工教程
- ps設(shè)計(jì)時(shí)尚風(fēng)格數(shù)碼科技電子商務(wù)網(wǎng)站模
- photoshop設(shè)計(jì)企業(yè)網(wǎng)站首頁實(shí)例
推薦教程
- PS網(wǎng)頁制作技巧:從切圖到網(wǎng)頁生成全攻略
- PhotoShop設(shè)計(jì)制作懷舊風(fēng)格網(wǎng)頁的詳細(xì)教程
- Photoshop繪制簡潔而多彩的作品展示網(wǎng)頁
- Photoshop設(shè)計(jì)一個(gè)精美的網(wǎng)店購物主頁模板
- Photoshop另類實(shí)用技巧:切網(wǎng)頁
- photoshop設(shè)計(jì)時(shí)尚網(wǎng)站模板
- PhotoShop設(shè)計(jì)制作商業(yè)地產(chǎn)網(wǎng)站的教程
- Photoshop美工教程:游戲網(wǎng)站首頁布局
- Photoshop制作一個(gè)糖果店網(wǎng)站模板教程
- Photoshop打造蒼桑感網(wǎng)頁Header