photoshop如何制作網(wǎng)頁界面
photoshop如何制作網(wǎng)頁界面
網(wǎng)頁是我們常用的網(wǎng)絡工具，我們可以使用photoshop來制作一個網(wǎng)頁，那么大家知道photoshop如何制作網(wǎng)頁界面嗎?下面是學習啦小編整理的photoshop如何制作網(wǎng)頁界面的方法，希望能幫到大家!
photoshop制作網(wǎng)頁界面的方法
打開PS創(chuàng)建一個新的文檔(Ctrl+N)(尺寸：1020px*1120px)，背景色： #edebe6
步驟1 - 創(chuàng)建Logo和搜索框
首先，用矩形工具在文檔的頂部創(chuàng)建一個黑色的矩形(0，0，1020，12)，顏色： #403c33，然后用文字工具添加Logo(字體：Tahoma，(74，62)，大?。?0px)。
在Logo的右邊創(chuàng)建搜索表單，用矩形工具創(chuàng)建一個矩形(755，70，160，25)，添加如下的圖層樣式，然后用文字工具添加文本Search
繼續(xù)用矩形工具在剛才的矩形的右邊創(chuàng)建一個小的矩形(915，70，32，25)，對這個矩形添加如下的圖層樣式：
顏色漸變的顏色為： #b85a36， #fa7b46
描邊的顏色： #fde0ce
用文字工具添加文字GO，添加如下的圖層樣式
步驟2 - 創(chuàng)建導航欄和特色區(qū)域
首先，用矩形工具創(chuàng)建一個綠色的矩形(0，188，1020，60)，顏色： #aed1c4
用矩形工具創(chuàng)建另一個矩形(51，156)，為了示范我用紅色。這個矩形的尺寸為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:
接下來要添加一些鏈接。對每個鏈接添加如下的樣式：
With Pen Tool (P) I will create a small triangle over the Home link and I will apply this layer styles:
用鋼筆工具在Home鏈接的上方創(chuàng)建一個小的三角形，添加如下的圖層樣式：
投影的顏色： #5a7169
然后用直線工具在鏈接之間創(chuàng)建一些分割線。直線工具的粗細設置為1px
我首先添加一條深色的直線(顏色： #8fafa4),然后添加一條淺色的直線(顏色： #aad4c6)
然后在圖層面板選中剛才的兩條直線的圖層，Ctrl + E(合并圖層)，復制幾次合并后的圖層(在每兩個鏈接之間都有一個分隔符)
接下來用矩形工具創(chuàng)建另一個矩形(72，218，876，254)，顏色： #d6e1c7。對它添加如下的圖層樣式：
描邊的顏色： #e4f1d3
給導航欄添加漂亮的3d效果，用鋼筆工具創(chuàng)建灰色(顏色： #eaebe3)的三角。
同樣的在右邊創(chuàng)建另一個三角，這是我做到效果圖
個人的建議，如果不能熟練的運用鋼筆工具，可以通過復制矩形，調整大小，旋轉角度，調整圖層順序來達到同樣的效果。
用文本工具添加一些文本
大標題文字，字體：Tahoma，大?。?0px，添加如下的圖層樣式
段落文字的顏色： #7f7f7f
從我收藏的圖片中搜索一個關于商業(yè)的圖片。要注意的是當你在PS中添加圖片的時候，常常分辨率是非常高的，你要做的就是重新調整它的大小，在鍵盤上用Ctrl+T激活自由變形工具。
在PS CS5中通過置入的方式打開圖片的話，為了后續(xù)的操作，還必須在該圖層上右鍵選擇“柵格化圖層”
這是我添加的圖片
用矩形選擇工具在圖片的上方設置矩形選區(qū)
在圖片上方右鍵鼠標(在用矩形選擇工具選擇的范圍內(nèi))，選擇“羽化”
羽化的半徑設置為50px
接下來再次鼠標右鍵點擊選中區(qū)域，這次是選擇“選擇反向”
按delete鍵幾次，刪除圖片邊緣的區(qū)域，達到羽化的效果。不同的圖片次數(shù)不是固定的，本文中的圖片是4次。
圖層的混合模式選擇“明度”，不透明度設置為不超過60%
結果如下：
接下來要在特色區(qū)域添加一個按鈕(在文本的底部)。用矩形工具創(chuàng)建一個矩形(392，425，92，28)并添加如下的樣式：
漸變疊加的顏色： #ba5c38，#f97c44
描邊的顏色： #ffe0ce
給按鈕添加文字Click here。并復制之前搜索欄那塊的GO文字的圖層樣式
我的樣張
現(xiàn)在要對特色區(qū)域增加一些變化。在圖層面板選擇特色區(qū)域的主要矩形，然后進行自由變換(Ctrl + T)，然后點擊“在自由變換和變形模式切換”按鈕
這樣會進入自定變形模式，會顯示一個控制變形的網(wǎng)格
Here select this corner, and with your mouse gently drag it a little bit down
選擇左下角的控制點，然后用鼠標輕輕的往下拖動一點點(往下拖動14px)
選擇右下角的控制點，做同樣的步驟
當你做完按ENTER鍵確定
My result
我的結果
最后要對特色區(qū)域添加一些陰影，用橢圓工具添加一個橢圓
接下來點擊：濾鏡 > 模糊 > 高斯模糊，設置半徑為10px，然后用矩形選擇工具選取如下的矩形
按鍵盤上的DELETE鍵刪除選區(qū)的內(nèi)容，然后Ctrl+D取消選區(qū)
這是我的結果：
接下來，我想在彎曲形狀的底部添加一個陰影。不幸的是我不太會使用"標準方法"——橢圓工具，去創(chuàng)建一個好看的陰影。因此我會使用畫筆工具去畫陰影。
創(chuàng)建一個新圖層在你的圖層面板 (Ctrl + Alt + Shift + N)上，選擇圓角的畫筆，黑色，沿著彎曲形狀的邊緣畫一條黑線。
現(xiàn)在添加高斯模糊(濾鏡 > 模糊 > 高斯模糊)，半徑設置為12px
我的結果 - 一個漂亮柔和的陰影
步驟3 - 創(chuàng)建內(nèi)容區(qū)域
這部分非常容易。首先用矩形工具創(chuàng)建一個矩形(47，416，926，464)，顏色： #d6e1c7
接下來，用矩形工具在左側新建一個灰色的矩形(47，416，25，70)，顏色： #acb69e
用直接選擇工具選擇矩形的左下角，按DELETE鍵刪除左下角的控制點，使之成為一個陰影三角形
同同樣的方法在右側新建矩形(948，416，25，70)，刪除右下角控制點，成為另一邊的陰影三角形
然后用文字工具添加一些文本，標題文字的顏色： #4a5340
在標題和內(nèi)容之間，用直線工具添加白色的水平分割線，不透明度設置為50%
在兩欄之間添加陰影分隔符，和特色區(qū)域文字和圖片之間的分割符做法類似
內(nèi)容區(qū)域就完成了
步驟4 - 頁腳
這部分，非常容易制作因為和特色區(qū)域一模一樣。我要用和特色區(qū)域相同的技術去制作它
因為是類似，就直接復制特色區(qū)域的相關圖層，移到合適的位置，點擊：編輯 > 變換 > 垂直翻轉，再進行合適的微調。
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ū)域，那你一定也能完成頁腳區(qū)域
頁腳區(qū)域：
標題文字：顏色： #98a289
文本框：用矩形工具畫矩形，圖層樣式直接復制頭部區(qū)域文本框的圖層樣式
文本框文字：直接復制頭部區(qū)域文本框文字，修改文字后，移到合適的位置
按鈕：用矩形工具畫矩形，圖層樣式直接復制頭部區(qū)域按鈕的圖層樣式
按鈕文字：直接復制頭部區(qū)域按鈕文字，修改文字后，移到合適的位置
陰影分割符：直接復制內(nèi)容區(qū)域的陰影分隔符，移到合適的位置
下面是我最終的結果：
看了“photoshop如何制作網(wǎng)頁界面”的人還看了：