Photoshop制作清爽綠色風(fēng)格網(wǎng)頁(yè)模板(3)
本教程主要用Photoshop來(lái)設(shè)計(jì)一張綠色調(diào)風(fēng)格網(wǎng)頁(yè)模板,網(wǎng)頁(yè)美工設(shè)計(jì)的朋友可以一起來(lái)觀賞學(xué)習(xí),模板的制作的重點(diǎn)在于網(wǎng)站的板式搭配和顏色的搭配.下面讓我們一起來(lái)學(xué)習(xí)吧.
先看看完整的網(wǎng)頁(yè)布局效果:
現(xiàn)在我們開(kāi)始教程。
01。創(chuàng)建一個(gè)1020px X 1060px的文件。
02。下一步,我們將改變背景顏色。用油漆桶工具,填補(bǔ)背景層顏色:#e3dec1
03。選擇矩形工具,繪制出以下尺寸形狀:1022X173和填充黑色(#343434)
04。接下來(lái),我選擇選擇一個(gè)如下的矢量圖片素材,類(lèi)似的都行,并將透明度設(shè)置為23%。
05。現(xiàn)在,選擇矩形工具(U)和添加形狀(244 × 119),使用下面的顏色#a3cb31。
06。下一步使用矩形工具,創(chuàng)建另一個(gè)形狀,尺寸:239X130,然后處理成下列圖層樣式:(投影和漸變效果,如下圖)
處理效果如下:
07。下一步將是增加該網(wǎng)站的logo。
看看下面的效果吧:
08。完成logo后,在右邊添加一些標(biāo)語(yǔ)文字。
09。下面開(kāi)始制作導(dǎo)航目錄,選擇矩形工具來(lái)創(chuàng)建一個(gè)形狀(1022X46),并添加下面層的樣式效果。
如下圖,將導(dǎo)航條和上方的頭部保持1~2px的間距(將導(dǎo)航條像下移動(dòng))。預(yù)覽:
10。下添加一個(gè)鼠標(biāo)選中和當(dāng)前頁(yè)面的效果。用橢圓工具(背景設(shè)置為白色),并制訂一個(gè)小的形狀。如下:
11。應(yīng)用高斯模糊(濾鏡>模糊>高斯模糊)與15px半徑。
12。在這一步驟中將添加一些導(dǎo)航文本。
13。因?yàn)槲覀兊膶?dǎo)航欄看上去有點(diǎn)空,我們?cè)谟覀?cè)再添加個(gè)搜索框。選擇矩形工具,添加一個(gè)尺寸:255 × 26的框,設(shè)置層樣式:(內(nèi)投影)
看看下面的效果:
現(xiàn)在來(lái)裝飾導(dǎo)航。
14。選擇矩形工具,繪制出形狀(在導(dǎo)航欄)在下方:1022X32。顏色填充:#c0de7a
15。現(xiàn)在添加一些其他素材。
16。如下圖中的圖型。
向上移動(dòng),如下圖,主要圖層擺放關(guān)系。
17。接下來(lái),我會(huì)重復(fù)復(fù)制素材(層>復(fù)制層)。
下面效果:
18。步驟重復(fù)5-7次以上,下面全部覆蓋就可以了,然后把每個(gè)層的透明度設(shè)置為16%就差不多了~~
下面開(kāi)始制作中間的宣傳部分
19。選擇矩形工具,并創(chuàng)建一個(gè)具有以下尺寸形狀:1022 x 178。使用這種顏色:#80ad0a
20。在形狀中創(chuàng)建一個(gè)循環(huán)使用橢圓工具
21。選擇矩形工具,選擇如綠色背景高度。
22。按Ctrl + Alt +I(反向選擇),然后按下刪除。刪除多余部分:
23,F(xiàn)在修飾一下這個(gè)部分吧,你需要在中間放一個(gè)向日葵,在兩邊添加一些矢量裝飾圖和一些文本
效果看看吧:
其他部分都好了~ 在做下面的主要內(nèi)容部分。
24。選擇矩形工具,繪制出形狀。尺寸: 969x563
25。然后應(yīng)用投影樣式:
26。下面添加一些文章,并添加一些裝飾。如下:
27,F(xiàn)在制作右邊的部分,選擇矩形工具,并創(chuàng)建一個(gè)矩形,尺寸:275x508,并應(yīng)用圖層樣式:
所有需要做的是添加一些圖片和一些文字,F(xiàn)在主要領(lǐng)域就完成了。
28。下面制作底部,在頁(yè)腳需要添加一些版權(quán)信息,您可以添加一些矢量圖片裝飾。
看看下圖:
這樣本教程已經(jīng)結(jié)束了。教程寫(xiě)的有點(diǎn)簡(jiǎn)單,希望大家喜歡。
學(xué)習(xí) · 提示
相關(guān)教程
- 網(wǎng)頁(yè)模板,設(shè)計(jì)酒吧主題網(wǎng)頁(yè)模板實(shí)例
- ps設(shè)計(jì)藍(lán)色主題風(fēng)格的網(wǎng)站首頁(yè)模板教程
- ps黑色風(fēng)格網(wǎng)頁(yè)模板
- ps一個(gè)木紋風(fēng)格網(wǎng)頁(yè)模板
- PS設(shè)計(jì)一個(gè)葡萄酒博客網(wǎng)頁(yè)模板
- ps設(shè)計(jì)時(shí)尚風(fēng)格數(shù)碼科技電子商務(wù)網(wǎng)站模
- photoshop設(shè)計(jì)企業(yè)網(wǎng)站首頁(yè)實(shí)例
- ps創(chuàng)建常見(jiàn)的網(wǎng)頁(yè)風(fēng)格教程系列一
- ps設(shè)計(jì)制作古樸風(fēng)格的網(wǎng)站
- PS設(shè)計(jì)制作一個(gè)清爽的藍(lán)色海洋風(fēng)格網(wǎng)
推薦教程
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁(yè)模板
- ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁(yè)特效
- Photoshop制作禮品店網(wǎng)站模板
- photoshop網(wǎng)頁(yè)應(yīng)用實(shí)例:制作蘋(píng)果導(dǎo)航欄
- PS教程:繪制清新的色彩生動(dòng)的網(wǎng)頁(yè)布局
- PhotoShop設(shè)計(jì)制作懷舊風(fēng)格網(wǎng)頁(yè)的詳細(xì)教程
- Photoshop繪制好看的老式wordpress主題
- Photoshop CS5制作放射狀光線(xiàn)網(wǎng)頁(yè)廣告板
- Photoshop網(wǎng)頁(yè)設(shè)計(jì):雜志風(fēng)格網(wǎng)站界面
- PS教程:制作非常不錯(cuò)的wordpress博客網(wǎng)站模板