Photoshop設(shè)計(jì)Wordpress主題網(wǎng)站界面教程(3)
歡迎來(lái)到Grafpedia網(wǎng)站的另一個(gè)教程,通過(guò)這個(gè)教程,你將學(xué)到如何設(shè)計(jì)一個(gè)獨(dú)特的wordpress主題界面來(lái)展示你的內(nèi)容。此界面布局完全適用于商業(yè)網(wǎng)站。如果你想將這個(gè)psd文件轉(zhuǎn)化為wordpress主題的話,要求你對(duì)css、php有深入的了解。
瀏覽實(shí)際大小的界面效果
1、創(chuàng)建新文檔,用“油漆桶工具”給背景圖層填充顏色為#a4b9cc的背景色。
2、使用“矩形工具”(快捷鍵為U)創(chuàng)建一個(gè)簡(jiǎn)單的白色區(qū)域。
3、給此圖形添加如下樣式
(常規(guī)混合里面的“不透明度”是控制整個(gè)圖層的透明,包括給圖層應(yīng)用的樣式效果。而高級(jí)混合里面的“填充不透明度”僅控制圖層的填充透明!——譯者注)
混合選項(xiàng)
描邊
4、復(fù)制此圖層(你需要先選中此圖層,然后按Ctrl+j快捷鍵進(jìn)行復(fù)制),在圖層面板里面將這兩個(gè)圖層鏈接選中后,按Ctrl+E將這兩個(gè)圖層合并為一個(gè)圖層。主要因?yàn)樵趹?yīng)用“橡皮”工具的時(shí)候,你的圖層不會(huì)丟失設(shè)置的效果樣式。(你可以試一下,在不進(jìn)行圖層合并,用“橡皮筆刷工具”刪除圖形底部的時(shí)候會(huì)是什么效果)
5、選擇“橡皮工具”,并確定你選擇了平滑的筆刷,然后刪除此圖形區(qū)域的底部。如下圖所示:
6、在左邊創(chuàng)建一條垂直白線(你可以用“單列選擇工具”創(chuàng)建這條線)。用以上相同的方法,你可以用“橡皮工具”刪除線的頂部與底部。下面就是此效果。你能注意到這條線放在了哪,將這條垂直白線放在離邊框1px的位置是非常重要的。
7、選擇圓角矩形工具,我將創(chuàng)建一個(gè)白色圖形!
8、為此白色圖形添加如下圖層樣式
混合選項(xiàng)
內(nèi)發(fā)光
描邊
9、復(fù)制三份該圖形,擺放效果如下面的截屏所示
這是實(shí)際大小的效果
10、用“圓角矩形工具”,我將創(chuàng)建如下白色圖形
11、選擇“鋼筆工具”的同時(shí)按住Ctrl鍵,在白色圖形邊緣連續(xù)點(diǎn)擊鼠標(biāo)2次。
如果你正確點(diǎn)擊的話,你將看到這些節(jié)點(diǎn)。
按住Ctrl鍵并選擇如下所示的節(jié)點(diǎn)
當(dāng)你選中此節(jié)點(diǎn)后按鍵盤(pán)的下箭頭,這個(gè)節(jié)點(diǎn)就會(huì)往下移動(dòng)!
這是我的效果
11、使用“橢圓工具”創(chuàng)建一個(gè)小圓形
12、對(duì)小圓形進(jìn)行調(diào)整,使用“矩形選擇工具”選擇圓形的部分區(qū)域
按下鍵盤(pán)的delete刪除鍵,然后按Ctrl+D取消選區(qū),這是我的實(shí)際尺寸效果。
13、使用同樣的方法,你可以在布局的另一邊做相同的效果。這就是最終的效果,你可能注意到了,另外的一個(gè)圖形在右邊。創(chuàng)建它,這個(gè)地方主要是放置留言的數(shù)目。這主要考慮你用此psd文件創(chuàng)建wordpress主題的情況.
14、在界面的頂部我用“圓角矩形工具”創(chuàng)建4個(gè)圖形。
15、對(duì)所有的圖形,我都將應(yīng)用如下相同的圖層樣式設(shè)置
內(nèi)發(fā)光
漸變疊加
描邊
這是最后的效果
16、在每個(gè)圖形下面我添加了線,你知道如何創(chuàng)建這些線的,前面已經(jīng)介紹過(guò)了!
17、在這條線下面,我創(chuàng)建了另外一條深色的線
18、用“矩形工具”在界面的頂部新建一個(gè)圖形,并設(shè)置背景顏色為#8ba0b5
19、選擇“橢圓工具”在其下面創(chuàng)建一個(gè)深顏色的圖形
20、下一步給改圖形應(yīng)用“高斯模糊”,選擇“濾鏡” >> “模糊” >>“高斯模糊”,并設(shè)置半徑像素為7或8
你也可以根據(jù)你的需要來(lái)降低透明的值,這是我目前的效果
21、現(xiàn)在我將添加文字logo和教程里面已經(jīng)多次介紹的線
22、我將添加一些圖片和文字
23、我將使用“橢圓工具”創(chuàng)建另外一個(gè)圖形
24、我將添加同樣的高斯模糊的效果,這是我的效果
25、我將用“矩形選擇工具”在該圖形的上面創(chuàng)建選區(qū)
26、下一步就是按delete鍵刪除選區(qū)內(nèi)的內(nèi)容,然后按Ctrl+D取消選區(qū)
27、創(chuàng)建2條線(白色線、深色線)
28、在界面的另一邊創(chuàng)建導(dǎo)航欄。用“圓角矩形工具”在界面的右邊創(chuàng)建一個(gè)簡(jiǎn)單的圖形
29、刪除圖形的底部,然后按前面介紹的步驟添加縮進(jìn)的效果,我就不在詳細(xì)介紹如何實(shí)現(xiàn)它了
這是我的最終效果,希望你喜歡
中文原文:用photoshop設(shè)計(jì)wordpress主題界面
英文原文:Permanent Link to Create a wordpress interface in Photoshop
轉(zhuǎn)載請(qǐng)注明以上信息,以表示對(duì)作者和譯者的尊重,多謝
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- 界面設(shè)計(jì)
學(xué)習(xí) · 提示
相關(guān)教程
- 網(wǎng)頁(yè)模版,個(gè)人網(wǎng)站建設(shè)入門(mén)知識(shí)
- 從零手把手教你設(shè)計(jì)網(wǎng)頁(yè)
- ps cs6設(shè)計(jì)時(shí)尚促銷(xiāo)專題頁(yè)教程
- 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)技巧
- ps切片工具怎么用
- 網(wǎng)頁(yè)設(shè)計(jì)的分割布局秘密
- ps cs6設(shè)計(jì)個(gè)人作品網(wǎng)頁(yè)模板教程
- ps設(shè)計(jì)電影網(wǎng)站實(shí)例
- ps設(shè)計(jì)網(wǎng)頁(yè)視頻游戲界面
- ps網(wǎng)頁(yè)布局設(shè)計(jì)實(shí)例教程
推薦教程
- photoshop網(wǎng)頁(yè)應(yīng)用實(shí)例:制作蘋(píng)果導(dǎo)航欄
- Photoshop網(wǎng)頁(yè)設(shè)計(jì):雜志風(fēng)格網(wǎng)站界面
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁(yè)模板
- ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁(yè)特效
- Photoshop制作禮品店網(wǎng)站模板
- PS教程:繪制清新的色彩生動(dòng)的網(wǎng)頁(yè)布局
- PhotoShop設(shè)計(jì)制作懷舊風(fēng)格網(wǎng)頁(yè)的詳細(xì)教程
- PS教程:制作非常不錯(cuò)的wordpress博客網(wǎng)站模板
- Photoshop繪制好看的老式wordpress主題
- Photoshop CS5制作放射狀光線網(wǎng)頁(yè)廣告板