Photoshop制作簡潔干凈的網(wǎng)頁效果圖(3)
創(chuàng)建一個(gè)新群組,命名為”left arrow”。用橢圓工具l (U),創(chuàng)建一個(gè)圓形,填充顏色#406f94。雙擊圖層打開圖層樣式面板,按照上圖設(shè)置。
Step 32: 在藍(lán)色圓圈中創(chuàng)建一個(gè)箭頭
新建圖層,用用戶自定義圖形,創(chuàng)建白色箭頭。雙擊打開圖層樣式面板,按照上圖進(jìn)行設(shè)置。設(shè)置圖層透明度為50%。
Step 33: 在右邊創(chuàng)建另一個(gè)箭頭。
重復(fù)以上步驟,在矩形的右邊創(chuàng)建對稱的圓圈和箭頭。
Step 34: 創(chuàng)建特色圖片
新建群組。命名為 “image” 。在這個(gè)群組中放置一個(gè)小的圖片,命名這個(gè)圖層為”image” 。雙擊打開圖層樣式面板。按照上圖設(shè)置。
Step 35: 給你的圖片添加陰影
點(diǎn)開圖層>圖層樣式>新建圖層,在原始圖層上面新建了一個(gè)圖層。打開圖層>圖層夢般>顯示全部,設(shè)置漸變,畫一個(gè)黑色到透明的漸變,從小圖片的底部到中間的位置。給這個(gè)圖層命名為 “shadow”。
Step 36: 添加文字
新建群組。用文字工具添加一些文字,命名這個(gè)群組為 “text”。
Step 37: 創(chuàng)建白色矩形
新建群組,命名為 “content”,在其中再新建一個(gè)群組,命名為 “shadows” 。用矩形工具,新建一個(gè)矩形,填充白色,向上圖一樣。命名這個(gè)圖層為”white shape” ,設(shè)置圖層透明度為90%。
Step 38: 添加頂部陰影
按住Ctrl單擊圖層面板上圖層”white shape”的小縮略圖,創(chuàng)建選取。創(chuàng)建一個(gè)新圖層,用漸變工具,畫一個(gè)從 #8f8f8f 到透明的漸變,參照上圖。設(shè)置該圖層透明度為 50% ,命名這個(gè)圖層為”top shadow” 。然后用移動(dòng)工具,向下移動(dòng)2個(gè)像素。
Step 39:創(chuàng)建橫向的陰影
新建圖層,,用矩形工具,創(chuàng)建一個(gè)選區(qū),如上圖。用漸變工具畫一個(gè)從 #8f8f8f 到透明的漸變。給這個(gè)圖層創(chuàng)建蒙版,用一個(gè)直徑較大的軟筆刷,創(chuàng)建陰影。設(shè)置該圖層透明度為 30% ,命名該圖層為 “vertical shadow 1″ 。復(fù)制這個(gè)圖層 (Ctrl+J),命名這個(gè)新圖層為 “vertical shadow 2″ ,并且把它移動(dòng)到右邊。
Step 40: 創(chuàng)建橫向線條
用直線工具 (U)創(chuàng)建一個(gè)橫向線條,如上圖,高為1px,顏色#aebcc7。命名為 “line”。
Step 41: 添加文字
選擇文字工具,添加一些文字。你也可以添加一些圖片。
Step 42: 給底部創(chuàng)建漸變
新建群組,命名為 “footer”。在里面新建一個(gè)圖層,用選區(qū)工具(M) 創(chuàng)建一個(gè)選區(qū),如上圖。設(shè)置前景色為#555555,用一個(gè)直徑比較大的軟筆刷,在選取頂部的位置涂抹。設(shè)置該圖層透明度為 50% ,命名該圖層為”gradient”。
Step 43: 在底部,添加一個(gè)1個(gè)像素高的線條
新建圖層。按照以前的做法,創(chuàng)建一個(gè)1px高的線條,填充顏色黑色,設(shè)置圖層透明度為15% ,命名該圖層為 “line”。
Step 44: 給底部區(qū)域添加文字
在底部添加一些文字
Final Result
學(xué)習(xí) · 提示
相關(guān)教程
- 網(wǎng)頁模版,個(gè)人網(wǎng)站建設(shè)入門知識(shí)
- 網(wǎng)頁模板,設(shè)計(jì)酒吧主題網(wǎng)頁模板實(shí)例
- ps設(shè)計(jì)藍(lán)色主題風(fēng)格的網(wǎng)站首頁模板教程
- 從零手把手教你設(shè)計(jì)網(wǎng)頁
- 網(wǎng)頁設(shè)計(jì)基礎(chǔ)技巧
- 網(wǎng)頁設(shè)計(jì)的分割布局秘密
- ps cs6設(shè)計(jì)個(gè)人作品網(wǎng)頁模板教程
- ps網(wǎng)頁布局設(shè)計(jì)實(shí)例教程
- ps黑色風(fēng)格網(wǎng)頁模板
- ps一個(gè)木紋風(fēng)格網(wǎng)頁模板
推薦教程
- photoshop網(wǎng)頁應(yīng)用實(shí)例:制作蘋果導(dǎo)航欄
- Photoshop CS5制作放射狀光線網(wǎng)頁廣告板
- PhotoShop設(shè)計(jì)制作懷舊風(fēng)格網(wǎng)頁的詳細(xì)教程
- ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁特效
- PS教程:制作非常不錯(cuò)的wordpress博客網(wǎng)站模板
- PS教程:繪制清新的色彩生動(dòng)的網(wǎng)頁布局
- Photoshop繪制好看的老式wordpress主題
- Photoshop制作禮品店網(wǎng)站模板
- Photoshop網(wǎng)頁設(shè)計(jì):雜志風(fēng)格網(wǎng)站界面
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁模板