PS教程:設(shè)計(jì)BoxedArt網(wǎng)站模板教程(3)
第十四步填充額外的內(nèi)容
添加剩下的內(nèi)容就非常簡(jiǎn)單了,我們只需使用直線工具來(lái)分開(kāi)每個(gè)部分,在添加些圖標(biāo)和文字,這里我們用到的是一種干凈的字體Helvetica Condensed,。下圖就是body部分的整體效果了。
第十五步—底部廣告部分
我們已經(jīng)到了底部放置廣告部分了,這里的帶狀條將會(huì)再一次應(yīng)用起來(lái),使用先前有的圖片作為起點(diǎn),下一步,我們要使用圓角矩形工具,前景色設(shè)置為白色半徑為5px。接著我們需要在設(shè)置一些小的圓角矩形,顏色設(shè)置為#f8f7f3邊框用深灰。你可以在下圖的圖層樣式中設(shè)置邊框(就是一種描邊效果)。
這就是我們完成后創(chuàng)建的效果
現(xiàn)在讓我們來(lái)添加標(biāo)題和廣告到每個(gè)盒子中,效果如下圖:
第十六步 公告部分
公告部分我們采取的是和header部分相似蒙板的方法,當(dāng)然還有訂閱新聞通訊等區(qū)域也是這樣的方法,就像紙張粘上去的一樣。首先我們給header部分添加一種厚紙張效果,這個(gè)和body部分的方法基本一樣。至于內(nèi)容部分,選中矩形選框工具在右下角繪制小盒子顏色填充為#f9e5a6。完成按下CTRL-D取消選區(qū),在選擇加深工具,筆刷大小設(shè)置為35pixels加深棕色盒子的邊角區(qū)域就像下圖所示
最后我們把圖層的不透明度設(shè)置為60%再雙擊圖層在圖層樣式中添加一些陰影效果,參數(shù)設(shè)置如下圖,然后在添加一些內(nèi)容。
完成后的效果很不錯(cuò)哦
FOOTER部分
第十七步網(wǎng)頁(yè)底部
到了我們創(chuàng)建底部的部分了,首先我們使用矩形選框工具,在頁(yè)面上選擇下圖這樣一個(gè)區(qū)域,使用顏色#462d0f填充,選擇直線工具繪制一條直線顏色設(shè)置為#a05d18。
到了底部的分類(lèi)部分了,我們要又一次繪制一個(gè)大的選框,顏色填充為#472a0b ,圖層的不透明度度設(shè)置為78%,接著創(chuàng)建另一個(gè)圖層顏色填充為#fffcd1。下一步添加膠片顆粒效果最后把圖層的不透明度設(shè)置為30%圖層樣式為正片疊底。
完成后你應(yīng)該看到的樣子
最后我們只需重復(fù)我們?cè)趂ooter部分的操作或者復(fù)制圖層把它移到底部,這樣你就可以添加內(nèi)容了?聪孪旅娴念A(yù)覽圖,是否有些啟示列,希望你喜歡。
恭喜!你已經(jīng)圓滿完成這個(gè)教程我們?cè)谶@個(gè)BoxedArt 網(wǎng)站設(shè)計(jì)中也學(xué)到一些有用的photoshop技巧知識(shí)
學(xué)習(xí) · 提示
相關(guān)教程
- 網(wǎng)頁(yè)模版,個(gè)人網(wǎng)站建設(shè)入門(mén)知識(shí)
- 網(wǎng)頁(yè)模板,設(shè)計(jì)酒吧主題網(wǎng)頁(yè)模板實(shí)例
- ps設(shè)計(jì)藍(lán)色主題風(fēng)格的網(wǎng)站首頁(yè)模板教程
- 從零手把手教你設(shè)計(jì)網(wǎng)頁(yè)
- ps cs6設(shè)計(jì)時(shí)尚促銷(xiāo)專題頁(yè)教程
- 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)技巧
- ps切片工具怎么用
- 網(wǎng)頁(yè)設(shè)計(jì)的分割布局秘密
- ps設(shè)計(jì)電影網(wǎng)站實(shí)例
- ps設(shè)計(jì)網(wǎng)頁(yè)視頻游戲界面
推薦教程
- PhotoShop設(shè)計(jì)制作懷舊風(fēng)格網(wǎng)頁(yè)的詳細(xì)教程
- PS教程:繪制清新的色彩生動(dòng)的網(wǎng)頁(yè)布局
- Photoshop制作禮品店網(wǎng)站模板
- Photoshop CS5制作放射狀光線網(wǎng)頁(yè)廣告板
- Photoshop繪制好看的老式wordpress主題
- PS教程:制作非常不錯(cuò)的wordpress博客網(wǎng)站模板
- Photoshop網(wǎng)頁(yè)設(shè)計(jì):雜志風(fēng)格網(wǎng)站界面
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁(yè)模板
- ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁(yè)特效
- photoshop網(wǎng)頁(yè)應(yīng)用實(shí)例:制作蘋(píng)果導(dǎo)航欄