創(chuàng)建新的 Photoshop文檔。
點擊單位和標尺,進行設置。
激活photoshop的標尺,從查看 > 標尺里頭。按下'Ctrl/Cmd + R'固定標尺的可見度。按下M字鍵, 選擇矩形選區(qū)工具在畫布的左上角繪制出一個120px寬的小盒子。
移動選區(qū)到畫布的右邊緣,分配另外一條參考線到選區(qū)左側。
創(chuàng)建logo創(chuàng)建新的組 (圖層> 新建 >組)并且命名為logo。進入字符面板, 設置字體為Arial, 樣式為粗體,大小為 42pt。 設置反鋸齒選項為銳利顏色為#101112。
雙擊打開圖層面板對話框. 選擇圖層漸變, 點擊漸變設置如圖。
選擇水平排版工具在logo下面增加口號。
logo效果。
創(chuàng)建導航欄創(chuàng)建新組命名為navigation,置于 logo'組上方。 從頂部標尺拖出一條參考線, 直到距離畫布頂端150px 的地方. 選擇矩形工具(U)畫出一直寬度為4px 的水平線,顏色為#e3ab27, 貫穿畫布。增加導航鏈接文字,距離水平線 12px高距離左側參考線 20px。 選擇橢圓形工具畫一個寬高分別為 72px *35px的矩形。 移動此圖層到 'hover'下面. 使用轉換點工具拉直底部圓角.。雙擊'hover'圖層按鈕打開圖層樣式對話框增加漸變顏色(左: #e5ad27, 右: #b27625)。選擇橫向排版工具(T), 選中文字, 'Home' 更改顏色#ffffff (白色)。
創(chuàng)建聯(lián)系我們選項將電話圖標 置在接近右側參考線的地方。圖層命名為phone icon。 選擇水平排版工具, 在圖標左側增加一個電話號碼字體 Arial, 大小20pt 顏色#292929?!?/span>
新建頁眉新建一個組,命名為header。選擇矩形工具 (U) 新建矩形寬和高分別為1200px *440px。 移動此圖行到矩形,導航欄1px的地方命名為header bg。 雙擊 header bg層, 選擇漸變圖層樣式增加漸變顏色(左: #2e2226, 右: #7a7556)。
使用矩形工具新建一個新的矩形 (U) 大小為960px * 360px。移動到距離header bg層頂端40px,距離左邊參考線0px的地方. 命名圖層為header container。
創(chuàng)建特色項目選區(qū)。在header 組里面創(chuàng)建新組,命名為fp。選擇矩形工具(U)創(chuàng)建大小為630px 乘以 340px , 距離header容器頂部和左側10px的地方。給圖層的顏色賦值為#000000 并命名為fp container。
從你的ps里導入一張圖片放置在特色區(qū)域上面.,按選擇 >全部 (Ctrl/Cmd + A), 然后 編輯 > 復制(Ctrl/Cmd + C)。 回到的網(wǎng)頁設計。在fp container層上面新建圖層,點 編輯> 粘貼 (Ctrl/Cmd + V) 粘貼你的特色項目圖片。重命名為fp image ,右擊fp image層選擇剪切蒙版,現(xiàn)在圖片只有在矩形區(qū)域可見。
進入 編輯> 變形>角度(Ctrl/Cmd + T).,從選項條, 點擊旋轉框,鍵入-4按下兩次調整圖層。 繼續(xù)選擇該圖層。設置圖層樣式為亮度。
選擇矩形工具(U)創(chuàng)建矩形大小為630px乘以 90px,顏色為#161718。改變圖層不透明度為90% 命名為title bg。
標題設置字體: Arial, 顏色: #ffffff, 大小: 25pt自動反鋸齒選項: 銳利描述設置:字體: Arial, 顏色: #a4a4a4, 大小: 12pt自動反鋸齒選項: None
創(chuàng)建快速引用部分。 創(chuàng)建另外一個組在 header組內,并且命名為quick quote。選擇橢圓形工具新建300px 乘以340px像素的矩形.。放置這個矩形到特色項目選區(qū)10px 的地方命名為qq container。復制之前制作的另外一個圖層的樣式.進入navigation'組, 右擊hover層, 選擇復制圖層樣式, 回到qq container'層,右擊選擇粘貼圖層樣式。
選擇水平排版工具, 鍵入 Quick Quote在qq container'距離內容層頂部和左邊 20px的地方。設置字體為Trebuchet MS 顏色為白色(#ffffff) 反鋸齒選項設置為銳利。 使用橢圓形工具創(chuàng)建表單,選擇橢圓形工具,設置半徑為 3px。然后新建兩個矩形大小為260px乘以 35px 顏色為白色 (#ffffff)。分別命名為 field1和field2,創(chuàng)建第三個矩形,大小為260px 乘以 75px 顏色為白色(#ffffff)命名為field3 ,使用文字工具分別寫上各自標簽。
選擇橢圓形工具創(chuàng)建方型大小80px乘以35px命名為submit btn。雙擊圖層打開圖層樣式對話框 ,勾選左邊的漸變疊加對話框, 點擊漸變編輯按照如下變更顏色 。
選擇文字工具,鍵入Submit'使用字體Arial, 粗體樣式 大小為13pt 選擇submit 按鈕 和 Submit 文字。在工具面板選擇移動工具 在選項條設置水平居中和垂直居中。
創(chuàng)建新組命名為content, 選擇橢圓形工具(U)。新建300px 乘以 175px 命名為c01。放置此層在距離頭部30px 以下 距離左邊參考線0px。雙擊層,設置如下樣式。
選擇文字工具增加文字, About SmashingDzine, 使用文章工具選擇About文字,改變顏色為#b47825。選擇Smashing文字,改變顏色為#2f2f2f, 增加簡短描述和文字連接,參考以下設置。
增加多一個正方形, 選擇矩形工具,顏色 #ffffff, 按住Shift鍵,維持比例繪制矩形,大小為88px 乘以88px。移動該矩形到距離左邊矩形c01,10px 的地方,命名為border 設置描邊如下。
創(chuàng)建另一個盒子,大小為82px 乘以 82px放置在border層中央 。命名為box 顏色改變?yōu)?#d5d5d5。選擇content組的所有圖層,進入圖層> 新建> 創(chuàng)建組(Ctrl/Cmd + G) 命名為about。
復制about組 命名為services,再重新復制一組命名為portfopo,移動最后的組portfopo到右側的參考線。
在面板選中三個組,點擊圖層>分布> 水平中心分布。
變更 services 組和portfopo組 如下。
新建組命名為footer 選擇矩形工具(U)然后創(chuàng)建矩形大小為1200px 乘以100px 在我們布局的底部。命名為 footer bg,復制 header bg層的圖層樣式并且應用。
選擇文字工具,寫上版權聲明文字,和鏈接,樣式為Arial, 大小為12pt ,灰色(#dddddd)。
創(chuàng)建新組在footer層,命名為 subscribe。選擇圓角橢圓形工具(U) 創(chuàng)建矩形大小85px 乘以 35px.圖層命名為subscribe btn。選擇文字工具,拼寫Subscribe樣式Arial,Bold大小13pt, 選擇所有層。選擇橢圓矩形工具 (U)設置半徑為3px。創(chuàng)建橢圓矩形為210px 乘以35px 應用白色為主(#ffffff)命名該層為email field。完成。
聯(lián)系客服