photoshop網(wǎng)頁應(yīng)用實例:制作蘋果導航欄
來源:未知
作者:空來風
學習:599人次
作者ps真功夫 翻譯 出處:ps真功夫
效果如下:
第1步、新建一個500px * 50px 的photoshop文件
第2步、使用矩形選框工具將樣式設(shè)置為固定長寬比,寬度設(shè)為480px高度設(shè)為35px,在當前畫布內(nèi)繪制選區(qū)
第3步、轉(zhuǎn)到選擇 修改 平滑命令,將取樣半徑設(shè)置為3,再新建一個圖層將圖層填充為任何你想要的顏色都可以
第4步應(yīng)用圖層樣式
設(shè)置如下:漸變疊加顏色: #949494 到 #d2d2d2
投影:#b1b1b1
,第5步添加一些文字,顏色#383838 字體為Myriad Pro 點擊下載photoshop字體 大小為 14pt
第6步應(yīng)用投影效果,設(shè)置如下圖所示:(注這里的混合模式改為了正常)
第7步你的導航條現(xiàn)在應(yīng)該看起來像這個樣子
第8步接下來就來給每個鏈接添加邊框
第9步新建一個圖層選擇鉛筆工具,從導航條的頂部到底部繪制兩條線間隔1px的線條,如下圖所示使用白色。
第10步把這個圖層的混合模式改為柔光和不透明度降到20%。
,第11步創(chuàng)建一個新層繪制另一條1px線條顏色#808080擺放在兩條白線之間
第12步保持這個圖層的混合模式為正常把它的不透明度降到35%
第13步復(fù)制這兩個圖層,把他們(線條)擺放在每個鏈接之間如下圖
第14步現(xiàn)在讓我們制作翻轉(zhuǎn)效果,在兩個線條邊框之間做選區(qū)如圖所示
第15步新建圖層,把選區(qū)填充為任何想要的顏色。然后轉(zhuǎn)到圖層樣式應(yīng)用漸變:顏色#666666到#a1a1a1
,第16步把按鈕上字體的顏色改為白色應(yīng)用投影效果顏色為 #454545
第17步這樣子你的蘋果導航欄就完成了,完成后應(yīng)該像這個樣子。
就這樣photoshop教程完成了,大家有看到好的photoshop國外教程可以推薦我們翻譯哦,這個教程的話只是教大家做一個蘋果風格的效果,要想在網(wǎng)頁上實現(xiàn)這種效果還需要設(shè)置css樣式,附蘋果官網(wǎng)的導航條圖,有興趣的朋友可以研究下。
學習 · 提示
相關(guān)教程
- PS設(shè)計iPhone蘋果應(yīng)用電子網(wǎng)站
- 如何設(shè)計與PSD模板標題導航菜單教程
- PS設(shè)計一個干凈的蘋果iPad產(chǎn)品網(wǎng)站網(wǎng)
- ps設(shè)計企業(yè)網(wǎng)站教程
- Photoshop設(shè)計蘋果系統(tǒng)風格的網(wǎng)頁模板
- Photoshop教程:制作金屬質(zhì)感網(wǎng)站導航欄
- Photoshop教程:設(shè)計制作橙色網(wǎng)頁導航條
- Photoshop設(shè)計視頻網(wǎng)站導航模板
- Photoshop制作網(wǎng)站首頁(4):制作導航菜單
- PS網(wǎng)頁設(shè)計實例:多彩導航條制作
推薦教程
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁模板
- PS教程:制作非常不錯的wordpress博客網(wǎng)站模板
- photoshop網(wǎng)頁應(yīng)用實例:制作蘋果導航欄
- Photoshop繪制好看的老式wordpress主題
- Photoshop網(wǎng)頁設(shè)計:雜志風格網(wǎng)站界面
- PS教程:繪制清新的色彩生動的網(wǎng)頁布局
- Photoshop CS5制作放射狀光線網(wǎng)頁廣告板
- ps設(shè)計制作居家風格美食Blog網(wǎng)頁特效
- Photoshop制作禮品店網(wǎng)站模板
- PhotoShop設(shè)計制作懷舊風格網(wǎng)頁的詳細教程
關(guān)注大神微博加入>>
網(wǎng)友求助,請回答!