使用Photoshop制作簡(jiǎn)潔大氣的網(wǎng)站頁(yè)面的具體步驟

時(shí)間：2022-05-25 19:15:01 | 來(lái)源：網(wǎng)絡(luò)營(yíng)銷

時(shí)間：2022-05-25 19:15:01 來(lái)源：網(wǎng)絡(luò)營(yíng)銷

最近，隨著網(wǎng)站的大批量的改版，網(wǎng)站設(shè)計(jì)、網(wǎng)站制作也成為了最近網(wǎng)絡(luò)的工作的重點(diǎn)了，也有很多的同事、朋友問(wèn)過(guò)，如何制作網(wǎng)站，頁(yè)面切圖的具體步驟，怎么使用Photoshop來(lái)設(shè)計(jì)頁(yè)面……。剛好最近幫朋友做個(gè)企業(yè)網(wǎng)站，在此借助億企邦的平臺(tái)，將網(wǎng)站頁(yè)面制作的具體的步驟以截圖講解的方式給大家分享一下。網(wǎng)站大致由四大部分構(gòu)成：頂部導(dǎo)航、中間橫幅、中間主要產(chǎn)品列、底部。中間部分最為重要，盡量要制作精美大氣一點(diǎn)，這樣才有吸引力。

首先給大家展示一下最終效果：


<點(diǎn)擊查看大圖>

1、首先第一步，需要下載這個(gè)紋理圖片。

2、在PS中打開紋理圖片，然后點(diǎn)擊“編輯>定義圖案”，給予圖案的命名，并單擊OK。做完這個(gè)準(zhǔn)備工作，可以關(guān)閉該文件。然后創(chuàng)建一個(gè)新文件，size：1100*1300px

3、使用油漆桶工具，設(shè)定圖案，選擇剛制作好的圖案紋理。點(diǎn)擊畫布，得到如下圖的效果。

4、在頁(yè)面上方使用圓角矩形工具，創(chuàng)建一個(gè)圓角矩形，位置如下圖所示。參數(shù)值：半徑5px，size：330*45px

5、對(duì)該矩形添加如下圖層樣式。你可以找到漸變的顏色值。

6、請(qǐng)記住這個(gè)矩形圖層樣式，因?yàn)樵谙旅娴牟襟E中會(huì)多次用到它。下一步，需要?jiǎng)?chuàng)建一個(gè)搜索框，如下圖所示。我們開始再一次使用圓角矩形工具。

7、為該層添加如下圖層樣式。為方便后面使用，需要保存下這個(gè)圖層樣式的配置信息，加入到樣式庫(kù)中。



8、現(xiàn)在你可以點(diǎn)擊” New Style ”按鈕，應(yīng)用到下一個(gè)需要做的矩形樣式上，并加入一些文字和圖標(biāo)。

9、接下來(lái)創(chuàng)建一個(gè)黑色的導(dǎo)航。

10、對(duì)導(dǎo)航欄使用下面的圖層樣式。并保存這個(gè)style。

11、在導(dǎo)航欄中創(chuàng)建另一個(gè)形狀，然后將它柵格化。我選擇用橡皮擦工具，刪除上部的形狀，然后將添加黃色。

12、有時(shí)候，做頁(yè)面切片時(shí)，你需要一些焦點(diǎn)狀態(tài)，表示當(dāng)前鼠標(biāo)操作時(shí)間。這就是接下來(lái)要做的，使用矩形工具創(chuàng)建按鈕，繼續(xù)使用黃色的圖層樣式。

13、向?qū)Ш絻?nèi)添加一些文本。如下圖所示。

14、制作banner，隨著Apple網(wǎng)站UI設(shè)計(jì)的成功范例，越來(lái)越多的網(wǎng)站采用大版面的banner圖片吸引大家的注意力。所以，在導(dǎo)航欄中我將添加一個(gè)MacBook Pro筆記本電腦圖片。


<點(diǎn)擊查看大圖>

15、然后在banner圖片內(nèi)添加一些圓角矩形工具按鈕。

16、在banner下方，創(chuàng)建一個(gè)白色區(qū)域,用于添加一些產(chǎn)品。

17、在這個(gè)區(qū)域內(nèi)展示出你要展銷的產(chǎn)品圖片，我隨機(jī)排列了一些圖片做例子。

18、在每個(gè)產(chǎn)品之間用直線工具畫一些線條做分割，這些線條用淺灰色即可。

19、接下來(lái)開始制作左側(cè)豎排導(dǎo)航。用圓角矩形工具制作黃色Title,黃色title之下制作一些灰色的形狀。如果你仔細(xì)看一下我的PSD文件,你會(huì)看到這些灰色形狀實(shí)際上是黑暗的形狀,但他們有一個(gè)非常低的透明度:大約20%。你可以在層調(diào)色板中改變透明度值。

20、使用圓角矩形工具,創(chuàng)建一些按鈕，在按鈕內(nèi)添加一些文本。

21、創(chuàng)建一個(gè)簡(jiǎn)單的頁(yè)腳。

22、最后一步，創(chuàng)建一個(gè)Logo樣式，如下圖所示，通常情況下，網(wǎng)站的logo下面會(huì)有對(duì)應(yīng)的Tagline，看個(gè)人需求而定。

網(wǎng)站制作完成的最終效果：


<點(diǎn)擊查看大圖>