前幾天暴風彬彬在譯言看到一篇關于如何設計網頁的譯文，教程以step by step的方式詳細的講解了如何從無到有設計一個時尚的網站頁面，設計工具使用photoshop，讀者既能學到網頁設計的一些理念有能學到一些photoshop的網頁處理技術。即使是網頁設計高手，也能從中領略到當今國外比較流行的web設計風格及元素。該教程分為設計成效果圖和使用xhtml及css制作成網頁兩部分，以下是設計教程部分。感謝maidoumao的辛苦翻譯。
在本教程中，我們使用簡潔細瘦的字體，配上優美的背景圖片，經過精心排布的空間布局，設計一個高檔的網頁。
當你看完本教程，你再去看看我們的姐妹站點nettuts，然后跟著做，這樣我們就用簡潔的html代碼實現設計。來吧，讓我們開始!
大家好!我在數年前通過閱讀photoshop教程開始進入設計領域，而后創建了psdtuts。我希望這個站點可以幫助和鼓舞其他人!除了psdtuts之外，我還在一家叫做envato的大公司里做了很多不同站點，完成了很棒的項目。
前端設計
首先我們開始設計。
一個優雅的設計可能符合設計者的文件夾類型站點的需求，但是可能要根據各種各樣的原因而改變。這一切取決于要有良好的版面，結構化的布局以及具有視覺吸引力的背景。
設計真正的力量在于向您展現如何在保持設計簡潔的同時并完成。在教程中photoshop部分的最后，我將向您展示如何輕易地更換背景和字體，并闡述這樣設計良好效果的原因。
結構很簡單：橫向菜單，主標題面板和內容區。盡管是設計主頁，你也可以想象一下內部頁面可能也就是具有不同的主題面板和新的內容區。出于簡潔的考慮，我們將只講解主頁的設計。
第一步
首先新建一個文檔。我創建的是寬1100px高1100px的文檔。這個文檔可以用于寬為1024px的站點，仍然還有空間去決定在可視區域之外如何布置，這樣在更大屏幕下也很好的適應。
現在第一步先創建一個美觀抽象背景。我們使用從#1b204c到#472373這兩種顏色按照線性遞減繪制背景。
|||
第二步
現在我們要一個吸引眼球的背景，足夠抽象到不會干擾人閱讀文字。很走運，在gomedia’s arsenal站點里有一張很棒的免費水彩圖片，點擊“freebie(免費贈品)”區，你就能找到兩張水彩圖片;我們要的是綠色那張。
現在這樣很開心了，你按下ctrl+i將圖片反置，會在黑色為底的背景上呈現漂亮的粉紫色，這樣就更酷了!
第三步
現在把處理過的水彩圖片拷貝到主畫布上，按下ctrl+t鍵，將其調整到適當大小。這里我們要將右邊淡化為黑色(這樣在后面我們可以更方便地編輯我們的html代碼)。另外，我們也不想在豎直方向過長，因此最好擦掉一些超出的地方。選取一個畫刷，選用黑色擦去底下部分。
注意最好選取帶有一些紋理的畫刷，這樣擦去部分不會顯得很明顯。如果你向下滾動畫刷列表，有一個photoshop自帶的像圖例中的畫刷。這個畫刷也能用，當然你可能有其他更漂亮的畫刷，用起來更加自如。
你選中以后，在右邊和底下區域黑色填充，這樣這層就覆蓋在整個畫布上了。
|||
第四步
現在將水彩圖層的透明度減少到70%左右，將覆蓋模式設置為混合模式。這樣一些顏色頭出來顯得更加美觀。
第五步
現在在水彩圖層之上再新建一個圖層，然后從下至上從黑色到透明做線性遞減繪制，這樣基本上整個畫布到底部就褪化為黑色了。
|||
第六步
下一步在兩個新圖層中，繪制一組白色到透明的光線梯度，逐步擴大。將這些設置為覆蓋，最外圈和最小圈的透明度分別設置為40%和100%。
基本上你應該在圖像上做高亮設置，顯得更多的紋理。
第七步
現在就是最后完工的背景了。深色、抽象，顏色也相當別致。當然一般來說粉色可能不是你的最愛，如果這樣的話，在頂層圖層上再加一種顏色圖層做調整。我比較喜歡粉紫色，我就這么干了!
|||
第八步
現在我們創建一個新圖層，加上一個“圖標”。我本來沒有打算做它，因此我決定只是放一些文字做我的圖標。因為這個教程一半在psdtuts，另一半在nettuts，我就寫“psd vs net”幾個簡單字而已。
這里我用的字體是egyptian505 bt粗體和egytian505 lt bt light(這個字體更淡的版本我用在‘vs‘上了)。要讓‘vs’抬起來一些，可以在字體面板的基線控制(在下面第二幅圖里展示)。
最后還要給文字加上一點淡淡梯度重疊和1個像素的內部白光。
|||
第九步
現在這一步打開標尺(按下ctrl+r)繪制一組引導線。分別在50px,320px,610px,900px分別繪制四條線將頁面劃分為三欄。至少這些是我已經用過的數值。看看我的屏幕截圖，我才發現第三條線已經出界了。。。哦!
反正我已經所有元素放入空間里去了。但是如果要做多重頁面，可能就按照其他方式用網格。像這樣只是設計主頁，我打算用一次這三欄——一會兒以后。
第十步
來，現在我們繪制第一個黑色方框。保持標尺和引導線打開狀態，新建一個圖層從一邊到另一邊繪制一個方形選取框。用黑色填充，再將透明度設置為80%，右鍵點擊圖層選擇混合選項。點擊“比劃”，然后在外邊加1px的白色筆畫，設置為重疊模式。這樣邊界看起來更酷，黑色盒子看起來更銳利。
|||
第十一步
現在復制方框所在圖層，按ctrl+t調整方框大小，保持寬度不變，高度變短(如下圖所示)。這就是我們的瀏覽框。
將透明度設置為40%，填充設置為50%。這樣這個方框看起來更淡，給兩個方框添加了一些深度感，讓人覺得主次分明，有所側重。
這種兩個方框的對比方式可以很好用來表現元素之間的視覺差異。用戶瀏覽該頁面，我們首先想讓他們看到大塊信息，然后才是瀏覽欄。將其淡化處理意在告訴用戶這部分并不是要想突出的地方，可以稍后再看。
第十二步
來，我們現在加上一些文字。這里我仍給大標題使用egyptian light字體(在最終的html代碼中這里是一幅圖片)，菜單欄使用arial字體(這里將是html文字鏈接)。
這里給出關于字型的一些建議。這樣的設計很大程度上取決于我們使用一種簡潔字型。漂亮大方的文字顯得非常大氣，同時它是一種細瘦字型，因此看起來十分優雅。
如果你在尋找一個高端設計外觀，細瘦經典的字型必不可少。當我第一次看到helvetica超幼體的時候，我記得瘋狂地將它應用到所有設計中，設計看起來的確既簡潔又高檔。
另外，egyptian這種特別字體具有非常筆直的衫線，又有一種方形感覺，看起來很酷(我的感覺)。
還有其他很多很棒的字體可以使用。但是一般來說要用一些更為經典的字體。換句話說，除非你確定知道你的需求，否則最好還是不要使用那些樣子奇怪的字體——比方說一些看起來具有未來派的字體。實際上一個有效總體原則就是除非你自信滿滿，否則還是選擇一些更為普通的字體。
另外一種用在這里效果非常不錯的字型是那種位技術——看起來像是chris garrett media用的字體。我也不知道這是什么字體，或者這種類型的字體叫什么，不過非常簡潔。也許一個熱心的印刷達人在評論里告訴我們的。
|||
第十三步
不管怎樣，看完chris garrett media的站點之后，我決定給字體上再加一個梯度覆蓋，增加一些亮光，這樣看起來更酷。你在下面可以看到，這里我們正在添加一個從黑到白的梯度覆蓋，在覆蓋模式下淡化一點。
第十四步
現在我們再畫一個大黑框作為內容區。實際上你可以復制先前的涂層，然后做一些調整。
這樣我們就實現下圖所示的樣子了?？雌饋硐喈斂岚?!
|||
第十五步
現在我們在內容框里加一些假內容。這里我還是給大多數文字用arial字體，但是標題沒用egyptian，我用了georgia字體。georgia沒有那么優雅，但是也是個標準字體，可以放在之前的html代碼里用作標題，可以不用圖像或者flash。
實際上，隨著windows vista的發布又有一種叫做cambria的半標準字體產生。但是在蘋果上火狐瀏覽器特定尺寸下cambria存在一些奇怪的渲染問題，因此我們現在還是用表現穩定的georgia字體。
第十六步
最后我在底部新建一個新圖層，用深紫色填充，在頂部加1px的邊界，瞧，就有個頁腳了。
|||
準備建站
把以上這些放在一起，準備建站了。
可選背景一
這個設計很酷地方之一就是更換背景圖片很容易，換了以后依然很炫。這里我換了一張從istockphoto站點叫做“passion”的圖片做背景，其顏色策略相似。這是一張很酷的3d光線渲染圖，像我們現在用的背景一樣，也是抽象派，看起來很炫目。
|||
可選背景/顏色二
這里我又換了一張istockphoto站點的叫做“blue energy”的抽象圖片做背景。因為顏色變了，所以通覽一遍，將一些地方的顏色做了修改——特別是文字地方——再在主圖層上添加一個亮光。
為什么奏效
現在你可能也不會想這個詳細設計了——既然我已經寫了完整教程。現在談一談為什么有這個效果，這樣可以幫助你用這些原則來創建你的專屬頁面
這里是本次設計的幾條原則：
首先，我挑選了幾張很炫的背景圖片。用幾張istock的圖片和一張gomedia圖片可以做出來很好看圖片。雖然很好看，但是不會喧賓奪主。他們也很容易淡出。一般容易淡化的圖片更容易處理。
好圖片一定要搭配簡潔的字體排版。因為圖片已經很可愛了，就沒有必要過分強調字體。一定要是清爽明了，井井有條。
作品另一個因素就是有足夠空間。在復雜背景下，很容易看東西就一團糟，所以元素之間，方框以內等地方要保持足夠的空間。空間寬裕也是讓設計看起來更為高檔的好方法。沒人喜歡亂七八糟的下等設計。
誠然還有很多其他方面的東西可以談，像顏色、優先級等，但是我認為這里需要關注的主要設計元素還是字體和背景的搭配。最后總結一下，這里一幅小圖就說明一切了:-)
|||
現在看html/css
photoshop部分的工作已經完工了，現在要看看html/css!接下來來到nettuts，看本教程的第二部分——網頁開發教程，我們把設計應用到正在使用的網站上。
英文原文:create a sleek, high-end web design from scratch
新聞熱點
疑難解答
