使用ps打造一個企業(yè)網(wǎng)站首頁設(shè)計制作全(5)

來源:藍色理想 作者: qp3db 學習:20017人次

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

  結(jié)果如下:

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

  點擊背景

  圖層,再按下shift鍵點擊新建的圖層。

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

  所開啟的面板:

bbs.16xx8.com

  描邊參數(shù)如下:

bbs.16xx8.com

  漸變效果如下:

bbs.16xx8.com

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

bbs.16xx8.com

  菜單導航背景最終效果。

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

  點擊水平居中對齊。

bbs.16xx8.com

  整體文本效果就對齊了。

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

  看看右上角的效果。

bbs.16xx8.com

  在menus下新建一個圖層。

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

  選擇第一個繪制的結(jié)果以及第一個與第二菜單,使用對齊工具對齊。

  選擇最后一個鉛筆繪制的豎線,同樣選擇左右兩側(cè)的文本使用對齊工具對齊。

bbs.16xx8.com

  初步看見的效果。

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

  最后完成后的導航。

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

  所看到的初步效果。

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

  給該圖形做模糊處理。

bbs.16xx8.com

  參數(shù)如下:

bbs.16xx8.com

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

bbs.16xx8.com

  選擇漸變工具。

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

  在文本前面繪制標注符,同樣可以使用對齊工具排列。

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

  繪制copyright區(qū)域。

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

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

bbs.16xx8.com

  最后的效果!

bbs.16xx8.com

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!