Photoshop制作商務(wù)公司網(wǎng)站模版(5)

來源：未知 作者：admin 學(xué)習(xí)：6180人次
本教程設(shè)計(jì)的公司灰色調(diào)網(wǎng)站，但是在布局方面就感覺十分大膽與隨意，與國內(nèi)很多企業(yè)公司網(wǎng)站的風(fēng)格完全背離，也可以看出不同國家的文化的體現(xiàn)，不過整體來說還是很不錯(cuò)的頁面設(shè)計(jì)，這樣的設(shè)計(jì)感覺顏色體現(xiàn)了公司網(wǎng)站需要的沉穩(wěn)但布局又不缺少活躍氣份的部分。

新建900x850大小文件，雙擊背景圖層，取消背景圖層的鎖定
再次雙擊背景圖層，然后添加如下圖層樣式

開始制作導(dǎo)航按鈕！
使用圓角矩形工具，設(shè)置半徑為10px，拖動(dòng)出如下圖三個(gè)形狀，隨后用多邊形套鎖工具刪除一個(gè)左下角區(qū)域，如下圖所示

隨后用橢圓選區(qū)工具制作箭頭，制作步驟是，先畫一正圓選區(qū)，然后刪除白色區(qū)域，再將選區(qū)減少2px~3px,為圓填充白色

使用photoshop箭頭形狀制作箭頭，完成后如下



                                       
將導(dǎo)航按鈕進(jìn)行復(fù)制，并合并達(dá)到一個(gè)圖層中，添加一個(gè)如下的陰影樣式，再加入按鈕文字

完成后圖

為了讓頁面增加一些變化的效果，使其看上去不呆板，我們導(dǎo)入一些圖片與斑跡筆刷

在圖片下放置一個(gè)圖層，用來放上聯(lián)系方式，這樣看上去是不是有點(diǎn)小創(chuàng)意？

為新圖層的圓角矩形添加樣式

放入聯(lián)系文字



                                       
將之前做好的公司LOGO標(biāo)志導(dǎo)入

放一張咖啡圖片，在其下制作網(wǎng)頁的主要區(qū)域

為上面的選區(qū)填充白色，隨后設(shè)置不透明度為40%

加入文字

為了充實(shí)頁面內(nèi)容我們開始設(shè)置版面的擺放位置
如下圖這種圖片顯示方式十分得體，由于我們的公司網(wǎng)站顏色比較單一，所以在版面上就不能過于保守

制作兩個(gè)主要版塊區(qū)域，填充顏色使用#eae9e4 ，邊框顏色為#838274

加入圖片與文字以及按鈕，整個(gè)頁面中的按鈕我們都使用同樣的風(fēng)格



                                       
制作搜索條區(qū)域

制作公司網(wǎng)站的新聞區(qū)域

完成公司網(wǎng)站后的整體效果如下

學(xué)習(xí) · 提示

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

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

網(wǎng)友求助，請(qǐng)回答！