首先要感謝的是你能夠訪問(wèn)這個(gè)教程。在這個(gè)教程中我將創(chuàng)建一個(gè)商業(yè)網(wǎng)站布局。如果你經(jīng)常訪問(wèn)我的網(wǎng)站的話，你將會(huì)看到創(chuàng)建一個(gè)好看的網(wǎng)站是多么容易。在這個(gè)博客里你會(huì)找到更多的布局教程。你會(huì)好奇這是為什么嗎？

我使用Photoshop已經(jīng)很長(zhǎng)時(shí)間了，從那個(gè)時(shí)候開(kāi)始我就為客戶創(chuàng)建網(wǎng)站，并因此掙了不少錢。我想要教給你如何創(chuàng)建網(wǎng)站的原因是因?yàn)閯?chuàng)建網(wǎng)站可 比創(chuàng)建一個(gè)簡(jiǎn)單的Photoshop效果掙錢多了。如果你想開(kāi)始從網(wǎng)上掙錢的話，為你未來(lái)的客戶創(chuàng)建網(wǎng)站正是時(shí)候。我這里有一個(gè)例子，為一個(gè)logo或者 一個(gè)照片效果你能付多少錢？也許是50美元至100美元？從我開(kāi)始設(shè)計(jì)至今我創(chuàng)建過(guò)數(shù)目上千的logo，上百個(gè)大的網(wǎng)站，我的大部分收入都是從設(shè)計(jì)網(wǎng)站布 局中獲得的，這就是為什么我認(rèn)為你應(yīng)該開(kāi)始創(chuàng)建網(wǎng)站的原因。我將會(huì)盡可能的講述的簡(jiǎn)單易懂，我敢肯定通過(guò)我的方法會(huì)創(chuàng)建出漂亮的網(wǎng)站布局。

讓我們開(kāi)始我們的教程，在這個(gè)教程中，我將創(chuàng)建一個(gè)商業(yè)網(wǎng)站布局。

首先創(chuàng)建一個(gè)新的文檔

請(qǐng)使用如下設(shè)置

設(shè)置前景色為：#2b2724

選擇油漆桶工具，為畫布上色，選擇背景層

按住Ctrl+J（此快捷鍵將會(huì)復(fù)制選定圖層）

選擇“圖層1”，然后選擇“濾鏡”>“雜色”>“添加雜色”

然后使用如下設(shè)置

選擇圓角矩形工具，在顯示器的上方，設(shè)置如下設(shè)置

在你的布局上為導(dǎo)航創(chuàng)建兩個(gè)形狀，改變前景色為#e84502，然后我會(huì)使用圓角矩形工具

復(fù)制這兩個(gè)橙色的形狀。想要復(fù)制圖層，首先你需要選定你想要復(fù)制的圖層，然后按下CTRL+J鍵，在你復(fù)制完這兩個(gè)橙色的形狀之后，改變顏色為白色。改變顏色的方法是在圖層縮略圖上雙擊，然后選擇白色。

這是目前我所得到的結(jié)果

現(xiàn)在選擇移動(dòng)工具，將白色形狀向上移動(dòng)一點(diǎn)點(diǎn)

我會(huì)在這個(gè)布局上放置一些圖片

使用文字工具，我會(huì)加上一些文字

使用相同的工具，在導(dǎo)航條上加上一些文字

選擇線條工具，確保線條粗細(xì)為1個(gè)像素

在導(dǎo)航按鈕之間創(chuàng)建一個(gè)垂直線條

現(xiàn)在最重要的是要柵格化圖層，想要做到這一點(diǎn)，你需要在圖層上點(diǎn)擊右鍵選擇“柵格化圖層”

選擇橡皮擦工具，改變畫筆到 60 Soft Mechanical 60 pixels

然后試著刪除線條的頂部和底部

復(fù)制這個(gè)圖層（選擇想要復(fù)制的圖層，然后在鍵盤上按下CTRL+J 鍵），選擇移動(dòng)工具，然后將復(fù)制好的線條放置在另外一個(gè)導(dǎo)航按鈕的右邊。

在整個(gè)布局的上方，我會(huì)創(chuàng)建一個(gè)簡(jiǎn)單的文字logo，在以后的教程中我會(huì)向你展示如何創(chuàng)建漂亮的logo

在圖層1的上方創(chuàng)建一個(gè)新的圖層

選擇畫筆工具，改變 to Soft Mechanical 60 pixels，在文字logo下面創(chuàng)建一個(gè)簡(jiǎn)單的白色點(diǎn)

想要效果好一點(diǎn)的話，可以將此圖層的透明度改變?yōu)?5%

最后的結(jié)果如下

希望你能喜歡最終的設(shè)計(jì)，此設(shè)計(jì)的PSD文檔只對(duì)VIP會(huì)員開(kāi)放。

翻譯自：Clean Business Layout Tutorial