ps制作一個簡單又時尚的UI按扭(5)
在這個教程里,將和童學(xué)們分享如何使用Photoshop制作一個簡單又時尚的UI按扭,這個按扭可以用在電子商務(wù)網(wǎng)站,或者是網(wǎng)店上
來看下效果。
1.新建一個文檔(ctrl+N)大小為:600*600(雖然我們按扭的大。170*50,但是尺寸大方便我們的修改)
2.選擇“圓角矩形工具”并設(shè)圓角“5px”繪制一個大小為:170*50 的圓角矩形。(可以使用標(biāo)尺定位)
3.新建一個圖層,按組合鍵“ctrl+enter”把路徑轉(zhuǎn)化為選區(qū),并填充黑色。
雙擊這個圖層給圖層添加“漸變疊加”和“描邊”樣式。
漸變疊加樣式
描邊樣式(描邊顏色:#2877ac)
4.接下來要給按扭添加一個“斜線效果”
新建文檔(ctrl+N)大小為:4*4。
按ctrl+空格鍵,放大文檔到1600%。新建一個圖層并刪掉背景圖層。
在工具箱選擇“鉛筆工具”并設(shè)置筆尖大小為1px;前景色為白色。畫出如下圖效果:
在菜單欄找到,編緝>定義圖案;并給圖案命個名字:diagonal line pattern.
返回主文檔,按“ctrl”鍵不放;并單擊按扭圖層,使按扭圖案變成選區(qū)。
在按扭圖層上新建一個圖層,然后在菜單欄找到:編輯>填充,在彈出的對話框中,在下拉菜單中選擇“圖案”,在下面的自定義圖案選擇我們剛才自定義圖案“diagonal line pattern”。
在菜單欄找到:選擇>修改>收縮,把選區(qū)收縮2px,接下來把選區(qū)反選(ctrl+shift+I);按delete鍵刪除邊緣部分,這樣就可以把描邊顯示出來。
更改“混合模式”“柔光”并調(diào)不透明度:20%
5.選擇“文字工具”并找一個你自己喜歡的字體,字體大。24pt,顏色:#ffffff.輸入文字“Buy Now”。
雙擊文字圖層,添加一個“投影”樣式(投影顏色:#2877ac)。
6.在工具箱選擇“自定形狀工具”,并在選項欄找到如下的圖形。
繪制出大小:13*13;并填充白色,添加一個和文字一樣的樣式。
7。創(chuàng)建hover狀態(tài)
在圖層面板上新建一個組:Normal,把除背景外圖層全部拉到這個組里面。
使用“移動工具”把組“Normal”拖到“新建圖層按扭”上,復(fù)制出一個組并命名:Hover
雙擊組“Hover”中的“黑色圖形”圖層,更改其"漸變疊加"樣式:
接下來,我們開始切片。
使用“切片工具”把按扭的范圍選中。在菜單欄找到:文件>另存為Web所用格式,另存為gif格式。
學(xué)習(xí) · 提示
相關(guān)教程
- 插畫制作,用PS設(shè)計具有漸變風(fēng)格的插畫圖標(biāo)
- 圖標(biāo)制作,用圖層樣式制作旋轉(zhuǎn)按鈕
- 開關(guān)按鈕,用PS制作漸變風(fēng)格的音樂播放圖標(biāo)
- 相機圖標(biāo),設(shè)計逼真的相機應(yīng)用圖標(biāo)
- 圖標(biāo)設(shè)計,用Photoshop制作一個麥克風(fēng)圖標(biāo)
- 播放按鈕,設(shè)計視頻音樂播放按鈕教程
- 按鈕教程,設(shè)計一個圓形的點擊按鈕
- 圖標(biāo)設(shè)計,AI+C4D+PS設(shè)計綠色品牌時尚圖標(biāo)教程
- 圖標(biāo)教程,設(shè)計一粒晶石圖標(biāo)
- ps cc設(shè)計齒輪設(shè)置圖片