本photoshop教程將通過一個商業(yè)網(wǎng)站的設(shè)計(jì)過程，來介紹如何用photoshop方便的制作出這類簡潔的網(wǎng)頁設(shè)計(jì)！其中使用的無非是漸變和翻轉(zhuǎn)，但效果卻很不錯。

相關(guān)文章：photoshop制作網(wǎng)站教程：簡潔商業(yè)網(wǎng)站

先看最終效果：

1 。創(chuàng)建一個新的文件（ 750 * 600 ） 。

2 。使用油漆桶工具填充背景色為#ffffff。

3 。創(chuàng)建一個新圖層，并選擇矩形工具建立一個高度為2 20px長方形。填充顏色為#6dd4f9 …

|||

4 。為頂部的藍(lán)色方框增加一個漸變樣式

5 。選擇一幅圖片,將其插入到網(wǎng)頁中作為背景,并且鏡向復(fù)制一份

6 。這些課桌看起來非常丑陋，所以，我們在它之上創(chuàng)造我們的內(nèi)容框，以掩蓋它！如此使用你的矩形選取框工具，選擇一個方框，并填充顏色為#056caf 。

|||

7 。為其增加ps樣式效果

8 。現(xiàn)在我們?yōu)轫撁婕尤胍唤M小圖片,如下圖左小角,注意選擇的圖標(biāo)要與頁面顏色相近,你可以從以下地址下載圖標(biāo)

9 。復(fù)制圖標(biāo)文本層，然后將其反轉(zhuǎn)（修改-變形-垂直翻轉(zhuǎn)），如下圖。

|||

10 。現(xiàn)在，我們?yōu)檫@些圖標(biāo)增加一個倒影效果,這也是網(wǎng)頁設(shè)計(jì)中常用的手法之一

11 。為您的網(wǎng)站補(bǔ)充上網(wǎng)站標(biāo)題！

12 。我又補(bǔ)充了一些演示文本，這樣就全部完成了，在這里，你學(xué)到了一個完整的網(wǎng)頁設(shè)計(jì)布局，你可以為你的公司或其他任何組織使用這個教程！