Zi 字媒體

Photoshop設計簡約風格的wordpress模板 這一次的教學是屬於PS教程領域中的設計教程的相關教學。 文章出處是來自發現吧的PS教程類文章，寫教學的作者是龍騎士，感謝龍騎士提供設計教程的實作教學。 教學大綱: 這此Photoshop網頁設計教程,我們將學習如何製作一個整潔簡約風格的WordPress網頁模板.我們將使用到960網格系統作為模板,使網頁上的設計元素更加容易對齊. 設計教程教學開始 這此photoshop網頁設計教程,我們將學習如何製作一個整潔簡約風格的WordPress網頁模板.我們將使用到960網格系統作為模板,使網頁上的設計元素更加容易對齊. 預覽(創作之前先預覽我們將完成的作品效果,點擊圖片放大.) 創建新的psd文件 1 我們將會用到960 網格系統作為起始模板.下載之後開的文件名為960_grid_12_col.psd 的文件並且隱藏名為12_col_grid的組. 創建背景 2 第一步,在圖層面板選擇背景圖層單擊右鍵重命名,這將會使圖層解鎖並且可以編輯,在這裡我將背景圖層命名為bg. 3 選擇漸變工具,設置前景色為: #efefef ,背景色為#cacaca.在選項條選擇徑向漸變.在畫步上拉開一個與此類似的漸變. 設計頂部區域 4 拖動一條水平的參考線到50px的位置上作為頭部的邊界線.這也是網頁頭部區域位置的標誌. 5 加上標題和口號;選擇橫排文字工具,打上你網站的名字和宣傳口號.這裡可以可以參考我用到的樣式: “YourName” 字體: Nilland font (get it from dafont.com) 字體大小: 33pt 字體重量: Bold 反鋸齒設置: 渾厚 顏色: #525252 “some awesome slogan” 字體: Arial 字體大小: 14pt 字體重量: Regular 反鋸齒設置: 渾厚 顏色: #207687 6 將字體對齊到左上角.使用你的參考線精準定位. 創建導航 7 選擇橫排文字工具根據以下設置打上導航文字(home, about us, services, portfolio, and contact): 字體: Arial 字體大小: 17pt 字體重量: Regular 反鋸齒設置: 渾厚 顏色: #525252 8 根據下圖使用文件的參考線對齊導航鏈接的文字: 創建搜索框 9.現在是創建搜索框並將它定位到導航鏈接右側的時候了.選擇圓角矩形工具,設置半徑為5px,然後在畫面上畫出一個寬為155px,高為20px的圖形.最後定位到導航鏈接的右側. 10 選擇圖層面板,雙擊圓角矩形圖層彈出圖層樣式對話框添加內陰影.設置如下. 11 創建”go”按鈕,創建一個新的圓角矩形設置它的半徑為5px,高位20px,寬為30px. 12 在”go”按鈕上面應用圖層樣式為漸變疊加,角度為90,左邊的顏色為#2fa9c1.右邊的顏色#207687. 13.在搜索框上面使用白色(#ffffff)寫上類似於”search”之類的文字. 14 使用自定義工具圖形,創建一個白色的箭頭並居中對齊.我使用的自定義圖案為”箭頭2″,在標準的photoshop版本中. 我們的搜索框看起來應該是這樣子的: 15 開始下一步之前,首先保證我們文件中的一切保存井然有序.下面是我製作過程中圖層面板的截屏. 創建分隔線 16 使用直線工具,根據以下的顏色在頂部創建兩條緊挨着的線: 注意:有很多方法可以給線加上顏色,第一種方式你可以在畫線之前先選擇好顏色.另一種方式,如果你已經畫出線條,使用圖層樣式中的顏色疊加.你可以自己選擇. 加二級導航 17 根據以下設置,使用橫排文字工具鍵入二級導航文字. 字: Arial 文字大小: 17pt 字體重量: Regular 反鋸齒設置: Strong 顏色: #787878 18 確保你的分隔線在主欄目和二級導航的正中央,如圖所示.: 創建焦點區域 19 我們將開始創建圖片的焦點區域,選擇圓角矩形工具,創建一個寬帶為335px,高度為128px,圓角半徑為5px的矩形. 20 應用圖層屬性中的描邊並設置填充屬性為漸變.修改漸變顏色從#31aeca開始到#2b9ab2結束. 21 命名最新創建的圖層為 photo_holder. 22 好吧,讓我們選擇文件>置入,添加一張圖片.這將會彈出一個對話框讓你選擇導入哪種圖片進你的畫布.挑選完圖片,按下確定鍵. 23 確定你置入的圖片在photo_holder 層的上方;如果不是,請移動它.在圖片上右鍵選擇創建剪切模板. 24 修改你的圖片到合適大小;你可以使用自由變換工具(Ctrl+T).當你對大小感到滿意.確保您的圖像對齊根據上述圖像,對齊右邊的布局設計. 增加設計內容 25 為我們的設計增添內容,但在此之前,我們不得不為我們的內容頁設定邊界.拉動兩條水平參考線如圖所示: 增加一個標題和一個分類 26 標題和分類使用如下設置 標題 (在我的例子里稱為 ”Handstand!”) 字體: Arial 字體大小: 20pt 文字重量: Regular 反鋸齒: Strong 顏色: #2197b1 目錄 (在我的例子里稱為 ”Photoshop design”): 字體: Arial 文字大小: 17pt 文字重量: Regular 反鋸齒: Strong 顏色: #313131 段落內容 27 增加你的段落文字,下面的圖片以供參考. 28 在工具面板中選擇移動工具,然後選擇我們三個文字圖層(按住 Ctrl 單擊可以選擇全部). 29 選擇垂直分佈選項確保他們有着相同間距. 創建滑動控件 30 是時候創建我們的滑動控件了.複製我們上面為導航創建的兩條線,改變他們的大小(你可以使用自由變形工具).我們使那個暗的線更加暗,更改他顏色的值為#777575. 31 然後使用矩形工具創建一個小型的正方形(15px寬與高),應用一個漸變疊加的圖層樣式如下. 32在開始下一步之前,先組織好我們的圖層.參考一下圖片確保圖層順序恰當. 創建內容框 33,開始時,我們需要創建邊境線.拖動水平參考線將他拉到滑動線上邊.留下50px的空隙.然後增加另外一條參考線. 34 現在選擇圓角矩形工具,創建一個寬度為260px,高度為170px顏色為#d0d0d0的矩形,命名為bg_1. 35 安裝下面的圖片對齊矩形,使用移動工具放置到準確的位置. 36 在bg_1 圖層上面擊右鍵,創建圖層蒙版. 37 選擇漸變工具,設置前景色和背景色分別為黑與白(也可按D鍵自動重置顏色).選擇線性漸變,從上到下拖到知道你對效果滿意. 38 現在開始創建陰影,複製 bg_1 圖層.重命名為shadow.將其放置於bg_1層下方.應用顏色疊加的圖層樣式疊加一個暗灰色(#3e3e3e). 39 選定shadow圖層,選擇 濾鏡>模糊>高斯模糊.設置模糊半徑為5px. 40 使用漸變工具,調整圖層遮罩類似這樣. 41 在框內增加文字內容,你將會看到我以什麼結束. 42 新建一個組,將文字內容拖進裡面,並命名為content. 43 現在我們將要對齊它.按住ctrl鍵,選中content組合bg_1層.點擊水平居中選項和垂直居中選項定位. 44 現在複製2份我們剛剛製作的原始的content框.對齊他們,改變文字內容,別忘了在底部增加一條水平參考線. 45 再一次檢查確保我們的圖層有條理,請參考我的圖片. 創建主要內容區域 46 留下50px的間隔拖移新的水平參考線.開始增加你的內容,根據下面圖片對齊. 47 讓我們是他更好看一點.選取一個矩形選框工具(M).在樣式選項,選擇固定大小,寬為15px,高度為30px.設置前景色為#12197b,填充矩形(按住ctrl+空格鍵填充). 48 使用相同的設置,在網頁右邊增加相同內容. 49 拖拽新的水平線在底部.增加分割線,具體參照下列圖片. 50 再次檢查圖層組織結構.參照下面. 創建底部區域 51 我們開始創建底部區域通過創建新的參考線.在距離上面參考線的下方留下50px的間隙,重新建一條水平參考線. 52 選擇矩形選擇工具.設置前景色為白色.在畫面上拉開一個矩形選區.按下ctrl+空格鍵填充.命名該圖層為1px_upper_line. 53 選擇矩形選擇工具創建寬度為1020px 高度為160px的矩形.他跨過整個畫面的寬度.這件作為整個底部區域的背景.根據下圖應用一個漸變疊加的圖層樣式. 54 複製1px_upper_line層並移動到底部區域下方.名稱自己決定,但我的命名為1px_down_line,看起來應該是這樣的. 55 開始增加些內容,參考如下: 56 你可以從deviatARt下載社會化媒體圖標. 57 根據下面圖片對齊. 創建小型頁腳 58 拖拽新的水平參考線在大的頁腳頁底部,距離50px的地方新建水平參考線. 59 寫下底部導航鏈接文字類似: 60 寫下版權聲明對齊右邊,加上最後一條水平參考線. 調整畫布大小 61 最後,我們需要再底部導航留下50px的間距.只需調整畫布大小. 結束 就是我們做的,我們創建一個整潔簡約風格的設計. –本文轉載自 http://www.missyuan.net 教學網 — 文章永久連結為: Photoshop設計簡約風格的wordpress模板 免費PPT模板下載  免費PPT模板下載  免費向量素材下載  免費矢量圖片下載  免費去背圖片下載  免費圖庫下載  免費音效下載  版权所有，保留一切权利！ © 2019 PS筆刷工廠