用Photoshop制作960網(wǎng)格的網(wǎng)頁模板(7)
網(wǎng)格設(shè)計呢,通常顯得很整齊規(guī)范,有時看上去也比較專業(yè)。但網(wǎng)格設(shè)計相對來說也是比較復雜的,往往需要精準的測量和欄目劃分。960 Grid System/960網(wǎng)格系統(tǒng),這是一套可以讓你快速創(chuàng)建網(wǎng)格設(shè)計的工具,之所以叫960,就是說模板的寬度是960像素。而之所以用960像素來做為標 準,是因為960像素寬具有高度的靈活性。今天我們就來教大家制作一個960 Grid System的網(wǎng)頁模板。(960 Grid System官方網(wǎng)站:http://960.gs/)
960 Grid System的特性是將960像素的網(wǎng)頁分為12列的布局和16列布局。12列布局將總寬分成12份,每份的寬度是60px,而16列的布局分成16份,每份的寬度是40px,每部分左右邊距都是10px,從而每列產(chǎn)生20px的空隙。
先看最終效果圖
按照960 Grid System的定義,我們找一張960像素,12等份,每部分左右邊距都是10px。這里縮小了圖片,大家做的時候按照960像素去切割,去960 grid system官方網(wǎng)站可以下載布局好的素材。(參見"960 grid system"的官方網(wǎng)站介紹。)
新建圖層,大小為填充中間的10等份,并與左右剩余的兩個“等份”相距5像素。填充為為黑色。
接著新建一個圖層,為左右各添加白到黑色的漸變色,效果如下:
刪除中間的黑色圖層。
接下來把中間的十等份全部刪除吧。當然,你可以隱藏中間的十等份,下面的操作可以參考這十等份來調(diào)節(jié)位置。
添加一條豎立的虛線,在網(wǎng)頁制作的時候,這條虛線可以使用dashed border來制作,這里只是用ps來做效果而已。
完成文字和導航,導航的位置這里可以參考之前“十等份布局”的大約位置來布局。
為了使讀者知道在第幾頁,我們把當前標簽換一個顏色。
添加RSS閱讀標簽的圖片。
.
插入頭圖、文字
好下面我們來對應一下十等份的位置!
底色并復制
右側(cè)添加75*75像素的圖片
我們再給這些圖片加上一個像素天藍色邊框,在網(wǎng)頁切割時候我們可以直接寫CSS就可以了。
加上其他文字,我們自己做960 Grid System就完成了!
本實例其實制作起來非常簡單,主要是根據(jù)960 Grid System的布局,把握好每一個元素的定位
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- 用Photoshop制作網(wǎng)格
- ps網(wǎng)頁模板
學習 · 提示
相關(guān)教程
推薦教程
- Photoshop繪制好看的老式wordpress主題
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁模板
- ps設(shè)計制作居家風格美食Blog網(wǎng)頁特效
- PhotoShop設(shè)計制作懷舊風格網(wǎng)頁的詳細教程
- photoshop網(wǎng)頁應用實例:制作蘋果導航欄
- PS教程:制作非常不錯的wordpress博客網(wǎng)站模板
- Photoshop CS5制作放射狀光線網(wǎng)頁廣告板
- Photoshop制作禮品店網(wǎng)站模板
- Photoshop網(wǎng)頁設(shè)計:雜志風格網(wǎng)站界面
- PS教程:繪制清新的色彩生動的網(wǎng)頁布局