ps創(chuàng)建常見(jiàn)的網(wǎng)頁(yè)風(fēng)格教程系列一

2022-12-26 11:37:18 來(lái)源/作者: / 己有:25人學(xué)習(xí)過(guò)

作者:maimai
最終效果圖

image

好了,讓我們開(kāi)始吧。打開(kāi)photoshop創(chuàng)建一個(gè)新文檔,尺寸是1020px X 1240px,背景顏色設(shè)置為#e6e9d4。

網(wǎng)頁(yè)效果圖教程

用矩形工具,創(chuàng)建一個(gè)形狀,顏色 #bbc19c。我的形狀尺寸是 1020px X 327px

好了,添加一個(gè)圖層蒙版(保證你的圖層是被選中狀態(tài))。


然后確定你選擇中了蒙版。

網(wǎng)頁(yè)效果圖教程

選擇漸變工具,保持默認(rèn)顏色(黑色為前景色,白色為背景色),你可以簡(jiǎn)單的點(diǎn)擊工具欄上面的小圖標(biāo)快速設(shè)置。


按照下圖拖拽你的鼠標(biāo)。

網(wǎng)頁(yè)效果圖教程

好了,我的效果是這個(gè)樣子的。

網(wǎng)頁(yè)效果圖教程

Step 1 – 創(chuàng)建logo和頭部導(dǎo)航

選擇矩形工具,在文件頂部畫(huà)出一個(gè)小的形狀。

網(wǎng)頁(yè)效果圖教程

設(shè)置圖層樣式如下:

網(wǎng)頁(yè)效果圖教程

網(wǎng)頁(yè)效果圖教程

我的效果:

網(wǎng)頁(yè)效果圖教程

在右邊的部分,用文字工具,創(chuàng)建導(dǎo)航文字。我一般用的是字體“Helvetica” 。

網(wǎng)頁(yè)效果圖教程

接下來(lái),用直線工具,創(chuàng)建一些導(dǎo)航上面的分割線。設(shè)置寬度為1px,在文字中間畫(huà)一些小的形狀。

網(wǎng)頁(yè)效果圖教程

網(wǎng)頁(yè)效果圖教程

然后按照下圖進(jìn)行圖層樣式設(shè)置:

網(wǎng)頁(yè)效果圖教程

網(wǎng)頁(yè)效果圖教程

我的效果:


好了,接下來(lái)創(chuàng)建logo。用矩形工具,創(chuàng)建一個(gè)類(lèi)似的矩形,填充顏色#9cc1a2

網(wǎng)頁(yè)效果圖教程