使用ps打造一個(gè)企業(yè)網(wǎng)站首頁(yè)設(shè)計(jì)制作全(5)
先整理好需要做的內(nèi)容至一個(gè)文件夾中。

打開photoshop新建一個(gè)空白面板。

選擇矩形工具繪制一個(gè)980*auto的圖形。

結(jié)果如下:

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

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

點(diǎn)擊背景
圖層,再按下shift鍵點(diǎn)擊新建的圖層。

按下選擇快捷鍵"V",在菜單欄下方會(huì)出現(xiàn)對(duì)齊選項(xiàng)。選擇居中對(duì)齊。

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

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

在圖層面板新建header文件夾,并把logo放置進(jìn)來(lái)。

在header文件夾下建立menus目錄,并繪制一個(gè)矩形圖形。

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

所開啟的面板:

描邊參數(shù)如下:

漸變效果如下:

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

菜單導(dǎo)航背景最終效果。

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

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

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

選擇所添加的導(dǎo)航文本圖層。(點(diǎn)擊第一個(gè),按住shift點(diǎn)擊最后一個(gè)。)

點(diǎn)擊水平居中對(duì)齊。

整體文本效果就對(duì)齊了。

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

選擇鉛筆工具吧,一起來(lái)手繪下。

放大面板,畫了一個(gè)小電話。

看看右上角的效果。

在menus下新建一個(gè)圖層。

使用鉛筆 按住shift繪制兩條豎線。一條為深,一條為淺。

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

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

初步看見的效果。

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

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

選擇上下邊緣,使用delete鍵刪除達(dá)到羽化效果。

最后完成后的導(dǎo)航。

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

新建banner文件夾,并在里面繪制一個(gè)滿屏,高度為350px(根據(jù)情況而定)的矩形。

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

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

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

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

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

按下V快捷鍵,將該效果的大小邊緣控制在實(shí)際輔助線內(nèi)。

所看到的初步效果。

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

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

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

繪制一個(gè)與banner區(qū)分的過(guò)渡矩形,調(diào)整它的色彩及效果。

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

在欄目名稱處可以做效果,如先繪制一個(gè)任意圖形。

給該圖形做模糊處理。

參數(shù)如下:

初步看見的結(jié)果;蛘甙聪耤trl鍵點(diǎn)擊該圖,把該圖層載入選區(qū),并新建圖層。

選擇漸變工具。

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

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

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

如果覺(jué)得色彩不滿意,可以通過(guò)色相飽和度修改。

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

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

在文本前面繪制標(biāo)注符,同樣可以使用對(duì)齊工具排列。

合并后的標(biāo)注符,可以為其修改顏色。使用顏色疊加即可。

同時(shí)繪制其他欄目,布局大致完成。

繪制copyright區(qū)域。

選擇直線來(lái)分割上下的模塊。

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

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

最后的效果!

學(xué)習(xí) · 提示
相關(guān)教程
- ps設(shè)計(jì)電影網(wǎng)站實(shí)例
- ps設(shè)計(jì)懷舊復(fù)古的網(wǎng)頁(yè)
- PS創(chuàng)建一款簡(jiǎn)潔大方的歐美商務(wù)網(wǎng)站首頁(yè)
- PS設(shè)計(jì)iPhone蘋果應(yīng)用電子網(wǎng)站
- 如何創(chuàng)建一個(gè)Fancy的設(shè)計(jì)工作室網(wǎng)頁(yè)布局
- ps設(shè)計(jì)制作古樸風(fēng)格的網(wǎng)站
- ps設(shè)計(jì)制作wordpress主題網(wǎng)站
- PS設(shè)計(jì)制作一個(gè)清爽的藍(lán)色海洋風(fēng)格網(wǎng)
- ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁(yè)特效
- ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁(yè)特效
推薦教程
- photoshop網(wǎng)頁(yè)應(yīng)用實(shí)例:制作蘋果導(dǎo)航欄
- Photoshop制作禮品店網(wǎng)站模板
- ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁(yè)特效
- PhotoShop設(shè)計(jì)制作懷舊風(fēng)格網(wǎng)頁(yè)的詳細(xì)教程
- Photoshop網(wǎng)頁(yè)設(shè)計(jì):雜志風(fēng)格網(wǎng)站界面
- PS教程:繪制清新的色彩生動(dòng)的網(wǎng)頁(yè)布局
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁(yè)模板
- PS教程:制作非常不錯(cuò)的wordpress博客網(wǎng)站模板
- Photoshop CS5制作放射狀光線網(wǎng)頁(yè)廣告板
- Photoshop繪制好看的老式wordpress主題