Photoshop繪制精美的企業(yè)網(wǎng)站模板
作者:佚名 出處:Grafpedia
你好,我的朋友們。在本教程中,我將告訴您如何在短短的幾個步驟里為您的企業(yè)建立網(wǎng)頁布局,您可以使用于任何類型的業(yè)務(wù),或再進(jìn)行小的修改也可以創(chuàng)建一個投資組合布局。如果您已經(jīng)遵循了我,我相信你可以按照自己的需要修改這一教程上的一些布局。
像往常一樣,我會創(chuàng)建一個新的文檔,尺寸:1000 x 1100像素。
我將我的前景色設(shè)置為#333333,使用油漆桶工具,然后我將填補這個顏色的背景色。
我會選擇矩形工具,我將創(chuàng)建一個像下面的圖像的形狀。 我將利用這個圖片來創(chuàng)建布局頭。(圖01)
先看效果圖
圖01
對于白色的形狀,我會添加下面的圖層樣式。(圖02)
圖02
在添加圖層樣式布局看起來是這樣的。(圖03)
圖03
我這一個下面創(chuàng)建一個類似的形狀,我將使用上面層的風(fēng)格,但我會取消檢查反向按鈕。(圖04)
圖04
下面是結(jié)果
圖05
我將用更多的時間用矩形工具,創(chuàng)造另一個形狀。(圖06)
圖06
對于這種形狀的,我會添加一些圖層樣式。(圖07、08、09)
圖07
圖08
圖09
請點擊下面的圖片,看看它的外觀。(圖10)
圖10
創(chuàng)建一個新層(按上按Ctrl + Shift + ALT鍵+ N在同一時間)。
隨著矩形選框工具我會就布局頂部選擇。(圖11)
圖11
我會選擇以下像素模式,我會按我的內(nèi)選擇鼠標(biāo)左鍵(請注意,您還需要選擇新的層)(圖12)
圖12
這是我的結(jié)果(圖13)
圖13
使用橡皮擦工具 ,我會刪除與此形成底部的細(xì)條紋的一部分。我將使用順利圓刷。這是我的結(jié)果。(圖14)
圖14
我將用更多的時間一矩形工具 ,創(chuàng)建一個形狀,我將稍后添加一些按鈕。(圖15)
圖15
我會添加一些圖層樣式(圖16、17、18、19)
圖16
圖17
圖18
圖19
下面是結(jié)果(圖20)
圖20
在布局我將在中間創(chuàng)建一個新的圓角形狀。我將使用圓角矩形工具,半徑為5或6像素。(圖21)
圖21
你可以看到這個形狀周圍較平。這一點用一個簡單的圖層樣式就能解決。(圖22)
圖22
我用鋼筆工具下建立這種形狀的陰影。用深色創(chuàng)造出一些形狀。請注意,您必須置于圓形層。(圖23)
圖23
然后我會按下Ctrl + E將他們合并為一單層。
用濾鏡“>模糊”高斯模糊,我將利用其在外地半徑值為10。影子看起來像下面的圖像。(圖24)
圖24
在圓形我將創(chuàng)建兩個(1像素細(xì)線中每個)使用不同的顏色。我會選擇兩個圖層,我將它們合并(Ctrl + E)。然后用橡皮擦工具進(jìn)行刪除。(圖25)
圖25
在布局中我將創(chuàng)建一個矩形工具中的新形狀。(圖26)
圖26
我將添加下面的圖層樣式。(圖27、28)
圖27
圖28
這是我的結(jié)果(圖29)
圖29
這時候我會復(fù)制這層,如果您跳過這一步您將不能夠創(chuàng)建和我有同樣的效果。
當(dāng)您在您的調(diào)色板層兩層,你需要他們合并成一個層。
我之所以合并兩個層,因為我要用橡皮擦刪除下面的圖像底部的一部分。請使用一個大的筆刷。(圖30)
圖30
我會添加一些文本,菜單按鈕,也有一些圖標(biāo)。請點擊下面的圖片我看到更好的結(jié)果。(圖31)
圖31
我會創(chuàng)建另一個矩形工具的形狀,我將置于它的文字層。(圖32)
圖32
我將用下面的圖層樣式。(圖33、34、35)
圖33
圖34
圖35
這是我的結(jié)果。(圖36)
圖36
我的最后一步是創(chuàng)建另外兩個細(xì)線(1像素),下面箭頭的位置。(圖37)
圖37
這是我最后的結(jié)果。(圖38)
圖38
我喜歡這樣的布局類型。
學(xué)習(xí) · 提示
相關(guān)教程
- 網(wǎng)頁模板,設(shè)計酒吧主題網(wǎng)頁模板實例
- ps設(shè)計藍(lán)色主題風(fēng)格的網(wǎng)站首頁模板教程
- ps黑色風(fēng)格網(wǎng)頁模板
- ps一個木紋風(fēng)格網(wǎng)頁模板
- PS設(shè)計一個葡萄酒博客網(wǎng)頁模板
- 如何設(shè)計與PSD模板標(biāo)題導(dǎo)航菜單教程
- ps設(shè)計心形網(wǎng)頁模板教程
- ps設(shè)計時尚風(fēng)格數(shù)碼科技電子商務(wù)網(wǎng)站模
- photoshop設(shè)計企業(yè)網(wǎng)站首頁實例
- 使用ps打造一個企業(yè)網(wǎng)站首頁設(shè)計制作全
推薦教程
- PS教程:制作非常不錯的wordpress博客網(wǎng)站模板
- photoshop網(wǎng)頁應(yīng)用實例:制作蘋果導(dǎo)航欄
- PhotoShop設(shè)計制作懷舊風(fēng)格網(wǎng)頁的詳細(xì)教程
- ps設(shè)計制作居家風(fēng)格美食Blog網(wǎng)頁特效
- Photoshop繪制好看的老式wordpress主題
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁模板
- PS教程:繪制清新的色彩生動的網(wǎng)頁布局
- Photoshop制作禮品店網(wǎng)站模板
- Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面
- Photoshop CS5制作放射狀光線網(wǎng)頁廣告板