Zi 字媒體

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主題網站界面教程