Photoshop繪制高雅清新的網(wǎng)站首頁(yè)模板(3)
Photoshop教程:一款清新高雅的網(wǎng)頁(yè)布局
預(yù)覽:
在這篇網(wǎng)頁(yè)設(shè)計(jì)教程中,你將學(xué)習(xí)如何設(shè)計(jì)優(yōu)雅并專(zhuān)業(yè)的網(wǎng)頁(yè)布局,我們將運(yùn)用各種photoshop技巧,依靠圖形工具和圖層樣式等基本操作來(lái)實(shí)現(xiàn)此布局。作為獎(jiǎng)勵(lì),在教程結(jié)束后附有HTML/CSS/JavaScript的網(wǎng)站模板,完全免費(fèi)下載。
網(wǎng)站模板
點(diǎn)擊下圖查看網(wǎng)站模板
素材
- 矢量社區(qū)媒體圖標(biāo)(下載)
- 凌亂、自然灰褐色圖案(下載)
- 高清花紋筆刷(下載)
- Mono圖標(biāo)(下載)
1、新建文檔
打開(kāi)photoshop,新建尺寸為1020*1180px的空白文檔。
2、設(shè)置導(dǎo)航條背景
選取矩形選框工具(M),創(chuàng)建有整個(gè)畫(huà)布寬的選區(qū),高度不要太高,然后用深灰色(#393939)進(jìn)行填充(cmd/ctrl+F5),如下所示:
復(fù)制(cmd/ctrl+J)剛新建的導(dǎo)航圖層,并對(duì)其添加雜色濾鏡(濾鏡>雜色>添加雜色),如下設(shè)置:
然后更改圖層混合模式為”疊加”,透明度下降到大約23%。
3、創(chuàng)建站點(diǎn)logo/名稱(chēng)
對(duì)于logo,我使用了粗斜樣式的字體Georgia,用白色(#ffffff)編輯’Six’時(shí),用米黃色(#F7E5C4)編輯’Studios’,對(duì)于圖標(biāo),選用了Mono圖標(biāo)中的boxupload32圖標(biāo),如下所示:
4、添加菜單
使用顏色(#DBD1BE)編輯激活時(shí)的菜單,正常狀態(tài)的菜單使用顏色(#ABAAAA)。
為了讓激活狀態(tài)下的菜單更加醒目,選取圓角矩形工具(T)創(chuàng)建一個(gè)圓角矩形(圓角半徑為5px,前景色為#464646)放置在菜單圖層下方,如下所示:
,然后設(shè)置如下圖層樣式:
‘內(nèi)陰影’/'描邊’:
5、添加展示區(qū)背景
在布局頭部,我們還要添加一個(gè)作品展示區(qū),以幻燈片形式來(lái)播放圖片,每張圖片配有簡(jiǎn)單介紹和導(dǎo)航。在開(kāi)始前,選取矩形選框工具(M)創(chuàng)建矩形,以顏色(#D3CAB8)進(jìn)行填充。
下一步,下載凌亂、自然灰褐色圖案(或其它圖案)拖放到文檔中,放在矩形圖層上方。
接下來(lái)我們要遮住一些不需要的紋理,在圖層面板選中矩形圖層,按住cmd/ctrl鍵,點(diǎn)擊縮略圖,創(chuàng)建一個(gè)自動(dòng)選區(qū),然后選中紋理圖層,在下拉菜 單中點(diǎn)擊”添加圖層蒙版”,這樣遮住了除選區(qū)外的所有區(qū)域,最后,撤消選區(qū)(ctrl+D),把紋理圖層的透明度下降到35%。
6、添加網(wǎng)站介紹
使用水平字體工具(T),在展示區(qū)左側(cè)添加網(wǎng)站文字說(shuō)明,采用Helvetica 或Arial字體進(jìn)行編輯,確保標(biāo)題(顏色#FFFFFF)和內(nèi)容(顏色#2A2A2A)文字在不同圖層。
為了使標(biāo)題更加炫目,按如下設(shè)置添加圖層樣式:
‘陰影’/'漸變疊加’:
接下來(lái),創(chuàng)建”About us”的圓角按鈕。再一次選取圓角矩形工具(U),設(shè)置半徑5PX,文本顏色為#404040,同時(shí)在右邊有一個(gè)箭頭圖標(biāo)(Mono圖標(biāo)集中的circleright32),重設(shè)它的大小以匹配按鈕。
在矩形圖層上添加以下樣式:
‘外發(fā)光’/'漸變疊加’:
最后一步是在按鈕右邊添加花紋,就是這微妙的設(shè)計(jì)元素增加了此設(shè)計(jì)的優(yōu)雅度。下載并安裝花紋筆刷(資源區(qū)的上方),先設(shè)置前景色為#343434,選取畫(huà)筆工具(B),找到花紋筆刷,在畫(huà)布上進(jìn)行一次點(diǎn)擊,然后把圖層混合模式改為“強(qiáng)光”。
7、創(chuàng)建幻燈片區(qū)
選取圓角矩形工具(U),前景色為白色,半徑為5PX,在展示區(qū)右側(cè)生成一個(gè)圓角矩形。
設(shè)置此圖層的透明度為15%,以顯示背景圖案,接著添加’陰影’的圖層樣式:
此刻,我們需要在幻燈片區(qū)域添加圖片縮略圖,你可以找一個(gè)網(wǎng)站截圖或其它圖片,放在白色圓角矩形上方。我們得把圖片四角變成圓角,在圖層面板,按住 cmd/ctrl,點(diǎn)擊白色圓角矩形的縮略圖,創(chuàng)建一個(gè)自動(dòng)選區(qū),接著選擇放圖片的圖層,去往菜單”選擇>修改>收縮”,收縮10px,然后 執(zhí)行”選擇>反選”(cmd/ctrl+shift+I)反選選區(qū),最后執(zhí)行”編輯>清除”。
接下來(lái)添加圖片描述,在圖層面板,按住cmd/ctrl,點(diǎn)擊圖片圖層的縮略圖,創(chuàng)建一個(gè)自動(dòng)選區(qū),新建圖層,并以黑色填充選區(qū),然后使用圓角矩形選框工具(M),選取新建的黑色矩形的上部分并刪除。
降低圖層透明度到75%,添加簡(jiǎn)單的文字說(shuō)明
8、在展示區(qū)底部添加分隔線
像步驟2一樣在展示區(qū)底部添加一條灰色、水平分隔線,不同在于還要添加’內(nèi)陰影’的樣式:
設(shè)計(jì)的主內(nèi)容區(qū)的時(shí)間到了!
9、給主內(nèi)容區(qū)添加背景
就像預(yù)覽圖一樣,主內(nèi)容區(qū)分布為三列,選取矩形選框工具(M),生成畫(huà)布寬的選區(qū),用顏色(#FBF5EA)進(jìn)行填充。
主內(nèi)容區(qū)的設(shè)計(jì)其實(shí)相當(dāng)簡(jiǎn)單,但是要讓人看出很簡(jiǎn)單也要花一定時(shí)間完成。我們將從左邊開(kāi)始,放置服務(wù)列表。
10、添加列標(biāo)題
對(duì)于我們的列標(biāo)題,從Mono圖標(biāo)挑選一個(gè)象征符號(hào),并放在標(biāo)題左邊,使用字體”Georgia“和顏色(#323232)編輯標(biāo)題文本。下一步,在文本底部添加弧線邊界,這就要用到鋼筆工具(P)了,像下圖一樣創(chuàng)建一條路徑。
為了給路徑描邊,設(shè)置前景色為文本顏色(#323232),然后選擇一個(gè)較硬的畫(huà)筆工具,大小大約為3px。接著打開(kāi)”路徑”面板(窗口>路徑),點(diǎn)擊面板下方的”用畫(huà)筆給路徑描邊”。
下面為曲線添加一點(diǎn)漸變,設(shè)置”漸變疊加”的圖層樣式:
復(fù)制曲線圖層,離原圖層下方4或5px處,降低透明度到24%。
11、為左欄添加內(nèi)容
設(shè)置標(biāo)題顏色為深灰(#323232),文本內(nèi)容顏色為一種可讀性的灰色(例如:#2A2A2A)。像創(chuàng)建”About us “一樣創(chuàng)建”Read More”按鈕,對(duì)于中間這行,我改變了顏色,一種純灰色(#484848)用于激活狀態(tài)下的顏色。
12、為中欄添加內(nèi)容
像左欄一樣,添加標(biāo)題和圖標(biāo)(另外合適的圖標(biāo))。使用圓角矩形工具(U),設(shè)置半徑3px,前景色為白色,生成一小型的圓角矩形,在矩形下方添加一些文本和描述。
接著為圓角矩形設(shè)置圖層樣式:
‘外發(fā)光’/'描邊’:
然后,在圓角矩形內(nèi)添加與描述相配的圖片。
13、為右欄添加內(nèi)容
像左欄和中欄一樣,添加標(biāo)題和圖標(biāo)。對(duì)于未激活的鏈接,采用深灰色(#353535)編輯字體,對(duì)于活動(dòng)狀態(tài)的鏈接,采用白色字體,并且創(chuàng)建深灰色(#353535)圓角矩形背景,半徑也是3px。
14、設(shè)計(jì)時(shí)事通訊窗口
選取圓角矩形工具(U),生成一個(gè)3px的圓角矩形,像第2步一樣設(shè)置雜色濾鏡。
使用字體Georgia Italic編輯標(biāo)題,從Mono圖標(biāo)中選擇一個(gè)信封的圖標(biāo),給此圖標(biāo)設(shè)置了顏色(#F7E5C4)疊加,創(chuàng)建了一個(gè)圓角矩形選框,用來(lái)輸入用戶(hù)郵箱,以白色填充。
15、添加footer
一開(kāi)始創(chuàng)建footer,就像創(chuàng)建header中的導(dǎo)航一樣,只不過(guò)要比導(dǎo)航條高些。
接下來(lái)創(chuàng)建一些鏈接,選取圓角矩形選框工具(M),生成如下圖一樣的選框,以深灰色(#323232)進(jìn)行填充,里面用白色文字填充。
然后把混合模式改成”弱光”,透明度降低到63%,以突出背景顏色。重復(fù)此流程,創(chuàng)建其它鏈接。
最后一件事,選擇一些社區(qū)媒體圖標(biāo)添加到鏈接上方,選擇站點(diǎn)logo和copyright放在footer右側(cè)。
學(xué)習(xí) · 提示
相關(guān)教程
- 網(wǎng)頁(yè)模板,設(shè)計(jì)酒吧主題網(wǎng)頁(yè)模板實(shí)例
- ps設(shè)計(jì)藍(lán)色主題風(fēng)格的網(wǎng)站首頁(yè)模板教程
- ps設(shè)計(jì)電影網(wǎng)站實(shí)例
- ps黑色風(fēng)格網(wǎng)頁(yè)模板
- ps一個(gè)木紋風(fēng)格網(wǎng)頁(yè)模板
- PS設(shè)計(jì)一個(gè)葡萄酒博客網(wǎng)頁(yè)模板
- PS創(chuàng)建一款簡(jiǎn)潔大方的歐美商務(wù)網(wǎng)站首頁(yè)
- 如何設(shè)計(jì)與PSD模板標(biāo)題導(dǎo)航菜單教程
- ps設(shè)計(jì)心形網(wǎng)頁(yè)模板教程
- ps設(shè)計(jì)時(shí)尚風(fēng)格數(shù)碼科技電子商務(wù)網(wǎng)站模
推薦教程
- Photoshop繪制好看的老式wordpress主題
- ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁(yè)特效
- Photoshop CS5制作放射狀光線網(wǎng)頁(yè)廣告板
- PhotoShop設(shè)計(jì)制作懷舊風(fēng)格網(wǎng)頁(yè)的詳細(xì)教程
- Photoshop網(wǎng)頁(yè)設(shè)計(jì):雜志風(fēng)格網(wǎng)站界面
- photoshop網(wǎng)頁(yè)應(yīng)用實(shí)例:制作蘋(píng)果導(dǎo)航欄
- Photoshop制作禮品店網(wǎng)站模板
- PS教程:制作非常不錯(cuò)的wordpress博客網(wǎng)站模板
- PS教程:繪制清新的色彩生動(dòng)的網(wǎng)頁(yè)布局
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁(yè)模板