PS簡潔網頁美工教程

2022-12-26 11:35:11 來源/作者: / 己有:61人學習過

  27 選擇橢圓形工具創建方型大小80px乘以35px命名為"submit btn".

  28 雙擊圖層打開圖層樣式對話框 ,勾選左邊的漸變疊加對話框. 點擊漸變編輯按照如下變更顏色 .

  29 選擇文字工具,鍵入"Submit" 使用字體Arial, 粗體樣式 大小為13pt. 選擇"submit 按鈕" 和 "Submit 文字").

  30 在工具面板選擇移動工具 在選項條設置水平居中和垂直居中.

  創建主要內容區域

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

  32 我們繼續為該層填充內容. 選擇文字工具增加文字, "About SmashingDzine". 使用文章工具選擇"About" 文字,改變顏色為#b47825. 選擇"Smashing"文字,改變顏色為#2f2f2f. 增加簡短描述和文字連接. 參考以下設置.

  標題設置:

  字體: Trebuchet MS, 樣式: Normal,大小: 24pt,反鋸齒選項: 銳利

  描述設置:

  字體: Arial, 樣式: Normal, 大小: 12pt,反鋸齒選項: 無, 顏色: #767676

  連接設置:

  字體: Arial, 樣式: Bold,大小: 13pt, 反鋸齒選項:無, 顏色: #252525, 下劃線

  33 緊靠描述的地方我們將增加多一個正方形. 選擇矩形工具,顏色 #ffffff, 按住Shift鍵,維持比例繪制矩形,大小為88px 乘以88px. 移動該矩形到距離左邊矩形("c01″).10px 的地方,命名為"border". 設置描邊如下:

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

  35 復制"about" 組 命名為 "services". 再重新復制一組命名為"portfopo". 我們現在有三個組("about", "services", and "portfopo"). 移動最后的組("portfopo")到右側的參考線.

  36 在面板選中三個組,點擊圖層>分布> 水平中心分布.

  37 變更 "services" 組 (center) 和 "portfopo" 組 (right) 如下.

  創建頁腳

  38 新建組命名為"footer". 選擇矩形工具(U)然后創建矩形大小為1200px 乘以100px 在我們布局的底部. 命名為 "footer bg". 復制 "header bg" 層的圖層樣式并且應用.

  選擇文字工具,寫上版權聲明文字,和鏈接,樣式為Arial, 大小為12pt ,灰色(#dddddd).

  40 我們開始在郵件增加郵件描述.創建新組在"footer" 層,命名為 "subscribe".選擇圓角橢圓形工具(U) 創建矩形大小85px 乘以 35px.圖層命名為"subscribe btn".

  41 重復26步增加表單和標簽.

  42選擇文字工具,拼寫"Subscribe" 樣式Arial,Bold大小13pt. 選擇所有層("subscribe btn" 和 "Subscribe text").

  43 重復28步創建按鈕.

  44選擇橢圓矩形工具 (U)設置半徑為3px.創建橢圓矩形為210px 乘以35px 應用白色為主(#ffffff)命名該層為"email field".

  最后結果

  最后結果已經完成,