PS創(chuàng)建一款簡(jiǎn)潔大方的歐美商務(wù)網(wǎng)站首頁(yè)(6)
一篇簡(jiǎn)單創(chuàng)建歐美商務(wù)網(wǎng)站的教程。在本教程中,我將告訴你如何用PS構(gòu)建創(chuàng)建歐美商務(wù)網(wǎng)站。這樣的布局可用于業(yè)務(wù)布局,企業(yè)網(wǎng)站,甚至是一個(gè)WordPress主題。
先看看photoshop教程整體樣式:
開(kāi)始,創(chuàng)建一個(gè)新的文檔,將填充背景層顏色值:#ece5db。
1、在底部的布局,創(chuàng)建一個(gè)圓角矩形工具。設(shè)置前景色為:#f6f2ed。
2、為圓角矩形添加如下的圖層樣式。
3、繼續(xù)使用矩形工具,在網(wǎng)頁(yè)頭部創(chuàng)建一個(gè)簡(jiǎn)單的矩形,填充顏色 #2d2b26。
4、復(fù)制網(wǎng)頁(yè)頭部的矩形,放在底部布局。 復(fù)制圖層的快捷鍵 CTRL+J 。
5、請(qǐng)?zhí)砑右韵聦訕邮健?/p>
6、在頭部矩形下創(chuàng)建另一個(gè)形狀。在這里以后放置logo。
7、也為這個(gè)形狀添加一些簡(jiǎn)單的圖層樣式。
8、使用圓角矩形工具,創(chuàng)建一個(gè)形狀。可以創(chuàng)建成一個(gè)幻燈片形式的banner。
9、加入banner圖片, 建議使用唯美的圖片。
10、加入文字導(dǎo)航。這里樣式的是大字導(dǎo)航名稱,下面輔助的解釋說(shuō)明信息文字。
11、為導(dǎo)航添加一些垂直的線。
12、放大導(dǎo)航區(qū)域,看清線條的處理。
13、加入Logo。
14、在logo區(qū)域的右側(cè),加入網(wǎng)頁(yè)搜索框。
要?jiǎng)?chuàng)建這個(gè)需要使用圓角矩形工具。如果你看我前面的教程,會(huì)發(fā)現(xiàn)我已經(jīng)使用這個(gè)搜索表單的圖層
樣式。
15、在這中間的布局我要添加一個(gè)圖像和一些內(nèi)容。
16、如下設(shè)置圖層樣式。
17、請(qǐng)查看下面的圖片,是如何填補(bǔ)了網(wǎng)頁(yè)主體的布局。
18、這是最終的結(jié)果。
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- 制作教程
- 一款
- 歐美
- 網(wǎng)站首頁(yè)
- 創(chuàng)建
學(xué)習(xí) · 提示
相關(guān)教程
- ps設(shè)計(jì)電影網(wǎng)站實(shí)例
- ps設(shè)計(jì)懷舊復(fù)古的網(wǎng)頁(yè)
- PS設(shè)計(jì)iPhone蘋(píng)果應(yīng)用電子網(wǎng)站
- PS電子商務(wù)在線購(gòu)物網(wǎng)站美工教程
- 如何創(chuàng)建一個(gè)Fancy的設(shè)計(jì)工作室網(wǎng)頁(yè)布局
- ps設(shè)計(jì)時(shí)尚風(fēng)格數(shù)碼科技電子商務(wù)網(wǎng)站模
- 使用ps打造一個(gè)企業(yè)網(wǎng)站首頁(yè)設(shè)計(jì)制作全
- PS設(shè)計(jì)一個(gè)干凈的蘋(píng)果iPad產(chǎn)品網(wǎng)站網(wǎng)
- ps設(shè)計(jì)教程:ipad主題網(wǎng)頁(yè)制作教程
- Photoshop制作筆記本電子商務(wù)網(wǎng)站首頁(yè)模板
推薦教程
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁(yè)模板
- PS教程:制作非常不錯(cuò)的wordpress博客網(wǎng)站模板
- PS教程:繪制清新的色彩生動(dòng)的網(wǎng)頁(yè)布局
- Photoshop繪制好看的老式wordpress主題
- Photoshop CS5制作放射狀光線網(wǎng)頁(yè)廣告板
- ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁(yè)特效
- Photoshop制作禮品店網(wǎng)站模板
- PhotoShop設(shè)計(jì)制作懷舊風(fēng)格網(wǎng)頁(yè)的詳細(xì)教程
- photoshop網(wǎng)頁(yè)應(yīng)用實(shí)例:制作蘋(píng)果導(dǎo)航欄
- Photoshop網(wǎng)頁(yè)設(shè)計(jì):雜志風(fēng)格網(wǎng)站界面