日韩小视频-日韩久久一区二区三区-日韩久久一级毛片-日韩久久久精品中文字幕-国产精品亚洲精品影院-国产精品亚洲欧美云霸高清

下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當(dāng)前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > Photoshop繪制高雅清新的網(wǎng)站首頁模板

Photoshop繪制高雅清新的網(wǎng)站首頁模板

時間:2024-02-06 12:00作者:下載吧人氣:18

作者:PS真功夫 翻譯 出處:Photoshop繪制高雅清新的網(wǎng)站首頁模板

Photoshop教程:一款清新高雅的網(wǎng)頁布局

預(yù)覽:

Photoshop繪制高雅清新的網(wǎng)站首頁模板
在這篇網(wǎng)頁設(shè)計(jì)教程中,你將學(xué)習(xí)如何設(shè)計(jì)優(yōu)雅并專業(yè)的網(wǎng)頁布局,我們將運(yùn)用各種photoshop技巧,依靠圖形工具和圖層樣式等基本操作來實(shí)現(xiàn)此布局。作為獎勵,在教程結(jié)束后附有HTML/CSS/JavaScript的網(wǎng)站模板,完全免費(fèi)下載。

網(wǎng)站模板

點(diǎn)擊下圖查看網(wǎng)站模板

Photoshop繪制高雅清新的網(wǎng)站首頁模板

素材

  • 矢量社區(qū)媒體圖標(biāo)(下載)
  • 凌亂、自然灰褐色圖案(下載)
  • 高清花紋筆刷(下載)
  • Mono圖標(biāo)(下載)

1、新建文檔

打開photoshop,新建尺寸為1020*1180px的空白文檔。

2、設(shè)置導(dǎo)航條背景

選取矩形選框工具(M),創(chuàng)建有整個畫布寬的選區(qū),高度不要太高,然后用深灰色(#393939)進(jìn)行填充(cmd/ctrl+F5),如下所示:

Photoshop繪制高雅清新的網(wǎng)站首頁模板

復(fù)制(cmd/ctrl+J)剛新建的導(dǎo)航圖層,并對其添加雜色濾鏡(濾鏡>雜色>添加雜色),如下設(shè)置:

Photoshop繪制高雅清新的網(wǎng)站首頁模板

然后更改圖層混合模式為”疊加”,透明度下降到大約23%。


3、創(chuàng)建站點(diǎn)logo/名稱

對于logo,我使用了粗斜樣式的字體Georgia,用白色(#ffffff)編輯’Six’時,用米黃色(#F7E5C4)編輯’Studios’,對于圖標(biāo),選用了Mono圖標(biāo)中的boxupload32圖標(biāo),如下所示:

Photoshop繪制高雅清新的網(wǎng)站首頁模板

4、添加菜單

使用顏色(#DBD1BE)編輯激活時的菜單,正常狀態(tài)的菜單使用顏色(#ABAAAA)。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

為了讓激活狀態(tài)下的菜單更加醒目,選取圓角矩形工具(T)創(chuàng)建一個圓角矩形(圓角半徑為5px,前景色為#464646)放置在菜單圖層下方,如下所示:

Photoshop繪制高雅清新的網(wǎng)站首頁模板,然后設(shè)置如下圖層樣式:

‘內(nèi)陰影’/'描邊’:

Photoshop繪制高雅清新的網(wǎng)站首頁模板 Photoshop繪制高雅清新的網(wǎng)站首頁模板

Photoshop繪制高雅清新的網(wǎng)站首頁模板


5、添加展示區(qū)背景

在布局頭部,我們還要添加一個作品展示區(qū),以幻燈片形式來播放圖片,每張圖片配有簡單介紹和導(dǎo)航。在開始前,選取矩形選框工具(M)創(chuàng)建矩形,以顏色(#D3CAB8)進(jìn)行填充。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

下一步,下載凌亂、自然灰褐色圖案(或其它圖案)拖放到文檔中,放在矩形圖層上方。

接下來我們要遮住一些不需要的紋理,在圖層面板選中矩形圖層,按住cmd/ctrl鍵,點(diǎn)擊縮略圖,創(chuàng)建一個自動選區(qū),然后選中紋理圖層,在下拉菜 單中點(diǎn)擊”添加圖層蒙版”,這樣遮住了除選區(qū)外的所有區(qū)域,最后,撤消選區(qū)(ctrl+D),把紋理圖層的透明度下降到35%。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

6、添加網(wǎng)站介紹

使用水平字體工具(T),在展示區(qū)左側(cè)添加網(wǎng)站文字說明,采用HelveticaArial字體進(jìn)行編輯,確保標(biāo)題(顏色#FFFFFF)和內(nèi)容(顏色#2A2A2A)文字在不同圖層。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

為了使標(biāo)題更加炫目,按如下設(shè)置添加圖層樣式:

‘陰影’/'漸變疊加’:

Photoshop繪制高雅清新的網(wǎng)站首頁模板 Photoshop繪制高雅清新的網(wǎng)站首頁模板Photoshop繪制高雅清新的網(wǎng)站首頁模板

接下來,創(chuàng)建”About us”的圓角按鈕。再一次選取圓角矩形工具(U),設(shè)置半徑5PX,文本顏色為#404040,同時在右邊有一個箭頭圖標(biāo)(Mono圖標(biāo)集中的circleright32),重設(shè)它的大小以匹配按鈕。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

在矩形圖層上添加以下樣式:

‘外發(fā)光’/'漸變疊加’:

Photoshop繪制高雅清新的網(wǎng)站首頁模板 Photoshop繪制高雅清新的網(wǎng)站首頁模板 Photoshop繪制高雅清新的網(wǎng)站首頁模板

最后一步是在按鈕右邊添加花紋,就是這微妙的設(shè)計(jì)元素增加了此設(shè)計(jì)的優(yōu)雅度。下載并安裝花紋筆刷(資源區(qū)的上方),先設(shè)置前景色為#343434,選取畫筆工具(B),找到花紋筆刷,在畫布上進(jìn)行一次點(diǎn)擊,然后把圖層混合模式改為“強(qiáng)光”。

Photoshop繪制高雅清新的網(wǎng)站首頁模板


7、創(chuàng)建幻燈片區(qū)

選取圓角矩形工具(U),前景色為白色,半徑為5PX,在展示區(qū)右側(cè)生成一個圓角矩形。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

設(shè)置此圖層的透明度為15%,以顯示背景圖案,接著添加’陰影’的圖層樣式:

Photoshop繪制高雅清新的網(wǎng)站首頁模板

此刻,我們需要在幻燈片區(qū)域添加圖片縮略圖,你可以找一個網(wǎng)站截圖或其它圖片,放在白色圓角矩形上方。我們得把圖片四角變成圓角,在圖層面板,按住 cmd/ctrl,點(diǎn)擊白色圓角矩形的縮略圖,創(chuàng)建一個自動選區(qū),接著選擇放圖片的圖層,去往菜單”選擇>修改>收縮”,收縮10px,然后 執(zhí)行”選擇>反選”(cmd/ctrl+shift+I)反選選區(qū),最后執(zhí)行”編輯>清除”。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

接下來添加圖片描述,在圖層面板,按住cmd/ctrl,點(diǎn)擊圖片圖層的縮略圖,創(chuàng)建一個自動選區(qū),新建圖層,并以黑色填充選區(qū),然后使用圓角矩形選框工具(M),選取新建的黑色矩形的上部分并刪除。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

降低圖層透明度到75%,添加簡單的文字說明

Photoshop繪制高雅清新的網(wǎng)站首頁模板


8、在展示區(qū)底部添加分隔線

像步驟2一樣在展示區(qū)底部添加一條灰色、水平分隔線,不同在于還要添加’內(nèi)陰影’的樣式:

Photoshop繪制高雅清新的網(wǎng)站首頁模板

Photoshop繪制高雅清新的網(wǎng)站首頁模板

設(shè)計(jì)的主內(nèi)容區(qū)的時間到了!

9、給主內(nèi)容區(qū)添加背景

就像預(yù)覽圖一樣,主內(nèi)容區(qū)分布為三列,選取矩形選框工具(M),生成畫布寬的選區(qū),用顏色(#FBF5EA)進(jìn)行填充。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

主內(nèi)容區(qū)的設(shè)計(jì)其實(shí)相當(dāng)簡單,但是要讓人看出很簡單也要花一定時間完成。我們將從左邊開始,放置服務(wù)列表。


10、添加列標(biāo)題

對于我們的列標(biāo)題,從Mono圖標(biāo)挑選一個象征符號,并放在標(biāo)題左邊,使用字體”Georgia“和顏色(#323232)編輯標(biāo)題文本。下一步,在文本底部添加弧線邊界,這就要用到鋼筆工具(P)了,像下圖一樣創(chuàng)建一條路徑。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

為了給路徑描邊,設(shè)置前景色為文本顏色(#323232),然后選擇一個較硬的畫筆工具,大小大約為3px。接著打開”路徑”面板(窗口>路徑),點(diǎn)擊面板下方的”用畫筆給路徑描邊”。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

下面為曲線添加一點(diǎn)漸變,設(shè)置”漸變疊加”的圖層樣式:

Photoshop繪制高雅清新的網(wǎng)站首頁模板 Photoshop繪制高雅清新的網(wǎng)站首頁模板

復(fù)制曲線圖層,離原圖層下方4或5px處,降低透明度到24%。

Photoshop繪制高雅清新的網(wǎng)站首頁模板


11、為左欄添加內(nèi)容

設(shè)置標(biāo)題顏色為深灰(#323232),文本內(nèi)容顏色為一種可讀性的灰色(例如:#2A2A2A)。像創(chuàng)建”About us “一樣創(chuàng)建”Read More”按鈕,對于中間這行,我改變了顏色,一種純灰色(#484848)用于激活狀態(tài)下的顏色。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

12、為中欄添加內(nèi)容

像左欄一樣,添加標(biāo)題和圖標(biāo)(另外合適的圖標(biāo))。使用圓角矩形工具(U),設(shè)置半徑3px,前景色為白色,生成一小型的圓角矩形,在矩形下方添加一些文本和描述。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

接著為圓角矩形設(shè)置圖層樣式:

‘外發(fā)光’/'描邊’:

Photoshop繪制高雅清新的網(wǎng)站首頁模板 Photoshop繪制高雅清新的網(wǎng)站首頁模板

然后,在圓角矩形內(nèi)添加與描述相配的圖片。

Photoshop繪制高雅清新的網(wǎng)站首頁模板


13、為右欄添加內(nèi)容

像左欄和中欄一樣,添加標(biāo)題和圖標(biāo)。對于未激活的鏈接,采用深灰色(#353535)編輯字體,對于活動狀態(tài)的鏈接,采用白色字體,并且創(chuàng)建深灰色(#353535)圓角矩形背景,半徑也是3px。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

14、設(shè)計(jì)時事通訊窗口

選取圓角矩形工具(U),生成一個3px的圓角矩形,像第2步一樣設(shè)置雜色濾鏡。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

使用字體Georgia Italic編輯標(biāo)題,從Mono圖標(biāo)中選擇一個信封的圖標(biāo),給此圖標(biāo)設(shè)置了顏色(#F7E5C4)疊加,創(chuàng)建了一個圓角矩形選框,用來輸入用戶郵箱,以白色填充。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

15、添加footer

一開始創(chuàng)建footer,就像創(chuàng)建header中的導(dǎo)航一樣,只不過要比導(dǎo)航條高些。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

接下來創(chuàng)建一些鏈接,選取圓角矩形選框工具(M),生成如下圖一樣的選框,以深灰色(#323232)進(jìn)行填充,里面用白色文字填充。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

然后把混合模式改成”弱光”,透明度降低到63%,以突出背景顏色。重復(fù)此流程,創(chuàng)建其它鏈接。

Photoshop繪制高雅清新的網(wǎng)站首頁模板

最后一件事,選擇一些社區(qū)媒體圖標(biāo)添加到鏈接上方,選擇站點(diǎn)logo和copyright放在footer右側(cè)。

Photoshop繪制高雅清新的網(wǎng)站首頁模板



Photoshop繪制高雅清新的網(wǎng)站首頁模板 Photoshop繪制高雅清新的網(wǎng)站首頁模板 Photoshop繪制高雅清新的網(wǎng)站首頁模板
標(biāo)簽網(wǎng)站首頁,模板,清新,高雅,繪制,Photoshop

相關(guān)下載

查看所有評論+

網(wǎng)友評論

網(wǎng)友
您的評論需要經(jīng)過審核才能顯示

熱門閱覽

最新排行

公眾號

主站蜘蛛池模板: 免费区欧美一级毛片精品 | 欧美三级网 | 韩国毛片 免费 | 免费在线观看一级毛片 | 欧美一级特黄特黄毛片 | www欧美com | 欧美日韩第二页 | 国产色司机在线视频免费观看 | 2022日韩理论片在线观看 | 午夜香蕉成视频人网站高清版 | 精品视频一区二区三区 | 中文字幕色站 | 成免费网站 | 国产成在线观看免费视频 | 亚欧精品一区二区三区 | 国产r67194吃奶视频 | 亚洲一级特黄特黄的大片 | 亚洲成a人片在线网站 | japonensis国产福利 | 国产一级免费视频 | 美女视频永久黄网站在线观看 | 91精品国产免费久久久久久 | 亚洲欧美一区二区久久 | 一级风流片a级国产 | 亚洲成人影院在线观看 | 国产精品不卡在线 | 91在线精品亚洲一区二区 | 美美女下面被cao爽 美女131爽爽爽做爰中文视频 | 在线观看国产一区二区三区 | 美日韩一区二区三区 | 国产精品视频久久久久久 | 免费一级α片在线观看 | 在线免费看a| 日本黄区| 成人精品一区二区久久久 | 男女男精品视频在线播放 | 国产一级一级一级国产片 | 中国一级做a爱片免费 | 亚洲综合中文 | 99视频精品全国在线观看 | 免费一区二区三区四区 |