從零開始教您設計一個華麗高檔的網頁

本教程轉載于譯言由maidoumao翻譯，原文來源于PSDNTUTS作者Collis。

簡介：在這篇文章中給出了設計一個華麗高檔網頁設計方面的方案，強調背景與字體的重要性，熟練運用Photoshop，可以輕松創建一個專屬于你的獨特風格的美麗頁面。Collis于4月26日發表于Interface
在本教程中，我們使用簡潔細瘦的字體，配上優美的背景圖片，經過精心排布的空間布局，設計一個高檔的網頁。

當你看完本教程，你再去看看我們的姐妹站點NETTUTS，然后跟著做，這樣我們就用簡潔的HTML代碼實現設計。來吧，讓我們開始！

大家好！我在數年前通過閱讀Photoshop教程開始進入設計領域，而后創建了PSDTUTS。我希望這個站點可以幫助和鼓舞其他人！除了PSDTUTS之外，我還在一家叫做Envato的大公司里做了很多不同站點，完成了很棒的項目。

首先我們開始設計。（點擊下圖可見大圖）

一個優雅的設計可能符合設計者的文件夾類型站點的需求，但是可能要根據各種各樣的原因而改變。這一切取決于要有良好的版面，結構化的布局以及具有視覺吸引力的背景。

設計真正的力量在于向您展現如何在保持設計簡潔的同時并完成。在教程中Photoshop部分的最后，我將向您展示如何輕易地更換背景和字體，并闡述這樣設計良好效果的原因。

結構很簡單：橫向菜單，主標題面板和內容區。盡管是設計主頁，你也可以想象一下內部頁面可能也就是具有不同的主題面板和新的內容區。出于簡潔的考慮，我們將只講解主頁的設計。

第一步

首先新建一個文檔。我創建的是寬1100px高1100px的文檔。這個文檔可以用于寬為1024px的站點，仍然還有空間去決定在可視區域之外如何布置，這樣在更大屏幕下也很好的適應。

現在第一步先創建一個美觀抽象背景。我們使用從#1b204c到#472323這兩種顏色按照線性遞減繪制背景。

第二步

現在我們要一個吸引眼球的背景，足夠抽象到不會干擾人閱讀文字。很走運，在GoMedia’s Arsenal站點里有一張很棒的免費水彩圖片，點擊“freebie（免費贈品）”區，你就能找到兩張水彩圖片；我們要的是綠色那張。

現在這樣很開心了，你按下CTRL+I將圖片反置，會在黑色為底的背景上呈現漂亮的粉紫色，這樣就更酷了！