難得國(guó)外有這樣好的教程，我就用我僅有的英文水平翻譯一下啦。建議將本博客的中欄和右欄隱藏后觀看本文。
轉(zhuǎn)載請(qǐng)注明：
譯者：Joe譯文來(lái)源：http://yuhou.cn/2009/09/design_a_beautiful_website/原文來(lái)自：DesignaBeautifulWebsiteFromScratch
引言
你是否曾經(jīng)想過(guò)設(shè)計(jì)一個(gè)漂亮的網(wǎng)頁(yè)，但是卻不知道怎樣入手？說(shuō)實(shí)話，幾年前我也是這樣。當(dāng)我瀏覽網(wǎng)頁(yè)的時(shí)候我看到這么多好看的網(wǎng)頁(yè)，我就希望自己有技術(shù)創(chuàng)作這樣的設(shè)計(jì)作品。
今天我可以這么做了，而且我將教你怎么做這樣的設(shè)計(jì)！從根本上，對(duì)于這種設(shè)計(jì)你需要一點(diǎn)photoshop的操作技能和觀察細(xì)節(jié)的能力。通過(guò)以下的教程，我將會(huì)指出其中極細(xì)微的細(xì)節(jié)之處，而這些細(xì)節(jié)講使你的網(wǎng)頁(yè)設(shè)計(jì)漂亮起來(lái)。打開(kāi)photoshop,我們開(kāi)始啦！
正文
先看效果圖
第一步：下載960網(wǎng)格模板
我一直以來(lái)做的設(shè)計(jì)幾乎全部是基于960網(wǎng)格模板的.因此在我們開(kāi)始創(chuàng)作之前，先下載這個(gè)模板.你能在960.gs上找到這些模板.下載之后解壓zip里面關(guān)于PSD的模板.你會(huì)發(fā)現(xiàn)有兩種規(guī)格:一個(gè)是12欄式的而另一個(gè)是16欄式的.他們的區(qū)別就像名字所說(shuō)的，一個(gè)是按12欄分布一個(gè)按16欄.更詳細(xì)的介紹一下吧,如果你的設(shè)計(jì)里面分3個(gè)區(qū)塊你就選擇12欄式的,那是因?yàn)?2能被3整除;同理假如你的設(shè)計(jì)分四個(gè)區(qū)塊,你可以選12欄式或者16欄式，那時(shí)因?yàn)?2和16都可以被4整除.你會(huì)發(fā)現(xiàn)這個(gè)技巧將用于下面教程.
第二步：構(gòu)造你想象的結(jié)構(gòu)
在我們打開(kāi)PSD網(wǎng)格模板創(chuàng)作前,我們首先需要先構(gòu)造一下想象中的結(jié)構(gòu).從上面的這張圖，你可以看出來(lái)：因?yàn)樵谝粋€(gè)排版中又有排版，所以這是一個(gè)有點(diǎn)復(fù)雜的結(jié)構(gòu).
|