Facebook加入
LINE加入
2021/12/25
Photoshop設計Wordpress主題網站界面教程
這一次的教學是屬於PS教程領域中的設計教程的相關教學。
文章出處是來自Varhi的PS教程類文章，寫教學的作者是博客翻譯，感謝博客翻譯提供設計教程的實作教學。
教學大綱:
通過這個教程，你將學到如何設計一個獨特的wordpress主題界面來展示你的內容。此界面布局完全適用於商業網站。如果你想將這個psd文件轉化為wordpress主題的話，要求你對css、php有深入的了解。
設計教程教學開始
通過這個教程，你將學到如何設計一個獨特的wordpress主題界面來展示你的內容。此界面布局完全適用於商業網站。如果你想將這個psd文件轉化為wordpress主題的話，要求你對css、php有深入的了解。
歡迎來到Grafpedia網站的另一個教程，通過這個教程，你將學到如何設計一個獨特的wordpress主題界面來展示你的內容。此界面布局完全適用於商業網站。如果你想將這個psd文件轉化為wordpress主題的話，要求你對css、php有深入的了解。
瀏覽界面效果
1、創建新文檔，用“油漆桶工具”給背景圖層填充顏色為#a4b9cc的背景色。
2、使用“矩形工具”(快捷鍵為U)創建一個簡單的白色區域。
3、給此圖形添加如下樣式
(常規混合裡面的“不透明度”是控制整個圖層的透明，包括給圖層應用的樣式效果。而高級混合裡面的“填充不透明度”僅控制圖層的填充透明!——譯者注)
混合選項
描邊
4、複製此圖層(你需要先選中此圖層，然後按Ctrl+j快捷鍵進行複製)，在圖層面板裡面將這兩個圖層鏈接選中后，按Ctrl+E將這兩個圖層合併為一個圖層。主要因為在應用“橡皮”工具的時候，你的圖層不會丟失設置的效果樣式。(你可以試一下，在不進行圖層合併，用“橡皮筆刷工具”刪除圖形底部的時候會是什麼效果)
5、選擇“橡皮工具”，並確定你選擇了平滑的筆刷，然後刪除此圖形區域的底部。如下圖所示：
6、在左邊創建一條垂直白線(你可以用“單列選擇工具”創建這條線)。用以上相同的方法，你可以用“橡皮工具”刪除線的頂部與底部。下面就是此效果。你能注意到這條線放在了哪，將這條垂直白線放在離邊框1px的位置是非常重要的。
7、選擇圓角矩形工具，我將創建一個白色圖形!
8、為此白色圖形添加如下圖層樣式
混合選項
內發光
描邊
9、複製三份該圖形，擺放效果如下面的截屏所示
這是實際大小的效果
10、用“圓角矩形工具”，我將創建如下白色圖形
11、選擇“鋼筆工具”的同時按住Ctrl鍵，在白色圖形邊緣連續點擊鼠標2次。
如果你正確點擊的話，你將看到這些節點。
按住Ctrl鍵並選擇如下所示的節點
當你選中此節點后按鍵盤的下箭頭，這個節點就會往下移動!
這是我的效果
11、使用“橢圓工具”創建一個小圓形
12、對小圓形進行調整，使用“矩形選擇工具”選擇圓形的部分區域
按下鍵盤的delete刪除鍵，然後按Ctrl+D取消選區，這是我的實際尺寸效果。
13、使用同樣的方法，你可以在布局的另一邊做相同的效果。這就是最終的效果，你可能注意到了，另外的一個圖形在右邊。創建它，這個地方主要是放置留言的數目。這主要考慮你用此psd文件創建wordpress主題的情況.
14、在界面的頂部我用“圓角矩形工具”創建4個圖形。
15、對所有的圖形，我都將應用如下相同的圖層樣式設置
內發光
漸變疊加
描邊
這是最後的效果
16、在每個圖形下面我添加了線，你知道如何創建這些線的,前面已經介紹過了!
17、在這條線下面，我創建了另外一條深色的線
18、用“矩形工具”在界面的頂部新建一個圖形，並設置背景顏色為#8ba0b5
19、選擇“橢圓工具”在其下面創建一個深顏色的圖形
20、下一步給改圖形應用“高斯模糊”，選擇“濾鏡” >> “模糊” >>“高斯模糊”，並設置半徑像素為7或8
你也可以根據你的需要來降低透明的值，這是我目前的效果
21、現在我將添加文字logo和教程裡面已經多次介紹的線
22、我將添加一些圖片和文字
23、我將使用“橢圓工具”創建另外一個圖形
24、我將添加同樣的高斯模糊的效果，這是我的效果
25、我將用“矩形選擇工具”在該圖形的上面創建選區
26、下一步就是按delete鍵刪除選區內的內容，然後按Ctrl+D取消選區
27、創建2條線(白色線、深色線)
28、在界面的另一邊創建導航欄。用“圓角矩形工具”在界面的右邊創建一個簡單的圖形
29、刪除圖形的底部，然後按前面介紹的步驟添加縮進的效果，我就不在詳細介紹如何實現它了
這是我的最終效果，希望你喜歡
–本文轉載自 http://www.missyuan.net 教學網 —
文章永久連結為: Photoshop設計Wordpress主題網站界面教程
熱門推薦
留言回覆
