Photoshop設(shè)計中文企業(yè)網(wǎng)站首頁設(shè)計教程

本教程主要使用Photoshop設(shè)計中文企業(yè)網(wǎng)站首頁設(shè)計教程，看教程一定要打開Photoshop跟著做，要不然學不會，做好后歡迎跟帖交作業(yè)，這樣才可以提高自己的學習能力。
來源：朱峰社區(qū)   作者：：qp3db
顯看看效果圖

先整理好需要做的內(nèi)容至一個文件夾中。

打開photoshop新建一個空白面板。

選擇矩形工具繪製一個980*auto的圖形。

結(jié)果如下：

使用選擇工具點擊邊緣節(jié)點。

在菜單欄下方可看見圖片的寬與高。

點擊背景
圖層，再按下shift鍵點擊新建的圖層。

按下選擇快捷鍵V，在菜單欄下方會出現(xiàn)對齊選項。選擇居中對齊。

從標尺區(qū)域按下鼠標向右拖動會形成一根輔助線。拖至矩形邊緣自動吸附即可。

我們可以看見的結(jié)果如下：

在圖層面板新建header文件夾，并把logo放置進來。

在header文件夾下建立menus目錄，并繪製一個矩形圖形。

爲矩形圖形添加漸變。(或者雙擊圖層空白處也可以編輯效果)

所開啓的面板：

描邊參數(shù)如下：

漸變效果如下：

設(shè)置內(nèi)發(fā)光，參數(shù)如下：

菜單導航背景最終效果。

打上文本。文本選擇工具快捷鍵T。

把最左側(cè)的文本吸附在左側(cè)輔助線上。(按住shift拖拽)

把最右側(cè)的文字吸附在右側(cè)輔助線上。(按住shift鍵拖拽)

選擇所添加的導航文本圖層。(點擊第一個，按住shift點擊最后一個。)

點擊水平居中對齊。

整體文本效果就對齊了。

新建一個文件夾，用來存放導航欄上方空白處的內(nèi)容。我們寫上熱線電話。

選擇鉛筆工具吧，一起來手繪下。

放大面板，畫了一個小電話。

看看右上角的效果。

在menus下新建一個圖層。

使用鉛筆 按住shift繪製兩條豎線。一條爲深，一條爲淺。

使用快捷鍵，ctrl+j 復(fù)製剛才所繪製的圖層

選擇第一個繪製的結(jié)果以及第一個與第二菜單，使用對齊工具對齊。
選擇最后一個鉛筆繪製的豎線，同樣選擇左右兩側(cè)的文本使用對齊工具對齊。

初步看見的效果。

選擇所有的鉛筆繪製的豎線，使用快捷鍵ctrl+e合并圖層。

使用套索工具，設(shè)置余羽化像數(shù)。

選擇上下邊緣，使用delete鍵刪除達到羽化效果。

最后完成后的導航。

繪製一個鼠標經(jīng)過的效果矩形給該矩形添加漸變及描邊，內(nèi)發(fā)光。(根據(jù)自己需求)。

新建banner文件夾，并在裡面繪製一個滿屏，高度爲350px(根據(jù)情況而定)的矩形。

使用矩形選擇工具選擇在輔助線內(nèi)的banner實際大小。

在圖層面板使用蒙板針對該文件夾做遮罩。

在蒙板文件夾下新建一個橢圓形狀。

給該形狀做濾鏡-模煳效果。

選擇濾鏡的參數(shù)如下：

按下V快捷鍵，將該效果的大羞緣控製在實際輔助線內(nèi)。

所看到的初步效果。

在實際banner區(qū)域增加文本效果，效果根據(jù)需求而定。

使用鋼筆繪製任意圖形做輔助效果。

新建一個center文件夾，同時在center文件夾內(nèi)的元素也需要分文件夾。

繪製一個與banner區(qū)分的過渡矩形，調(diào)整它的色彩及效果。

添加欄目如：(關(guān)于我們)

在欄目名稱處可以做效果，如先繪製一個任意圖形。

給該圖形做模煳處理。

參數(shù)如下：

初步看見的結(jié)果。或者按下ctrl鍵點擊該圖，把該圖層載入選區(qū)，并新建圖層。

選擇漸變工具。

調(diào)整漸變色彩。

調(diào)整參數(shù)如下：

使用漸變工具對載入選出做色彩填充。

如果覺得色彩不滿意，可以通過色相飽和度修改。

調(diào)整參數(shù)如下：

新建其他欄目如：(服務(wù)中心)

在文本前面繪製標註符，同樣可以使用對齊工具排列。

合并后的標註符，可以爲其修改顏色。使用顏色疊加即可。

同時繪製其他欄目，布局大致完成。

繪製copyright區(qū)域。

選擇直線來分割上下的模塊。

由于面板較高，多余部分可以選擇裁剪工具處理。

裁剪：先選擇整個畫板，然后將下方高度縮減。黑色區(qū)域的部分選擇刪除。

最后的效果!