PS教程:制作非常不錯(cuò)的wordpress博客網(wǎng)站模板
從這篇wordpress博客模板網(wǎng)站的設(shè)計(jì)中,我們可以看到對(duì)于網(wǎng)站的細(xì)節(jié)設(shè)計(jì)十分出色,加上精美的圖片處理,并將紙張效果應(yīng)用到網(wǎng)站的頭部設(shè)計(jì)中,也是亮點(diǎn)之一。
大家好,我叫Alvaro Guzman,第一部分由我給大家介紹如何用photoshop創(chuàng)建一個(gè)網(wǎng)頁(yè)模板,和帶有波動(dòng)的圖片.首先我給大家看下效果圖.
1.新建一個(gè)大小1260*1000的空白文件.按crtl+R顯示標(biāo)尺,并給添加輔助線如圖.
2.打開(kāi)圖片,并調(diào)整它的位置和大小.新建一個(gè)圖層,點(diǎn)取調(diào)色板分別設(shè)置前景色為紫色,背景色為藍(lán)色.然后選擇"濾鏡>渲染>云彩".并命名為cloud.把它拖到city圖層下面.并給city圖層添加蒙版.再給cloud也添加蒙版.如下圖:
3.新建一個(gè)圖層,在其上畫一個(gè)圓角矩形,并給這個(gè)圓角矩形添加一個(gè)漸變的樣式.如圖:
4.導(dǎo)入準(zhǔn)備好的圖片,并給個(gè)這圖層更改圖層模式--柔光,并把不透明度改為50% .按住crtl然后點(diǎn)擊矩形那個(gè)圖層 ,把矩形變?yōu)檫x區(qū).返回到圖片層上,選區(qū)---反選,按鍵盤上的delete冊(cè)掉多余的部分.最近你可以給圖片加點(diǎn)外發(fā)光,或內(nèi)發(fā)光,看你的需要而設(shè):
5.接下來(lái),來(lái)做個(gè)logo.用文字工具上"Generation"(Rockwell 字體)最后給其添加圖層樣式,效果如圖:
6.新建一個(gè)層圖并命名:right,再畫一個(gè)圓角矩形,并為其添加一個(gè)線性漸變,最后為其加個(gè)描邊.
7.重復(fù)上面的步驟,并命名content,這樣我們就差不多布好局了.
8.現(xiàn)在我們來(lái)給網(wǎng)頁(yè)添加些圖像.打磁帶文件,放在所有的圖層上面,然后添加一些文字.用鋼筆工具把磁帶中的透明部分摳出來(lái),剪切并粘貼,利用變形工具對(duì)它進(jìn)行變形,最后調(diào)節(jié)其的不透明度50%,60%,接差合并圖層,把磁帶圖層放在網(wǎng)頁(yè)的右側(cè)邊上.如圖:
9.接下來(lái)對(duì)磁帶做陰影.這是一個(gè)做陰影的快速方法:按crtl+J復(fù)制對(duì)象,按crtl+U調(diào)出色相,設(shè)置亮度為-100,接著,濾鏡--模糊--高斯模糊,最后把圖層放在原對(duì)像后.如圖:
10.打開(kāi)一張紙質(zhì)的圖片,把圖片拖到頭部圖層的下面.然后用自由變形來(lái)調(diào)節(jié)它的大小,來(lái)做網(wǎng)頁(yè)的導(dǎo)航.如圖:
11.在紙質(zhì)的圖層上新建一個(gè)圖層,利用橢圓選區(qū)畫個(gè)橢圓出來(lái),然后填充黑色,取消選區(qū),選擇高斯模糊,最后給它個(gè)不透明度75%.
12.復(fù)制紙質(zhì)圖層,然后crtl+T把居下的一個(gè)圖層變小,對(duì)居上的圖層進(jìn)行陰影,最后添加文字,你可以用手寫的字體,效果如下圖:
13.我們來(lái)給網(wǎng)頁(yè)添加個(gè)RSS的圖標(biāo),在右邊加一些文字,可以用"Rockwell condensed"字體.
14.接下來(lái)繼續(xù)添加內(nèi)容,在這里標(biāo)題,用字體"Rockwell",鏈接用字體"Georgia"
15.繼續(xù)添加,標(biāo)題用字本"Georgia",內(nèi)容用字體"Arial",在旁邊添加一個(gè)圖標(biāo)來(lái)表示評(píng)論的數(shù)量.而給圖片增加2PX的白色邊框.最后添加一個(gè)版權(quán)信息.
16.復(fù)制頭部的紙質(zhì)那個(gè)圖層來(lái)做頁(yè)腳.
17.添加頁(yè)腳的信息,在這里我做了一個(gè)最新更新,另一個(gè)做"導(dǎo)航".
18.如果有需要的話,可以再增加別的信息在頁(yè)腳上,比如:在這里我加了一個(gè)小標(biāo)題.
19.這里一個(gè)簡(jiǎn)單而又有漂亮的wordpress模版就做完了.你可以試試.
學(xué)習(xí) · 提示
相關(guān)教程
- 網(wǎng)頁(yè)模版,個(gè)人網(wǎng)站建設(shè)入門知識(shí)
- 網(wǎng)頁(yè)模板,設(shè)計(jì)酒吧主題網(wǎng)頁(yè)模板實(shí)例
- ps設(shè)計(jì)藍(lán)色主題風(fēng)格的網(wǎng)站首頁(yè)模板教程
- 網(wǎng)頁(yè)設(shè)計(jì)的分割布局秘密
- ps設(shè)計(jì)電影網(wǎng)站實(shí)例
- ps黑色風(fēng)格網(wǎng)頁(yè)模板
- ps一個(gè)木紋風(fēng)格網(wǎng)頁(yè)模板
- PS設(shè)計(jì)一個(gè)葡萄酒博客網(wǎng)頁(yè)模板
- PS創(chuàng)建一款簡(jiǎn)潔大方的歐美商務(wù)網(wǎng)站首頁(yè)
- PS設(shè)計(jì)iPhone蘋果應(yīng)用電子網(wǎng)站
推薦教程
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁(yè)模板
- Photoshop網(wǎng)頁(yè)設(shè)計(jì):雜志風(fēng)格網(wǎng)站界面
- Photoshop繪制好看的老式wordpress主題
- photoshop網(wǎng)頁(yè)應(yīng)用實(shí)例:制作蘋果導(dǎo)航欄
- ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁(yè)特效
- Photoshop制作禮品店網(wǎng)站模板
- PS教程:制作非常不錯(cuò)的wordpress博客網(wǎng)站模板
- Photoshop CS5制作放射狀光線網(wǎng)頁(yè)廣告板
- PhotoShop設(shè)計(jì)制作懷舊風(fēng)格網(wǎng)頁(yè)的詳細(xì)教程
- PS教程:繪制清新的色彩生動(dòng)的網(wǎng)頁(yè)布局