網(wǎng)頁(yè)設計從零開(kāi)始
難得國外有這樣好的教程,我就用我僅有的英文水平翻譯一下啦。建議將本博客的中欄和右欄隱藏后觀(guān)看本文。
轉載請注明:
引言
你是否曾經(jīng)想過(guò)設計一個(gè)漂亮的網(wǎng)頁(yè),但是卻不知道怎樣入手?說(shuō)實(shí)話(huà),幾年前我也是這樣。當我瀏覽網(wǎng)頁(yè)的時(shí)候我看到這么多好看的網(wǎng)頁(yè),我就希望自己有技術(shù)創(chuàng )作這樣的設計作品。
今天我可以這么做了,而且我將教你怎么做這樣的設計!從根本上,對于這種設計你需要一點(diǎn)photoshop的操作技能和觀(guān)察細節的能力。通過(guò)以下的教程,我將會(huì )指出其中極細微的細節之處,而這些細節講使你的網(wǎng)頁(yè)設計漂亮起來(lái)。打開(kāi)photoshop,我們開(kāi)始啦!
正文
先看效果圖

第一步:下載960網(wǎng)格模板
我一直以來(lái)做的設計幾乎全部是基于960網(wǎng)格模板的. 因此在我們開(kāi)始創(chuàng )作之前,先下載這個(gè)模板. 你能在960.gs上找到這些模板. 下載之后解壓zip里面關(guān)于PSD的模板. 你會(huì )發(fā)現有兩種規格: 一個(gè)是12欄式的而另一個(gè)是16欄式的. 他們的區別就像名字所說(shuō)的,一個(gè)是按12欄分布一個(gè)按16欄. 更詳細的介紹一下吧, 如果你的設計里面分3個(gè)區塊你就選擇12欄式的,那是因為12能被3整除; 同理假如你的設計分四個(gè)區塊, 你可以選12欄式或者16欄式,那時(shí)因為12和16都可以被4整除. 你會(huì )發(fā)現這個(gè)技巧將用于下面教程.
第二步:構造你想象的結構

在我們打開(kāi)PSD網(wǎng)格模板創(chuàng )作前, 我們首先需要先構造一下想象中的結構. 從上面的這張圖,你可以看出來(lái):因為在一個(gè)排版中又有排版,所以這是一個(gè)有點(diǎn)復雜的結構.
聯(lián)系客服