PS教程:繪制清新的色彩生動(dòng)的網(wǎng)頁(yè)布局

2022-12-26 12:17:46 來(lái)源/作者： / 己有：40人學(xué)習(xí)過(guò)

以下是創(chuàng)建過(guò)程中所需的圖片：

綠葉
像素化的藍(lán)色矩形

第一步：新建文檔　

1200px * 750px，選擇漸變工具（G），對(duì)背景圖層從上（#792700）到下（#000000）新建漸變，如下圖所示：

第二步：添加色彩

　　新建圖層，選擇筆刷工具（B），選取直徑為300px的軟筆刷，分別以紅（#be4816）、黃（#c0952c）、藍(lán)（#33afc6）三種顏色涂在背景層的上半部，圖層命名為“顏色”。如下圖所示：

第三步：添加紋理

　　打開一開始保存好的“綠葉”圖片，使用移動(dòng)工具（V），移動(dòng)到當(dāng)前文檔內(nèi)，右擊新圖層，選擇“轉(zhuǎn)換為智能對(duì)象”，然后轉(zhuǎn)到菜單：濾鏡>藝術(shù)化>膠片顆粒，濾鏡>像素化>馬賽克，參照下圖的設(shè)置，最后設(shè)置此圖層的“混合模式”為“差值”，透明度為30%，圖層命名為：“紋理”。如下圖所示：

第四步：為內(nèi)容添加黑色背景

新建圖層，選擇圓角矩形工具（U），設(shè)置3px的半徑，創(chuàng)建一個(gè)黑色圓角矩形框，雙擊圖層，彈出“圖層樣式”對(duì)話框，如下圖一樣設(shè)置“陰影”，最后設(shè)置此圖層的透明度為70%，圖層命名為：“黑色形態(tài)”，如下圖所示：

第五步：添加組管理圖層

　　按住ctrl鍵，選擇目前為止創(chuàng)建的所有圖層，進(jìn)行圖層編組（ctrl+g），組命名為：背景，如下圖所示。

第六步：創(chuàng)建更多組

　新建組（圖層>新建>圖層編組），組命名為：主頁(yè)，在“主頁(yè)”內(nèi)再增加一個(gè)組，組命名為“logo”，如圖所示：

第七步：創(chuàng)建logo和網(wǎng)站副標(biāo)題

　　在“logo”的組里新建圖層，選取字體工具（T），書寫您的網(wǎng)站名字，顏色為#f4f4f4。雙擊圖層，按照下圖設(shè)置圖層樣式，“斜面與浮雕”，“外發(fā)光”，“漸變疊加”。然后再新建圖層編輯網(wǎng)站副標(biāo)題，顏色為#eeeeee。

第八步：創(chuàng)建”注冊(cè)“，”登錄“按鈕

　　現(xiàn)在將在布局的右上角創(chuàng)建兩個(gè)按鈕。
新建組，命名為“注冊(cè)｜登錄”；選取圓角矩形工具（U），像我一樣創(chuàng)建圓角矩形；雙擊形狀圖層，彈出圖層樣式對(duì)話框，如下圖進(jìn)行設(shè)置。
設(shè)置前景顏色為白色，用字體工具（T）在按鈕上編寫“注冊(cè)｜登錄”，設(shè)置字體層的透明度為75%。

第九步：創(chuàng)建1px高的藍(lán)色水平線

　　新建組，命名為“導(dǎo)航”，新建圖層，選取單行選框工具并在文檔新建1px高的選區(qū)，以顏色#406f94進(jìn)行填充，使用矩形選框工具（M）刪除超出黑色矩形的選區(qū)，設(shè)置透明度為40%，層命名為“橫線”。

第十步：給導(dǎo)航添加漸變

　　新建圖層，選取矩形選框工具（M）創(chuàng)建選區(qū)（提示：你可以使用標(biāo)尺），然后使用漸變工具（G）從底部到頭部畫一個(gè)從#35423e到透明的漸變。按Ctrl+D撤消選區(qū)，轉(zhuǎn)到濾鏡>雜色>添加雜色，并按照下圖進(jìn)行設(shè)置。給此圖層命名為“漸變”，且在漸變與橫線之間留出1px的距離。

第十一步：編輯導(dǎo)航菜單

　　選取字體工具（T），并在導(dǎo)航欄上編輯菜單，這里我應(yīng)用的字體是Adobe仿宋體，然后雙擊字體圖層，按下圖一樣設(shè)置圖層樣式。

第十二步：創(chuàng)建分隔線

現(xiàn)在我們將在菜單欄中創(chuàng)建分隔線，新建圖層，選取單列選框工具，并在菜單的布局上點(diǎn)擊一下，選取矩形選框工具（M），并在選項(xiàng)欄上選擇“交叉選區(qū)。

對(duì)新的選區(qū)以白色填充，最后按ctrl+d，取消選框。最終結(jié)果如下圖：

第十三步：雙擊上步新建的圖層，命名為“豎線1”，并進(jìn)行如下圖層樣式的設(shè)置。

第十四步：按ctrl+j復(fù)制圖層“豎線1”，重命名為“豎線2”。選取移動(dòng)工具（V），點(diǎn)擊鍵盤上的方向鍵，向右移動(dòng)1px，并更改“漸變疊加”的設(shè)置。如下所示：您的圖將會(huì)是這樣：

按住ctrl，選擇“豎線1”和“豎線2”，轉(zhuǎn)換為“智能對(duì)象”，新圖層命名為“分隔線”。
第十五步：創(chuàng)建藍(lán)色高光 1、新建圖層，放置在“分隔線”下，選取矩形選框工具（M）創(chuàng)建像下圖一樣的選區(qū)

2、以顏色#35423e填充該選區(qū)，按ctrl+d撤消選框，右擊，在下拉菜單中選擇“轉(zhuǎn)換為智能對(duì)象” 3、去往菜單　濾鏡>模糊>高斯模糊，并設(shè)置半徑為4px 4、再次濾鏡>雜色>添加雜色，數(shù)量為0.7%，屬性為第一個(gè)選項(xiàng)，像第十步那樣設(shè)置 5、設(shè)置圖層透明度為60%，命名為“高光” 圖片最終為：

第十六步：為圖層“分隔線”創(chuàng)建圖層蒙版 選定圖層“分隔線”，轉(zhuǎn)到菜單　圖層>圖層蒙版>顯示所有，選擇漸變工具（G），新建一個(gè)從黑到透明的漸變，方向是從上到中間。

第十七步：復(fù)制圖層“分隔線”，“高光” 同時(shí)選中“分隔線”，“高光”這兩個(gè)圖層，使用移動(dòng)工具（V），按住alt+shift，拖動(dòng)兩個(gè)圖層中的對(duì)象至另一個(gè)菜單與菜單之間，這就相當(dāng)于復(fù)制“分隔線”，“高光”的操作，重復(fù)拖動(dòng)動(dòng)作，根據(jù)您的菜單多少來(lái)復(fù)制

第十八步：為圖層“分隔線”，“高光”編組 選擇所有的圖層“分隔線”，“高光”，按ctrl+g，進(jìn)行編組，組命名為“分隔線”。 第十九步：為當(dāng)前頁(yè)面創(chuàng)建激活按鈕 現(xiàn)在我們將為當(dāng)前菜單頁(yè)面創(chuàng)建一個(gè)激活按鈕，來(lái)區(qū)分其它的菜單按鈕。選取矩形工具（U）并像下圖一樣新建矩形，并把這圖層放置在“菜單”圖層的下方，雙擊圖層，進(jìn)行“漸變疊加”的設(shè)置，圖層命名為“激活按鈕”，設(shè)置透明度為50%。

效果圖：

第二十步：創(chuàng)建搜索框 新建組，命名為“搜索”，放置在“導(dǎo)航”組上面。選取圓角矩形工具（U），設(shè)置半徑3px，前景色為#104f59，創(chuàng)建圓角矩形，命名新的圖層為“文本區(qū)域”，透明度為80%。

選取矩形工具，在“文本區(qū)域”右邊創(chuàng)建一矩形，并如下圖進(jìn)行設(shè)置圖層樣式“漸變疊加”，然后右擊圖層，在下拉菜單中選擇“創(chuàng)建快速蒙版”，層命名為“按鈕”。

選取字體工具（T），使用白色，在“按鈕”上書寫“搜索”兩字，圖層透明度為75%。

選取線條工具（U），使用顏色#123036創(chuàng)建直線，圖層命名為“直線”，并放置在“按鈕”圖層下方，把此直線移動(dòng)在搜索框和按鈕之間。

最終效果圖：

第二十一步：新建藍(lán)色矩形

在組“導(dǎo)航”下新建組（圖層>新建>組），組命名為“案例”，再新建組放置在“案例”中，并命名為“背景”
選取矩形工具（U），顏色設(shè)置為#219aad，創(chuàng)建寬度為983px，高度為273px的藍(lán)色矩形，（提示：打開(按 F8)信息面板，查看寬度和高度），設(shè)置此圖層的透明度為55%，命名為“bg4”

3.　在photoshop中打開在上篇中一開始要保存的第二張圖片“像素化的藍(lán)色矩形”，把圖片移動(dòng)到此文檔中，并且覆蓋藍(lán)色矩形，同樣也設(shè)置透明度為55%，命名為“bg3”.

4.　按住ctrl鍵，點(diǎn)擊“bg4”中的矢量蒙版縮略圖以選中此蒙版

5.　新建圖層，放在“bg3”上方，命名為“bg2”，選取漸變工具（G），畫一個(gè)顏色#56b8e5到透明的漸變，方向是從選區(qū)底部到選區(qū)頭部，然后按ctrl+d撤消選區(qū)

6、新建圖層，放在圖層“bg2”上方，命名為“bg1”，選取矩形選框工具（M），像下圖一樣創(chuàng)建選區(qū)，寬度為983px，高度43px

7、選取漸變工具（G），畫一個(gè)顏色#0f2b42到顏色#2a607f的漸變，方向是從選區(qū)底部到選區(qū)頭部，然后按ctrl+d撤消選區(qū)

第二十二步：“注冊(cè)”與“了解更多”

新建組“注冊(cè)按鈕”，放在組“背景”上方，選取圓角矩形工具（U），設(shè)置半徑2px，像下圖一樣新建圓角矩形（82*38），并設(shè)置如下圖一樣的圖層樣式（注意：shap2圖層的透明度是100%）

2. 重復(fù)步驟1，創(chuàng)建“了解更多”的按鈕，并且增加一層，添加箭頭，選取自定義形狀工具（U）中的第二個(gè)箭頭形狀，像下圖一樣創(chuàng)建箭頭

第二十三步：

1. 新建組，命名為“左箭頭”，放在組“了解更多按鈕” 上方，選取橢圓工具（U），新建顏色為#406F94的圓，并設(shè)置“內(nèi)陰影”和“描邊”的圖層樣式

2.　新建圖層，選取自定義工具（U）中的箭頭形狀，創(chuàng)建白色箭頭，并設(shè)置圖層樣式“陰影”，透明度為50%

3. 重復(fù)步驟2，在右邊也創(chuàng)建同樣的箭頭

第二十四步：

1.　在組“案例”中新建組，命名為“圖片”，在組里放置一張小圖片，雙擊圖層，設(shè)置如下圖的圖層樣式“外發(fā)光”

2.　新建組，選取字體工具（T），在藍(lán)色矩形左邊添加文字說(shuō)明（這個(gè)得自己發(fā)揮了），組命名為“文字”。

第二十五步：創(chuàng)建內(nèi)容區(qū)

1.　新建組，放在組“案例”下面，命名為“內(nèi)容”，在此組里再新建一組“陰影”，選取矩形工具（U），創(chuàng)建一白色矩形（983*181），圖層命名為“白色形狀”，透明度為90%。

2.　像二十一步中的第4點(diǎn)一樣，選中“白色形狀”的圖層蒙版，然后新建圖層，命名為“頭部陰影”，選取漸變工具（G），畫一個(gè)顏色為#8f8f8f到透明的漸變，方向?yàn)檫x區(qū)的頭部到選區(qū)的底部，設(shè)置圖層透明度為50%，然后選取移動(dòng)工具（V），按鍵盤上的向下的方向鍵兩次。