Photoshop制作簡(jiǎn)潔干凈的網(wǎng)頁(yè)效果圖
在這篇教程中,我將教給你如何在photoshop中制作一個(gè)簡(jiǎn)潔干凈的網(wǎng)頁(yè)效果圖。原始效果是由 ThemeForest的kuntiz 設(shè)計(jì)的。我很感謝他允許我發(fā)布這篇教程。這是這篇教程的第一部分。
一些需要的素材:
- 葉子素材
- 像素化藍(lán)色矩形
Step 1: 新建文檔
在photoshop中,按住(Ctrl+N)新建一個(gè)文檔。設(shè)置大小為1200px *750px。然后用漸變工具從上到下拉出一個(gè)漸變,顏色從 #792700 到 #000000。
Step 2: 在背景中添加一些顏色
新建一個(gè)圖層,命名為”color.”,用筆刷工具,選擇一個(gè)比較軟的筆刷,大概直徑為300px,我的顏色選擇的是紅色,藍(lán)色和橙色,在這個(gè)圖層中添隨便畫(huà)幾筆。
Step 3:給背景添加一些紋理
現(xiàn)在我們要給背景增加一些紋理效果。打開(kāi)我們剛剛下載的葉子的素材圖片,用移動(dòng)工具把這個(gè)圖片移動(dòng)到我們的文檔中。 右鍵單擊該圖層的縮略圖(在圖層面板中),選擇“編組到新建智能對(duì)象土層中”。然后選擇 濾鏡>藝術(shù)化>膠片顆粒,按照上面的設(shè)置進(jìn)行操作。然后選擇 濾鏡>像素化>馬賽克,同樣按照?qǐng)D中的設(shè)置進(jìn)行操作。設(shè)置該圖層的渲染模式為 “差值”(Difference),透明度設(shè)為30%,該土層命名為“texture”。
Step 4:創(chuàng)建黑色背景的內(nèi)容區(qū)域
新建一個(gè)圖層,選擇圓角矩形工具,設(shè)置圓角度為3個(gè)像素,創(chuàng)建一個(gè)黑色的圓角矩形。然后在圖層面板中雙擊該圖層,彈出圖層樣式面板,按照?qǐng)D中的設(shè)置給該圖層設(shè)置陰影。設(shè)置該圖層透明度為70%,然后命名這個(gè)圖層為 “black shape”。
Step 5: 用群組(文件夾)來(lái)組織你的圖層
按住ctrl鍵,選擇你剛剛創(chuàng)建的所有的圖層,然后點(diǎn)擊Ctrl+G群組他們。給這個(gè)新的群組(文件夾)命名為”background”。
Step 6: 創(chuàng)建更多的群組(文件夾)
創(chuàng)建新群組 ,圖層>新建>群組,然后命名為 “home” 。然后在這個(gè)群組下創(chuàng)建另一個(gè)群組,命名為 “logo”。
Step 7:創(chuàng)建logo和口號(hào)
在logo群組中,新建一個(gè)圖層。用文字工具,輸入網(wǎng)站的logo文字,應(yīng)用顏色是 #f4f4f4。雙擊該圖層打開(kāi)圖層屬性面板。按照上面的設(shè)置進(jìn)行操作。然后新建另一個(gè)圖層輸入口號(hào),應(yīng)用顏色是#eeeeee。
Step 8: “Sign up” 和 “login” 按鈕
好了,我們現(xiàn)在要在布局的右上角做兩個(gè)按鈕。新建一個(gè)群組,命名為 “Sign up | Login” 。然后選擇圓角矩形,創(chuàng)建一個(gè)小的矩形,就像我做的一樣。雙擊圖層打開(kāi)圖層樣式面板,按照上圖的設(shè)置進(jìn)行操作。設(shè)置前景色為白色,用文字工具在你的按鈕上 寫(xiě)下 “Sign up | Login” 。設(shè)置文字這個(gè)圖層的透明度為75% 。
Step 9: 創(chuàng)建1個(gè)像素高的藍(lán)色線條
新建一個(gè)群組,命名為 “Navigation”(導(dǎo)航)。新建一個(gè)圖層,命名為”Line”。選擇“單行選框工具”,在畫(huà)布中單擊創(chuàng)建一個(gè)像素高的選取。填充顏色#406f94 ,然后刪除內(nèi)容區(qū)域以外的部分。設(shè)置該圖層透明度為 40% 。
Step 10: 在導(dǎo)航條中添加一個(gè)漸變效果
創(chuàng)建新圖層。用矩形選區(qū)工具,創(chuàng)建一個(gè)選區(qū),就像我做的一樣。(注意:你可以利用標(biāo)尺來(lái)幫助一創(chuàng)建這個(gè)選區(qū))。然后用漸變工具,設(shè)置漸變?yōu)? #35423e 到透明。從底部向上填充漸變。按下 Ctrl+D 清除選區(qū)。 然后,濾鏡>雜色>添加雜色。按照上圖的設(shè)置進(jìn)行操作。命名這個(gè)圖層為 “gradient” 。在線條和漸變之間記得留下1個(gè)像素的高。
Step 11: 寫(xiě)導(dǎo)航的字
選擇文字工具,寫(xiě)下你的導(dǎo)航的文字。然后雙擊打開(kāi)圖層樣式面板。按照上圖設(shè)置。我給文字添加了一個(gè)基本的漸變/陰影效果。
Step 12:創(chuàng)建導(dǎo)航文字之間的裝飾分割
現(xiàn)在我們要?jiǎng)?chuàng)建一些分割線。新建一個(gè)圖層,選擇單列選框工具,創(chuàng)建一個(gè)1個(gè)像素寬的選區(qū)。然后用矩形選區(qū)工具,單擊”與選區(qū)交叉”按鈕(在狀態(tài)欄的上面有個(gè)按鈕),按照上圖的操作化一個(gè)選取。用白色填充選取。然后ctrl+D刪除選取。
Step 13
雙擊該圖層打開(kāi)圖層樣式面板,創(chuàng)建漸變疊加。該圖層命名 “line 1″。
Step 14:
Ctrl+J復(fù)制圖層 “line 1″ ,然后命名這個(gè)新圖層為”line 2″。用移動(dòng)工具,向右挪動(dòng)這個(gè)圖層 。然后雙擊圖層打開(kāi)圖層樣式面板,按照上面的設(shè)置進(jìn)行操作。
Step 15:把圖層”line 1″ 和 “line 2″轉(zhuǎn)換成智能圖層
學(xué)習(xí) · 提示
相關(guān)教程
- 網(wǎng)頁(yè)模版,個(gè)人網(wǎng)站建設(shè)入門(mén)知識(shí)
- 網(wǎng)頁(yè)模板,設(shè)計(jì)酒吧主題網(wǎng)頁(yè)模板實(shí)例
- ps設(shè)計(jì)藍(lán)色主題風(fēng)格的網(wǎng)站首頁(yè)模板教程
- 從零手把手教你設(shè)計(jì)網(wǎng)頁(yè)
- 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)技巧
- 網(wǎng)頁(yè)設(shè)計(jì)的分割布局秘密
- ps cs6設(shè)計(jì)個(gè)人作品網(wǎng)頁(yè)模板教程
- ps網(wǎng)頁(yè)布局設(shè)計(jì)實(shí)例教程
- ps黑色風(fēng)格網(wǎng)頁(yè)模板
- ps一個(gè)木紋風(fēng)格網(wǎng)頁(yè)模板
推薦教程
- photoshop網(wǎng)頁(yè)應(yīng)用實(shí)例:制作蘋(píng)果導(dǎo)航欄
- Photoshop CS5制作放射狀光線網(wǎng)頁(yè)廣告板
- PhotoShop設(shè)計(jì)制作懷舊風(fēng)格網(wǎng)頁(yè)的詳細(xì)教程
- ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁(yè)特效
- PS教程:制作非常不錯(cuò)的wordpress博客網(wǎng)站模板
- PS教程:繪制清新的色彩生動(dòng)的網(wǎng)頁(yè)布局
- Photoshop繪制好看的老式wordpress主題
- Photoshop制作禮品店網(wǎng)站模板
- Photoshop網(wǎng)頁(yè)設(shè)計(jì):雜志風(fēng)格網(wǎng)站界面
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁(yè)模板