不卡AV在线|网页在线观看无码高清|亚洲国产亚洲国产|国产伦精品一区二区三区免费视频

學(xué)習(xí)啦 > 學(xué)習(xí)電腦 > 工具軟件 > 圖像處理教程 > PS教程 > PS實(shí)用技巧 > photoshop如何制作網(wǎng)頁(yè)界面

photoshop如何制作網(wǎng)頁(yè)界面

時(shí)間: 國(guó)柱790 分享

photoshop如何制作網(wǎng)頁(yè)界面

  網(wǎng)頁(yè)是我們常用的網(wǎng)絡(luò)工具,我們可以使用photoshop來(lái)制作一個(gè)網(wǎng)頁(yè),那么大家知道photoshop如何制作網(wǎng)頁(yè)界面嗎?下面是學(xué)習(xí)啦小編整理的photoshop如何制作網(wǎng)頁(yè)界面的方法,希望能幫到大家!

  photoshop制作網(wǎng)頁(yè)界面的方法

  打開(kāi)PS創(chuàng)建一個(gè)新的文檔(Ctrl+N)(尺寸:1020px*1120px),背景色: #edebe6

  步驟1 - 創(chuàng)建Logo和搜索框

  首先,用矩形工具在文檔的頂部創(chuàng)建一個(gè)黑色的矩形(0,0,1020,12),顏色: #403c33,然后用文字工具添加Logo(字體:Tahoma,(74,62),大?。?0px)。

  在Logo的右邊創(chuàng)建搜索表單,用矩形工具創(chuàng)建一個(gè)矩形(755,70,160,25),添加如下的圖層樣式,然后用文字工具添加文本Search

  繼續(xù)用矩形工具在剛才的矩形的右邊創(chuàng)建一個(gè)小的矩形(915,70,32,25),對(duì)這個(gè)矩形添加如下的圖層樣式:

  顏色漸變的顏色為: #b85a36, #fa7b46

  描邊的顏色: #fde0ce

  用文字工具添加文字GO,添加如下的圖層樣式

  步驟2 - 創(chuàng)建導(dǎo)航欄和特色區(qū)域

  首先,用矩形工具創(chuàng)建一個(gè)綠色的矩形(0,188,1020,60),顏色: #aed1c4

  用矩形工具創(chuàng)建另一個(gè)矩形(51,156),為了示范我用紅色。這個(gè)矩形的尺寸為918px*62px

  Then apply some layer styles:

  然后添加如下的圖層樣式:

  內(nèi)陰影的顏色: #bac4a9

  顏色疊加的顏色: #96c6b6

  Next I will add the links. For each of them I have applied this layer styles:

  接下來(lái)要添加一些鏈接。對(duì)每個(gè)鏈接添加如下的樣式:

  With Pen Tool (P) I will create a small triangle over the Home link and I will apply this layer styles:

  用鋼筆工具在Home鏈接的上方創(chuàng)建一個(gè)小的三角形,添加如下的圖層樣式:

  投影的顏色: #5a7169

  然后用直線工具在鏈接之間創(chuàng)建一些分割線。直線工具的粗細(xì)設(shè)置為1px

  我首先添加一條深色的直線(顏色: #8fafa4),然后添加一條淺色的直線(顏色: #aad4c6)

  然后在圖層面板選中剛才的兩條直線的圖層,Ctrl + E(合并圖層),復(fù)制幾次合并后的圖層(在每?jī)蓚€(gè)鏈接之間都有一個(gè)分隔符)

  接下來(lái)用矩形工具創(chuàng)建另一個(gè)矩形(72,218,876,254),顏色: #d6e1c7。對(duì)它添加如下的圖層樣式:

  描邊的顏色: #e4f1d3

  給導(dǎo)航欄添加漂亮的3d效果,用鋼筆工具創(chuàng)建灰色(顏色: #eaebe3)的三角。

  同樣的在右邊創(chuàng)建另一個(gè)三角,這是我做到效果圖

  個(gè)人的建議,如果不能熟練的運(yùn)用鋼筆工具,可以通過(guò)復(fù)制矩形,調(diào)整大小,旋轉(zhuǎn)角度,調(diào)整圖層順序來(lái)達(dá)到同樣的效果。

  用文本工具添加一些文本

  大標(biāo)題文字,字體:Tahoma,大?。?0px,添加如下的圖層樣式

  段落文字的顏色: #7f7f7f

  從我收藏的圖片中搜索一個(gè)關(guān)于商業(yè)的圖片。要注意的是當(dāng)你在PS中添加圖片的時(shí)候,常常分辨率是非常高的,你要做的就是重新調(diào)整它的大小,在鍵盤(pán)上用Ctrl+T激活自由變形工具。

  在PS CS5中通過(guò)置入的方式打開(kāi)圖片的話,為了后續(xù)的操作,還必須在該圖層上右鍵選擇“柵格化圖層”

  這是我添加的圖片

  用矩形選擇工具在圖片的上方設(shè)置矩形選區(qū)

  在圖片上方右鍵鼠標(biāo)(在用矩形選擇工具選擇的范圍內(nèi)),選擇“羽化”

  羽化的半徑設(shè)置為50px

  接下來(lái)再次鼠標(biāo)右鍵點(diǎn)擊選中區(qū)域,這次是選擇“選擇反向”

  按delete鍵幾次,刪除圖片邊緣的區(qū)域,達(dá)到羽化的效果。不同的圖片次數(shù)不是固定的,本文中的圖片是4次。

  圖層的混合模式選擇“明度”,不透明度設(shè)置為不超過(guò)60%

  結(jié)果如下:

  接下來(lái)要在特色區(qū)域添加一個(gè)按鈕(在文本的底部)。用矩形工具創(chuàng)建一個(gè)矩形(392,425,92,28)并添加如下的樣式:

  漸變疊加的顏色: #ba5c38,#f97c44

  描邊的顏色: #ffe0ce

  給按鈕添加文字Click here。并復(fù)制之前搜索欄那塊的GO文字的圖層樣式

  我的樣張

  現(xiàn)在要對(duì)特色區(qū)域增加一些變化。在圖層面板選擇特色區(qū)域的主要矩形,然后進(jìn)行自由變換(Ctrl + T),然后點(diǎn)擊“在自由變換和變形模式切換”按鈕

  這樣會(huì)進(jìn)入自定變形模式,會(huì)顯示一個(gè)控制變形的網(wǎng)格

  Here select this corner, and with your mouse gently drag it a little bit down

  選擇左下角的控制點(diǎn),然后用鼠標(biāo)輕輕的往下拖動(dòng)一點(diǎn)點(diǎn)(往下拖動(dòng)14px)

  選擇右下角的控制點(diǎn),做同樣的步驟

  當(dāng)你做完按ENTER鍵確定

  My result

  我的結(jié)果

  最后要對(duì)特色區(qū)域添加一些陰影,用橢圓工具添加一個(gè)橢圓

  接下來(lái)點(diǎn)擊:濾鏡 > 模糊 > 高斯模糊,設(shè)置半徑為10px,然后用矩形選擇工具選取如下的矩形

  按鍵盤(pán)上的DELETE鍵刪除選區(qū)的內(nèi)容,然后Ctrl+D取消選區(qū)

  這是我的結(jié)果:

  接下來(lái),我想在彎曲形狀的底部添加一個(gè)陰影。不幸的是我不太會(huì)使用"標(biāo)準(zhǔn)方法"——橢圓工具,去創(chuàng)建一個(gè)好看的陰影。因此我會(huì)使用畫(huà)筆工具去畫(huà)陰影。

  創(chuàng)建一個(gè)新圖層在你的圖層面板 (Ctrl + Alt + Shift + N)上,選擇圓角的畫(huà)筆,黑色,沿著彎曲形狀的邊緣畫(huà)一條黑線。

  現(xiàn)在添加高斯模糊(濾鏡 > 模糊 > 高斯模糊),半徑設(shè)置為12px

  我的結(jié)果 - 一個(gè)漂亮柔和的陰影

  步驟3 - 創(chuàng)建內(nèi)容區(qū)域

  這部分非常容易。首先用矩形工具創(chuàng)建一個(gè)矩形(47,416,926,464),顏色: #d6e1c7

  接下來(lái),用矩形工具在左側(cè)新建一個(gè)灰色的矩形(47,416,25,70),顏色: #acb69e

  用直接選擇工具選擇矩形的左下角,按DELETE鍵刪除左下角的控制點(diǎn),使之成為一個(gè)陰影三角形

  同同樣的方法在右側(cè)新建矩形(948,416,25,70),刪除右下角控制點(diǎn),成為另一邊的陰影三角形

  然后用文字工具添加一些文本,標(biāo)題文字的顏色: #4a5340

  在標(biāo)題和內(nèi)容之間,用直線工具添加白色的水平分割線,不透明度設(shè)置為50%

  在兩欄之間添加陰影分隔符,和特色區(qū)域文字和圖片之間的分割符做法類似

  內(nèi)容區(qū)域就完成了

  步驟4 - 頁(yè)腳

  這部分,非常容易制作因?yàn)楹吞厣珔^(qū)域一模一樣。我要用和特色區(qū)域相同的技術(shù)去制作它

  因?yàn)槭穷愃疲椭苯訌?fù)制特色區(qū)域的相關(guān)圖層,移到合適的位置,點(diǎn)擊:編輯 > 變換 > 垂直翻轉(zhuǎn),再進(jìn)行合適的微調(diào)。

  from Featured Area. If you have followed me when I have created Featured Area you will be able to create the Footer also.

  用文字工具添加一些文本,用矩形工具添加一些Newsletter的文本框,桔黃色按鈕是用和特色區(qū)域的按鈕的同樣的圖層樣式。如果你是一直跟著我做完特色區(qū)域,那你一定也能完成頁(yè)腳區(qū)域

  頁(yè)腳區(qū)域:

  標(biāo)題文字:顏色: #98a289

  文本框:用矩形工具畫(huà)矩形,圖層樣式直接復(fù)制頭部區(qū)域文本框的圖層樣式

  文本框文字:直接復(fù)制頭部區(qū)域文本框文字,修改文字后,移到合適的位置

  按鈕:用矩形工具畫(huà)矩形,圖層樣式直接復(fù)制頭部區(qū)域按鈕的圖層樣式

  按鈕文字:直接復(fù)制頭部區(qū)域按鈕文字,修改文字后,移到合適的位置

  陰影分割符:直接復(fù)制內(nèi)容區(qū)域的陰影分隔符,移到合適的位置

  下面是我最終的結(jié)果:

  
看了“photoshop如何制作網(wǎng)頁(yè)界面”的人還看了:

1.用ps做網(wǎng)頁(yè)首頁(yè)的教程

2.UI設(shè)計(jì)師的工作界面怎么用PS設(shè)置

3.如何使用ps制作微信首頁(yè)

4.Photoshop制作粗邊蒙版圖片

2068007