Photoshop設(shè)計(jì)軟件行業(yè)網(wǎng)站模板教程(3)
軟件行業(yè)網(wǎng)站需要的是專業(yè)性的視覺效果,所以在本文中的頁面設(shè)計(jì)并沒有使用過于鮮艷的顏色,而是用比較酷的一排金屬按鈕來完成頁面的視覺效果
先看看最終效果圖:
新建760x770大小PS文件,設(shè)置前景色為#e8e8e8,新建圖層,隨后用油漆捅工具在新建的圖層上制作漸變色,顏色從#e8e8e8到透明,如下圖設(shè)置
隨后用油漆桶從下往上拉條漸變線,效果如下圖
用圓角矩形工具,半徑為7px
隨后制作下圖這些圓角矩形形狀
使用橢圓工具制作下面四個(gè)正圓(按shift建繪制正圓)
為四個(gè)圓添加圖層樣式
結(jié)果如下
現(xiàn)在我再制作四個(gè)黑色的圓放在之前的圖層上,如下
為黑色的圓添加圖層樣式
這是完成后的按鈕效果
選中按鈕的所有圖層
將所有圖層復(fù)制一次
選中復(fù)制出的所有圖層,隨后按ctrl+e合并為一個(gè)圖層
編輯 > 變換路徑 > 垂直翻轉(zhuǎn),然后將復(fù)制出的按鈕移動(dòng)到原按鈕的下方
我們這么做的目的是為了制作按鈕的倒影效果,這里倒影的制作方法很簡(jiǎn)單,我先選擇如下的筆刷
隨后我對(duì)下面的按鈕進(jìn)行筆刷涂沫
最后設(shè)置不透明度為20%就完成了倒影的制作
我再加入一些icon的小圖標(biāo)作為裝飾
現(xiàn)在開始制作導(dǎo)航條部分
加入導(dǎo)航文字與LOGO
隨后為導(dǎo)航文字制作鼠標(biāo)移動(dòng)上時(shí)的效果圖
在上面的黑色圓角矩形圖層上按右鍵選擇”刪格圖層“,這樣完全轉(zhuǎn)換為象素圖,而沒有路徑邊框了
用選區(qū)工具去掉下面的多余部分
按鈕效果圖如下
文字與內(nèi)容的添加并沒有什么可敘述的,完成后如下
這里我們要為我們的軟件包裝圖片制做一個(gè)促銷的圖標(biāo),用多變形工具,設(shè)置如下
制作一個(gè)白色的多邊形,隨后加一些文字
使用筆刷做對(duì)頁面一些修飾
最終完成的軟件網(wǎng)站效果頁面如下
學(xué)習(xí) · 提示
相關(guān)教程
- 網(wǎng)頁模版,個(gè)人網(wǎng)站建設(shè)入門知識(shí)
- 網(wǎng)頁模板,設(shè)計(jì)酒吧主題網(wǎng)頁模板實(shí)例
- ps設(shè)計(jì)藍(lán)色主題風(fēng)格的網(wǎng)站首頁模板教程
- 從零手把手教你設(shè)計(jì)網(wǎng)頁
- ps cs6設(shè)計(jì)時(shí)尚促銷專題頁教程
- 網(wǎng)頁設(shè)計(jì)基礎(chǔ)技巧
- ps切片工具怎么用
- 網(wǎng)頁設(shè)計(jì)的分割布局秘密
- ps設(shè)計(jì)電影網(wǎng)站實(shí)例
- ps設(shè)計(jì)網(wǎng)頁視頻游戲界面
推薦教程
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁模板
- Photoshop繪制好看的老式wordpress主題
- ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁特效
- photoshop網(wǎng)頁應(yīng)用實(shí)例:制作蘋果導(dǎo)航欄
- Photoshop網(wǎng)頁設(shè)計(jì):雜志風(fēng)格網(wǎng)站界面
- PS教程:繪制清新的色彩生動(dòng)的網(wǎng)頁布局
- Photoshop CS5制作放射狀光線網(wǎng)頁廣告板
- PS教程:制作非常不錯(cuò)的wordpress博客網(wǎng)站模板
- PhotoShop設(shè)計(jì)制作懷舊風(fēng)格網(wǎng)頁的詳細(xì)教程
- Photoshop制作禮品店網(wǎng)站模板