ps網頁設計教程

趣知站 IT技術 3.01W

有時候我們會需要一個網頁，那麼怎麼用ps設計呢？下面我就介紹一下。

操作方法

（01）創建新的 Photoshop文檔。

（02）點擊單位和標尺，進行設置。

（03）激活photoshop的標尺,從查看 > 標尺裏頭。按下"Ctrl/Cmd + R"固定標尺的可見度。按下M字鍵, 選擇矩形選區工具在畫布的左上角繪製出一個120px寬的小盒子。

（04）移動選區到畫布的右邊緣，分配另外一條參考線到選區左側。

（05）創建logo創建新的組 (圖層> 新建 >組)並且命名爲logo。進入字符面板, 設置字體爲Arial, 樣式爲粗體,大小爲 42pt。設置反鋸齒選項爲銳利顏色爲#101112。

（06）雙擊打開圖層面板對話框. 選擇圖層漸變, 點擊漸變設置如圖。

（07）選擇水平排版工具在logo下面增加口號。

（08）logo效果。

（09）創建導航欄創建新組命名爲navigation,置於 logo"組上方。從頂部標尺拖出一條參考線, 直到距離畫布頂端150px 的地方. 選擇矩形工具(U)畫出一直寬度爲4px 的水平線,顏色爲#e3ab27, 貫穿畫布。增加導航鏈接文字,距離水平線 12px高距離左側參考線 20px。選擇橢圓形工具畫一個寬高分別爲 72px *35px的矩形。移動此圖層到 "hover"下面. 使用轉換點工具拉直底部圓角.。雙擊"hover"圖層按鈕打開圖層樣式對話框增加漸變顏色(左: #e5ad27, 右: #b27625)。選擇橫向排版工具(T), 選中文字, "Home" 更改顏色#ffffff (白色)。

（10）創建聯繫我們選項將電話圖標置在接近右側參考線的地方。圖層命名爲phone icon。選擇水平排版工具，在圖標左側增加一個電話號碼字體 Arial, 大小20pt 顏色#292929。　

（11）新建頁眉新建一個組,命名爲header。選擇矩形工具 (U) 新建矩形寬和高分別爲1200px *440px。移動此圖行到矩形,導航欄1px的地方命名爲header bg。雙擊 header bg層, 選擇漸變圖層樣式增加漸變顏色(左: #2e2226, 右: #7a7556)。

（12）使用矩形工具新建一個新的矩形 (U) 大小爲960px * 360px。移動到距離header bg層頂端40px,距離左邊參考線0px的地方. 命名圖層爲header container。

（13）創建特色項目選區。在header 組裏面創建新組,命名爲fp。選擇矩形工具(U)創建大小爲630px 乘以 340px , 距離header容器頂部和左側10px的地方。給圖層的顏色賦值爲#000000 並命名爲fp container。

（14）從你的ps裏導入一張圖片放置在特色區域上面.，按選擇 >全部 (Ctrl/Cmd + A), 然後編輯 > 複製(Ctrl/Cmd + C)。回到的網頁設計。在fp container層上面新建圖層,點編輯> 粘貼 (Ctrl/Cmd + V) 粘貼你的特色項目圖片。重命名爲fp image ，右擊fp image層選擇剪切蒙版，現在圖片只有在矩形區域可見。

（15）進入編輯> 變形>角度(Ctrl/Cmd + T).，從選項條, 點擊旋轉框,鍵入-4按下兩次調整圖層。繼續選擇該圖層。設置圖層樣式爲亮度。

（16）選擇矩形工具(U)創建矩形大小爲630px乘以 90px,顏色爲#161718。改變圖層不透明度爲90% 命名爲title bg。

（17）標題設置字體: Arial, 顏色: #ffffff, 大小: 25pt自動反鋸齒選項: 銳利描述設置:字體: Arial, 顏色: #a4a4a4, 大小: 12pt自動反鋸齒選項: None

（18）創建快速引用部分。創建另外一個組在 header組內,並且命名爲quick quote。選擇橢圓形工具新建300px 乘以340px像素的矩形.。放置這個矩形到特色項目選區10px 的地方命名爲qq container。複製之前製作的另外一個圖層的樣式.進入navigation"組, 右擊hover層, 選擇複製圖層樣式, 回到qq container"層,右擊選擇粘貼圖層樣式。

（19）選擇水平排版工具，鍵入 Quick Quote在qq container"距離內容層頂部和左邊 20px的地方。設置字體爲Trebuchet MS 顏色爲白色(#ffffff) 反鋸齒選項設置爲銳利。使用橢圓形工具創建表單，選擇橢圓形工具,設置半徑爲 3px。然後新建兩個矩形大小爲260px乘以 35px 顏色爲白色 (#ffffff)。分別命名爲 field1和field2，創建第三個矩形,大小爲260px 乘以 75px 顏色爲白色(#ffffff)命名爲field3 ，使用文字工具分別寫上各自標籤。

（20）選擇橢圓形工具創建方型大小80px乘以35px命名爲submit btn。雙擊圖層打開圖層樣式對話框 ,勾選左邊的漸變疊加對話框，點擊漸變編輯按照如下變更顏色。

（21）選擇文字工具,鍵入Submit"使用字體Arial, 粗體樣式大小爲13pt 選擇submit 按鈕和 Submit 文字。在工具面板選擇移動工具在選項條設置水平居中和垂直居中。

（22）創建新組命名爲content，選擇橢圓形工具(U)。新建300px 乘以 175px 命名爲c01。放置此層在距離頭部30px 以下距離左邊參考線0px。雙擊層,設置如下樣式。

（23）選擇文字工具增加文字, About SmashingDzine，使用文章工具選擇About文字,改變顏色爲#b47825。選擇Smashing文字,改變顏色爲#2f2f2f，增加簡短描述和文字連接，參考以下設置。

（24）增加多一個正方形，選擇矩形工具,顏色 #ffffff, 按住Shift鍵,維持比例繪製矩形,大小爲88px 乘以88px。移動該矩形到距離左邊矩形c01，10px 的地方,命名爲border 設置描邊如下。

（25）創建另一個盒子,大小爲82px 乘以 82px放置在border層中央。命名爲box 顏色改變爲 #d5d5d5。選擇content組的所有圖層,進入圖層> 新建> 創建組(Ctrl/Cmd + G) 命名爲about。

（26）複製about組命名爲services，再重新複製一組命名爲portfopo，移動最後的組portfopo到右側的參考線。

（27）在面板選中三個組,點擊圖層>分佈> 水平中心分佈。

（28）變更 services 組和portfopo組如下。

（29）新建組命名爲footer 選擇矩形工具(U)然後創建矩形大小爲1200px 乘以100px 在我們佈局的底部。命名爲 footer bg，複製 header bg層的圖層樣式並且應用。

（31）創建新組在footer層,命名爲 subscribe。選擇圓角橢圓形工具(U) 創建矩形大小85px 乘以 35px.圖層命名爲subscribe btn。選擇文字工具,拼寫Subscribe樣式Arial,Bold大小13pt，選擇所有層。選擇橢圓矩形工具 (U)設置半徑爲3px。創建橢圓矩形爲210px 乘以35px 應用白色爲主(#ffffff)命名該層爲email field。完成。