下載吧 - 綠色安全的游戲和軟件下載中心

          軟件下載吧

          當(dāng)前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > Photoshop制作網(wǎng)站導(dǎo)航圖

          Photoshop制作網(wǎng)站導(dǎo)航圖

          時(shí)間:2024-02-03 15:00作者:下載吧人氣:44

          最終效果如下:

          Photoshop制作網(wǎng)站導(dǎo)航圖

          首先我們?cè)赑S里新建一文件,大小為 500x500px,白色背景

          Photoshop制作網(wǎng)站導(dǎo)航圖

          使用圓角矩形(半徑為10px),繪制我們的質(zhì)感圖標(biāo)的輪廓

          Photoshop制作網(wǎng)站導(dǎo)航圖

          隨后我們使用鋼筆工具為每條邊的中點(diǎn)增加一個(gè)矢量點(diǎn),隨后用直接選擇工具將四條邊的中點(diǎn)向外拖動(dòng)一點(diǎn)距離,目的是讓圖形輪廓感覺更圓潤(rùn)

          Photoshop制作網(wǎng)站導(dǎo)航圖




          為輪廓使用圖層樣式

          Photoshop制作網(wǎng)站導(dǎo)航圖

          Photoshop制作網(wǎng)站導(dǎo)航圖

          Photoshop制作網(wǎng)站導(dǎo)航圖

          完成后的輪廓效果如圖

          Photoshop制作網(wǎng)站導(dǎo)航圖




          按ctrl+j復(fù)制圖層,將復(fù)制出的圖層上的圖層樣式全部去掉,然后按ctrl+t將復(fù)制出的圖層縮小到原來的94%左右

          Photoshop制作網(wǎng)站導(dǎo)航圖

          隨后為復(fù)制出的圖層添加如下新樣式:

          Photoshop制作網(wǎng)站導(dǎo)航圖

          Photoshop制作網(wǎng)站導(dǎo)航圖

          Photoshop制作網(wǎng)站導(dǎo)航圖




          再次按ctrl+j復(fù)制圖層,去掉其上的圖層樣式,隨后按ctrl+t縮小到原來的93%大小,之后用直接選擇工具拖動(dòng)上面的矢量路徑節(jié)點(diǎn),使其變成如下形狀

          Photoshop制作網(wǎng)站導(dǎo)航圖

          隨后柵格化圖層(在圖形上按鼠標(biāo)右鍵選柵格化圖層),并將其填充為白色

          Photoshop制作網(wǎng)站導(dǎo)航圖

          從右向左制作漸變效果,并設(shè)置不透明度,使其能出現(xiàn)如下效果

          Photoshop制作網(wǎng)站導(dǎo)航圖

          使用自定義形狀工具,選中一個(gè)形狀

          Photoshop制作網(wǎng)站導(dǎo)航圖

          為之前的質(zhì)感輪廓添加一個(gè)圖形,顏色為白色

          Photoshop制作網(wǎng)站導(dǎo)航圖




          現(xiàn)在完成了圖形的制作,我們將來制作右邊的文字按鈕,先用圓角工具,顏色為黑色,半徑為7px,制作如下區(qū)域,只需要保證區(qū)域不要超過我們的圖形輪廓高度。

          Photoshop制作網(wǎng)站導(dǎo)航圖

          為其增加圖層樣式

          Photoshop制作網(wǎng)站導(dǎo)航圖

          Photoshop制作網(wǎng)站導(dǎo)航圖

          Photoshop制作網(wǎng)站導(dǎo)航圖

          Photoshop制作網(wǎng)站導(dǎo)航圖

          Photoshop制作網(wǎng)站導(dǎo)航圖




          添加文字

          Photoshop制作網(wǎng)站導(dǎo)航圖

          為文字增加圖層樣式,使文字效果與左邊的圖標(biāo)效果相似。

          Photoshop制作網(wǎng)站導(dǎo)航圖

          Photoshop制作網(wǎng)站導(dǎo)航圖

          Photoshop制作網(wǎng)站導(dǎo)航圖

          Photoshop制作網(wǎng)站導(dǎo)航圖




          在大標(biāo)題下增加小文字,顏色為#1d70e1。

          Photoshop制作網(wǎng)站導(dǎo)航圖

          為小文字添加陰影樣式:

          Photoshop制作網(wǎng)站導(dǎo)航圖

          Photoshop制作網(wǎng)站導(dǎo)航圖

          我們上面只是介紹了導(dǎo)航中的 一個(gè)按鈕的做法,下圖為完整版的導(dǎo)航按鈕,這里使用的不同顏色相同色調(diào),看上去依然十分的協(xié)調(diào)!

          Photoshop制作網(wǎng)站導(dǎo)航圖

          標(biāo)簽Photoshop制作,ps網(wǎng)站,ps導(dǎo)航圖

          相關(guān)下載

          查看所有評(píng)論+

          網(wǎng)友評(píng)論

          網(wǎng)友
          您的評(píng)論需要經(jīng)過審核才能顯示

          熱門閱覽

          最新排行

          公眾號(hào)

          主站蜘蛛池模板: 欧洲精品码一区二区三区免费看 | 亚洲中文字幕无码一区| 国产精品无码AV一区二区三区| 日本免费一区尤物| 91在线一区二区| 国产一区二区三区无码免费| 波多野结衣一区二区三区高清在线| 国产在线一区二区三区av| 国产成人无码精品一区在线观看| 制服中文字幕一区二区| 国产成人亚洲综合一区| 日韩精品一区二区三区不卡| 亚洲av无码一区二区三区不卡| 国产91大片精品一区在线观看 | 精品久久久久久中文字幕一区| 精品一区二区三区在线观看l | 国产AV午夜精品一区二区三| 色窝窝无码一区二区三区| 国产精品亚洲一区二区无码| 成人日韩熟女高清视频一区| 国产免费av一区二区三区| 少妇激情一区二区三区视频| 四虎精品亚洲一区二区三区| 成人精品一区二区三区电影| 人妻体内射精一区二区三区| 中文字幕在线观看一区二区| 国产成人综合亚洲一区| 国产日韩一区二区三区在线播放 | 国产激情з∠视频一区二区| 国产AV天堂无码一区二区三区| 久久精品免费一区二区| 日韩精品一区二区三区大桥未久 | 国产精品无码亚洲一区二区三区| 自慰无码一区二区三区| 国产精品视频一区二区三区四 | 精品无码人妻一区二区免费蜜桃| 狠狠色婷婷久久一区二区三区 | 麻豆一区二区三区精品视频| 亚洲伦理一区二区| 亚洲午夜在线一区| 在线免费视频一区|