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

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

軟件下載吧

當(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)過審核才能顯示

熱門閱覽

最新排行

公眾號

主站蜘蛛池模板: 欧美成人在线免费观看 | 91久久国产 | 成年人在线免费观看网站 | 亚洲高清在线播放 | 免费韩国一级毛片 | 在线免费观看一级片 | 另类专区国产在线视频 | 免费一级毛片在级播放 | 亚洲综合久久1区2区3区 | 亚洲精品久久久久久久无 | 免费看一级做a爰片久久 | 日本亚州在线播放精品 | 免看一级a毛片一片成人不卡 | 亚洲男人天堂手机版 | 国内精自品线一区91 | 一级片高清| 日本一本黄| 国产成人av性色在线影院 | 午夜日韩视频 | 免费国产综合视频在线看 | 久久受www免费人成看片 | 2021一本久道 | 一区二区三区在线免费观看视频 | 国产成人亚洲综合一区 | 播播网手机在线播放 | 91热久久免费频精品黑人99 | 真人毛片视频 | 9191精品国产费久久 | 人成精品视频三区二区一区 | 国产成人99久久亚洲综合精品 | 亚洲最大网站在线 | 久久久久久青草大香综合精品 | 国产欧美一区二区三区沐欲 | 亚洲性在线观看 | 性色a v 一区 | 亚洲精品在线播放视频 | a级片在线免费播放 | 欧美大片一级特黄 | 91一区| 日本三级2021最新理论在线观看 | 男人的天堂视频在线 |